PREMIUMDESKSET
단순한 쇼핑몰 모형을 넘어선 고성능 프론트엔드 아키텍처.
React 18 + Vite 기반으로 설계된 고성능 엔지니어링 중심의 SPA 웹 플랫폼, 데스크셋.
REAL-TIME
CHECKOUT
토스페이먼츠 v2 공식 SDK 연동을 완료했습니다.
고도의 샌드박스 보안 설계로 개인 정보와 인증 정보를 격리하여 실제 카드 결제와 승인/실패 콜백을 정밀하게 트래킹합니다.
Toss Payments SDK v2
카드/가상계좌 결제창 실시간 호출 및 처리 모듈 완벽 탑재
Public Sandbox Credentials
보안 인증 자격증명을 완전 가상화하여 안전하고 견고한 결제망 테스트 완료
완성형 주문 상태 동기화
결제 승인 결과 및 콜백 데이터를 파싱하여 실시간으로 주문 성공 처리 흐름 검증
HIGH-END
ENGINEERING
3대 간편 로그인(네이버, 카카오, 구글) 연동하고 데이터를 저장하지 않는 구조를 구현했습니다.
외부 SDK의 기능적 한계와 브라우저 렌더링 부작용을 극복하며 완성한 차세대 프론트엔드
엔지니어링
핵심 성과입니다.
3대 간편 로그인 & 휘발성 세션
Google JWT 디코딩, Kakao 및 Naver SDK 완벽 통합 및 실시간 아바타 매핑. 특히 보안 극대화를 위해 의도적으로 백엔드 데이터베이스 연동을 배제하고, 세션 종료 및 캐시 소멸 시 사용자 식별 정보의 흔적이 전혀 남지 않는 고보안성 휘발성(Ephemeral) 세션을 실현했습니다.
useRef 기반 RouteSyncer & Zero-Flicker 라우팅
React 상태 렌더링 업데이트와 브라우저 History API의 상호 트리거로 인한 무한 루프 경쟁 상태(Race Condition)를 useRef 참조 동기화 설계로 완벽히 해결하여, 단 1프레임의 깜빡임이나 딜레이도 발생하지 않는 완전무결한 Zero-Flicker 주소 바인딩을 달성했습니다.
Naver SDK 글로벌 은닉형 컨테이너
네이버 로그인 SDK 마운트 시점의 React 가상 DOM 불일치로 초래되는 런타임 Null 참조 크래시를 방어하기 위해, React 라이프사이클 외부에 전역 은닉형 컨테이너(Hidden Global Container) 우회 프록시 아키텍처를 구축하여 100%의 가용성을 확보했습니다.
3-TIER
DASHBOARD
사용자의 역할(Consumer, Seller, Admin)에 맞춰 인터페이스와 권한 장벽을 완벽하게 제어합니다.
소비자 페이지
데스크 매트 등 상품 필터링, 장바구니 관리, Toss 실시간 결제, 1:1 고객 문의, 리뷰 작성
입점 파트너 포털
네온 스타일 대시보드 매출 차트 분석, 상품 등록/관리, 입점 승인 추적
최상위 관리자 포털
독립적인 로그인 장벽 우회 보호, 회원 상태 복구/차단, 입점 파트너 승인 심사 및 전체 통계 제어
URL
CLEAN-UP
브라우저 History API를 전역 라우터와 연동하여 독립적인 주소 공간을 관리합니다.
독립 로그인 차단 벽 (Security Interceptor)
주소창에 직접 `/admin`을 기입하여 접근 시 인증이 만료되었거나 비인증된 유저를 즉각 강제 퇴출
실시간 URL 클린업 동기화
로그아웃 또는 복귀 시 불필요한 URL 잔여 파라미터나 상태값을 실시간으로 제거하여 깔끔한 주소 라우팅 보장