"Pickly"는 다양한 분야의 상품을 A/B 테스트 방식으로 비교하고, 리뷰와 별점을 기반으로 최적의 선택을 도와주는 상품 큐레이션 플랫폼입니다.
https://pickly-gamma.vercel.app/
- 테스트 아이디: test2639@naver.com
- 테스트 비밀번호: @00000000
- 서비스 소개, 로그인/회원가입 버튼, 인기 상품 미리보기 등이 포함된 첫 진입 페이지입니다.
- 유효성 검사와 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/UX 설계 및 기능 구현 - Zustand와 연동된 비교 상품 기능 통합 |
 @손혁진 |
마이페이지 / 유저페이지 - 유저 개인정보 및 활동 내역 페이지 구현 - 팔로우/팔로잉 기능 및 관련 모달 개발 |
 @송미진 |
회원 인증 / 에러 핸들링 - 로그인 및 회원가입 기능 (유효성 검사 포함) - 전체 서비스의 에러 페이지 구성 |
 @홍승원 |
홈페이지 / 인프라 / 공통 컴포넌트 - 랜딩 및 메인 페이지 UI 개발 - 백엔드 API (Next.js API Routes) 구현 - 공통 컴포넌트 (헤더 등) 및 로딩 처리 - SEO 최적화 및 프로젝트 환경 설정 |
- 카테고리별로 상품을 비교(A/B 테스트)하고, 리뷰 기반 랭킹 시스템을 제공합니다.
- OpenAI를 활용해 유튜브·스포티파이·지도 콘텐츠를 자동 연동하여 정보 탐색 비용을 절감했습니다. 유튜브 API는 MongoDB 캐싱을 통해 할당량을 효율적으로 관리하며 안정성을 확보했습니다.
- 로그인 기능은 Next.js API Routes 기반의 자체 백엔드로 구현하였고, HTTP-only 쿠키에 토큰을 저장하는 한편, CSRF 토큰을 도입해 교차 사이트 요청 위조 공격에 대한 보안성을 추가로 강화했습니다.
- 로그인 없이도 비교 기능 사용이 가능하여 진입 장벽을 낮췄고, 필수 기능에 빠르게 접근할 수 있도록 설계했습니다.