확신할 수 있게 — 가격도, 상태도, 거래도
포켓몬 카드의 실제 체결 데이터 기반 시세를 투명하게 보여주고, AI 상태 진단과 에스크로 검수로 안전하게 거래하도록 돕는 시세·거래 플랫폼입니다.
Note
이 저장소는 5인 팀 프로젝트 AIBE6_FinalProject_Team05_FE의 개인 포크입니다. 프로젝트의 중심 저장소는 백엔드이며, 설계 근거와 트러블슈팅은 Backend 포크 README에 정리했습니다.
Pokade는 포켓몬 카드를 사고파는 사람들이 겪는 두 가지 문제 — **"이 가격이 맞는가"**와 "이 상태가 맞는가" — 를 판매자의 말이 아닌 데이터와 시스템으로 대체하는 플랫폼입니다.
- 실거래 기반 시세 — 플랫폼 안에서 체결된 가격으로 시세·랭킹·추이를 보여줍니다.
- AI 등급 진단 — 카드 사진을 올리면 부위별 점수와 종합 등급을 확인하고, 그대로 매물 등록·포트폴리오로 이어집니다.
- AI 시세 챗봇 — 전역 위젯에서 대화로 시세를 묻고 답을 받습니다.
- 에스크로 거래 — 결제부터 검수·배송·구매 확정까지 진행 상태를 한 화면에서 추적합니다.
- 실시간 알림 — SSE 구독으로 구매·목표가 도달 알림을 새로고침 없이 받습니다.
- 관리자 콘솔 — 회원·매물·거래·문의를 운영자가 직접 처리합니다.
| 항목 | 내용 |
|---|---|
| 프로젝트명 | Pokade |
| 팀명 | AIBE6 FinalProject Team05 (크크크) |
| 개발 기간 | 2026.07.20 ~ 2026.08.25 (6주) |
| 한 줄 소개 | 실거래 시세와 AI 진단으로 안전하게 거래하는 포켓몬 카드 플랫폼 |
| 배포 주소 | www.pokade.store |
| 구성 | 프론트엔드(이 저장소) · 백엔드 분리 |
| 규모 | Next.js App Router 페이지 49개 |
| 임현호(팀장) | 김태규 | 이민서 | 이창민 | 정민혁 |
|---|---|---|---|---|
| @predevho | @ktk3376 | @p7548296-afk | @changmin41 | @haxxru |
팀원별 담당 내역은 원본 저장소를 참고하세요.
임현호(팀장, @predevho)가 맡은 범위입니다.
| 영역 | 내용 |
|---|---|
| 공통 API 레이어 | apiClient — 토큰 주입, 401 시 자동 재발급, 재발급 단일화, 실패 시 로그인 이동 |
| 세션 · 접근 제어 | 앱 진입 시 세션 복원, GuestGuard·AdminGuard 레이아웃 단위 적용 |
| 인증 화면 | 로그인, 회원가입 위저드, 이메일 인증, 비밀번호 재설정 |
| 소셜 로그인 | Google · Kakao 진입과 콜백, 신규 가입자 추가 정보 입력 |
| 마이페이지 · 설정 | 활동 허브, 내 정보 수정, 프로필 이미지, 비밀번호 변경, 회원 탈퇴 |
| 거래 내역 | 내 거래 내역 조회 화면 |
관련 코드 — lib/apiClient.ts · components/AuthInitializer · components/GuestGuard · store/useUserStore.ts · app/(인증) · app/mypage · app/settings
| 구분 | 기술 | 버전 |
|---|---|---|
| Framework | Next.js (App Router) | 16.2 |
| UI | React | 19.2 |
| Language | TypeScript | 5.5 |
| Styling | Tailwind CSS | 3.4 |
| State | Zustand | 5.0 |
| Chart | Recharts | 3.10 |
| Realtime | @microsoft/fetch-event-source | 2.0 |
| Payment | @tosspayments/tosspayments-sdk | 2.8 |
| Image | heic2any / exifr | 0.0.4 / 7.1 |
| Lint · Format | ESLint / Prettier | 9 / 3 |
외부 연동 — Toss Payments SDK(결제) · SSE(실시간 알림) · OAuth2 Google·Kakao(백엔드 주도 리다이렉트) · heic2any·exifr(HEIC 변환·EXIF 회전 보정) · Daum 우편번호
연동 대상 백엔드 — Java 21 · Spring Boot 4.0 · PostgreSQL 17 · Redis 7
| 영역 | 기능 | 주요 경로 |
|---|---|---|
| 🔐 인증 / 회원 | 회원가입 위저드(약관 → 이메일 인증 → 정보 입력), 소셜 로그인, 비밀번호 재설정, 회원 탈퇴, 세션 복원 | /login /signup /verify-email /reset-password |
| 🃏 카드 / 시세 | 카드 검색·필터, 카드 상세, 시세 티커·마켓 개요, 시세 랭킹, 시세 추이·등급별 차트 | / /search /cards/[id] /ranking |
| 📦 매물 / 거래 | 매물 등록·상세·호가창, Toss Payments 결제, 거래 진행 상태 추적, 구매 제안 | /listings /trades /trade-status/[id] /buy-offers |
| 🤖 AI | 사진 업로드 후 등급 진단(HEIC 변환·EXIF 보정), 전역 시세 챗봇 위젯 | /ai-diagnosis /chat |
| 📊 자산 관리 | 포트폴리오 손익·세트 완성도, 워치리스트 목표가 알림 | /portfolio /watchlist |
| 🔔 알림 / 고객지원 | SSE 실시간 알림 수신·읽음 처리, 1:1 문의, 약관 | /notifications /inquiries /support |
| 👤 마이페이지 | 활동 허브(거래·문의·포인트), 설정, 공개 프로필 | /mypage /settings /users/[userId] |
| 🛡 관리자 콘솔 | 운영 지표 대시보드, 회원 정지, 매물 숨김, 거래 검수·발송, 문의 답변 | /admin/* |
AIBE6_FinalProject_Team05_FE/
├── Pokade/
│ ├── app/ # App Router 페이지 49개
│ │ ├── layout.tsx # 루트 레이아웃 (Header · Footer · AuthInitializer)
│ │ ├── (인증) # login · signup · verify-email · reset-password · oauth2
│ │ ├── cards/ search/ ranking/
│ │ ├── listings/ trades/ buy-offers/ trade-status/
│ │ ├── ai-diagnosis/ chat/ portfolio/ watchlist/
│ │ ├── mypage/ settings/ users/ notifications/
│ │ ├── support/ inquiries/ terms/ privacy/
│ │ └── admin/ # 관리자 콘솔 (레이아웃 가드)
│ ├── components/ # 공용 UI 컴포넌트
│ │ ├── AuthInitializer.tsx # 앱 진입 시 세션 복원
│ │ ├── GuestGuard.tsx AdminGuard.tsx
│ │ ├── PriceChart.tsx CardImage.tsx ChatWidget.tsx ...
│ ├── lib/ # API 클라이언트 · 포맷 유틸
│ │ ├── apiClient.ts # 공통 요청 레이어 (토큰 주입 · 401 · 재발급 단일화)
│ │ └── *Api.ts # auth · card · listing · trade · price · portfolio ...
│ ├── store/ # Zustand 전역 상태
│ ├── hooks/ types/ public/
│ └── package.json
├── docs/images/ # 아키텍처 다이어그램
└── README.md
- 공통 API 레이어 — 모든 요청이
lib/apiClient.ts를 거칩니다. 토큰 주입, 401 시 재발급, 재발급 중복 요청 단일화, 실패 시 로그인 이동을 한곳에서 처리합니다. - 세션 복원 —
AuthInitializer가 앱 진입 시 세션을 복원해 새로고침 후에도 로그인 상태를 유지합니다. - 접근 제어 —
GuestGuard(비로그인 전용)와AdminGuard(관리자 전용)를 레이아웃 단위로 적용합니다. - 실시간 알림 — SSE 구독으로 구매 발생 등 이벤트를 새로고침 없이 수신합니다.
프론트엔드는 Next.js App Router로 서버 렌더링과 클라이언트 호출을 함께 사용하고, nginx를 거쳐 백엔드 REST API·SSE와 통신합니다. 클라이언트 상태는 Zustand로, 시세 차트는 Recharts로 처리합니다.
배포 — 프론트엔드는 Vercel, 백엔드는 서울 리전(ap-northeast-2) EC2에서 nginx + Blue/Green 슬롯으로 무중단 운영합니다. GitHub Actions가 매 PR마다 Lint와 Build를 검증합니다.
- Node.js 20+
- 실행 중인 백엔드 서버 (Backend 포크 참고)
git clone https://github.com/predevho/AIBE6_FinalProject_Team05_FE.gitcd AIBE6_FinalProject_Team05_FE/PokadePokade/.env.local 파일을 만듭니다.
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
NEXT_PUBLIC_TOSS_CLIENT_KEY=your_toss_client_key| 변수 | 설명 |
|---|---|
NEXT_PUBLIC_API_BASE_URL |
백엔드 API 주소 (로컬: http://localhost:8080) |
NEXT_PUBLIC_TOSS_CLIENT_KEY |
Toss Payments 클라이언트 키 |
npm installnpm run dev- 프론트엔드:
http://localhost:3000
npm run buildnpm run lintPOKADE