diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000..aaa6604
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,139 @@
+name: 🔧 Claude 수정 작업
+description: Claude Code에게 문제 해결이나 수정 작업을 지시하기 위한 템플릿입니다.
+title: "[FIX] "
+labels: ["fix", "claude"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## 🔧 Claude Code 수정 작업 지시서
+        
+        Claude Code에게 문제 해결이나 기존 코드 수정 작업을 지시하기 위한 템플릿입니다.
+        구체적인 문제 상황과 해결 방향을 제시해주세요.
+
+  - type: textarea
+    id: problem_description
+    attributes:
+      label: 🐛 문제 상황
+      description: 현재 발생하고 있는 문제나 수정이 필요한 부분을 상세히 설명해주세요.
+      placeholder: |
+        예시:
+        - 모바일에서 네비게이션 메뉴가 제대로 표시되지 않음
+        - 다크모드에서 텍스트 색상이 보이지 않음
+        - 블로그 포스트 로딩 속도가 너무 느림
+        - 검색 결과가 정확하지 않음
+        - 특정 브라우저에서 레이아웃이 깨짐
+    validations:
+      required: true
+
+  - type: textarea
+    id: current_behavior
+    attributes:
+      label: ❌ 현재 동작
+      description: 현재 어떻게 동작하고 있는지 구체적으로 설명해주세요.
+      placeholder: |
+        예시:
+        - 모바일에서 햄버거 메뉴를 클릭해도 아무 반응이 없음
+        - 다크모드에서 제목 텍스트가 검은색으로 표시되어 보이지 않음
+        - 페이지 로드 시간이 5초 이상 소요됨
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected_behavior
+    attributes:
+      label: ✅ 원하는 동작
+      description: 어떻게 수정되어야 하는지 명확하게 설명해주세요.
+      placeholder: |
+        예시:
+        - 모바일에서 햄버거 메뉴 클릭 시 네비게이션 메뉴가 펼쳐져야 함
+        - 다크모드에서 제목 텍스트가 흰색으로 표시되어야 함
+        - 페이지 로드 시간이 2초 이내로 단축되어야 함
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduction_steps
+    attributes:
+      label: 🔄 재현 방법
+      description: 문제를 재현할 수 있는 단계를 상세히 설명해주세요.
+      placeholder: |
+        1. 사이트 접속
+        2. 모바일 화면 크기로 변경
+        3. 햄버거 메뉴 클릭
+        4. 문제 확인
+    validations:
+      required: true
+
+  - type: dropdown
+    id: fix_type
+    attributes:
+      label: 🏷️ 수정 유형
+      description: 어떤 종류의 수정 작업인가요?
+      options:
+        - 버그 수정
+        - 스타일/레이아웃 수정
+        - 성능 최적화
+        - 기능 개선
+        - 호환성 문제 해결
+        - 보안 취약점 수정
+        - 코드 리팩토링
+        - 기타
+      default: 0
+    validations:
+      required: true
+
+  - type: dropdown
+    id: urgency
+    attributes:
+      label: 🚨 긴급도
+      description: 수정 작업의 긴급도를 선택해주세요.
+      options:
+        - 🔴 긴급 (즉시 수정 필요)
+        - 🟡 보통 (일반적인 수정)
+        - 🟢 낮음 (시간 여유 있음)
+      default: 1
+    validations:
+      required: true
+
+  - type: textarea
+    id: affected_files
+    attributes:
+      label: 📁 관련 파일
+      description: 문제가 발생한 파일이나 수정이 필요한 파일 경로를 알고 있다면 명시해주세요.
+      placeholder: |
+        예시:
+        - src/app/_components/Navigation.tsx
+        - src/app/globals.css
+        - src/app/layout.tsx
+
+  - type: textarea
+    id: error_logs
+    attributes:
+      label: 📋 에러 로그
+      description: 콘솔 에러나 로그가 있다면 붙여넣어 주세요.
+      placeholder: |
+        콘솔 에러, 빌드 에러, 또는 기타 관련 로그를 여기에 붙여넣어 주세요.
+
+  - type: textarea
+    id: environment_info
+    attributes:
+      label: 🌐 환경 정보
+      description: 문제가 발생하는 환경 정보를 제공해주세요.
+      placeholder: |
+        예시:
+        - 브라우저: Chrome 120.0.0.0
+        - 운영체제: macOS 14.0
+        - 디바이스: iPhone 15 Pro
+        - 화면 크기: 375x812
+
+  - type: textarea
+    id: additional_context
+    attributes:
+      label: 📝 추가 정보
+      description: 문제 해결에 도움이 될 추가적인 정보가 있나요?
+      placeholder: |
+        - 최근 변경사항
+        - 관련 이슈나 PR
+        - 참고할 만한 자료
+        - 기타 컨텍스트 정보
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000..90219d6
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,4 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 📖 블로그 방문
+    url: https://kickbelldev.github.io/blog
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 0000000..c36e69f
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,110 @@
+name: 🤖 Claude 작업 지시
+description: Claude Code에게 작업을 지시하기 위한 템플릿입니다.
+title: "[TASK] "
+labels: ["task", "claude"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## 💡 Claude Code 작업 지시서
+        
+        Claude Code에게 개발 작업을 지시하기 위한 템플릿입니다.
+        구체적이고 명확한 지시를 통해 효과적인 작업을 진행해보세요.
+
+  - type: textarea
+    id: task_description
+    attributes:
+      label: 📋 작업 내용
+      description: Claude에게 수행시키고 싶은 작업을 구체적으로 설명해주세요.
+      placeholder: |
+        예시:
+        - 블로그에 검색 기능 추가해줘
+        - 다크모드 토글 버튼 구현
+        - 반응형 네비게이션 메뉴 만들기
+        - 포스트 페이지네이션 기능 추가
+        - 코드 블록 복사 버튼 추가
+    validations:
+      required: true
+
+  - type: textarea
+    id: requirements
+    attributes:
+      label: 📌 요구사항
+      description: 작업 시 고려해야 할 조건이나 제약사항이 있나요?
+      placeholder: |
+        예시:
+        - TypeScript 사용해서 작성
+        - 모바일 환경에서도 잘 작동해야 함
+        - 기존 UI/UX와 일관성 유지
+        - 성능 최적화 고려
+        - 접근성 고려사항
+
+  - type: dropdown
+    id: task_type
+    attributes:
+      label: 🏷️ 작업 유형
+      description: 어떤 종류의 작업인가요?
+      options:
+        - 새로운 기능 구현
+        - 기존 기능 개선
+        - 버그 수정
+        - 리팩토링
+        - UI/UX 개선
+        - 성능 최적화
+        - 테스트 코드 작성
+        - 문서 작성
+        - 기타
+      default: 0
+    validations:
+      required: true
+
+  - type: dropdown
+    id: priority
+    attributes:
+      label: 🔥 우선순위
+      description: 작업의 우선순위를 선택해주세요.
+      options:
+        - 🔴 높음 (즉시 처리 필요)
+        - 🟡 보통 (일반적인 작업)
+        - 🟢 낮음 (시간 여유 있음)
+      default: 1
+    validations:
+      required: true
+
+  - type: textarea
+    id: technical_details
+    attributes:
+      label: 🔧 기술적 세부사항
+      description: 구현에 필요한 기술적 정보나 참고사항이 있나요?
+      placeholder: |
+        예시:
+        - 특정 라이브러리나 패키지 사용
+        - API 엔드포인트 정보
+        - 데이터 구조나 스키마
+        - 관련 파일 경로
+        - 참고할 기존 코드
+
+  - type: textarea
+    id: acceptance_criteria
+    attributes:
+      label: ✅ 완료 조건
+      description: 작업이 완료되었다고 판단할 수 있는 조건들을 명시해주세요.
+      placeholder: |
+        예시:
+        - [ ] 검색창에서 키워드 입력 시 관련 포스트 표시
+        - [ ] 모바일에서도 정상 작동 확인
+        - [ ] 빌드 및 테스트 통과
+        - [ ] 코드 품질 검사 통과
+        - [ ] 브라우저 호환성 확인
+
+  - type: textarea
+    id: references
+    attributes:
+      label: 📚 참고 자료
+      description: 작업에 도움이 될 참고 자료나 링크가 있나요?
+      placeholder: |
+        예시:
+        - 관련 문서나 가이드 링크
+        - 참고할 사이트나 예시
+        - 관련 GitHub 이슈나 PR
+        - 디자인 시안이나 목업
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/refactor.yml b/.github/ISSUE_TEMPLATE/refactor.yml
new file mode 100644
index 0000000..7e0446a
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/refactor.yml
@@ -0,0 +1,140 @@
+name: ♻️ Claude 리팩토링 작업
+description: Claude Code에게 코드 리팩토링 작업을 지시하기 위한 템플릿입니다.
+title: "[REFACTOR] "
+labels: ["refactor", "claude"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## ♻️ Claude Code 리팩토링 작업 지시서
+        
+        Claude Code에게 코드 구조 개선, 최적화, 정리 작업을 지시하기 위한 템플릿입니다.
+        현재 코드의 문제점과 개선 방향을 명확히 제시해주세요.
+
+  - type: textarea
+    id: current_code_issues
+    attributes:
+      label: 🔍 현재 코드 문제점
+      description: 리팩토링이 필요한 코드의 문제점을 구체적으로 설명해주세요.
+      placeholder: |
+        예시:
+        - 중복된 코드가 여러 컴포넌트에서 반복됨
+        - 너무 긴 함수로 인해 가독성이 떨어짐
+        - 복잡한 조건문으로 인한 유지보수 어려움
+        - 불필요한 의존성이나 import가 많음
+        - 네이밍이 일관되지 않음
+        - 컴포넌트가 너무 많은 책임을 가짐
+    validations:
+      required: true
+
+  - type: textarea
+    id: target_files
+    attributes:
+      label: 📁 대상 파일/폴더
+      description: 리팩토링할 파일이나 폴더 경로를 명시해주세요.
+      placeholder: |
+        예시:
+        - src/app/_components/Navigation.tsx
+        - src/app/blog/_components/
+        - src/app/_lib/utils.ts
+        - src/app/globals.css
+    validations:
+      required: true
+
+  - type: dropdown
+    id: refactor_type
+    attributes:
+      label: 🏷️ 리팩토링 유형
+      description: 어떤 종류의 리팩토링인가요?
+      options:
+        - 코드 중복 제거
+        - 함수/컴포넌트 분리
+        - 네이밍 개선
+        - 구조 재조직
+        - 성능 최적화
+        - 타입 안전성 개선
+        - 스타일 통일
+        - 의존성 정리
+        - 기타
+      default: 0
+    validations:
+      required: true
+
+  - type: textarea
+    id: refactor_goals
+    attributes:
+      label: 🎯 리팩토링 목표
+      description: 리팩토링을 통해 달성하고자 하는 목표를 설명해주세요.
+      placeholder: |
+        예시:
+        - 코드 가독성 향상
+        - 유지보수성 개선
+        - 성능 최적화
+        - 타입 안전성 강화
+        - 재사용성 증대
+        - 코드 일관성 확보
+    validations:
+      required: true
+
+  - type: textarea
+    id: specific_requirements
+    attributes:
+      label: 📋 구체적 요구사항
+      description: 리팩토링 시 지켜야 할 조건이나 특별한 요구사항이 있나요?
+      placeholder: |
+        예시:
+        - 기존 API 호환성 유지
+        - 특정 디자인 패턴 적용
+        - 성능 저하 없이 진행
+        - 기존 테스트 통과 보장
+        - 특정 라이브러리 사용/제거
+
+  - type: dropdown
+    id: complexity
+    attributes:
+      label: 📊 복잡도
+      description: 리팩토링 작업의 예상 복잡도는 어느 정도인가요?
+      options:
+        - 🟢 간단 (단순한 정리 작업)
+        - 🟡 보통 (구조적 변경 포함)
+        - 🔴 복잡 (대규모 재구성 필요)
+      default: 1
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected_outcome
+    attributes:
+      label: ✅ 예상 결과
+      description: 리팩토링 완료 후 어떤 모습이 되어야 하는지 설명해주세요.
+      placeholder: |
+        예시:
+        - [ ] 중복 코드가 공통 유틸리티로 분리됨
+        - [ ] 컴포넌트 크기가 50줄 이하로 줄어듦
+        - [ ] 모든 함수에 명확한 타입 정의
+        - [ ] 일관된 네이밍 컨벤션 적용
+        - [ ] 빌드 및 테스트 통과
+
+  - type: textarea
+    id: breaking_changes
+    attributes:
+      label: ⚠️ 주의사항
+      description: 리팩토링 시 주의해야 할 점이나 영향을 받을 수 있는 부분이 있나요?
+      placeholder: |
+        예시:
+        - 다른 컴포넌트에서 사용 중인 props 변경 금지
+        - 외부 라이브러리와의 호환성 유지
+        - 기존 스타일링 깨트리지 않기
+        - 특정 기능의 동작 방식 유지
+
+  - type: textarea
+    id: references
+    attributes:
+      label: 📚 참고 자료
+      description: 리팩토링에 도움이 될 참고 자료나 가이드라인이 있나요?
+      placeholder: |
+        예시:
+        - 코딩 컨벤션 가이드
+        - 디자인 패턴 참고 자료
+        - 관련 블로그 포스트나 문서
+        - 비슷한 리팩토링 사례
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/testing.yml b/.github/ISSUE_TEMPLATE/testing.yml
new file mode 100644
index 0000000..7cfacf4
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/testing.yml
@@ -0,0 +1,175 @@
+name: 🧪 Claude 테스트 작성
+description: Claude Code에게 테스트 코드 작성을 지시하기 위한 템플릿입니다.
+title: "[TEST] "
+labels: ["test", "claude"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## 🧪 Claude Code 테스트 작성 지시서
+        
+        Claude Code에게 테스트 코드 작성이나 테스트 개선 작업을 지시하기 위한 템플릿입니다.
+        테스트할 대상과 범위를 명확히 제시해주세요.
+
+  - type: textarea
+    id: test_target
+    attributes:
+      label: 🎯 테스트 대상
+      description: 테스트를 작성할 대상 코드를 구체적으로 설명해주세요.
+      placeholder: |
+        예시:
+        - src/app/_components/Navigation.tsx의 메뉴 토글 기능
+        - src/api/posts.ts의 블로그 포스트 데이터 fetching 함수
+        - src/app/_lib/utils.ts의 유틸리티 함수들
+        - src/app/blog/[slug]/page.tsx의 동적 라우팅 페이지
+        - 전체 블로그 포스트 렌더링 플로우
+    validations:
+      required: true
+
+  - type: dropdown
+    id: test_type
+    attributes:
+      label: 🏷️ 테스트 유형
+      description: 어떤 종류의 테스트를 작성하고 싶나요?
+      options:
+        - 단위 테스트 (Unit Test)
+        - 통합 테스트 (Integration Test)
+        - 컴포넌트 테스트 (Component Test)
+        - E2E 테스트 (End-to-End Test)
+        - 스냅샷 테스트 (Snapshot Test)
+        - 성능 테스트 (Performance Test)
+        - 접근성 테스트 (Accessibility Test)
+        - 기타
+      default: 0
+    validations:
+      required: true
+
+  - type: textarea
+    id: test_scenarios
+    attributes:
+      label: 📝 테스트 시나리오
+      description: 테스트해야 할 구체적인 시나리오들을 나열해주세요.
+      placeholder: |
+        예시:
+        - 사용자가 햄버거 메뉴를 클릭했을 때 네비게이션이 열리는지 확인
+        - 잘못된 slug로 접근했을 때 404 페이지가 표시되는지 확인
+        - 블로그 포스트 데이터가 올바르게 파싱되는지 확인
+        - 다크모드 토글이 정상적으로 작동하는지 확인
+        - 모바일 환경에서 레이아웃이 올바르게 표시되는지 확인
+    validations:
+      required: true
+
+  - type: textarea
+    id: test_cases
+    attributes:
+      label: ✅ 테스트 케이스
+      description: 검증해야 할 구체적인 테스트 케이스들을 명시해주세요.
+      placeholder: |
+        예시:
+        - [ ] 정상적인 입력값에 대한 올바른 결과 반환
+        - [ ] 빈 값이나 null 입력에 대한 적절한 처리
+        - [ ] 잘못된 형식의 입력에 대한 에러 처리
+        - [ ] 경계값 테스트 (최대/최소값)
+        - [ ] 비동기 작업의 성공/실패 처리
+        - [ ] 사용자 인터랙션에 대한 적절한 반응
+    validations:
+      required: true
+
+  - type: textarea
+    id: existing_tests
+    attributes:
+      label: 📋 기존 테스트 현황
+      description: 이미 존재하는 테스트나 테스트 설정이 있다면 알려주세요.
+      placeholder: |
+        예시:
+        - Jest 설정이 이미 되어있음
+        - React Testing Library 사용 중
+        - __tests__ 폴더에 일부 테스트 존재
+        - package.json에 테스트 스크립트 설정됨
+        - 특정 컴포넌트는 이미 테스트 작성됨
+
+  - type: dropdown
+    id: test_framework
+    attributes:
+      label: 🛠️ 선호하는 테스트 도구
+      description: 사용하고 싶은 테스트 프레임워크나 도구가 있나요?
+      options:
+        - Jest + React Testing Library
+        - Vitest + Testing Library
+        - Cypress (E2E)
+        - Playwright (E2E)
+        - Storybook (Component)
+        - 기존 설정 사용
+        - 추천해주세요
+      default: 0
+    validations:
+      required: true
+
+  - type: textarea
+    id: test_data
+    attributes:
+      label: 📊 테스트 데이터
+      description: 테스트에 필요한 목 데이터나 픽스처가 있다면 설명해주세요.
+      placeholder: |
+        예시:
+        - 블로그 포스트 샘플 데이터
+        - 사용자 인증 정보 목
+        - API 응답 데이터 목
+        - 파일 시스템 목
+        - 외부 서비스 응답 목
+
+  - type: dropdown
+    id: coverage_goal
+    attributes:
+      label: 📈 커버리지 목표
+      description: 테스트 커버리지 목표가 있나요?
+      options:
+        - 🟢 기본 (주요 기능만)
+        - 🟡 보통 (70-80%)
+        - 🔴 높음 (90%+)
+        - 특정 기능만 집중
+        - 커버리지 상관없음
+      default: 1
+    validations:
+      required: true
+
+  - type: textarea
+    id: test_requirements
+    attributes:
+      label: 📋 테스트 요구사항
+      description: 테스트 작성 시 특별히 고려해야 할 사항이 있나요?
+      placeholder: |
+        예시:
+        - 실제 API 호출 대신 목 사용
+        - 브라우저 환경에서만 동작하는 기능 테스트
+        - 접근성 테스트 포함
+        - 성능 테스트 포함
+        - 모바일 환경 테스트
+        - 다국어 지원 테스트
+
+  - type: textarea
+    id: success_criteria
+    attributes:
+      label: 🎯 성공 조건
+      description: 테스트 작성이 완료되었다고 판단할 수 있는 조건들을 명시해주세요.
+      placeholder: |
+        예시:
+        - [ ] 모든 테스트가 통과함
+        - [ ] 커버리지 목표 달성
+        - [ ] CI/CD 파이프라인에서 자동 실행
+        - [ ] 주요 기능별 테스트 케이스 작성 완료
+        - [ ] 에러 시나리오 테스트 포함
+        - [ ] 코드 리뷰 통과
+
+  - type: textarea
+    id: additional_notes
+    attributes:
+      label: 📝 추가 정보
+      description: 테스트 작성에 도움이 될 추가 정보나 참고사항이 있나요?
+      placeholder: |
+        예시:
+        - 관련 문서나 가이드 링크
+        - 참고할 다른 프로젝트의 테스트 코드
+        - 특정 버그나 이슈 히스토리
+        - 성능 요구사항
+        - 팀 내 테스트 컨벤션
\ No newline at end of file
diff --git a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md b/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md
new file mode 100644
index 0000000..a38b773
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md
@@ -0,0 +1,18 @@
+## Summary
+<!-- 무엇을 변경했는지 간단히 설명 -->
+
+## Changes
+<!-- 주요 변경사항 -->
+-
+-
+-
+
+## Test plan
+- [ ] 로컬 빌드 테스트
+- [ ] 브라우저에서 확인
+- [ ] 
+
+## Screenshots
+<!-- 필요시 스크린샷 추가 -->
+
+🤖 Generated with [Claude Code](https://claude.ai/code)
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
index dc4eaa2..955756a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -14,6 +14,120 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 This project uses Biome for formatting and linting. Always run `pnpm biome:check` before committing changes. The project has a pre-commit hook (lefthook) that automatically runs Biome on staged files.
 
+## Git Workflow
+
+### Branch Strategy
+- **Main branch**: `main` - production-ready code
+- **Feature branches**: `feature/description` or `feat/short-name` for new features
+- **Bug fixes**: `fix/description` or `bugfix/issue-number` for bug fixes
+- **Documentation**: `docs/description` for documentation updates
+
+### Commit Message Convention
+Follow conventional commits format for clear, searchable history:
+
+```
+<type>: <description>
+
+[optional body]
+
+🤖 Generated with [Claude Code](https://claude.ai/code)
+
+Co-Authored-By: Claude <noreply@anthropic.com>
+```
+
+**Types:**
+- `feat:` - new features
+- `fix:` - bug fixes  
+- `docs:` - documentation updates
+- `config:` - configuration changes
+- `refactor:` - code refactoring without feature changes
+- `chore:` - maintenance tasks, dependency updates
+
+**Examples:**
+- `feat: 블로그 포스트 검색 기능 추가`
+- `fix: 모바일에서 네비게이션 메뉴 깨짐 수정`
+- `docs: CLAUDE.md에 Git 워크플로우 가이드 추가`
+
+### Pull Request Process
+1. Create feature branch from `main`
+2. Implement changes with descriptive commits
+3. Run `pnpm biome:check` and ensure build passes
+4. Create PR with clear title and description
+5. Link related issues if applicable
+6. Merge after review (if working in team) or directly (if solo)
+
+### Pre-commit Hooks
+The project uses lefthook to automatically run quality checks:
+- Biome formatting and linting on staged files
+- Prevents commits with linting errors
+- Ensures consistent code style across the project
+
+## Claude Code Workflow Instructions
+
+**IMPORTANT**: Claude Code must follow this PR-based workflow for ALL development tasks:
+
+### 1. Before Starting Any Task
+```bash
+# Ensure you're on main and up to date
+git checkout main
+git pull origin main
+
+# Create a new feature branch
+git checkout -b <type>/<description>
+```
+
+### 2. Branch Naming Convention
+- `feat/기능명` - New features (e.g., `feat/search-functionality`)
+- `fix/버그명` - Bug fixes (e.g., `fix/mobile-nav-issue`)
+- `docs/문서명` - Documentation updates (e.g., `docs/readme-update`)
+- `config/설정명` - Configuration changes (e.g., `config/eslint-setup`)
+- `refactor/리팩터명` - Code refactoring (e.g., `refactor/component-structure`)
+- `chore/작업명` - Maintenance tasks (e.g., `chore/dependency-update`)
+
+### 3. After Completing Work
+```bash
+# Stage and commit changes
+git add .
+git commit -m "conventional commit message"
+
+# Push to remote
+git push -u origin <branch-name>
+
+# Create PR immediately
+gh pr create --title "PR Title" --body "$(cat <<'EOF'
+## Summary
+- Brief description of changes
+- Key implementation details
+
+## Test plan
+- [ ] Checklist item 1
+- [ ] Checklist item 2
+
+🤖 Generated with [Claude Code](https://claude.ai/code)
+EOF
+)"
+```
+
+### 4. PR Requirements
+- **Always create PRs**: Never commit directly to main
+- **Clear titles**: Use conventional commit format in PR titles
+- **Detailed descriptions**: Include Summary and Test plan sections
+- **Link issues**: Reference related GitHub issues when applicable
+- **Quality checks**: Ensure CI passes before requesting review
+
+### 5. Work Scope Guidelines
+- **One logical change per PR**: Keep PRs focused and reviewable
+- **Complete features**: Don't leave work in broken state
+- **Test your changes**: Run `pnpm biome:check` and `pnpm build` before committing
+- **Document breaking changes**: Clearly explain any breaking changes
+
+### 6. After PR Creation
+- Wait for CI checks to pass
+- Address any review feedback
+- Merge only after approval (if working in team) or when CI is green (if solo)
+
+**Remember**: This workflow ensures clean git history, proper code review, and CI validation for all changes.
+
 ## Architecture Overview
 
 ### Next.js Blog with MDX
@@ -24,15 +138,42 @@ This is a Next.js 15 blog application configured for static export with MDX supp
 - Next.js 15 with App Router
 - MDX for blog content with rehype-pretty-code syntax highlighting
 - Tailwind CSS for styling
+- shadcn/ui for UI components
 - TypeScript
 - Biome for code formatting/linting
 
 ### Directory Structure
 
-- `src/app/` - Next.js App Router pages and layouts
+All client-side code is organized under `src/app/` following Next.js App Router conventions with a package-like structure:
+
+- `src/app/` - Next.js App Router root directory
+  - `_components/` - Global reusable React components (underscore prevents routing)
+  - `_hooks/` - Global custom React hooks (underscore prevents routing)
+  - `_fonts/` - Font configurations (underscore prevents routing)
+  - `_lib/` - Global utility functions and libraries (underscore prevents routing)
+  - `about/` - About page route
+    - `_components/` - Components specific to about page only
+    - `_hooks/` - Hooks specific to about page only
+    - `page.tsx` - About page component
+  - `blog/` - Blog routes
+    - `_components/` - Components specific to blog functionality
+    - `_hooks/` - Hooks specific to blog functionality
+    - `[slug]/` - Dynamic blog post pages
+    - `page.tsx` - Blog index page
+  - `layout.tsx` - Root layout component
+  - `page.tsx` - Home page
+  - `not-found.tsx` - 404 error page
+  - `globals.css` - Global styles
+- `src/api/` - Server-side utilities (outside app directory)
+  - `posts.ts` - Blog post data fetching utilities
 - `src/contents/` - MDX blog posts (*.mdx files)
-- `src/api/posts.ts` - Blog post data fetching utilities
-- `src/app/blog/[slug]/` - Dynamic blog post pages
+
+**Naming Convention:** 
+- Use underscore prefix (`_`) for folders that should not be treated as routes by Next.js App Router
+- Follow Java package-like structure: components and hooks are organized by their scope
+  - Global scope: `src/app/_components/`, `src/app/_hooks/`
+  - Page/Feature scope: `src/app/[route]/_components/`, `src/app/[route]/_hooks/`
+- This ensures components and logic are co-located with their usage while maintaining clear boundaries
 
 ### Content Management
 
@@ -50,9 +191,21 @@ The app is configured for static export (`output: 'export'` in next.config.ts) a
 ### Styling
 
 - Uses Tailwind CSS with custom configuration
+- shadcn/ui components with "new-york" style and stone base color
+- CSS variables for theming (light/dark mode support)
 - Noto Sans KR font for Korean language support
 - Prose styling for blog content rendering
 
+### UI Components
+
+This project uses shadcn/ui for consistent, high-quality UI components:
+- **Installation**: Use `npx shadcn@latest add <component>` to add new components
+- **Location**: UI components are placed in `src/app/_components/ui/`
+- **Style**: Configured with "new-york" style and stone base color
+- **Theming**: Full CSS variables support for light/dark themes
+- **Icons**: Uses Lucide React for icons
+- **Utilities**: `cn()` function in `src/app/_lib/utils.ts` for conditional styling
+
 ### Build Output
 
 Static files are generated in the `out/` directory during build.
\ No newline at end of file