snp-connection-monitoring/.claude/rules/frontend-code-style.md

TypeScript/React 코드 스타일 규칙

TypeScript 일반

• strict 모드 필수 (tsconfig.json)
• any 사용 금지 (불가피한 경우 주석으로 사유 명시)
• 타입 정의: interface 우선 (type은 유니온/인터섹션에만)
• 들여쓰기: 2 spaces
• 세미콜론: 사용
• 따옴표: single quote
• trailing comma: 사용

React 규칙

컴포넌트

• 함수형 컴포넌트 + hooks 패턴만 사용
• 클래스 컴포넌트 사용 금지
• 컴포넌트 파일 당 하나의 export default 컴포넌트
• Props 타입은 interface로 정의 (ComponentNameProps)

interface UserCardProps {
  name: string;
  email: string;
  onEdit?: () => void;
}

const UserCard = ({ name, email, onEdit }: UserCardProps) => {
  return (
    <div>
      <h3>{name}</h3>
      <p>{email}</p>
      {onEdit && <button onClick={onEdit}>편집</button>}
    </div>
  );
};

export default UserCard;

Hooks

• 커스텀 훅은 use 접두사 (예: useAuth, useFetch)
• 훅은 src/hooks/ 디렉토리에 분리
• 복잡한 상태 로직은 커스텀 훅으로 추출

상태 관리

• 컴포넌트 로컬 상태: useState
• 공유 상태: Context API 또는 Zustand
• 서버 상태: React Query (TanStack Query) 권장

이벤트 핸들러

• handle 접두사: handleClick, handleSubmit
• Props로 전달 시 on 접두사: onClick, onSubmit

스타일링

• Tailwind CSS 사용
• 인라인 스타일 지양
• !important 사용 금지

API 호출

• API 호출 로직은 src/services/에 분리
• Axios 또는 fetch wrapper 사용
• 에러 처리: try-catch + 사용자 친화적 에러 메시지

기타

• console.log 커밋 금지 (디버깅 후 제거)
• 매직 넘버/문자열 → 상수 파일로 추출
• 사용하지 않는 import, 변수 제거 (ESLint로 검증)
• 이미지/아이콘은 src/assets/에 관리