Full-Stack E-Commerce Platform

GreenTrust
์Šค๋งˆํŠธํŒœ ์ด์ปค๋จธ์Šค

Next.js 15 + Spring Boot 3.5 ๊ธฐ๋ฐ˜์˜ ํ’€์Šคํƒ ์Šค๋งˆํŠธํŒœ ๋†์‚ฐ๋ฌผ ์ง๊ฑฐ๋ž˜ ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค.
3๊ฐœ์˜ ๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค์™€ Kafka ์ด๋ฒคํŠธ ๋“œ๋ฆฌ๋ธ ์•„ํ‚คํ…์ฒ˜๋กœ ์ „์ฒด ์ปค๋จธ์Šค ์‚ฌ์ดํด์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

0
๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค
0+
ํ™”๋ฉด ๊ตฌํ˜„
0+
๊ธฐ์ˆ  ์Šคํƒ
TECH STACK

์‚ฌ์šฉ ๊ธฐ์ˆ 

์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ๊ณผ ์•ˆ์ •์ ์ธ ๋ฐฑ์—”๋“œ ํ†ต์‹  ๊ตฌ์กฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์„ค๊ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค.

โšก
Next.js 15
โš›๏ธ
React 19
๐Ÿ”ท
TypeScript
๐ŸŽจ
Tailwind CSS v4
๐Ÿงฉ
Radix UI
๐Ÿป
Zustand
๐Ÿ”„
TanStack Query
๐Ÿ“
react-hook-form
โœ…
Zod
๐Ÿ’ณ
Toss Payments
๐ŸŽฌ
Framer Motion
๐Ÿ“Š
Recharts
๐Ÿ”‘
JWT Auth
๐ŸŒ€
GSAP
CORE FEATURES

ํ•ต์‹ฌ ๊ธฐ๋Šฅ

์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ์ค‘์‹ฌ์˜ ์ปค๋จธ์Šค ํ”Œ๋กœ์šฐ์™€ ๊ด€๋ฆฌ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ™ˆ ํ™”๋ฉด

Hero ์„น์…˜ & ์ฟ ํฐ ๋ฐฐ๋„ˆ

GSAP๊ณผ Framer Motion์œผ๋กœ ๊ตฌํ˜„ํ•œ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ Hero ์„น์…˜๊ณผ, ์ง„์ž… ์‹œ ์ž๋™ ํ‘œ์‹œ๋˜๋Š” ์Šฌ๋ผ์ด๋”ฉ ์ฟ ํฐ ์บ๋Ÿฌ์…€ ๋ชจ๋‹ฌ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ์ฐธ์—ฌ๋ฅผ ์œ ๋„ํ•˜๋Š” ํ”„๋กœ๋ชจ์…˜ ์‹œ์Šคํ…œ์ž…๋‹ˆ๋‹ค.

GSAP Framer Motion Zustand
GreenTrust Hero Section
Coupon Banner Modal
์ƒํ’ˆ ํƒ์ƒ‰

์ƒํ’ˆ ๋ชฉ๋ก & ์ƒ์„ธ ํŽ˜์ด์ง€

์นดํ…Œ๊ณ ๋ฆฌ ํ•„ํ„ฐ๋ง, ํ‚ค์›Œ๋“œ ๊ฒ€์ƒ‰, ๋ฌดํ•œ ์Šคํฌ๋กค์„ ์ง€์›ํ•˜๋Š” ์ƒํ’ˆ ํƒ์ƒ‰ ์‹œ์Šคํ…œ์ž…๋‹ˆ๋‹ค. ์ƒ์„ธ ํŽ˜์ด์ง€์—์„œ๋Š” ์ด๋ฏธ์ง€ ๊ฐค๋Ÿฌ๋ฆฌ, ์˜ต์…˜ ์„ ํƒ, B2B ํ† ๊ธ€, ๋ฆฌ๋ทฐ๊นŒ์ง€ ์™„๋ฒฝํ•œ ๊ตฌ๋งค ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

TanStack Query Infinite Scroll SSR
Product List
Product Detail
๊ฒ€์ƒ‰

ํ†ตํ•ฉ ๊ฒ€์ƒ‰ ์‹œ์Šคํ…œ

ํ‚ค์›Œ๋“œ ๊ธฐ๋ฐ˜ ์‹ค์‹œ๊ฐ„ ๊ฒ€์ƒ‰์œผ๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ์ƒํ’ˆ์„ ๋น ๋ฅด๊ฒŒ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. URL ์ฟผ๋ฆฌ ํŒŒ๋ผ๋ฏธํ„ฐ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฒ€์ƒ‰ ์ƒํƒœ๊ฐ€ ๊ณต์œ  ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

URL Search Params Debounce
Search Results
๊ตฌ๋งค ํ๋ฆ„

