viberoom-web/docs/foundation/04_coding_rules.md

04. Coding Rules

공통 코딩 규칙

• TypeScript 타입을 명시하고 any를 피한다.
• 명확한 이름 사용:
  • 핸들러: handle*
  • 훅: use*
  • UI 컴포넌트: 역할이 드러나는 *Widget, *Panel, *Card
• 중복 스타일 문자열은 공용 컴포넌트/유틸로 흡수한다.

React/Next 규칙

• 클라이언트 컴포넌트는 필요한 곳에만 'use client' 선언
• page는 조합 전용, 세부 구현은 widgets/features로 이동
• URL 파라미터/검색 파라미터 파싱은 widget/model 레이어에서 처리

Tailwind 규칙

• 하드코딩 hex 남발 금지
• 클래스 길이가 길어지는 경우 의미 단위로 줄바꿈
• hover/focus 상태는 기본 접근성 스타일과 함께 제공

더미 기능 정책

• 미구현 기능 트리거는 토스트로 피드백한다.
• 토스트 제목에 (더미) 또는 설명으로 mock 상태를 명확히 전달한다.
• 실데이터처럼 오해될 수 있는 숫자/실시간 문구 사용을 지양한다.

검증 절차

• 타입체크: npx tsc --noEmit
• 빌드: npm run build
• lint는 플러그인 누락 이슈가 있을 수 있으니 환경 상태를 먼저 확인한다.