해당 프로젝트는 GraphQL API를 활용해서 만든 CRUD 자유 게시판 & 중고마켓 웹 서비스 입니다.
중고 상품 목록 페이지
- 무한스크롤을 이용해 상품 목록들을 보여줍니다.
- 유저가 많이 찜한 상품 순서로 베스트 상품이 보여집니다.
- 검색창에 상품 제목을 검색할 수 있습니다.
- 상품 조회 시 오른쪽 사이드에 최근에 본 상품이 담겨집니다.
자유게시판
- 페이지네이션을 이용해 자유 게시판 목록들을 보여줍니다.
- 검색창에 게시글 제목과 날짜를 검색할 수 있습니다.
Frontend 기술 스택
사용한 라이브러리
-
yup : 유효성 검사
react-hook-form : 비제어 컴포넌트 제어
apollo-client : GraphQL 세팅
GraphQL-Codegen : API 응답 데이터 타입
react-daum-postcode : 다음 주소 검색
kakao-maps-api : 카카오맵
react-player : 비디오 플레이어
eslint : 협업 시 코드 규칙 정하기
prettier : 코드 formatter
react-infinite-scroller : 무한스크롤
apollo-upload-client : 이미지 업로드 url 불러오기
react-quill : 웹 에디터
PortOne : 결제 연동 대행사
백엔드 API
| Color | Hex |
|---|---|
| --gray-1 | |
| --gray-2 | |
| --gray-3 | |
| --gray-4 | |
| --error-red | |
| --blue-1 | |
| --blue-2 | |
| --blue-3 |
터미널 창에 아래 명령어를 순차적으로 실행하시면 됩니다.
명령어 실행 후 여기를 http://localhost:3000 열면 작동하실 겁니다.
git clone https://github.com/jeonpilseong/my-project.git
yarn install
yarn dev따라서 하단의 배포 링크는 GraphQL API 요청이 막혀 데이터를 불러오지 못하기에 로컬에서만 프로젝트를 볼 수 있습니다.
🔗useditems-market.vercel.app/
상품 등록 페이지
- 로그인한 뒤 상단에 상품 등록 버튼을 누르면 상품 등록 페이지로 이동합니다.
- 상품내용을 작성할 때 웹 에디터를 이용해 글씨 크기와 폰트를 바꿀 수 있습니다.
- 사진 첨부 시 여러 사진을 첨부할 수 있습니다.
- 다음 주소창에 주소를 검색한 뒤 카카오 맵으로 해당 주소의 위치를 보여줄 수 있습니다.
포인트 충전하기
- 드롭다운으로 충전할 포인트를 선택합니다.
- 카카오페이로 충전을 마치면 상단 프로필에서 충전 포인트를 확인할 수 있습니다.
상품 구매하기
- 충전된 포인트로 상품을 구매할 수 있습니다.
- 상품 구매 시 마이페이지에서 구매 목록을 볼 수 있습니다.