Next.js E-Commerce App & Admin Panel UI Design Tutorial | Shopping App Design
- Next.js를 사용하여 이커머스 애플리케이션 UI 디자인 튜토리얼을 진행합니다. 🛍️
- 홈페이지에는 추천 상품이 표시되며, 카테고리, 색상, 사이즈 변경이 가능합니다. 🎨
- 상품을 장바구니에 추가하면 상태 관리 도구를 사용하여 장바구니 아이콘의 숫자를 업데이트합니다. 🛒
- 목록 페이지에서는 카테고리 변경 및 정렬 옵션을 제공하며, 필터는 URL에 저장됩니다. 🔗
- 단일 상품 페이지에서는 타입 변경 및 수량 증가가 가능하며, 장바구니에 추가할 수 있습니다. ➕
- 장바구니 페이지에서는 상품 목록, 총 가격 확인, 상품 제거가 가능하며, 배송 및 결제 단계를 제공합니다. 💳
- 관리자 패널은 기존 채팅 튜토리얼의 디자인을 활용하여 사용자, 상품, 주문 관리 기능을 추가합니다. ⚙️
- 관리자 패널에서 사이즈 추가 및 색상별 상품 이미지 업로드가 가능하며, 백엔드 연결은 다음 튜토리얼에서 진행합니다. 📡
- 튜토리얼에 사용될 이미지 및 에셋이 포함된 GitHub 저장소를 제공하며, Next.js 버전 문제 방지를 위해 동일한 라이브러리 버전을 사용합니다. 📦
- 반응형 디자인을 위해 화면 크기에 따라 컨테이너 크기를 조정하고, Navbar와 Footer 컴포넌트를 생성합니다. 📱
- Navbar는 로고, 검색 바, 아이콘, 로그인 링크로 구성되며, Lucid 아이콘 라이브러리를 사용합니다. 🔍
- Footer는 로고, 링크 섹션, 추가 링크 섹션으로 구성되며, 반응형 디자인을 적용합니다. 📝
- 홈페이지에는 추천 상품 이미지를 추가하고, 상품 목록 컴포넌트를 생성하여 임시 데이터를 사용합니다. 🖼️