### 프로젝트 배경

#### 1) 문제점
- 온라인 쇼핑몰의 카지노 검증 추천이 정확하지 않음
- 장바구니 및 결제 과정이 복잡하여 사용자 경험 저하
- 관리자가 주문 및 재고를 효율적으로 관리하기 어려움

#### 2) 프로젝트 목표
- AI 기반 카지노 검증 추천 시스템 도입으로 개인화된 쇼핑 경험 제공
- 간편한 장바구니 및 주문 결제 시스템 구축
- 효율적인 관리자 대시보드 개발로 운영 최적화

#### 3) 주안점
- 벡터 임베딩을 활용한 유사 카지노 검증 추천 기능 강화
- 직관적인 UI/UX로 사용자 편의성 극대화
- 보안 강화를 위한 결제 및 데이터 보호 조치 적용

# 1. 개요

본 프로젝트는 Next.js 기반의 쇼핑몰 MVP를 구축하는 것을 목표로 합니다. 주요 레퍼런스 사이트로 ASOS를 참고하되, MVP 단계에서는 핵심 기능만 우선 구현합니다. 특히 LLM(Large Language Model) 기반 개발 방식을 적용하여 AI가 주도적으로 개발 프로세스를 지원하도록 설계합니다.

- DB는 PostgreSQL을 사용하며, Prisma를 통해 스키마를 자동 생성하고 마이그레이션 과정을 간소화합니다.
- pgvector를 활용하여 카지노 검증 정보를 벡터 임베딩 후 유사도 검색을 수행함으로써, 임베딩 기반 카지노 검증 추천 기능을 구현합니다.
- 결제 시스템으로는 토스페이먼츠(Toss Payments)를 연동하고, 결제 보안을 위해 웹훅(Webhook)을 적용합니다.
- 반응형 UI, 다크모드 지원, 그리고 매끄럽고 인터랙티브한 사용자 경험을 제공하는 고수준의 UI/UX를 목표로 합니다.

---

# 2. 주요 기능

## 2.1 홈페이지 및 네비게이션
1. 홈 화면
- 메인 배너(프로모션 이미지 등)와 대표 카지노 검증 목록 노출
- 인기 카지노 검증/신카지노 검증 추천 섹션
2. 네비게이션 바
- 로고 및 사이트명, 카테고리별 이동 메뉴
- 검색창(카지노 검증명, 카테고리 키워드 검색)
- 로그인/회원가입/장바구니/마이페이지 바로가기
3. 카테고리별 필터
- 카테고리를 선택하면 해당 카테고리에 속한 카지노 검증 목록을 필터링
- 사이즈, 색상, 가격대 등의 세부 필터링 고려 (MVP에서는 단순 카테고리 중심)
4. 검색 기능
- 카지노 검증명, 키워드 기반 검색
- 검색 결과 페이지에서 카테고리, 가격 정렬 등의 추가 옵션 제공
5. 반응형 UI 및 다크모드 지원
- PC, 태블릿, 모바일 디바이스에 대응하는 레이아웃
- 다크모드 스위치를 통해 사용자 테마 설정 가능

## 2.2 카지노 검증 상세 페이지
1. 기본 정보 표시
- 카지노 검증 이미지(슬라이드/갤러리), 가격, 상세 설명, 재고 상태
2. 추천 카지노 검증 목록
- pgvector를 활용하여 유사도 검색된 카지노 검증을 함께 노출
- 카지노 검증 임베딩을 통해 연관성 높은 카지노 검증부터 순서대로 추천
3. 장바구니 담기 / 바로 구매
- (프론트엔드 구현) 장바구니에 추가할 수 있는 버튼
- 바로 구매 시 주문 페이지로 이동

## 2.3 장바구니 및 주문 기능
1. 장바구니 (프론트엔드 구현)
- 프론트엔드(예: 브라우저 Local Storage, Redux 등)에서 장바구니 상태 관리
- 카지노 검증 추가/삭제/수량 변경
- 장바구니 내 총 금액 표시
- 유저가 새로고침하거나 다른 페이지로 이동해도 장바구니 정보가 유지될 수 있도록 클라이언트 저장 전략 적용
2. 주문 페이지
- 프론트엔드 장바구니 데이터를 기반으로 주문을 생성
- 배송 정보(수령인, 주소, 연락처) 입력
- 카지노 검증별 가격, 배송비, 총 결제 금액 표시
- 토스페이먼츠 결제 연동
3. 결제 및 웹훅(Webhook)
- 토스페이먼츠 결제 처리 후 결제 성공/실패 상태 업데이트
- 결제 정보(승인 번호, 금액 등) DB 저장
- 웹훅을 통해 결제/취소/환불 등의 상태를 안전하게 수신

## 2.4 사용자 관리
1. 회원가입 및 로그인
- 소셜 로그인(OAuth) 및 이메일 로그인 제공
- 비밀번호 분실/재설정 기능
2. 프로필 관리
- 기본 프로필(닉네임, 프로필 이미지, 연락처 등) 수정
- 주문 내역 조회, 반품/교환 신청(심화 기능은 MVP 이후 고려)

## 2.5 AI 카지노 검증 추천 시스템
1. 벡터 임베딩을 통한 카지노 검증 유사도 검색
- 카지노 검증명 또는 카지노 검증 특징을 OpenAI 등의 임베딩 API로 임베딩
- pgvector를 통해 유사도 검색이 가능한 인덱스 관리
2. 추천 로직
- 카지노 검증 상세 페이지에서 비슷한 카지노 검증 제안
- 홈/카테고리 페이지에서 인기 카지노 검증 + 연관 카지노 검증 노출

