👀 Pickly

"Pickly"는 다양한 분야의 상품을 A/B 테스트 방식으로 비교하고, 리뷰와 별점을 기반으로 최적의 선택을 도와주는 상품 큐레이션 플랫폼입니다.

---

🔗 배포 주소

https://pickly-gamma.vercel.app/

• 테스트 아이디: test2639@naver.com
• 테스트 비밀번호: @00000000

---

🛠 기술 스택

🎨 Frontend

🔧 Backend

– 서버리스 백엔드
– 유튜브, 스포티파이, OpenAI 등 검색 결과 저장
– 로그인 시 토큰을 HTTP-only 쿠키에 저장

🌐 External APIs

– 음악 상품 → 해당 앨범으로 연동
– 뮤직비디오 및 콘텐츠 제공
– 위치 기반 정보 연동
– 상품명과 설명을 분석해 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
    └───types

🛠️ 설치 및 실행 방법

git 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 토큰을 도입해 교차 사이트 요청 위조 공격에 대한 보안성을 추가로 강화했습니다.
• 로그인 없이도 비교 기능 사용이 가능하여 진입 장벽을 낮췄고, 필수 기능에 빠르게 접근할 수 있도록 설계했습니다.