[Deploy] develop → main 배포 테스트 및 프로덕션 반영

.coderabbit.yaml

@@ -0,0 +1,43 @@
+language: "ko-KR"
+
+reviews:
+  profile: "chill"
+  high_level_summary: true
+  poem: false
+
+  auto_review:
+    enabled: true
+    drafts: false
+    base_branches:
+      - "main"
+      - "develop"
+
+  request_changes_workflow: false
+
+  path_filters:
+    - "src/**"
+    - "!dist/**"
+    - "!pnpm-lock.yaml"
+    - "!build/**"
+    - "!**/*.lock"
+
+  path_instructions:
+    - path: "src/**"
+      instructions: >
+        다음 핵심 영역에 집중하여 리뷰한다.
+        1. 상태 관리: 서버 상태(React Query)와 전역 상태(Zustand)의 분리 여부 확인. useMutation, useQuery의 올바른 사용 확인.
+        2. 구조와 책임 분리: 페이지에 비즈니스 로직이 과도하지 않은지 확인. 커스텀 훅으로의 분리 여부 검토.
+        3. Hook 사용: useEffect 의존성 배열 및 불필요한 사용 검토. useCallback, useMemo의 적절한 사용.
+        4. 타입 안정성: TypeScript 타입의 명확성 확인. any 사용 지양, 제네릭 활용 검토.
+        5. 성능: 불필요한 리렌더링 체크. React.memo, useCallback 사용 검토.
+        6. 에러 처리: API 실패 대응 및 사용자 피드백 적절성 검토. 에러 바운더리 사용 확인.
+        7. 접근성: 시맨틱 HTML, ARIA 속성 사용 확인.
+
+chat:
+  auto_reply: true
+
+tone_instructions: >
+  모든 리뷰는 반드시 한국어로, 팀원들에게 말하듯이 작성한다.
+  구조, 상태 관리, 접근성, 성능, 안정성, 버그 중심으로 리뷰한다.
+  피드백은 명확하고 구체적으로 작성하며, 문제의 원인과 개선 방법을 함께 제시한다.
+  차분하고 전문적인 톤을 유지하되, 이해하기 쉽게 전달한다.

.gitattributes

@@ -0,0 +1,9 @@
+* text=auto eol=lf
+
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.webp binary
+*.ico binary
+*.pdf binary

.github/ISSUE_TEMPLATE/♻️-refactor.md

