- 프로젝트 소개
- 기획
- 디자인 시안(Figma)
- 데이터베이스 ERM
- 작동화면
- 주요기능
- 기능별 페이지 분석
- 팀원 회고
💖 Dream은 환경 보호와 사회 공헌을 동시에 실현하는 거래, 중고판매 온라인 플랫폼입니다. 사용하지 않는 옷을 버리는 대신 필요한 사람들에게 판매하고, 판매 수익은 사회 공헌 활동에 기부됩니다.
👨👩👧👦Introducing the team
👨🚀 정서린 : https://github.com/lin0211
👨🚀 강태욱 : https://github.com/Taewook1212
👨🚀 조현돈 : https://github.com/chohyundon
👨🚀 여서윤 : https://github.com/yeo-seoyun
- 프로젝트 이름 : Dream
- 프로젝트 기간 : 2024 2월 19일 ~ 3월 14일
- 프로젝트 설치 방법 :
패키지 설치npm i npm run dev - 프로젝트 vacel URL :
https://dream8.vercel.app/ - 기술스택
기획 발표 URL : https://www.canva.com/design/DAF9ZAMC0L4/PgiIeWpvj1BTwMY_7Yckog/edit
최종 발표 URL : https://www.canva.com/design/DAF_Xhuhykg/E4Co7XP5L8P3ZyPKtsqCnw/edit
- 디자인 시안 주소 : https://www.figma.com/file/q0xtysWbr782sTQhpVn4AL/Untitled?type=design&node-id=620%3A2429&mode=design&t=6ICEgpSdzUAjXh5p-1
- 화면 구성:
- 프로젝트 설치 방법 : clone 후 npm i
- 유저 플로우 :
[메인]
[로그인페이지] [회원가입페이지]
[마이페이지] [마이페이지 내역]
[판매페이지] [판메디테일]
[장바구니]
[교환페이지] [교환작성]
[후원페이지 후원작성페이지]
[소식페이지]
Button, Input 같이 재사용성이 높은 요소는 아토믹 컴포넌트로 제작
판매페이지
- Pocketbase/PocketHost를 이용한 상품의 isSale가 참인 상품 리스트 렌더링
- 리스트의 카테고리별 상품리스트 필터하여 리스트 렌더링
- 상품의 등급별, 가격별, 그리고 created 된 시간의 순서에 따라 정렬하여 리스트 렌더링
- 검색 하여 상품 title에 부합하는 리스트 렌더링
- Lazy Loading을 사용하여 비동기 처리 앱 성능 최적화
판매디테일 페이지
- 주소창에 저장된 params를 불러와 상품의 아이디에 맞는 데이터의 상세 내역을 렌더링
- 상품의 카테고리에 맞으며, 상세페이지에 보여주는 상품은 제외한 상품 리스트(관련상품)를 렌더링
- 썸네일 클릭시 상품의 미리보기 기능
- 구매하기 버튼으로 상품을 장바구니 데이터에 전송하고 장바구니 · 결제페이지으로 이동
- 장바구니 버튼으로 상품을 장바구니 데이터에 전송하며 보고 있는 페이지에 머무를지 장바구니 · 결제페이지로 이동할지 여부 선택 모달창으로 확인
장바구니 · 결제 페이지
- 장바구니 데이터 렌더링
- x 버튼으로 장바구니 데이터에서 삭제되고 리스트에 보이지 않도록하기 위해 refetch
- 상품의 체크 박스 클릭시 선택된 상품들의 가격을 계산하여 구매 정보에 표시
- 결제하기 버튼 클릭시 선택된 상품의 상태가 isSale 거짓이 되어 판매리스트에서 제외되도록 데이터 업데이트
- 결제하기 버튼 클릭시 장바구니 데이터의 isPayed는 참이 되고 리스트에 보이지 않도록하기 위해 refetch
모달창
- createPortal을 이용하여 모달을 최상위 레벨에서 렌더링하여 다른 요소들과 겹치지 않고 독립적으로 동작
- 재사용성을 위해 제목과 본문을 작성할 수 있게 만듬
회원가입/로그인 페이지
- 로그인 여부와 로그인 유저의 정보를 zustand useLoginFormStore.tsx 에 저장하고 psersist 라이브버리를 사용하여 sessionStorage로 설정, 새로고침 문제 해결과 로그아웃 로그인 상태 해결
- 화면 우측 상단에 [비 로그인] 시 회원가입, 로그인 표시, [로그인] 시 마이페이지, 로그아웃 표시
- 비밀번호 확인을 통해 validation 적용, 카카오 지도 api를 통한 주소 입력 기능
- 회원가입 후 로그인 화면으로 이동 로그인에 실패 시 경고창 출력
마이 페이지
- Mypage 경로 안에 각 페이지들은 children 으로 route을 구성, 각 카테고리별로 pb 데이터를 불러와서 로그인 유저의 활동내역을 출력
- tanstack Query staleTime 10초 설정 후 비동기 데이터 캐싱하여 불필요한 데이터 처리 감소와 속도 개선
- 추후 간편 로그인을 통해 추가 이미지 등록을 위한 조치 가능
알림 표시
- 로그인 상태에 따라 맞춤화된 알림을 제공합니다. [비 로그인]시 로그인 으로 유도
- 알림리스트를 담기 위한 notification DB를 따로 만들고 알림 DB에 pb의 realtime을 위한 코드인 subscribe를 사용하여 해당 알림 DB에 구독상태를 만들고, 물건을 사거나 후원등록 시 그 알림 DB에 데이터를 보내 줌으로 써 업데이트.
- 알림갯수는 useCountStore.tsx store에 전역상태로 관리하고 읽게 되면 clear기능을 만들어 초기화.
회원가입/로그인 페이지
- 로그인 여부와 로그인 유저의 정보를 zustand useLoginFormStore.tsx 에 저장하고 psersist 라이브버리를 사용하여 sessionStorage로 설정, 새로고침 문제 해결과 로그아웃 로그인 상태 해결
- 화면 우측 상단에 [비 로그인] 시 회원가입, 로그인 표시, [로그인] 시 마이페이지, 로그아웃 표시
- 비밀번호 확인을 통해 validation 적용, 카카오 지도 api를 통한 주소 입력 기능
- 회원가입 후 로그인 화면으로 이동 로그인에 실패 시 경고창 출력
교환페이지
- Pocketbase/PocketHost를 이용한 상품의 isExchange가 참인 상품 리스트 렌더링
- 포켓베이스 exchange에 있는 데이터 리스트 렌더링
- 더보기 버튼으로 리스트들 더 볼수 있도록 구현
교환디테일 페이지
- 각 리스트들의 id를 useParams로 가져와서 각 페이지 렌더링
- 게시글 작성했다면 수정하기, 삭제하기 기능 추가
- 게시글을 작성하지 않은 다른 사용자는 채팅만 가능
교환글 작성 페이지
- 교환을 원하는 상품이 있을시 form 데이터로 글을 작성할 수 있는 패이지 구현
- 신청 폼의 글을 비우게 되면 오류가 나도록 validation 구현
- 교환 상세 페이지에 300글자 넘어거면 오류 생기도록 validation 구현
교환글 수정 페이지
- 게시글을 작성한 사람이 글을 수정하고 샆을 떄 수정할 수 있도록 구현
- 신청 양식에는 기본적인 전에 사용했던 목록을 가져와서 렌더링
- 수정글을 아무것도 수정하지 않았다면 오류 나도록 validation 구현
채팅 페이지
- 리얼 타임 데이터 베이스로 사용자들 끼리 1대1 채팅 구현
- 아직 완벽하게 구현은 x
메인페이지
- GSAP을 사용하여 부드러운 스크롤 효과 적용
- 영역마다 스크롤 시 GSAP 애니메이션 적용
- 드림소식 영역의 카드 클릭 시 각각의 디테일 페이지로 이동
소식페이지
- tanstackQuery를 사용하여 데이터 처리
- PocketBase에 저장된 데이터를 불러와 렌더링
- 리스트 클릭 하면 해당하는 데이터의 상세정보 출력
후원, 후원신청페이지
- 로그인한 유저만 신청서 작성 가능
- 폼 미완성 시 안내 팝업
- 폼작성 후 데이터 로컬스토리지에 저장 (삭제가능)
- 작성된 데이터 포켓베이스로 전송
- 정서린 : 프로젝트 전날까지도 불안해서 잠을 못잤던거 같아요. 하지만 막상 시작하면서 모르는 부분에 대해 이야기도 나누고 직접 코드를 작성하며 수업때는 이해 못했던 부분들을 하나하나 이해 되는 순간이 있었습니다.
때문에 뿌듯한 시간을 보냈다고 생각합니다. 다음에 새로 만날 프로젝트에서도 기억이 될 원동력이 될 것 같습니다. - 강태욱 : 컴포넌트화가 엄청 중요하다라는 것을 알게 되었고, 문서화도 중요하다는 것을 알게 되었다. 처음부터 기획과 디자인 개발 발표까지 모든것을 하느라 시간이 부족했지만, 그만큼 전체를 보는 안목이 생겼습니다. 추가적인 리팩토링을 할 예정입니다.
- 여서윤 : 기획부터 배포까지 진행하는 동안 팀원과의 소통을 통하여 리액트의 기능과 작동 원리에 대해 더욱 알게 되는 시간이었습니다.
프로젝트 시작 전에는 걱정이 많았지만 팀원들 덕분에 무사히 끝낼 수 있었고, 프로젝트 전과 비교했을때 많이 성장했다고 생각하지만 아직은 부족한 부분이 많은 것 같아 추후에 보완하고 싶습니다.
이번 프로젝트를 통해 그동안의 학습을 돌아 볼 수 있었고, 다음엔 더 많은 기능 구현에 도전해보겠습니다. - 조현돈
데이터베이스 설계의 미흡(채팅의 경우 알지를 못해서 데이터베이스 설계 잘못했다...)
디자인 시안을 처음 만들다 보니 매우 미흡했던 점들
너무 많은 기술들을 한번에 시도할려다 보니 완성도가 생각보다 떨어졌다...