본문바로가기
Outfit Fashion Store
AI 가상 피팅 이커머스 플랫폼
Outfit Fashion Store
AI 가상 피팅 이커머스 플랫폼
Outfit Fashion Store
Outfit Fashion Store
AI 가상 피팅과 스타일 공유 이커머스 플랫폼
  • Next.js 15
  • NestJS
  • TypeORM
  • PostgreSQL
  • Toss Payments
  • OAuth 2.0
  • Project
    Outfit Fashion Store
  • Period
    2025 (진행중)
  • Type
    Fullstack E-commerce Platform
  • Role
    풀스택 개발 (Frontend + Backend)
프로젝트 유형
Fullstack / 여성 패션 이커머스 플랫폼
Frontend
Next.js 15, TypeScript, Tailwind CSS, Radix UI, React Hook Form
Backend
NestJS, TypeORM, PostgreSQL, Passport.js, JWT
결제 시스템
Toss Payments SDK 연동 (신용카드, 무통장입금)
인증 시스템
OAuth 2.0 SSO (Google, Naver, Kakao) + JWT + httpOnly Cookie
핵심 성과
15개 엔티티, 41개 페이지, 실결제 연동 풀스택 플랫폼 구축
Outfit Fashion Store - 프로젝트 개요
Project
Overview

사용자가 AI를 통해 가상으로 옷을 입어보고, 구매 후 Outfitgram에서 자신의 스타일을 공유할 수 있는 여성 패션 이커머스 플랫폼입니다.

기존 온라인 쇼핑의 "입어보지 않으면 모른다"는 불편함을 해결하고, 소셜 로그인부터 실결제까지 실서비스 수준의 풀스택 시스템을 구현했습니다.

Outfit Fashion Store - 핵심 기능
Key
Features

• SSO 소셜 로그인: Google, Naver, Kakao OAuth 2.0
• JWT 인증: httpOnly 쿠키 + Token Rotation
• Toss Payments: 신용카드, 무통장입금 결제 연동
• Outfitgram: 스타일 공유 SNS 커뮤니티
• AI 피팅룸: 가상 의류 시착 기능
• 커뮤니티: 공지, 이벤트, Q&A, 리뷰 게시판

Challenge 1 | JWT 토큰 보안 강화

문제: localStorage에 토큰 저장 시 XSS 공격에 취약하여 보안 강화가 필요했습니다.

해결: Access/Refresh Token 모두 httpOnly 쿠키에 저장하고, secure: true, sameSite: 'strict' 옵션으로 CSRF를 방지했습니다. Token Rotation으로 Refresh 시 새 토큰을 발급합니다.

Challenge 2 | OAuth 콜백 처리 통합

문제: Google, Naver, Kakao 3개 소셜 로그인의 콜백 처리 로직이 중복되어 유지보수가 어려웠습니다.

해결: 동적 라우트 [provider]를 활용한 통합 콜백 페이지를 구현하고, 백엔드에서 provider별 Passport 전략 패턴을 적용하여 코드를 정규화했습니다.

Challenge 3 | Toss Payments 결제 금액 불일치

문제: PostgreSQL DECIMAL 타입이 string으로 반환되어 결제 금액 비교가 실패하는 문제가 있었습니다.

해결: Number() 변환 후 비교하도록 수정하고, 프론트엔드/백엔드 금액 계산 로직을 통일했습니다. 상세 로깅 추가로 디버깅 용이성을 확보했습니다.

What I Learned | 배운 점

• 풀스택 아키텍처: Next.js App Router + NestJS 모듈 기반 책임 분리
• OAuth 2.0: 소셜 로그인 프로토콜의 동작 원리 및 구현 방법
• 결제 시스템: Toss Payments API 통합과 트랜잭션 상태 관리
• JWT 보안: httpOnly 쿠키, Token Rotation 베스트 프랙티스

Back to Main
거인소프트 대표작을 만나보세요.