"Pickly"는 다양한 분야의 상품을 A/B 테스트 방식으로 비교하고, 리뷰와 별점을 기반으로 최적의 선택을 도와주는 상품 큐레이션 플랫폼입니다.
https://pickly-gamma.vercel.app/
- React
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- Framer Motion
- TanStack Query (React Query)
- Zustand
- Next.js API Routes (서버리스 백엔드)
- MongoDB (NoSQL DB) – 유튜브, 스포티파이, OpenAI 등 검색 결과 저장
- Cookie-based Auth – 로그인 시 토큰을 HTTP-only 쿠키에 저장
- Spotify API – 음악 상품 → 해당 앨범으로 연동
- YouTube API – 뮤직비디오 및 콘텐츠 제공
- Google Maps API – 위치 기반 정보 연동
- OpenAI API – 상품명과 설명을 분석해 YouTube/Spotify/Google Maps 링크 자동 생성
- 서비스 소개, 로그인/회원가입 버튼, 인기 상품 미리보기 등이 포함된 첫 진입 페이지입니다.
- 유효성 검사와 Zustand를 활용해 로그인 시 사용자 정보를 클라이언트 상태로 관리합니다.
- 로그인 시 Next.js API Routes 기반 자체 백엔드에서 인증을 처리하며, 토큰은 HTTP-only 쿠키에 저장해 보안성을 높였습니다.
-
상품 검색, 카테고리별 정렬, 무한 스크롤 로딩 기능 구현
-
상품 추가 기능으로 직접 상품을 등록할 수 있습니다.
- 찜하기, 리뷰 작성/수정/삭제, 비교 기능 제공
- 상품 등록자에게는 편집 및 삭제 기능이 추가로 제공됩니다.
- 리뷰 수, 평균 별점, 찜 수를 기준으로 두 상품을 비교합니다.
- 로그인하지 않아도 게스트 모드로 이용 가능합니다.
├───public
│ ├───animations
│ ├───icons
│ └───images
└───src
├───app
│ ├───api
│ │ ├───cookie
│ │ ├───login
│ │ ├───logout
│ │ ├───openai
│ │ │ ├───extract-movie
│ │ │ ├───extract-music
│ │ │ └───extract-place
│ │ ├───spotify-token
│ │ └───youtube-search
│ ├───compare
│ ├───homepage
│ │ └───[id]
│ ├───landingpage
│ ├───mypage
│ ├───product
│ │ └───[id]
│ ├───providers
│ ├───signin
│ ├───signup
│ │ └───[provider]
│ ├───test
│ │ └───input
│ └───users
│ └───[id]
├───components
│ ├───input
│ └───shared
├───features
│ ├───compare
│ │ ├───api
│ │ ├───components
│ │ ├───hooks
│ │ └───types
│ ├───header
│ │ └───hooks
│ ├───home
│ │ ├───components
│ │ ├───modals
│ │ │ └───store
│ │ ├───services
│ │ └───types
│ ├───landing
│ │ └───components
│ ├───productId
│ │ ├───components
│ │ │ ├───modal
│ │ │ │ ├───ProductCompareModal
│ │ │ │ └───ProductReviewModal
│ │ │ ├───ProductApi
│ │ │ ├───ProductIdDetail
│ │ │ ├───ProductIdStats
│ │ │ └───ProductReviews
│ │ ├───hooks
│ │ └───libs
│ ├───Profile
│ │ ├───api
│ │ ├───components
│ │ ├───hook
│ │ └───types
│ ├───signin
│ │ └───components
│ └───signup
│ └───components
├───lib
│ ├───axios
│ └───utils
└───typesgit clone https://github.com/part4-team6/Pickly.git
cd pickly
npm install
npm run dev| 대상 | 규칙 | 예시 |
|---|---|---|
| 폴더명 | 케밥케이스 (kebab-case) | components, user-profile |
| 컴포넌트 파일명 | 파스칼케이스 (PascalCase) | UserProfile.jsx |
| 스타일 파일명 | 케밥케이스 + .styles.js | user-profile.styles.js |
| 이미지/아이콘 파일명 | 케밥케이스 | logo-icon.png, profile-default.png |
| 함수명/변수명 | 카멜케이스 (camelCase) | fetchUserData, userList |
| 환경변수 | 대문자+스네이크케이스 | REACT_APP_API_URL |
| 역할 | 네이밍 | 예시 |
|---|---|---|
| 메인 브랜치(배포용) | main | main/ |
| 기능 개발 브랜치 | feature/기능명 | feature/이름/dashboard-modal |
| 긴급 수정 브랜치 | hotfix/이슈명 | hotfix/이름/login-error |
| 릴리즈 준비 브랜치 | release/버전명 | release/이름/v1.0.0 |
| 스타일 수정 브랜치 | style/스타일이름 | style/이름/login-mobile |
2025.05.26 ~ 2025.06.24 (약 한 달, 일요일 제외)
| 이름 | 담당 파트 | 주요 작업 |
|---|---|---|
| 김수연 | 상세 페이지, 외부 API 연동 | - 상세페이지 구현 - Spotify, YouTube, Google Maps, OpenAI API 연동 - MongoDB 연결 - Zustand로 유저 상태 관리 및 비교 상품 등록 기능 |
| 박하은 | 비교하기 페이지 | - A/B 테스트 기반 비교하기 UI 및 기능 구현 |
| 손혁진 | 마이페이지 / 유저페이지 | - 유저 개인 정보, 활동 내역, 비교 결과 관리 UI 구현 |
| 송미진 | 로그인 / 회원가입 / 에러 페이지 | - 유효성 검사 포함 로그인 및 회원가입 기능 - 에러 페이지 전반 |
| 홍승원 | 랜딩페이지 / 홈페이지 / 인프라 | - 메인 페이지(랜딩/홈) UI 구현 - 로딩 처리 - 백엔드 API 개발 (Next.js API Routes) - 카테고리 페이지 - 공통 컴포넌트(헤더) - SEO 최적화, 환경설정 |
- 카테고리별로 상품을 비교(A/B 테스트)하고, 리뷰 기반 랭킹 시스템을 제공합니다.
- OpenAI를 통해 자동으로 유튜브/스포티파이/지도 콘텐츠를 연동해 정보 탐색 비용을 줄였습니다.
- 로그인 없이도 비교 기능을 제공하며, 상태 관리와 백엔드를 Next.js 기반으로 통합하여 효율적인 개발이 가능했습니다.