1. 프로젝트 명 : 6 CAN DO IT

1-1. 소개

• 한 줄 정리 : 취미 공유 뉴스 피드 사이트 만들기
• 포함할 내용:
  1. 오늘의 취미활동을 자랑하거나 취미에 관한 정보 공유
  2. 카테고리 별 포스팅 분류, 좋아요 별 포스팅 정렬
  3. 사진 업로드와 글 작성이 가능한 피드
  4. 로그인 여부에 따른 달라지는 페이지

1-2. 구성:

• Home
  • 모든 게시물 조회
  • 내가 좋아요한 피드 페이지로 동적 라우팅
• Category
  • 카테고리 별 피드를 보기 위한 페이지
  • 카테고리를 쿼리스트링에 담아 Home으로 전달?
• (로그인 시)CreateFeed - 새 피드 작성 페이지
• Sign-in
  • 로그인 페이지
  • 회원가입 페이지로 가는 링크 추가
• Sign-up
  • 회원가입 페이지
  • 로그인 페이지로 가는 링크 추가
• (로그인 시)MyProfile
  • 자기 프로필 페이지
  • 로그인한 사용자의 개인 정보 표시 및 수정
• AboutUs - 사이트 소개 페이지
• NavigationBar - 페이지 이동
  • (로그아웃 시)로그인
  • 카테고리
  • 팀소개
  • (로그인 시)로그아웃
  • (로그인 시)내가 좋아요한 피드
  • (로그인 시)내가 쓴 게시물

1-3. 기능:

• 피드 클릭 시 댓글 추가 가능
• 피드 조회수, 댓글 수 조회 및 좋아요 누르기 가능
• "+" 버튼을 통해 새 피드 작성
• Supabase를 활용한 CRUD
• RRD를 통한 페이지 라우팅
• Auth 유무에 따라 유저가 접근할 수 있는 페이지 구분
• 네비게이션 바 토글
• (추가기능) MORE+ 버튼을 통한 무한스크롤 구현
• (추가기능) 회원가입시 설정한 관심 카테고리를 토대로 카테고리 페이지 만들기

2. Code Convention

2-1. 프로젝트 구조

/project-root
 ├── src/
 │   ├── components/   # 재사용 가능한 UI 컴포넌트
 │   ├── pages/        # 개별 페이지 컴포넌트
 │   ├── hooks/        # 커스텀 훅
 │   ├── store/        # 상태 관리 관련 파일 (Redux, Context 등)
 │   ├── utils/        # 유틸리티 함수
 │   ├── assets/       # 정적 파일 (이미지, 아이콘 등)
 │   ├── styles/       # 글로벌 스타일 및 테마
 │   ├── shared/       # 공통 모듈 (예: Router, API 요청)
 │   ├── App.tsx       # 최상위 컴포넌트
 │   ├── main.tsx      # 진입점
 ├── public/           # 정적 리소스
 ├── .eslintrc.js      # ESLint 설정
 ├── .prettierrc       # Prettier 설정
 ├── package.json      # 패키지 설정

2-2. 파일 및 폴더 naming

• 폴더명 : camelCase 사용
• 파일명 : PascalCase 사용

2-3. 코드 포맷팅

• 탭 너비: 2 spaces
• 문장 끝 세미콜론(;): 사용
• 문자열: 작은따옴표(') 사용
• ESLint & Prettier 적용하여 자동 정렬

2-4. CSS 포맷

• styled components 사용
  • 컴포넌트 앞에 접두어 styled 붙이기!

2-5. 상태관리

상태관리 사용 라이브러리 회의

contextAPI 로 결정

2-6. 모듈

• 항상 import와 export를 이용한다.

2-7. 커밋 컨벤션

이모지 사용

• ✨feat: 새로운 기능 추가
• 🩹fix: 버그 수정
• 📝docs: 문서 수정
• 💄style: CSS 설정
• ♻️refactor: 코드 리팩토링
• ✅test: 테스트 코드 추가 또는 수정
• 👷chore: 빌드 및 기타 작업

2-8. 브랜치 컨벤션

• main: 배포 브랜치
• develop: 개발 브랜치
• feature/기능명: 기능 개발 브랜치 (예: feature/login, feature/dashboard)
• bugfix/버그명: 버그 수정 브랜치 (예: bugfix/navbar-crash)

2-9. 사용 라이브러리

• UI 라이브러리

2-10. 패키지 매니저

• pnpm ⇒ 회의로 결정!

1. 기존 패키지 매니저를 정리해주세요. (프로젝트 폴더에서 node_modules와 yarn.lock 이 있다면 삭제

rm -rf node_modules yarn.lock

1. pnpm 설치

npm install -g pnpm

1. 패키지 설치 ( 클론한 프로젝트에서 )

pnpm install

1. 개발서버 실행

pnpm dev  # Vite 사용 시
pnpm start  # CRA 사용 시

1. 새로운 패키지 추가할 경우

pnpm add 패키지명

기타

• 주석 : 주요 로직 설명할 때만 사용
• 코드리뷰 : PR 작성 후 최소 2명의 팀원이 코드 리뷰 진행 후 merge

3. 와이어 프레임

Home 및 MyProfile	CreateFeed 및 Category

AboutUs	로그인 및 회원가입

+같이 작업하는 모습