์žฅ๋ฐ”๊ตฌ๋‹ˆ & Toss Payments ๊ฒฐ์ œ

Zustand ๊ธฐ๋ฐ˜ ์žฅ๋ฐ”๊ตฌ๋‹ˆ ์ƒํƒœ ๊ด€๋ฆฌ, Toss Payments SDK ์—ฐ๋™ ๊ฒฐ์ œ, ์ฃผ๋ฌธ ์„ฑ๊ณต/์‹คํŒจ ๋ถ„๊ธฐ ์ฒ˜๋ฆฌ๊นŒ์ง€ ์™„์ „ํ•œ ๊ฒฐ์ œ ํ๋ฆ„์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฐฐ์†ก์ง€ ๊ด€๋ฆฌ์™€ ์ฃผ๋ฌธ ์ถ”์ ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

Toss Payments SDK Zustand react-hook-form
Shopping Cart
Checkout
์ฃผ๋ฌธ ์™„๋ฃŒ

๊ฒฐ์ œ ์„ฑ๊ณต & ๋ฐฐ์†ก ํƒ€์ž„๋ผ์ธ

๊ฒฐ์ œ ์™„๋ฃŒ ํ›„ ๋ฐฐ์†ก ํƒ€์ž„๋ผ์ธ ํ”„๋กœ์„ธ์Šค๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ์ฃผ๋ฌธ ์ƒํƒœ๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ถ”์ ํ•  ์ˆ˜ ์žˆ๋Š” UX๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

Framer Motion Timeline UI
Order Success
์‚ฌ์šฉ์ž ๊ณ„์ •

๋กœ๊ทธ์ธ & ๋งˆ์ดํŽ˜์ด์ง€

JWT ๊ธฐ๋ฐ˜ ์ธ์ฆ ์‹œ์Šคํ…œ (Access/Refresh Token)์œผ๋กœ ์•ˆ์ „ํ•œ ๋กœ๊ทธ์ธ์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋งˆ์ดํŽ˜์ด์ง€์—์„œ ์ฃผ๋ฌธ๋‚ด์—ญ, ๋ฐฐ์†ก์ง€ ๊ด€๋ฆฌ, ๋ฆฌ๋ทฐ ๊ด€๋ฆฌ๋ฅผ ํƒญ ๊ธฐ๋ฐ˜ UI๋กœ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

JWT Auth RBAC Zod Validation
Login Page
My Page
ADMIN DASHBOARD

๊ด€๋ฆฌ์ž ๋Œ€์‹œ๋ณด๋“œ

๋งค์ถœ ๋ถ„์„, ์ƒํ’ˆ CRUD, ์ฟ ํฐ ๋ฐœ๊ธ‰๊นŒ์ง€ โ€” ์šด์˜์— ํ•„์š”ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ๊ด€๋ฆฌ์ž ํŒจ๋„์—์„œ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

๋Œ€์‹œ๋ณด๋“œ

๋งค์ถœ ๋ฉ”ํŠธ๋ฆญ & ์ฐจํŠธ

Recharts๋ฅผ ํ™œ์šฉํ•œ ๋งค์ถœ/์ฃผ๋ฌธ ํ˜„ํ™ฉ ์ฐจํŠธ์™€ ํ•ต์‹ฌ KPI ๋ฉ”ํŠธ๋ฆญ์„ ํ•œ ํ™”๋ฉด์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ๊ธฐ๋ฐ˜ ์˜์‚ฌ๊ฒฐ์ •์„ ์ง€์›ํ•˜๋Š” ๊ด€๋ฆฌ์ž ๋ทฐ์ž…๋‹ˆ๋‹ค.

Recharts TanStack Query
Admin Dashboard
์ƒํ’ˆ ๊ด€๋ฆฌ

์ƒํ’ˆ CRUD & ์ฟ ํฐ ๊ด€๋ฆฌ

์ƒํ’ˆ ๋“ฑ๋ก/์ˆ˜์ •/์‚ญ์ œ, ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ, ์นดํ…Œ๊ณ ๋ฆฌ ๊ด€๋ฆฌ๋ฅผ react-hook-form ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฟ ํฐ ์ƒ์„ฑ/๋ฐœ๊ธ‰/๊ด€๋ฆฌ๋กœ ํ”„๋กœ๋ชจ์…˜ ์šด์˜์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

react-hook-form Zod Image Upload
Admin Products
Admin Coupons
BACKEND ARCHITECTURE

๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค ๋ฐฑ์—”๋“œ

Spring Boot 3.5 + Kotlin ๊ธฐ๋ฐ˜ 3๊ฐœ์˜ ๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค๋กœ ๊ตฌ์„ฑ๋œ ์ด๋ฒคํŠธ ๋“œ๋ฆฌ๋ธ ์•„ํ‚คํ…์ฒ˜์ž…๋‹ˆ๋‹ค.

