### **프로젝트 배경**

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