@@ -3,16 +3,19 @@ name: "♻️ Refactor"
 about: "Code refactoring Template "
 title: "♻️ [Refactor] "
 labels: ♻️ Refactor
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 Cause and effect
-[//]: # (코드 리팩토링을 하는 이유와 예상 결과를 작성해주세요.)
+
+[//]: # "코드 리팩토링을 하는 이유와 예상 결과를 작성해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/ISSUE_TEMPLATE/⚙️-setting.md

@@ -3,16 +3,19 @@ name: "⚙️ Setting"
 about: "Development environment setup Template "
 title: "⚙️ [Setting] "
 labels: ⚙️ Setting
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 Setting Environment
-[//]: # (세팅한 환경이 무엇인지, 어떤 방법으로 세팅할 예정인지 작성해주세요.)
+
+[//]: # "세팅한 환경이 무엇인지, 어떤 방법으로 세팅할 예정인지 작성해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/ISSUE_TEMPLATE/✨-feature.md

@@ -3,16 +3,19 @@ name: "✨ Feature"
 about: "Feature Template "
 title: "✨ [Feature] "
 labels: ✨ Feature
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 Functional role
-[//]: # (기능이 가지는 역할과 영향을 설명해주세요.)
+
+[//]: # "기능이 가지는 역할과 영향을 설명해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/ISSUE_TEMPLATE/🌏-deploy.md

@@ -3,16 +3,19 @@ name: "🌏 Deploy"
 about: "Deploy Template "
 title: "🌏 [Deploy] "
 labels: 🌏 Deploy
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 How to deploy
-[//]: # (배포 방법에 대한 설명을 작성해주세요.)
+
+[//]: # "배포 방법에 대한 설명을 작성해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/ISSUE_TEMPLATE/🐞-bugFix.md

@@ -3,16 +3,19 @@ name: "🐞 BugFix"
 about: "Something isn't working Template "
 title: "🐞 [BugFix] "
 labels: 🐞 BugFix
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 Bug Description
-[//]: # (버그가 끼치는 영향과 문제를 설명해주세요.)
+
+[//]: # "버그가 끼치는 영향과 문제를 설명해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/ISSUE_TEMPLATE/📃-docs.md

@@ -3,16 +3,19 @@ name: "📃 Docs"
 about: "Documentation writing and editing (README.md, etc.) Template "
 title: "📃 [Docs] "
 labels: 📃 Docs
-assignees: ''
-
+assignees: ""
 ---
 
 ## 🛠️ Issue Description
-[//]: # (해당 이슈에 대한 설명을 작성해주세요.)
+
+[//]: # "해당 이슈에 대한 설명을 작성해주세요."
 
 ## 💭 Documents and objectives
-[//]: # (문서의 종류가 무엇인지, 목적이 무엇인지 작성해주세요.)
+
+[//]: # "문서의 종류가 무엇인지, 목적이 무엇인지 작성해주세요."
 
 ### 📝 check-lists
-[//]: # (업무 체크리스트를 작성해주세요.)
+
+[//]: # "업무 체크리스트를 작성해주세요."
+
 - [ ] Task1

.github/pull_request_template.md

@@ -1,33 +1,52 @@
+<!--
+📌 제목: [Type] 작업 요약
+
+예시:
+- [Feature] 반응형 수정
+- [Bugfix] 에러 잡기
+- [Deploy] 배포
+- [Refactor] 사용성 높이기
+
+사용 가능한 Type:
+Feature | Bugfix | Refactor | Deploy | Design | Docs | Setting | Test |
+-->
+
 ## 🚨 관련 이슈
 
 [//]: # "작성하실 때는 '#이슈 번호'를 남겨주시면 자동으로 링크가 생성됩니다."
 
 ## ✨ 변경사항
 
-[//]: # '어떤 변경사항이 있었나요? 체크해주세요 !'
+[//]: # "어떤 변경사항이 있었나요? 체크해주세요 !"
 
--   [ ] 🐞 BugFix Something isn't working
--   [ ] 💻 CrossBrowsing Browser compatibility
--   [ ] 🌏 Deploy Deploy
--   [ ] 🎨 Design Markup & styling
--   [ ] 📃 Docs Documentation writing and editing (README.md, etc.)
--   [ ] ✨ Feature Feature
--   [ ] 🔨 Refactor Code refactoring
--   [ ] ⚙️ Setting Development environment setup
--   [ ] ✅ Test Test related (storybook, jest, etc.)
+- [ ] 🐞 BugFix Something isn't working
+- [ ] 💻 CrossBrowsing Browser compatibility
+- [ ] 🌏 Deploy Deploy
+- [ ] 🎨 Design Markup & styling
+- [ ] 📃 Docs Documentation writing and editing (README.md, etc.)
+- [ ] ✨ Feature Feature
+- [ ] 🔨 Refactor Code refactoring
+- [ ] ⚙️ Setting Development environment setup
+- [ ] ✅ Test Test related (storybook, jest, etc.)
 
 ## ✏️ 작업 내용
 
-[//]: # '작업 내용을 작성해주세요. 스크린샷을 첨부해주셔도 좋습니다.'
+[//]: # "작업 내용을 작성해주세요. 스크린샷을 첨부해주셔도 좋습니다."
 
--   작업 내용
+- 작업 내용
 
 ## 😅 미완성 작업
 
-[//]: # '없다면 N/A'
+[//]: # "없다면 N/A"
 
--   [ ] Task1
+- [ ] Task1
 
 ## 📢 논의 사항 및 참고 사항
 
-[//]: # '리뷰어가 알면 좋은 내용을 작성해주세요.'
+[//]: # "리뷰어가 알면 좋은 내용을 작성해주세요."
+
+> 💬 리뷰어 가이드 (P-Rules)
+> **P1: 필수 반영 (Critical)** - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
+> **P2: 적극 권장 (Recommended)** - 더 나은 대안 제시. 가급적 반영 권장.
+> **P3: 제안 (Suggestion)** - 아이디어 공유. 반영 여부는 드라이버 자율.
+> **P4: 단순 확인/칭찬 (Nit)** - 사소한 오타, 칭찬 등 피드백.

.github/workflows/chromatic.yml

@@ -0,0 +1,56 @@
+name: Chromatic Deployment
+
+on:
+  push:
+    branches:
+      - "develop"
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  chromatic-deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Comment Storybook URL on PR
+        if: github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            ## 📚 Storybook 배포 완료
+
+            | 항목 | 링크 |
+            |------|------|
+            | 📖 Storybook | ${{ steps.chromatic.outputs.storybookUrl }} |
+            | 🔍 Chromatic | ${{ steps.chromatic.outputs.buildUrl }} |
+          comment_tag: storybook-url
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yaml

@@ -15,15 +15,15 @@ jobs:
       - name: Checkout source code
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        run: npm install -g pnpm
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: pnpm
 
-      - name: Install pnpm
-        run: npm install -g pnpm
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 

.gitignore

@@ -23,4 +23,14 @@ dist-ssr
 *.sln
 *.sw?
 .env
-node_modules/
+node_modules/
+*storybook.log
+storybook-static
+
+# Claude Code
+.claude/
+.claude/skills
+.claude/agents
+
+# Local: Cursor commit message trailer stripper (keep on machine only)
+scripts/strip-cursor-attribution.mjs

.husky/commit-msg

@@ -1 +1,2 @@
-pnpm commitlint --edit "$1"
+node scripts/strip-cursor-attribution.mjs "$1"
+pnpm exec commitlint --edit "$1"

.storybook/main.ts

@@ -0,0 +1,8 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  framework: "@storybook/react-vite",
+};
+export default config;