← 포트폴리오 목록
SSO 통합 쇼핑몰 플랫폼
기존 카페24 UI/UX를 계승한 신규 쇼핑몰 프론트엔드를 Next.js로 구축하고, 크로스 도메인 SSO 통합 회원 인증과 다중 PG 결제 연동까지 반영한 프로젝트입니다.
SSO 크로스도메인 인증 아키텍처 설계JWT Access/Refresh 이원화 토큰 교환 프로토콜을 설계해 두 도메인 간 단일 로그인 세션을 안전하게 공유하는 구조를 구축합니다
동적 옵션 가격 계산 엔진 구현옵션 조합별 실시간 가격 재계산 로직을 설계하며, 옵션 트리 구조와 재고 연동 검증 규칙을 구현합니다
다중 PG 결제 웹훅 동기화 구조 설계포트원 웹훅 이벤트를 idempotent 처리해 주문 상태를 원자적으로 동기화하는 로직을 구현합니다
Overview
프로젝트 개요
기존 카페24 UI/UX를 계승한 신규 쇼핑몰 프론트엔드를 Next.js로 구축하고, 크로스 도메인 SSO 통합 회원 인증과 다중 PG 결제 연동까지 반영한 프로젝트입니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
SSO 토큰 만료·재발급 타이밍이 기계장터와 쇼핑몰 두 도메인에서 어긋나지 않
동기화 전략 설계 필요
카페24 회원 데이터의 비밀번호 해시 방식이 신규 시스템과 달라 안전한 재해시·이관 전략
다중 PG사(신용카드/계좌이체/네이버페이/카카오페이) 웹훅 응답 포맷 차이를 흡수하는 통합 인터페이스 설계
상품 옵션 조합에 따른 동적 가격·재고 검증 로직에서 품절 조합 등 예외 케이스 처리
구현 내용
핵심 기능 상세
핵심 기능 1
쇼핑몰 메인 & 카테고리 탐색
접속과 동시에 추천 상품, 배너, 카테고리를 확인하고 검색 자동완성으로 원하는 상품을 빠르게 찾을 수 있는 메인 화면입니다
핵심 기능 2
SSO 통합 마이페이지
기계장터 플랫폼과 신규 쇼핑몰을 단일 계정으로 오가며 주문 조회, 배송 상태, 회원정보를 관리할 수 있는 마이페이지입니다
핵심 기능 3
상품 상세 & 동적 옵션가
이미지 갤러리, 옵션 선택, 리뷰를 확인하고 옵션 조합에 따라 실시간으로 가격이 재계산되는 상품 상세 화면입니다
핵심 기능 4
장바구니 & 다중 PG 결제
장바구니 수량 변경, 배송지 관리(우편번호 API 연동), 신용카드·계좌이체·네이버페이·카카오페이 결제까지 이어지는 주문 흐름입니다
구현 과정
프로젝트 진행 단계
STEP 1
요구사항 분석 및 SSO 연동 설계
카페24 UI/UX 요구사항 분석, SSO 크로스도메인 인증 흐름 설계, PostgreSQL 테이블 26개 정의
STEP 2
회원/인증 시스템 & 마이그레이션 도구 개발
JWT 이원화 토큰 교환 API, 카페24 회원 데이터 이관 스크립트, Express API 30여개 엔드포인트 구현
STEP 3
쇼핑몰 프론트엔드 개발
Next.js 기반 메인/카테고리/상품상세/장바구니 화면, ISR 적용 SEO 최적화
STEP 4
다중 PG 결제 연동 & 웹훅 처리
포트원 연동 4종 결제수단 모듈, idempotent 웹훅 기반 주문 상태 동기화
STEP 5
통합 테스트 & 반응형 최적화
SSO 인증 흐름 통합 테스트, PC/태블릿/모바일 반응형 검증, 크로스 브라우저 테스트
프로젝트 성과
주요 성과
SSO 크로스도메인 인증 아키텍처 설계JWT Access/Refresh 이원화 토큰 교환 프로토콜을 설계해 두 도메인 간 단일 로그인 세션을 안전하게 공유하는 구조를 구축합니다
동적 옵션 가격 계산 엔진 구현옵션 조합별 실시간 가격 재계산 로직을 설계하며, 옵션 트리 구조와 재고 연동 검증 규칙을 구현합니다
다중 PG 결제 웹훅 동기화 구조 설계포트원 웹훅 이벤트를 idempotent 처리해 주문 상태를 원자적으로 동기화하는 로직을 구현합니다
카페24 회원 마이그레이션 파이프라인 구축배치 스크립트로 회원 정보 검증·중복 제거·비밀번호 재해시를 수행하는 이관 파이프라인을 설계합니다
Review
기술적 주안점
- 기존 카페24 UI 구조를 계승하면서 Next.js ISR로 SEO와 렌더링 속도를 함께 고려하는 메인 페이지 구조를 설계합니다
- JWT 이원화 토큰과 도메인 간 교환 엔드포인트를 결합해 기계장터·쇼핑몰 두 플랫폼을 단일 계정으로 연결하는 인증 구조를 구현합니다
- 옵션 조합별 가격 매트릭스와 서버 재고 검증을 결합해 품절·오류 조합을 사전에 차단하는 상품 상세 구조를 설계합니다