Client
Next.js 15 Frontend
React 19 + TypeScript
REST API + JWT Auth
Microservices (Spring Boot 3.5 + Kotlin)
Shopping Mall Server
๋ฉ”์ธ API ยท 11๊ฐœ ๋„๋ฉ”์ธ
JPA + QueryDSL
Payment Service
๊ฒฐ์ œ ์ฒ˜๋ฆฌ ยท WebFlux
Hexagonal ยท R2DBC
Inventory Service
์žฌ๊ณ  ๊ด€๋ฆฌ ยท Pessimistic Lock
Hexagonal ยท JPA
Event Streaming
Apache Kafka
3-node KRaft ยท Outbox Pattern ยท DLQ
Infrastructure
PostgreSQL 16
PostGIS ยท JSONB
Redis Cluster
6-node ยท Redisson ยท Cache
Docker Compose
์ปจํ…Œ์ด๋„ˆ ์˜ค์ผ€์ŠคํŠธ๋ ˆ์ด์…˜
๐Ÿš€ Spring Boot 3.5
๐ŸŸฃ Kotlin 1.9
โšก Spring WebFlux
๐Ÿ˜ PostgreSQL 16
๐Ÿ”ด Redis Cluster
๐Ÿ“จ Apache Kafka
๐Ÿ” JWT + OAuth2
๐Ÿ” QueryDSL
๐Ÿ“ฆ R2DBC
๐Ÿณ Docker
๐Ÿ’ณ Toss Payments
โ˜๏ธ Spring Cloud
๐Ÿ›๏ธ

Hexagonal Architecture

Payment/Inventory ์„œ๋น„์Šค์— Port & Adapter ํŒจํ„ด์„ ์ ์šฉํ•˜์—ฌ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ์ธํ”„๋ผ์—์„œ ์™„์ „ํžˆ ๋ถ„๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“ฌ

Transactional Outbox

๊ฒฐ์ œ ์ด๋ฒคํŠธ๋ฅผ DB ํŠธ๋žœ์žญ์…˜๊ณผ ํ•จ๊ป˜ Outbox ํ…Œ์ด๋ธ”์— ์ €์žฅ ํ›„ Kafka๋กœ ๋ฐœํ–‰ํ•˜์—ฌ ๋ฉ”์‹œ์ง€ ์œ ์‹ค์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ”„

Event-Driven + DLQ

Kafka ๊ธฐ๋ฐ˜ ๋น„๋™๊ธฐ ํ†ต์‹ ์œผ๋กœ ์„œ๋น„์Šค ๊ฐ„ ๋Š์Šจํ•œ ๊ฒฐํ•ฉ์„ ์‹คํ˜„ํ•˜๊ณ , Dead Letter Queue๋กœ ์‹คํŒจ ์ด๋ฒคํŠธ๋ฅผ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ณ

Toss Payments ์—ฐ๋™

50+ ์—๋Ÿฌ ์ฝ”๋“œ ๋งคํ•‘, ๋ฉฑ๋“ฑ์„ฑ ํ‚ค, ์ž๋™ ๋ณต๊ตฌ ์Šค์ผ€์ค„๋Ÿฌ(3๋ถ„ ์ฃผ๊ธฐ)๋กœ ๊ฒฐ์ œ ์•ˆ์ •์„ฑ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ”’

Pessimistic Locking

์žฌ๊ณ  ์„œ๋น„์Šค์—์„œ ๋™์‹œ ์ฃผ๋ฌธ ์‹œ ๋ฐ์ดํ„ฐ ์ •ํ•ฉ์„ฑ์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด ๋น„๊ด€์  ์ž ๊ธˆ์„ ์ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.

โšก

Reactive Stack

Payment ์„œ๋น„์Šค๋Š” Spring WebFlux + R2DBC ๊ธฐ๋ฐ˜ ์™„์ „ ๋น„๋™๊ธฐ ๋…ผ๋ธ”๋กœํ‚น์œผ๋กœ ๋†’์€ ์ฒ˜๋ฆฌ๋Ÿ‰์„ ๋‹ฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.

RESPONSIVE DESIGN

๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜•

375px๋ถ€ํ„ฐ 1920px๊นŒ์ง€ ๋ชจ๋“  ๋ทฐํฌํŠธ์—์„œ ์ตœ์ ํ™”๋œ ๋ ˆ์ด์•„์›ƒ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

Mobile Header

๋ชจ๋ฐ”์ผ ๋„ค๋น„๊ฒŒ์ด์…˜

Mobile Products

๋ชจ๋ฐ”์ผ ์ƒํ’ˆ ๋ชฉ๋ก