ReFitLab Frontend

🎯 Git Convention

• 🎉 Start: Start New Project [:tada]
• ✨ Feat: 새로운 기능을 추가 [:sparkles]
• 🐛 Fix: 버그 수정 [:bug]
• 🎨 Design: CSS 등 사용자 UI 디자인 변경 [:art]
• ♻️ Refactor: 코드 리팩토링 [:recycle]
• 🔧 Settings: Changing configuration files [:wrench]
• 🗃️ Comment: 필요한 주석 추가 및 변경 [:card_file_box]
• ➕ Dependency/Plugin: Add a dependency/plugin [:heavy_plus_sign]
• 📝 Docs: 문서 수정 [:memo]
• 🔀 Merge: Merge branches [:twisted_rightwards_arrows:]
• 🚀 Deploy: Deploying stuff [:rocket]
• 🚚 Rename: 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우 [:truck]
• 🔥 Remove: 파일을 삭제하는 작업만 수행한 경우 [:fire]
• ⏪️ Revert: 전 버전으로 롤백 [:rewind]

기술 스택

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• State: Zustand + TanStack Query
• Forms: React Hook Form + Zod

폴더 구조

src/
├── app/                    # 페이지 (Next.js App Router)
│   └── [feature]/         # 기능별 페이지 (예: home, my)
│       ├── (api)/         # API 로직
│       ├── (component)/   # 페이지 전용 컴포넌트
│       ├── (hook)/        # 페이지 전용 훅
│       ├── (state)/       # 페이지 전용 상태
│       ├── (util)/        # 페이지 전용 유틸
│       ├── (abc)/         # 기타 페이지 전용 무언가
│       └── page.tsx       # 페이지 컴포넌트
│       └── layout.tsx     # 레이아웃 컴포넌트 (optional)
├── assets/                # 정적 에셋
│   ├── icon/             # 아이콘 (svg만)
│   └── image/            # 기타 이미지
└── shared/               # 공통 코드 모음
    ├── components/       # 다른 페이지에서 공통으로 사용되는 재사용 컴포넌트
    ├── hooks/           # 공통 훅
    ├── libs/            # 라이브러리 관련 코드
    ├── stores/          # 전역 상태 관리 (Zustand)
    ├── types/           # 전역 타입 정의
    └── utils/           # 기타 유틸리티 함수

개발 규칙

파일 배치

• 페이지: src/app/[feature]/
• 페이지 전용 코드: src/app/[feature]/(폴더)/
• 재사용 코드: src/shared/
• 정적 에셋 파일: src/assets/

네이밍

• 페이지: PascalCase.tsx + export default

  // HomePage.tsx
  export default function HomePage() {
    return <main>{/* ... 페이지 내용 ... */}</main>;
  }

• 컴포넌트: PascalCase.tsx + export const

  // Button.tsx
  export const Button = ({ children, ...props }) => {
    // ... 컴포넌트 로직 ...
    return <button {...props}>{children}</button>;
  };

• 훅: useXxx.ts

  // useAuth.ts
  export const useAuth = () => {
    // ... 훅 로직 ...
    return { user, login, logout };
  };

• 폴더: snake_case

  user_profile/
  auth_service/
  product_list/
  

• 기타 함수: kebab-case.ts

  // format-date.ts
  export const formatDate = (date: Date) => {
    // ... 함수 로직 ...
  };

컴포넌트 구조

• 페이지 최상위 태그: <main> 사용 필수

임포트

• 절대 경로: @/shared/components/Button (@ alias 우선 사용)
• 정적 에셋: import Icon from '@/assets/icon/logo.svg' (PascalCase로 임포트)

API 연동

API 타입별 사용법

• publicAPI: 인증이 필요 없는 공개 API (회원가입, 로그인 등)
• privateAPI: JWT 토큰 인증이 필요한 API (사용자 정보, 개인 데이터 등)
• internalAPI: Next.js API Route 호출 (/api/* 경로)

// 사용 예시
import { publicAPI, privateAPI, internalAPI } from "@/shared/api/apiInstance";

// 공개 API
publicAPI.post("/auth/login", data);

// 프라이빗 API (자동으로 Bearer token 추가)
privateAPI.get("/user/profile");

// 내부 API
internalAPI.post("/upload", formData);

개발 프로세스

1. 브랜치 생성: feature/기능명 또는 fix/버그명
2. 개발 및 커밋: 위 커밋 규칙에 따라 커밋
3. 푸시: 해당 브랜치로 푸시
4. PR 생성: (해당 브랜치) → develop PR 생성
5. CI 통과: ESLint, Prettier 검사 통과 확인
6. 셀프 머지: 본인이 직접 머지 후 알림
7. 배포: develop → main PR로 CI/CD 거쳐 프로덕션 배포