📌옷장 속 숨어있는 아이템들을 공유하여 이익을 창출하는 중고 거래 & 렌탈 플랫폼.
- 회원가입시 사용자의 취향 키워드를 수집하여 로그인시 키워드에 맞는 아이템을 추천.
- 마이페이지에서 현재 판매/렌탈 중인 아이템 관리.
- sns형식의 룩북을 제공하여 내 스타일을 공유하고 사진에서 입고있는 아이템을 매칭.
💻 데모 사이트 Panda Demo
| test ID | test PW |
|---|---|
| [email protected] | panda123! |
- Language : React를 사용해 프로젝트를 생성하고 TypeScript를 사용한 정적 타입 지정으로 코드 작성 효율을 높임
- Framework : file based routing, api routing, nextauth, SSR과 webpack, bundling을 지원하는 Next.js를 사용
- CSS : Tailwind사용으로 style작성 코드 컨벤션을 맞춤.
- State Management : Recoil로 client-state, 비동기쿼리를 관리, React-query로 서버 데이터 fetching
- DB : 클라우드 기반의 서버리스 데이터베이스인 PlanetScale을 사용했고 Prisma로 테이블을 정의하고 db와 연결.
- Storage : 사용자 프로필, 업로드한 이미지들의 관리를 위한 스토리지로 AWS S3선택.
- Deploy: Next.js, prisma에 친화적이고 빠른 배포를 위해 Vercel로 배포.
- Filtering
- Infinite Scrolling
- NextAuth login
- External api - google, kakao signup
- Search Engine
- aws s3 file upload
- State Management - recoil(user data fetching)
- 로그인된 유저의 데이터를 유지하고 동기화하는 방법에 대한 고민
- prisma db push할 때 에러 해결방법
- aws s3 bucket에 파일 업로드하기
- 소셜 회원가입 구현하기
- react-hook-form적용 이슈
- useMutation & useForm & axios
- Custom hooks로 비즈니스 로직 분리하기
- Error Handling에 ErrorBoundary적용하기
| name | github | contact | roles |
|---|---|---|---|
| 이조은 |  |
[email protected] | ui 디자인, db model 설계, 마켓 페이지 개발, 메인페이지 개발, 룩북 페이지 개발, 게시물 생성 및 업데이트 기능 개발(이미지 업로드,댓글,좋아요,조회수), 유저인증 유지 비동기 처리, front배포 |
| 이지훈 | |
[email protected] | 로그인 및 유효성 검사 처리, 자체 회원가입 및 소셜 로그인/회원가입 기능 개발, 게시물 검색 기능 구현, 마이페이지 개발 |
📦Panda
┣ 📂prisma
┣ 📂s3-upload
┣ 📂public
┣ 📂src
┃ ┣ 📂components
┃ ┣ 📂hooks
┃ ┣ 📂lib
┃ ┣ 📂pages
┃ ┃ ┣ 📂api
┃ ┃ ┣ 📂create
┃ ┃ ┣ 📂login
┃ ┃ ┣ 📂lookbook
┃ ┃ ┣ 📂market
┃ ┃ ┣ 📂mypage
┃ ┃ ┣ 📂search
┃ ┃ ┣ 📂sign
┃ ┃ ┣ 📜404.tsx
┃ ┃ ┣ 📜_app.tsx
┃ ┃ ┣ 📜_document.tsx
┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂recoil
┃ ┣ 📂styles
┃ ┣ 📂types
┃ ┗ 📂utils
┣ 📜.eslintrc.js
┣ 📜.prettierrc.js
┣ 📜README.md
┣ 📜next-env.d.ts
┣ 📜next.config.js
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜postcss.config.js
┣ 📜tailwind.config.js
┗ 📜tsconfig.json
- 좋아요, 댓글에 대한 알림
- DM기능