PORTFOLIO

POCAMARKET TECHNICAL DOCUMENTATION

★ DEVELOPMENT ARCHITECTURE & STACK ★

🎮 PROJECT OVERVIEW

📋 PROJECT INFO

NAME: 포카마켓 (POCAMARKET)

TYPE: 포켓몬 카드 교환 플랫폼

TEAM: 강태욱, 박지연, 윤유석 (3명)

PERIOD: 2025.05.19 ~ (진행중)

🎯 MAIN FEATURES

포켓몬 카드 DB
카드 교환 시스템
회원정보 관리 및 포인트, 등급 시스템
AWS(EC2, RDS, S3) 프리티어 최적화
개발환경 컨테이너화 Docker Hub 배포
Github Actions CI/CD
Spring Boot - Hexagonal Architecture 적용
Next.js SSR을 통한 SEO 관리
Next Client - Server - Spring Boot 간 JWT Token 인증
OAuth2.0 소셜로그인 기능 (Google, Naver)

⚙️ TECH STACK

Frontend

Next.js v15

React v19

Zustand

Tailwind CSS v4

Shadcn/ui

Backend

Next.js API Routes

Spring Boot v3.4.5

Java v17

Spring Security

JPA, QueryDSL

Domain Driven Design

Hexagonal Architecture

MariaDB

DevOps

AWS - EC2, RDS, S3

Docker

Nginx

GitHub Actions

Tools

Git

Notion

Figma

🏗️ SYSTEM ARCHITECTURE

프로젝트 구조도


┌─────────────────────────────────────────────────────────────────┐
│                    Container & Repositories                     │
├─────────────────────────────────────────────────────────────────┤
│    ┌─────────────┐     ┌─────────┐      ┌───────┐  ┌─────────┐  │
│    │ Spring boot │     │ Next.js │      │ Nginx │  │ Certbot │  │
│    └─────────────┘     └─────────┘      └───────┘  └─────────┘  │
│            │               │                 │         │        │
│     Api-repository    Web-repository       Infra-repository     │
└─────────────────────────────────────────────────────────────────┘
             │               │                      │ 
┌─────────────────────────────────────────────────────────────────┐
│                          Github Actions                         │
└─────────────────────────────────────────────────────────────────┘
             │               │                      │ 
┌──────────────────────────────────┐                │
│            Docker Hub            │                │
└──────────────────────────────────┘                │
             │     ┌────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│                              AWS                                │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │      EC2        │  │       RDS       │  │        S3       │  │
│  │  Docker Compose │  │     MariaDB     │  │                 │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

CI/CD 파이프라인

시스템 구조도


┌─────────────────────────────────────────────────────────────────┐
│                           CLIENT SIDE                           │
├─────────────────────────────────────────────────────────────────┤
│  ┌────────────┐  ┌──────────┐  ┌────────────┐  ┌───────────┐    │
│  │   React    │  │ Tailwind │  │  Shadcn/ui │  │  Zustand  │    │
│  │ Components │  │    CSS   │  │ Components │  │  Store    │    │
│  └────────────┘  └──────────┘  └────────────┘  └───────────┘    │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │                   Next.js 15 App Router                     ││
│  └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘
                                  │
                                  │ Request
                                  │
┌─────────────────────────────────────────────────────────────────┐
│                    MIDDLEWARE LAYER                             │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────┐│
│  │             Next.js API Routes JWT Middleware               ││
│  │                                                             ││
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          ││
│  │  │ JWT Token   │  │ Token       │  │ Request     │          ││
│  │  │ Validation  │  │ Refresh     │  │ Forwarding  │          ││
│  │  │             │  │ & Reissue   │  │ to Backend  │          ││
│  │  └─────────────┘  └─────────────┘  └─────────────┘          ││
│  └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘
                                  │
                                  │ Authenticated Request
                                  │ HTTP/HTTPS
                                  │
┌─────────────────────────────────────────────────────────────────┐
│                          SERVER SIDE                            │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────┐│
│  │                    Spring Boot Server                       ││
│  │                                                             ││
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          ││
│  │  │   REST      │  │   Security  │  │   Business  │          ││
│  │  │   API       │  │   Config    │  │   Logic     │          ││
│  │  └─────────────┘  └─────────────┘  └─────────────┘          ││
│  └─────────────────────────────────────────────────────────────┘│
│                                  │                              │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │                     RDS MariaDB Database                    ││
│  └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘

Security

🔧 KEY FEATURES

사용자 인증 시스템

JWT 기반 인증 및 권한 관리

회원가입 및 로그인 기능

JWT 토큰 기반 인증

역할 기반 접근 제어

소셜 로그인 연동

포켓몬 카드 교환 시스템

실시간 카드 교환 및 관리

교환글 검색 시스템

교환 카드 등록 및 관리

교환 상태에 따른 카드 교환 관리

교환 내역 관리

포켓몬 카드 DB 시스템

포켓몬 카드 검색 및 조회

포켓몬 카드 검색 기능

카드 필터링 시스템

카드 상세 정보 조회

마이페이지 시스템

개인정보 및 교환 관리

개인정보 관리

교환 내역 조회

친구 코드 관리

신고 내역 및 비밀번호 변경

🔧 비즈니스 로직

카드 교환 시스템

📁 PROJECT STRUCTURE

폴더 구조

pocamarket-infra

Infrastructure 소스 코드 구조

pocamarket

.github

workflows

docker-deploy.yml

certbot

nginx

nginx.conf

nginx.dev.conf

nginx.stage.conf

pocamarket-api <- Spring Boot Container

pocamarket-web <- Next.js Container

docker-compose.yml

docker-compose.dev.yml

docker-compose.stage.yml

pocamarket-api

Spring Boot 프로젝트의 소스 코드 구조

src/main/java/com

pocamarket

common

infrastructure

config

script

security

util

service

pokemon

trade

user

api

application

domain

pocamarket-web

Next.js 프로젝트의 소스 코드 구조

src

api

app

about-us

mypage

next-api

auth

proxy

[...slug]

pokemon-card

pokemon-card-trade

portfolio

signup

assets

components