5ot-Next

이 프로젝트는 과거 팀 프로젝트 5ot을 Next.js 기반으로 재구성한 프로젝트입니다.

• 기존 프로젝트는 Express를 기반으로 서버를 구동하고, views 라우터를 이용해 화면을 렌더링하는 방식이었으며 HTML, CSS, JavaScript만을 사용하여 프론트엔드를 구성했습니다.
• 이미지 저장 방식 등의 문제를 비롯해 여러 개선점이 발견되었고, 보다 프론트엔드 중심적인 프로젝트로 새롭게 만들고자 했습니다.
• 현재 Next.js와 TypeScript를 학습 중이며, 이를 활용하여 프로젝트를 발전시키는 것을 목표로 하고 있습니다.

주요 기술 스택

• Next.js (App Router, Server Actions)
• TypeScript
• TanStack Query (데이터 페칭/캐싱)
• Tailwind CSS
• React-Hook-Form (폼 구성)
• Zod (폼 검증)
• Sonner (toast 알림)
• Supabase (DB, 인증, 스토리지)

주요 기능

1. 사용자 및 관리자 기능

• 사용자 인증: 회원 가입, 로그인, 회원 탈퇴 기능을 지원합니다.
• 마이페이지:
  • 사용자
    • 자신의 주문을 조회, 수정, 삭제할 수 있습니다.
    • 자신의 프로필 정보를 수정할 수 있습니다.
  • 관리자
    • 카테고리를 추가하거나 삭제할 수 있고, 각 카테고리별 제품 목록을 조회할 수 있습니다.
    • 제품을 추가, 수정, 삭제할 수 있습니다.
    • 모든 사용자의 주문을 조회, 수정, 삭제할 수 있습니다.

2. 쇼핑몰 기능

• 제품 조회:
  • 화면 좌측 카테고리를 클릭하면 카테고리 별 제품을 조회할 수 있으며 페이지네이션이 적용되어 있어 한 페이지 당 8개씩 제품을 조회할 수 있습니다.
  • 제품을 클릭하면 제품의 상세 정보 페이지로 이동되며, 제품을 장바구니에 추가하거나 구매할 수 있습니다. 장바구니 데이터는 전역 상태로 관리되어 헤더에서 실시간으로 확인 가능합니다.
• 제품 검색: 상단의 검색창을 이용하여 제품을 검색할 수 있습니다.
• 제품 구매: 제품을 바로 구매하거나 장바구니 내 일부 제품만 선택하여 구매할 수 있으며, 배송 정보 입력 폼이 제공됩니다 (결제 시스템은 미구현).
• 리뷰 작성:
  • 사용자는 평점과 함께 제품 리뷰를 작성할 수 있습니다.
  • 작성한 리뷰는 본인 또는 관리자만 수정 및 삭제할 수 있습니다.

3. UI/UX

• 메인 페이지에는 이미지 슬라이드가 상단에 배치되어 시각적 흥미를 유도하며, 하단에는 새로 추가된 제품 4개가 자동으로 렌더링됩니다.
• 사용자 인증, 카테고리 / 제품 / 리뷰 관리 등 비동기 작업의 결과는 우측 하단에 알림 형태로 표시되어 사용자에게 즉각적인 피드백을 제공합니다.
• Tanstack Query를 통해 데이터 로딩 중에는 Skeleton UI를 제공하여 사용자에게 시각적인 로딩 상태를 알립니다.

폴더 구조

src/
  actions/         # 공통 액션(이미지 저장)
  components/      # 공통 UI 컴포넌트
  app/             # Next.js 라우트(페이지)
  features/        # 기능 별 폴더(인증, 제품, 리뷰, 카테고리 등)
  hooks/           # 공통적으로 사용되는 hooks
  lib/             # 유틸리티
  store/           # 전역 상태
  types/           # 타입 정의
  utils/           # supabase 클라이언트 생성

개발/실행 방법

1. 환경 변수 설정
   .env.local 파일에 Supabase 관련 키 등 환경 변수 입력

2. 의존성 설치

   npm install
   

3. 개발 서버 실행

   npm run dev
   

4. 브라우저에서 http://localhost:3000 접속