diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000..47fc431
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,98 @@
+name: "🐞 Frontend Bug Report"
+description: 화면, 사용자 플로우, 브라우저 동작, API 연동 문제를 제보합니다.
+title: "[Bug] "
+labels: ["bug", "triage"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        프론트엔드 버그는 "어느 화면에서 어떤 행동을 했을 때 무엇이 보였는지"가 핵심입니다.
+        가능하면 스크린샷, 영상, 콘솔 에러, 실패한 네트워크 요청을 함께 남겨 주세요.
+
+  - type: textarea
+    id: problem
+    attributes:
+      label: 문제 요약
+      placeholder: 사용자 프로필 페이지에서 배지 카드가 간헐적으로 비어 보입니다.
+    validations:
+      required: true
+
+  - type: input
+    id: route
+    attributes:
+      label: 발생 위치
+      description: 라우트, 화면, 컴포넌트 이름을 적어 주세요.
+      placeholder: "/users/[username], UserBadgeSection"
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: 재현 절차
+      placeholder: |
+        1. `/users/alexization` 방문
+        2. 새로고침
+        3. 배지 영역이 skeleton 이후 비어 있음
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected_behavior
+    attributes:
+      label: 기대 동작
+      placeholder: 배지 카드가 사용자 데이터와 함께 표시되어야 합니다.
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual_behavior
+    attributes:
+      label: 실제 동작
+      placeholder: 카드 컨테이너는 렌더링되지만 내부 데이터가 비어 있습니다.
+    validations:
+      required: true
+
+  - type: textarea
+    id: evidence
+    attributes:
+      label: 스크린샷 / 영상 / 콘솔 / 네트워크 증거
+      placeholder: |
+        - screenshot:
+        - console error:
+        - failed request:
+        - response payload:
+    validations:
+      required: false
+
+  - type: textarea
+    id: environment
+    attributes:
+      label: 브라우저 및 환경
+      placeholder: |
+        - Browser:
+        - Device/Viewport:
+        - Environment:
+        - Branch or commit:
+    validations:
+      required: false
+
+  - type: textarea
+    id: acceptance
+    attributes:
+      label: 수정 후 확인해야 할 조건
+      placeholder: |
+        - [ ] 동일 경로에서 정상 렌더링된다.
+        - [ ] 콘솔 에러가 발생하지 않는다.
+        - [ ] 실패한 네트워크 요청이 없다.
+    validations:
+      required: true
+
+  - type: input
+    id: related_backend_issue
+    attributes:
+      label: 연관된 백엔드 이슈 또는 PR (선택)
+      placeholder: "alexization/git-ranker#123"
+    validations:
+      required: false
+
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000..8398027
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,6 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 🔒 보안 취약점 제보
+    url: mailto:alexizationy@gmail.com
+    about: 인증, 토큰, 쿠키, 프론트엔드 보안 이슈는 공개 이슈 대신 이메일로 제보해 주세요.
+
diff --git a/.github/ISSUE_TEMPLATE/engineering_task.yml b/.github/ISSUE_TEMPLATE/engineering_task.yml
new file mode 100644
index 0000000..b30db0c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/engineering_task.yml
@@ -0,0 +1,71 @@
+name: "🛠️ Frontend Engineering Task"
+description: 리팩터링, 성능, 접근성, 테스트 하니스, DX 개선 작업을 기록합니다.
+title: "[Task] "
+labels: ["task", "triage"]
+body:
+  - type: dropdown
+    id: task_type
+    attributes:
+      label: 작업 유형
+      options:
+        - ui-refactor
+        - performance
+        - accessibility
+        - testing
+        - developer-experience
+        - dependency-upgrade
+        - documentation
+    validations:
+      required: true
+
+  - type: textarea
+    id: reason
+    attributes:
+      label: 왜 필요한가요?
+    validations:
+      required: true
+
+  - type: textarea
+    id: scope
+    attributes:
+      label: 작업 범위
+      placeholder: |
+        - route:
+        - component:
+        - hook/store:
+        - test/harness:
+    validations:
+      required: true
+
+  - type: textarea
+    id: done
+    attributes:
+      label: 완료 조건
+      placeholder: |
+        - [ ] ...
+        - [ ] ...
+    validations:
+      required: true
+
+  - type: textarea
+    id: validation
+    attributes:
+      label: 검증 방법
+      placeholder: |
+        - `npm run lint`
+        - `npm run build`
+        - 스크린샷 / 브라우저 QA / Playwright
+    validations:
+      required: true
+
+  - type: textarea
+    id: risks
+    attributes:
+      label: 리스크 및 의존성
+      placeholder: |
+        - 리스크:
+        - 백엔드 의존성:
+        - 후속 작업:
+    validations:
+      required: false
+
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 0000000..f51bb61
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,88 @@
+name: "✨ Frontend Feature Request"
+description: 새 UI, 사용자 플로우, 인터랙션, 프론트엔드 QA 개선을 제안합니다.
+title: "[Feature] "
+labels: ["enhancement", "feature"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        프론트엔드 기능 요청은 "컴포넌트 추가"보다 "사용자 경험이 어떻게 달라지는지"가 먼저입니다.
+
+  - type: textarea
+    id: problem
+    attributes:
+      label: 해결하려는 문제
+      placeholder: 사용자가 현재 랭킹 변화 이유를 이해하기 어려워 이탈이 발생합니다.
+    validations:
+      required: true
+
+  - type: textarea
+    id: outcome
+    attributes:
+      label: 원하는 사용자 결과
+      placeholder: 사용자가 랭킹 상세 화면에서 점수 증감 원인을 바로 이해할 수 있어야 합니다.
+    validations:
+      required: true
+
+  - type: input
+    id: route
+    attributes:
+      label: 대상 화면 또는 라우트
+      placeholder: "/ranking, /users/[username]"
+    validations:
+      required: true
+
+  - type: textarea
+    id: desired_behavior
+    attributes:
+      label: 원하는 UI / 인터랙션
+      placeholder: |
+        - 사용자가 어떤 행동을 하는지
+        - 어떤 상태가 보여야 하는지
+        - 실패/빈 상태는 어떻게 보여야 하는지
+    validations:
+      required: true
+
+  - type: textarea
+    id: acceptance
+    attributes:
+      label: 수용 기준
+      placeholder: |
+        - [ ] ...
+        - [ ] ...
+    validations:
+      required: true
+
+  - type: textarea
+    id: contract_dependency
+    attributes:
+      label: 백엔드 / API 의존성
+      placeholder: |
+        - 필요한 API:
+        - 계약 변경 여부:
+        - 연관 backend 이슈/PR:
+    validations:
+      required: false
+
+  - type: textarea
+    id: qa_evidence
+    attributes:
+      label: 필요한 QA 증거
+      placeholder: |
+        - 스크린샷:
+        - Playwright:
+        - 브라우저 콘솔/네트워크 확인:
+        - 반응형 확인:
+    validations:
+      required: true
+
+  - type: textarea
+    id: non_goals_and_risks
+    attributes:
+      label: 비목표와 리스크
+      placeholder: |
+        비목표:
+        리스크:
+    validations:
+      required: false
+
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..88b079a
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,48 @@
+## 1) 요약
+- 무엇이 변경되었나요?
+- 왜 지금 필요한가요?
+
+## 2) 연관 이슈
+- Closes #
+- 관련 backend 이슈/PR:
+
+## 3) 사용자 관점 결과
+- 해결하려는 문제:
+- 사용자에게 달라지는 점:
+- 비목표:
+
+## 4) 영향 범위
+- 변경된 route / page / component:
+- 상태 관리 / 데이터 로딩 영향:
+- API 계약 영향:
+- 접근성 / 반응형 영향:
+
+## 5) 스크린샷 또는 영상
+- before:
+- after:
+
+## 6) 검증 증거
+
+| 유형 | 명령어 / 증거 | 결과 |
+| --- | --- | --- |
+| Lint | `npm run lint` | |
+| Build | `npm run build` | |
+| Automated Test | `미구축` 또는 실행한 테스트 명령 | |
+| Playwright | 실행한 시나리오 또는 `미구축(<사유>)` | |
+| Browser QA | 콘솔 / 네트워크 / 반응형 확인 내용 | |
+
+## 7) API / 백엔드 연동 확인
+- 필요한 API 응답:
+- Mock 여부:
+- 관련 backend 변경:
+
+## 8) 리스크 및 롤백
+- 리스크:
+- 롤백 계획:
+
+## 9) 체크리스트
+- [ ] 연관 이슈가 연결되어 있음
+- [ ] 스크린샷 또는 영상이 포함되었거나 불필요 사유를 적음
+- [ ] Lint / Build 결과가 기입되어 있음
+- [ ] 브라우저 QA 또는 Playwright 결과가 기입되어 있음
+- [ ] API 계약 영향이 반영되었거나 없음을 명시함
diff --git a/.gitignore b/.gitignore
index 7b8da95..e601a6b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,7 @@
 # misc
 .DS_Store
 *.pem
+.idea/
 
 # debug
 npm-debug.log*
diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index 13566b8..0000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml
diff --git a/.idea/discord.xml b/.idea/discord.xml
deleted file mode 100644
index 104c42f..0000000
--- a/.idea/discord.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DiscordProjectSettings">
-    <option name="show" value="ASK" />
-    <option name="description" value="" />
-    <option name="applicationTheme" value="default" />
-    <option name="iconsTheme" value="default" />
-    <option name="button1Title" value="" />
-    <option name="button1Url" value="" />
-    <option name="button2Title" value="" />
-    <option name="button2Url" value="" />
-    <option name="customApplicationId" value="" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/git-ranker-client.iml b/.idea/git-ranker-client.iml
deleted file mode 100644
index 24643cc..0000000
--- a/.idea/git-ranker-client.iml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
deleted file mode 100644
index 32d45d2..0000000
--- a/.idea/modules.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/git-ranker-client.iml" filepath="$PROJECT_DIR$/.idea/git-ranker-client.iml" />
-    </modules>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
deleted file mode 100644
index 94a25f7..0000000
--- a/.idea/vcs.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>
\ No newline at end of file