1. 코딩 컨벤션

1.1 네이밍 규칙

• 파일명

  • 컴포넌트: PascalCase (예: UserProfile.tsx)
  • 유틸리티: camelCase (예: parseDate.ts)
  • 상수파일: UPPER_SNAKE_CASE (예: API_ENDPOINTS.ts)

• 변수/함수명

  // 변수: camelCase
  const userData = {};
  const isVisible = true;
  
  // 불리언 변수는 is, has, should 등으로 시작
  const isLoading = true;
  const hasPermission = false;
  
  // 함수: camelCase, 동사로 시작
  function getUserData() {}
  const updateProfile = () => {}
  
  // 상수: UPPER_SNAKE_CASE
  const MAX_COUNT = 10;
  const API_KEY = 'xxx';
  

1.2 컴포넌트 구조

// 컴포넌트 기본 구조
import { useState, useEffect } from 'react';

// 1. 타입 정의
interface Props {
  user: UserType;
  onSubmit: (data: FormData) => void;
}

// 2. 컴포넌트 정의
export default function UserProfile({ user, onSubmit }: Props) {
  // 2.1 상태/훅 선언
  const [isEditing, setIsEditing] = useState(false);

  // 2.2 핸들러 함수
  const handleSubmit = () => {};

  // 2.3 렌더링
  return (
    <div>
      {/* JSX */}
    </div>
  );
}

1.3 스타일링

// Tailwind CSS 클래스 순서
<div
  className={`
    // 레이아웃 (display, position)
    flex absolute
    // 박스모델 (width, height, margin, padding)
    w-full h-64 m-4 p-2
    // 시각적 요소 (background, border, shadow)
    bg-white border rounded-lg shadow-md
    // 타이포그래피
    text-lg font-bold
    // 기타 (transition, cursor 등)
    hover:bg-gray-100 cursor-pointer
  `}
>

2. 커밋 컨벤션

2.1 커밋 메시지 구조

type(scope): subject

body

footer

2.2 커밋 타입