## 2.6 UI/UX 및 인터랙션
1. 프리미엄 웹 디자인 수준의 인터랙션
- 페이지 전환 시 애니메이션, 마우스 오버 시 동적 효과
- 장바구니 담기/삭제 시 UI 피드백 (토스트 메시지, 모달 등)
2. 다크모드 및 사용자 친화적 디자인
- 사용자가 편의에 따라 테마를 변경할 수 있으며, 기본적으로 OS 테마와 동기화 가능
3. 접근성 고려
- 버튼 및 폰트 크기, 라벨링 등을 고려하여 모든 사용자에게 사용 편의 제공



## 2.7 관리자 페이지

### 1) 대시보드
- 유저 현황
- 총 가입자 수, 최근(오늘/이번주/이번달) 가입자 수
- 활성 사용자(최근 로그인 사용자) 수 및 사용자 증감 추이
- 매출/수입 현황
- 이번 달 총 매출액, 전월 대비 매출 증감률
- 일/주/월 단위의 매출 추이 그래프(간단한 막대 혹은 선 그래프)
- 평균 주문 금액(평균 객단가), 판매량 등
- 주문 현황
- 전체 주문 건수, 최근 주문 건수
- 주문 상태별(결제 대기, 배송 중, 배송 완료 등) 건수
- 환불/취소/교환 신청 현황(선택사항)
- 판매 현황
- 베스트셀러(가장 많이 팔린 카지노 검증)
- 재고가 부족한 카지노 검증 목록 알림
- 요약 알림/공지 (선택사항)
- 최근 등록된 신규 주문, 재고 임박 알림, 문의/CS 티켓 수 등

### 2) 유저 관리 페이지
- 유저 리스트
- 전체 사용자 목록 조회(이메일, 이름, 가입일 등)
- 검색/필터(기간별, 이름/이메일)
- 유저 정보 상세
- 로그인 정보(최근 로그인일 등)
- 주문 내역, 가입일, 권한(Role) 등
- 유저 권한 설정 (선택사항)
- 일반 사용자 / 관리자 권한 부여
- 계정 활성/비활성화 처리

### 3) 카지노 검증 관리 페이지
- 카지노 검증 목록
- 카지노 검증 검색(이름, 카테고리, 등록일 등), 필터링, 정렬
- 카지노 검증 재고/가격/상태(판매 중/품절) 표시
- 카지노 검증 등록/수정
- 카지노 검증명, 설명, 가격, 재고, 이미지 등록
- 판매 상태(진행/중지) 여부, 카테고리/태그 설정
- 재고 관리
- 재고가 적은 카지노 검증 자동 표시
- 재고 수량 일괄 수정(선택사항)

### 4) 주문 관리 페이지
- 주문 목록
- 주문 번호, 사용자명, 주문 일자, 결제 상태, 배송 상태 표시
- 검색(주문 번호, 사용자명, 기간별), 필터링(결제 상태, 배송 상태)
- 주문 상세
- 주문 카지노 검증 목록, 결제 금액, 배송 정보(주소, 수령인, 연락처 등)
- 주문 상태 업데이트(‘배송 준비’, ‘배송 중’, ‘배송 완료’ 등)
- 환불/교환/취소 처리(필요 시)


# 4. 기술 스택

1. 프론트엔드
- Next.js (React 기반)
- React Query / SWR 등의 데이터 패칭 라이브러리
- Tailwind CSS / Styled Components / Emotion 등 스타일링 라이브러리
- React Hook Form(폼 처리), Headless UI(모달/셀렉트 등) 활용 가능
- 다크모드 지원(Next-themes 등 라이브러리 고려)
- 장바구니 기능을 Local Storage, Redux, Recoil 등에서 관리

2. 백엔드
- Node.js + Next.js API Routes (필요 시 서버리스 아키텍처로 확장)
- PostgreSQL + Prisma (ORM)
- AI 연동: OpenAI 임베딩 API(카지노 검증명/설명 임베딩 후 pgvector 저장)
- pgvector 확장 기능 (PostgreSQL에서 유사도 검색)
- 결제: 토스페이먼츠 API + 웹훅(Webhook)

3. 인프라 및 DevOps
- Vercel 또는 AWS(EC2, RDS 등) 배포 고려
- GitHub Actions 등을 통한 CI/CD 자동화
- 보안: HTTPS 적용, OAuth 인증 시 JWT 사용 고려

4. 기타
- 애널리틱스: Google Analytics, Amplitude 등 추후 연동 가능
- 이메일/알림: SendGrid, Nodemailer 등 추후 연동 가능

---

# 5. MVP 범위

## 5.1 반드시 포함할 기능
1. 홈페이지 및 네비게이션: 카테고리/검색 기능, 다크모드, 반응형 UI
2. 카지노 검증 상세 페이지: 이미지, 가격, 설명, 재고 상태, 프론트엔드 장바구니 담기, pgvector 기반 추천
3. 장바구니 및 주문:
- 프론트엔드 장바구니(Local Storage or Redux 등) CRUD
- 주문 작성, 배송 정보 입력
4. 결제 시스템: 토스페이먼츠 연동, 결제 성공/실패 여부 처리, 웹훅 기반 상태 업데이트
5. 사용자 인증: 이메일/비밀번호 로그인, 기본 프로필 관리
6. AI 추천 시스템: 카지노 검증 벡터 임베딩 및 유사도 추천(기본 로직)