이 문서에 대해
Klimt 플랫폼 Phase 1(기초·MVP) 단계에서의 인프라·레이아웃·상품·카트 흐름을 정리한 작업 로그입니다. 이후 Phase 2·3 문서와 이어서 읽으면 전체 그림이 잡힙니다.
Phase 1: Foundation & Core Features
Initial platform architecture and MVP development
Project Setup & Infrastructure
- Set up Next.js 13 with App Router → migrated to Pages Router for production stability
- Configured Tailwind CSS theming with custom color system and responsive breakpoints
- Implemented i18next multi-language support with 4 locales (en, ko, zh, ja)
- Set up ESLint, TypeScript strict mode, and automated code formatting
- Integrated Google Fonts (Noto Sans KR) and custom typography system
- Built responsive layout system (mobile-first, max-width 500px on desktop)
Layout & Navigation System
- Developed global layout architecture with Header, Footer, and Bottom Navigator
- Built draggable menu system with swipe gestures for mobile UX
- Created recentlyViewed product tracking with localStorage persistence
- Implemented hover widgets and quick menu floating components
- Designed breadcrumb navigation with locale-aware routing
Store Location Pages
- Built interactive Kakao Map integration for physical store locations
- Created store introduction pages (Insadong, COEX) with responsive layouts
- Integrated Twitter feed widget to display latest store tweets
- Implemented business hours, directions, and multi-store information display
Product List & Catalog
- Built product listing page with grid/list view toggle
- Implemented category navigation with 2-depth hierarchy and dynamic loading
- Created infinite scroll pagination with intersection observer
- Built advanced filtering: sorting (popularity, price, newest), pre-order, out-of-stock toggle
- Developed product card component with image lazy loading and skeleton states
- Added cart quantity badges and real-time cart sync
Shopping Cart & Purchase Flow
- Built add-to-cart modal with size/option selection
- Implemented cart success modal with "Continue Shopping" / "Go to Cart" options
- Created out-of-stock notification request feature
- Built cart item counter with badge component in navigation
마무리
- 이 문서는 초기 아키텍처와 핵심 사용자 흐름에 초점을 둔 기록입니다. 차트·리뷰 고도화 등은
work_2024이후 문서를 참고하세요. - 기술 선택(라우터, i18n 등)은 당시 안정성·팀 컨텍스트에 따른 결정이었음을 염두에 두면 좋습니다.