#21 feat: 배지 컴포넌트 구현

.coderabbit.yaml

@@ -0,0 +1,123 @@
+language: 'ko-KR'
+early_access: true
+
+tone_instructions: |
+  1. 피드백은 명확하고 구체적으로 작성하고, 문제 원인과 개선 방법을 함께 제시하세요.
+  2. 리뷰는 교육적인 방향을 지향하며, 관련 공식 문서 링크를 함께 추천하세요.
+  3. 비판보다는 개선 제안을 우선하세요.
+  4. 칭찬은 짧고 위트 있게 작성하세요.
+
+reviews:
+  profile: educational
+  request_changes_workflow: true
+  high_level_summary: true
+  high_level_summary_placeholder: |
+    @coderabbitai summary
+    (졸업작품 평가 기준: 구조 / 타입 안정성 / 접근성 관점 요약)
+  poem: false
+  review_status: true
+  suggested_labels: true
+  commit_status: true
+  fail_commit_status: false
+  abort_on_close: true
+  high_level_summary_in_walkthrough: true
+  high_level_summary_placeholder: '@coderabbitai summary'
+  collapse_walkthrough: true
+
+  path_instructions:
+    - path: 'src/**/components/**/*.tsx'
+      instructions: |
+        React 컴포넌트 리뷰 시:
+        - 파일명은 PascalCase인지 확인
+        - Props 타입은 컴포넌트명Props 형식인지 확인
+        - 단일 export는 default export 권장 (팀 규칙 우선)
+        - 이벤트 핸들러는 handle 접두사 사용
+        - 접근성 고려 (label 연결, aria-* 속성)
+        - 접근성 관련 지적 시, 사용자 영향 예시 포함
+        - 불필요한 re-render 방지를 위한 memo/useCallback 검토
+        - premature optimization 지양
+
+    - path: 'src/**/hooks/**/*.ts'
+      instructions: |
+        커스텀 훅 리뷰 시:
+        - 파일명과 함수명은 use* 접두사 사용
+        - 반환 타입의 일관성 유지 (object 또는 tuple)
+        - 에러/로딩 상태 명확히 분리
+        - TanStack Query 훅 네이밍 규칙 준수
+          (use + Action + Target + Query/Mutation)
+
+    - path: 'src/**/*.ts'
+      instructions: |
+        TypeScript 코드 리뷰 시:
+        - 타입/인터페이스는 PascalCase 사용
+        - interface는 객체 타입, type은 union/alias에 사용
+        - API 응답 타입은 XXXResponse 네이밍
+        - var 사용 금지, const 우선
+        - type-only import 적극 사용
+        - any 사용 시 사유 명확히 작성
+
+    - path: 'src/**'
+      instructions: |
+        프로젝트 전반 리뷰 기준:
+
+        # 기본 기술 스택
+        - React + TypeScript 사용
+        - 스타일링은 Tailwind CSS v4 사용
+        - 절대 경로 임포트(@/...) 사용
+        - Client / Server 컴포넌트 구분 명확
+
+        # 네이밍 컨벤션
+        - 컴포넌트: PascalCase
+        - 폴더명: kebab-case
+        - 일반 파일명: kebab-case
+        - 변수/함수: camelCase
+        - 상수: BIG_SNAKE_CASE
+        - Props 타입: 컴포넌트명Props
+
+        # 환경 변수
+        - 환경 변수는 process.env.NEXT_PUBLIC_* 사용
+        - 민감 정보 하드코딩 금지
+
+        # 성능
+        - 불필요한 클라이언트 컴포넌트 사용 지양
+        - 리스트 렌더링 시 key 안정성 확인
+
+        # Git 규칙
+        - 커밋 메시지: #issue type: subject
+          (예: #12 feat: 로그인 기능 추가)
+        - 브랜치 패턴: type/issuenumber-issue-short-description
+          (예: feat/1-auth)
+
+  auto_review:
+    enabled: true
+    drafts: false
+    base_branches:
+      - 'main'
+      - 'develop'
+    labels:
+      - '!wip'
+      - '!draft'
+    ignore_usernames:
+      - 'dependabot'
+      - 'renovate'
+
+  tools:
+    eslint:
+      enabled: true
+    markdownlint:
+      enabled: true
+    gitleaks:
+      enabled: true
+    yamllint:
+      enabled: true
+    actionlint:
+      enabled: true
+
+chat:
+  auto_reply: true
+
+knowledge_base:
+  code_guidelines:
+    enabled: true
+    filePatterns:
+      - 'README.md'

.husky/commit-msg

@@ -0,0 +1,34 @@
+echo "📝 커밋 메시지를 검증합니다..."
+
+# 커밋 메시지 읽기
+commit_msg=$(cat $1)
+
+# 이슈 번호 뒤에 공백 없이 문자가 오는 경우 체크 (#13test, #13chore 등)
+if echo "$commit_msg" | grep -qE '^#[0-9]+[a-zA-Z]'; then
+  echo "❌ 이슈 번호 뒤에는 공백이 필요합니다."
+  echo "잘못된 형식: $(echo "$commit_msg" | grep -oE '^#[0-9]+[a-zA-Z][^ ]*')"
+  echo "올바른 형식: #13 chore: 메시지"
+  exit 1
+fi
+
+# commitlint 실행
+if npx --no -- commitlint --edit $1; then
+  echo "✅ 커밋 메시지가 규칙에 맞습니다."
+  exit 0
+else
+  echo "❌ 커밋 메시지가 컨벤션에 맞지 않습니다."
+  echo ""
+  echo "올바른 커밋 메시지 형식:"
+  echo "  <type>: <subject>"
+  echo "  #<이슈번호> <type>: <subject>  (이슈 번호는 선택사항)"
+  echo ""
+  echo "예시:"
+  echo "  feat: 새로운 기능 추가"
+  echo "  #13 fix: 버그 수정"
+  echo "  docs: 문서 수정"
+  echo "  #42 refactor: 코드 리팩토링"
+  echo ""
+  echo "사용 가능한 type:"
+  echo "  feat, fix, docs, style, refactor, test, chore, perf, ci, build, revert"
+  exit 1
+fi

.prettierrc

@@ -17,5 +17,6 @@
   "requirePragma": false,
   "tabWidth": 2,
   "useTabs": false,
-  "embeddedLanguageFormatting": "auto"
+  "embeddedLanguageFormatting": "auto",
+  "tailwindStylesheet": "src/index.css"
 }

commitlint.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};