포트폴리오
웹TOVLAB 자체 구현 ShowcaseFEATURED
MODE HAUS 패션 커머스 Showcase
컬렉션 소개, 카테고리별 상품 탐색, 상품 상세 옵션 선택, 장바구니 담기 UI를 구현한 TOVLAB 자체 제작 패션 커머스 Showcase입니다. 화면의 상품·가격·리뷰 정보는 기능 흐름을 보여 주기 위한 fixture입니다.
프로젝트 화면
PC 화면
2모바일 웹
1주요 기능
컬렉션 소개카테고리 상품 탐색상품 상세 옵션 선택장바구니 담기 UI반응형 화면테마 전환
구축 내용
실제 개발 범위에 포함된 주요 작업입니다.
주요 구현 범위
- 컬렉션 소개와 카테고리별 상품 목록 UI
- 상품 상세의 사이즈·수량 선택과 장바구니 담기 UI
- 모바일 레이아웃과 라이트·다크 테마 전환
기술 스택
Next.js 16 (App Router)React 19TypeScriptTailwind CSS 4React Context APIuseReducerlocalStorageESLint 9
작업 배경과 확인한 문제
- 사용자가 현재 상태와 다음 조치를 확인할 수 있도록 화면을 구성했습니다.
- 화면에 보이는 값은 포트폴리오 시연용 fixture로 분리했습니다.
진행 결과
- 이 항목은 TOVLAB 자체 구현 Showcase입니다. 이미지에 보이는 항목과 수치는 UI와 상태 흐름을 확인하기 위한 포트폴리오 fixture입니다.
우선 적용 범위
- 컬렉션 소개
- 카테고리 상품 탐색
- 상품 상세 옵션 선택
- 장바구니 담기 UI
이후 확장 방향
- 실제 상품·재고 데이터 연동
- 주문·결제 흐름 연결
- 회원과 배송 상태 연동
유사하게 적용할 수 있는 경우
- 상태 확인과 다음 조치 UI가 필요한 업무 화면
- 필터·선택·검토 단계를 가진 웹 서비스
상담 전에 정리하면 좋은 내용
- 확인할 상태와 다음 조치 규칙
- 실제 데이터·권한·연동의 범위
- 모바일에서 우선할 업무 흐름