lizable/freeboard

📍 Bulletin board using Next.js and React

Freeboard & Useditem Market Website

Next.js와 React를 사용하여 자유게시판 + 중고마켓 웹사이트를 개발하였습니다.

✏ 자유롭게 글을 쓸 수 있는 게시판 서비스
🛍️ 중고 상품을 등록하고, 포인트를 사용하여 구매할 수 있는 서비스

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Features
• Getting Started
• Usage

🌟 About the Project

📷 Screenshots

👾 Tech Stack

Frontend 기술 스택

• Next.js (v12.1.0)
• React (v17.0.2)
• Typescript (v^5.0.2)
• Emotion
• Apollo-Client
• Recoil
• Ant-design

라이브러리

• react-hook-form (비제어 컴포넌트 폼)
• react-slick (배너 케러셀)
• dompurify (XSS 공격 방어)
• react-daum-postcode (다음 우편번호 검색)
• kakao-map-api(카카오맵 지도)
• react-infinite-scroller (무한 스크롤)
• react-player (동영상 플레이어)
• react-quill (웹 에디터)
• Portone(결제 모듈 라이브러리)
• yup (검증 라이브러리 with hook form)
• prettier (코드 포멧)

백엔드 API

• GraphQL API (API 명세서: Playground)

배포

• Vercel

🧰 Getting Started

$ git clone https://github.com/ParkSohyunee/freeboard.git

$ yarn install

$ yarn dev

# http://localhost:3000 접속

🌐 배포주소 https://freeboard-liart.vercel.app/
GraphQL API는 localhost의 3000번 포트만 승인되도록 서버에서 block 정책이 설정되어 있습니다.
따라서, 현재 배포주소에서는 GraphQL API를 요청하지 못하여 기능이 동작하지 않습니다.

🎯 Features

• 회원가입, 로그인, 로그아웃
• 자유게시판 CRUD
• 댓글 CRUD
• 중고마켓 상품등록 CRUD
• 전체 게시판 목록 실시간 검색 조회
• 카드 결제로 포인트 충전
• 충전한 포인트로 상품 구매

👀 Usage

✨ 자유게시판 목록

자유게시판 목록조회

• - 반응형 UI 적용(전체페이지)
• - 회원가입, 로그인, 로그아웃 기능
• - 페이지네이션 기능
• - 검색어 키워드로 실시간 검색 기능

✨ 게시판 상세

자유게시판 상세페이지

• - 게시판에서 작성한 정보가 보이는 페이지
• - 동영상 재생, 좋아요/싫어요 기능
• - 글의 수정과 삭제가 가능
• - 별점과 함께 댓글 작성, 수정, 삭제 가능

✨ 중고마켓 목록

중고마켓 목록조회

• - 무한스크롤 기능
• - 베스트 상품 보기

✨ 중고마켓 상품 등록

중고마켓 상품 등록

• - 웹 에디터로 글씨 크기 선택, 링크 첨부, 마크다운으로 글 작성
• - 주소를 검색하면 카카오지도에 거래위치 마크업 표시
• - 원하는 태그를 스페이스바를 사용하여 추가 및 클릭하면 태그 삭제
• - 이미지 업로드

✨ 중고마켓 상세

📍 반응형 UI 적용 화면

중고마켓 상세페이지

• - 작성자만 글 수정 및 삭제 가능
• - 상품 찜하기 및 포인트로 상품 구매
• - 거래 위치 보기
• - 댓글 CRUD

✨ 포인트 충전

포인트 충전을 위한 카드 결제

• - 드래그다운 메뉴에서 원하는 금액을 카드결제 하여 포인트 충전