프리미엄 욕실용품 전문몰

첫 진입 시 제품 소개 영상이 자동 재생되는 히어로, 상단 내비게이션, 고객 리뷰·인스타그램 피드 슬라이더, 우측 하단 고정 실시간 상담 위젯을 한 화면에 구성합니다.

• Intersection Observer로 히어로 영상 뷰포트 진입 시점에만 재생을 트리거해 초기 로딩 부하를 분리하는 구조를 설계합니다
• Swiper 기반 리뷰·SNS 캐러셀을 구현하고 터치 스와이프와 자동 슬라이드 전환을 함께 적용합니다
• Socket.io로 실시간 양방향 채팅 채널을 구현하고, 페이지 전환 간에도 세션이 유지되는 플로팅 위젯 상태 관리를 설계합니다

히어로 영상·리뷰 슬라이더·실시간 상담 위젯을 하나의 홈 화면에서 독립된 컴포넌트로 조합하는 구조를 설계하여, 각 요소가 서로의 렌더링을 막지 않도록 구현합니다.

제품 정보·사양·이미지 갤러리와 함께, 발주사가 직접 업로드한 사용 방법 콘텐츠(영상·이미지)를 렌더링하는 상세 페이지를 구현합니다.

• 이미지 갤러리 컴포넌트에 썸네일-메인 이미지 동기 스크롤과 모바일 핀치 줌 제스처를 적용합니다
• 사용법 콘텐츠(영상·이미지·텍스트 혼합)를 어드민에서 입력한 블록 데이터 그대로 렌더링하는 동적 콘텐츠 조립 구조를 설계합니다
• 제품 사양 정보를 구조화된 스펙 테이블 컴포넌트로 재사용 가능하게 설계합니다

발주사가 어드민에서 직접 입력한 사용법 콘텐츠를 프론트엔드가 스키마 기반으로 조립·렌더링하는 구조를 구현하여, 콘텐츠 변경 시 코드 수정 없이 즉시 반영되도록 설계합니다.

장바구니 담기부터 주문 정보 입력, 포트원 연동 온라인 결제까지의 흐름을 구현합니다.

• 장바구니 상태를 Zustand로 관리하고 로컬 스토리지 영속화 + 서버 세션 동기화 로직을 설계합니다
• 포트원 결제 SDK 연동 후 결제 승인 webhook을 서버에서 재검증하는 이중 확인 구조를 구현합니다
• 결제 실패·타임아웃 시 주문 상태를 pending으로 유지하고 재시도 큐에 등록하는 흐름을 설계합니다

포트원 결제 SDK와 서버 측 webhook 검증을 결합한 이중 확인 구조를 구현하여, 클라이언트 응답만으로 결제 완료를 확정하지 않는 안전한 결제 플로우를 설계합니다.

발주사가 직접 상품 정보·이미지·사용법 콘텐츠를 추가·수정·삭제하는 관리자 CRUD 화면을 구현합니다.

• React Hook Form + Zod로 상품 등록/수정 폼의 클라이언트·서버 이중 유효성 검증을 구현합니다
• 이미지 업로드는 Multer로 서버에 수신 후 리사이징하여 저장하는 파이프라인을 설계합니다
• 상품 테이블을 카테고리/옵션 확장을 고려한 정규화된 PostgreSQL 스키마로 설계합니다

단일 상품 CRUD이지만 카테고리·옵션 테이블을 분리한 정규화 스키마로 설계하여, 이후 다품목 확장 시 스키마 변경 없이 데이터만 추가되는 구조를 구현합니다.