Makeup Product

내가 원하는 화장품을 쉽게 찾을 수 있는 웹 서비스

배포 url: https://makeup-product.vercel.app/
상품 타입, 카테고리, 태그 별로 상품을 찾아볼 수 있습니다.

기술스택

Frameworks: React 18, Next.js 13
Languages: TypeScript
CSS Framework: Tailwind CSS
React UI Tool: MUI
State Management: React Query, Zustand
Code Formating: Prettier, ESLint
Package Manager: Yarn

프로젝트 진행 단계

1단계: 기본 레이아웃 구현

헤더
GNB (Global Navigation Bar)
- 상품 타입
SNB (Side Navigation Bar)
- 상품 필터 ( 카테고리, 태그 )
FilterChipBox
- 사용자가 선택한 상품 필터 ( 리셋, 각각의 필터 삭제 )
본문
- 상품 리스트 ( 상품 이미지, 이름, 브랜드, 카테고리, 가격 )

2단계: API 연동 및 데이터 표시

조회 API 연동
- 전체 상품 리스트
- 상품 필터링된 리스트 ( 타입별, 카테고리별, 태그별 )
Skeleton UI 추가
- 상품이 많아 렌더링되는데 시간이 오래걸리는 문제가 발생하여 사용자 경험 향상을 위해 적용
Floating Up Button 추가
- 상품이 많아 스크롤하는 데 불편함이 있어서 적용
- 누르면 맨 위로 스크롤되게끔 구현

3단계: 반응형 디자인 구현

반응형 디자인 구현
- GNB
- SNB
- 본문
px -> rem 단위로 변경, media query 적용

4단계: 상세 페이지 및 정적 생성

Dynamic Route 사용
- Id별 상품 상세 페이지 구현
- Type별 상품 필터링 페이지 구현
Next.js의 정적 생성 기능 사용

프로젝트 실행 방법

Env 세팅 root directory

NEXT_PUBLIC_BASE_URL =

프로젝트 실행

# 필요한 모듈 설치
yarn

# 프로젝트 실행
yarn dev

gyeong3un2/makeup-product