🍰 Ca.pick (케이크 픽)

취향 태그로 원하는 디자인의 케이크를 쉽게 찾는 맞춤형 큐레이션 서비스입니다.

• SWYP 웹 14기 8팀
• 진행 기간: 2026.06 ~ 2026.07

목차

1. 주요 기능
2. 기술 스택
3. 폴더 구조
4. 실행 방법
5. 개발 컨벤션

주요 기능

1. 홈 / 추천 큐레이션

• 홈 화면에서 케이크 가게 큐레이션 노출
• 인스타그램 임베드로 가게 소개 콘텐츠 확인
• 카드 상세 바텀시트에서 정보 확인 및 좋아요
• 하단 탭 내비게이션, 캐러셀 인디케이터

2. 취향 기반 케이크 추천 / 지도 기반 위치 확인

• 질문(Chip) 선택으로 취향 파악
• 태그 검색으로 원하는 케이크 스타일 탐색
• 단계별(Step) 흐름으로 추천 결과 확인
• Kakao Maps SDK로 케이크 가게 위치 표시
• 검색 결과 없음 상태 처리

3. 좋아요 / 저장

• 하트 토글로 관심 있는 케이크/가게 저장
• 저장 목록 페이지에서 모아보기 및 필터링
• 저장 항목이 없을 때 안내 화면 제공

4. 로그인 / 인증 / 마이페이지

• 로그인 폼을 통한 인증
• 로그인이 필요한 페이지 접근 시 리다이렉트 처리
• 인증된 사용자만 접근 가능한 라우트 보호
• 프로필 정보 확인
• 이용약관 및 개인정보처리방침 열람

기술 스택

Core

UI

상태 관리 / 데이터

기타

Deploy

폴더 구조

src/
├── api/                # API 요청 및 서비스 로직
├── assets/             # 이미지, 아이콘 등 정적 리소스
├── components/         # 공통 컴포넌트 (BottomTabNavigation, KakaoMap, HeartToggle 등)
├── constants/          # 상수 값
├── hooks/               # 커스텀 훅 (queries 포함)
├── pages/
│   ├── Home/            # 홈 (추천 큐레이션)
│   ├── Login/            # 로그인
│   ├── MyPage/           # 마이페이지 (약관, 개인정보처리방침 포함)
│   ├── OrderCreate/       # 취향 기반 추천 플로우
│   └── Saved/             # 저장(좋아요) 목록
├── theme/               # MUI 테마 설정
├── types/                # 공통 타입 정의
└── utils/                # 유틸 함수

실행 방법

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 빌드
npm run build

# 빌드 결과 미리보기
npm run preview

# 린트
npm run lint

개발 컨벤션

자세한 코드/컴포넌트 컨벤션은 DEVELOPMENT_GUIDELINES.md 문서를 참고해주세요.

• 페이지는 섹션 단위 컴포넌트로 분해
• 가능한 모든 곳에 MUI 컴포넌트 사용
• 컬러는 하드코딩 없이 theme.palette 값 사용
• sx prop 최소화