FE9 Sprint Mission

소개

이 프로젝트는 Next.js Page Router 기반의 커뮤니티 및 중고마켓 플랫폼입니다. 사용자들은 게시글을 작성하고, 상품을 등록하며, 댓글과 좋아요 기능을 통해 상호작용할 수 있습니다.

주요 기능

커뮤니티

• 게시글 CRUD
• 댓글 시스템
• 좋아요 기능
• 베스트 게시글
• 실시간 검색
• 정렬 기능 (최신순/인기순)

중고마켓

• 상품 등록/수정/삭제
• 상품 문의
• 찜하기 기능
• 베스트 상품
• 검색 및 정렬

기술 스택

핵심 의존성

상태 관리 & API

폼 & 유효성 검증

UI/UX

유틸리티

프로젝트 설정

환경 설정

1. 의존성 설치:

npm install

2. 개발 서버 실행:

npm run dev

3. 프로덕션 빌드:

npm run build

4. 프로덕션 서버 실행:

npm run start

주요 설정 파일

TailwindCSS (tailwind.config.ts)

• 커스텀 색상 및 스페이싱
• Pretendard 폰트 설정
• 반응형 디자인 지원

Next.js (next.config.mjs)

• 이미지 최적화 설정
• SVG 파일 처리
• Node.js 모듈 설정

TypeScript (tsconfig.json)

• 엄격한 타입 검사
• 절대 경로 설정
• Next.js 타입 지원

미들웨어

• 인증 보호
• API 라우트 보호
• 이미지 프록시 처리

폴더 구조

src/
├── components/
│   ├── Layout/
│   ├── UI/
│   │   ├── community/
│   │   ├── item/
│   │   └── comment/
├── hooks/
├── pages/
├── store/
├── types/
└── utils/

개발 가이드

컴포넌트 작성

• 재사용 가능한 UI 컴포넌트는 components/UI 폴더에 위치
• 레이아웃 관련 컴포넌트는 components/Layout 폴더에 위치
• Props 타입은 명시적으로 정의

상태 관리

• 전역 상태는 Jotai 사용
• 서버 상태는 React Query 사용
• 폼 상태는 React Hook Form 사용

스타일링

• TailwindCSS 클래스 사용
• 반응형 디자인 적용
• tailwind-merge로 클래스 충돌 방지

참고 문서

• Next.js 문서
• React 문서
• TailwindCSS 문서

배포

이 프로젝트는 Vercel Platform을 통해 쉽게 배포할 수 있습니다.