From 8a2e34d61785a46d8b1efa9006c18b8683d9cd51 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Sat, 20 Jun 2026 19:52:23 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=EC=86=8C=20=EC=97=B0=EB=8F=99=20UI=20+=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=AC=B8=EA=B5=AC=20=EC=A0=95=EB=A6=AC=20?=
 =?UTF-8?q?(Phase=202b)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useRepo 복구(프로젝트 종속 /projects/:projectId/repos): list/meta/checkName/create/remove
- types/repo ApiRepo 를 새 RepoResponse 와 정합(projectId 추가, members/counts 제거)
- ProjectTabs 에 '저장소' 탭(repoCount) 추가, 4개 페이지 repo-count 전달
- ProjectReposPage 신설(/projects/:id/repos): 연동 저장소 목록 + 연동(생성) 폼
  (slug 가용성 디바운스 체크·템플릿 옵션) + Gitea 열기 + 연동 해제(admin)
- 화면 잔여 '저장소' 문구를 '프로젝트'로 정리(crumb/설정/멤버 모달/주석/not-found)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/project-refactor-plan.md                 |   5 +-
 frontend/src/components/ProjectTabs.vue       |  11 +-
 frontend/src/composables/useRepo.ts           |  58 ++
 .../src/pages/relay/ProjectActivityPage.vue   |   7 +-
 .../src/pages/relay/ProjectDetailPage.vue     |   7 +-
 .../src/pages/relay/ProjectMembersPage.vue    |  17 +-
 frontend/src/pages/relay/ProjectReposPage.vue | 720 ++++++++++++++++++
 .../src/pages/relay/ProjectSettingsPage.vue   |  27 +-
 frontend/src/router/index.ts                  |   6 +
 frontend/src/types/repo.ts                    |  11 +-
 10 files changed, 831 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/composables/useRepo.ts
 create mode 100644 frontend/src/pages/relay/ProjectReposPage.vue

diff --git a/docs/project-refactor-plan.md b/docs/project-refactor-plan.md
index e87d2f1..c0c3ca1 100644
--- a/docs/project-refactor-plan.md
+++ b/docs/project-refactor-plan.md
@@ -66,5 +66,6 @@ Project (이름/설명/공개범위)                ← 작업의 기본 단위(
 - Phase 1-b: 백엔드 이전 ✅ — Activity(project FK·listForProject)·Repo(project FK, RepoMember 폐지)·Task(project 종속, seq 프로젝트 내 순번, 권한=ProjectMember) 전환. RepoService 프로젝트 종속(`/projects/:projectId/repos`, 멤버·업무카운트·캐시 제거). Task/Activity 컨트롤러 `/projects/...`. RepoSync→"미분류". AiService 프로젝트 컨텍스트. member.service/controller·repo-member·repo-cache 삭제. 검증 build/lint 0·14 tests.
 - **Phase 1 잔여(소소, 후속)**: ProjectResponse 카운트(repoCount/doneCount/totalCount 현재 0 stub) 집계 배선, ProjectMemberService 활동·알림 배선(TODO), TaskService.assigneeCounts→ProjectMemberService taskCount 연결.
 - Phase 2-a: 프론트 프로젝트 중심 재구성 ✅ — `types/project`·`useProject`·`project.store` 신설. `useTask`/`useMember`/`useActivity` 를 `/projects/:projectId/...` 로, task/my-task/activity 타입·스토어를 projectId/projectName 으로 전환. 알림 store 라우팅/문구 프로젝트화. 라우팅 `/projects/...` 전면 교체. 페이지 rename(Repo*→Project*): List/Create(간단 폼)/Detail/Settings/Members/Activity. `RepoHeader`→`ProjectHeader`, `RepoTabs`→`ProjectTabs`. AppShell 네비 "프로젝트". 죽은 파일(repo.store/useRepo/GiteaRepoBar) 삭제. 검증 type-check/lint/build 0.
-- **Phase 2 잔여(후속)**: **저장소 연동 UI(Phase 2b)** — 프로젝트 내 "연동 저장소" 섹션 + Gitea 저장소 링크/생성 폼(백엔드 `/projects/:id/repos` 준비됨). 일부 화면 잔여 "저장소" 문구 정리.
-- 다음 = Phase 1 카운트 배선 + Phase 2b 저장소 연동 UI.
+- Phase 1 카운트 배선 ✅ — ProjectService 가 프로젝트별 연동 저장소 수·업무 완료/전체 수를 그룹 쿼리로 집계(Repo/Task forFeature 등록). ProjectMemberService 멤버 taskCount 집계 + 초대/역할변경/제거 시 활동 적재·대상자 알림 발송(Activity/Notification 모듈 주입). TaskService 미사용 집계 메서드 제거. 검증 build/lint 0·14 tests.
+- Phase 2b 저장소 연동 UI ✅ — `useRepo`(프로젝트 종속) 복구, `types/repo` ApiRepo 를 새 RepoResponse(projectId 추가·members/counts 제거)로 정합. `ProjectTabs` 에 "저장소" 탭(repoCount) 추가, 신규 `ProjectReposPage`(`/projects/:id/repos`) — 연동 저장소 목록 + slug 가용성 체크 포함 연동(생성) 폼 + 연동 해제(admin). 라우트 추가. 화면 잔여 "저장소" 문구를 "프로젝트"로 정리(crumb·설정 문구·멤버 모달·주석). 검증 type-check/lint/build 0.
+- 다음 = Phase 3 마무리(문서·메모리 갱신, 런타임 점검).
diff --git a/frontend/src/components/ProjectTabs.vue b/frontend/src/components/ProjectTabs.vue
index 8daf6d6..36f99ee 100644
--- a/frontend/src/components/ProjectTabs.vue
+++ b/frontend/src/components/ProjectTabs.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-// 저장소 서브탭 — 업무/멤버/활동/설정
+// 프로젝트 서브탭 — 업무/멤버/저장소/활동/설정
 import { RouterLink } from 'vue-router'
 
 interface Props {
   projectId: string
-  active: 'tasks' | 'members' | 'activity' | 'settings'
+  active: 'tasks' | 'members' | 'repos' | 'activity' | 'settings'
   taskCount: number
   memberCount: number
+  repoCount: number
   /** 설정 탭 노출 여부(관리자만). 기본 false — 권한이 확인된 경우에만 노출 */
   canManage?: boolean
 }
@@ -27,6 +28,12 @@ defineProps<Props>()
     >
       <span class="tb-label">멤버</span> <span class="tb-count">{{ memberCount }}</span>
     </RouterLink>
+    <RouterLink
+      :to="`/projects/${projectId}/repos`"
+      :class="{ active: active === 'repos' }"
+    >
+      <span class="tb-label">저장소</span> <span class="tb-count">{{ repoCount }}</span>
+    </RouterLink>
     <RouterLink
       :to="`/projects/${projectId}/activity`"
       :class="{ active: active === 'activity' }"
diff --git a/frontend/src/composables/useRepo.ts b/frontend/src/composables/useRepo.ts
new file mode 100644
index 0000000..84998c8
--- /dev/null
+++ b/frontend/src/composables/useRepo.ts
@@ -0,0 +1,58 @@
+import { useApi } from './useApi'
+import type {
+  ApiRepo,
+  CreateRepoPayload,
+  RepoCreateMeta,
+} from '@/types/repo'
+import type { Paginated } from '@/types/pagination'
+
+// 저장소 도메인 API Composable — 프로젝트에 연동된 Gitea 저장소.
+// 모든 경로는 /projects/:projectId/repos 하위. 인터셉터가 success/data 를 언래핑.
+export function useRepo() {
+  const api = useApi()
+
+  async function list(
+    projectId: string,
+    page = 1,
+    size = 20,
+  ): Promise<Paginated<ApiRepo>> {
+    return (await api.get(`/projects/${projectId}/repos`, {
+      params: { page, size },
+    })) as unknown as Paginated<ApiRepo>
+  }
+
+  // 생성 폼 메타(소유자/템플릿)
+  async function getCreateMeta(projectId: string): Promise<RepoCreateMeta> {
+    return (await api.get(
+      `/projects/${projectId}/repos/meta`,
+    )) as unknown as RepoCreateMeta
+  }
+
+  // slug 사용 가능 여부 — 전역 유일 검사
+  async function checkName(
+    projectId: string,
+    slug: string,
+  ): Promise<boolean> {
+    const res = (await api.get(`/projects/${projectId}/repos/name-available`, {
+      params: { slug },
+    })) as unknown as { available: boolean }
+    return res.available
+  }
+
+  async function create(
+    projectId: string,
+    payload: CreateRepoPayload,
+  ): Promise<ApiRepo> {
+    return (await api.post(
+      `/projects/${projectId}/repos`,
+      payload,
+    )) as unknown as ApiRepo
+  }
+
+  // 연동 해제(삭제)
+  async function remove(projectId: string, repoId: string): Promise<void> {
+    await api.delete(`/projects/${projectId}/repos/${repoId}`)
+  }
+
+  return { list, getCreateMeta, checkName, create, remove }
+}
diff --git a/frontend/src/pages/relay/ProjectActivityPage.vue b/frontend/src/pages/relay/ProjectActivityPage.vue
index a72add3..0ceebaf 100644
--- a/frontend/src/pages/relay/ProjectActivityPage.vue
+++ b/frontend/src/pages/relay/ProjectActivityPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// 저장소 활동 — 날짜 그룹 단위 활동 피드 (API 연동)
+// 프로젝트 활동 — 날짜 그룹 단위 활동 피드 (API 연동)
 import { computed, defineComponent, h, ref, watch } from 'vue'
 import { useRoute, RouterLink } from 'vue-router'
 import AppShell from '@/layouts/AppShell.vue'
@@ -17,7 +17,7 @@ const projectId = computed(() => String(route.params.projectId))
 const projectStore = useProjectStore()
 const activityStore = useActivityStore()
 
-// 저장소 헤더 + 활동 피드 로딩
+// 프로젝트 헤더 + 활동 피드 로딩
 const repo = ref<Project | null>(null)
 async function load() {
   try {
@@ -89,7 +89,7 @@ const ActIcon = defineComponent({
           to="/projects"
           class="lnk"
         >
-          저장소
+          프로젝트
         </RouterLink>
         <span class="sep">/</span>
         <RouterLink
@@ -111,6 +111,7 @@ const ActIcon = defineComponent({
         active="activity"
         :task-count="repo.totalCount"
         :member-count="memberCount"
+        :repo-count="repo.repoCount"
         :can-manage="repo.canManage"
       />
 
diff --git a/frontend/src/pages/relay/ProjectDetailPage.vue b/frontend/src/pages/relay/ProjectDetailPage.vue
index 2458a2e..bf86cd6 100644
--- a/frontend/src/pages/relay/ProjectDetailPage.vue
+++ b/frontend/src/pages/relay/ProjectDetailPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// 저장소 상세 — 저장소 헤더(공통) + 진행률 + 서브탭(공통) + 업무 목록
+// 프로젝트 상세 — 프로젝트 헤더(공통) + 진행률 + 서브탭(공통) + 업무 목록
 // 세그먼트/검색은 백엔드에서 필터·카운트하고, 목록은 더보기(오프셋 페이지네이션)로 점진 로드한다.
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
@@ -110,7 +110,7 @@ const STATUS_LABEL: Record<TaskStatus, string> = {
           to="/projects"
           class="lnk"
         >
-          저장소
+          프로젝트
         </RouterLink>
         <span class="sep">/</span>
         <b>{{ repo.name }}</b>
@@ -157,6 +157,7 @@ const STATUS_LABEL: Record<TaskStatus, string> = {
         active="tasks"
         :task-count="counts.all"
         :member-count="memberCount"
+        :repo-count="repo.repoCount"
         :can-manage="repo.canManage"
       />
 
@@ -415,7 +416,7 @@ const STATUS_LABEL: Record<TaskStatus, string> = {
       class="page"
     >
       <p class="not-found-msg">
-        요청하신 저장소를 찾을 수 없습니다.
+        요청하신 프로젝트를 찾을 수 없습니다.
       </p>
     </div>
   </AppShell>
diff --git a/frontend/src/pages/relay/ProjectMembersPage.vue b/frontend/src/pages/relay/ProjectMembersPage.vue
index 60b699d..15e5def 100644
--- a/frontend/src/pages/relay/ProjectMembersPage.vue
+++ b/frontend/src/pages/relay/ProjectMembersPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// 저장소 멤버 — 멤버 목록 + 역할/제거 + 멤버 초대 모달 (백엔드 연동)
+// 프로젝트 멤버 — 멤버 목록 + 역할/제거 + 멤버 초대 모달 (백엔드 연동)
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, RouterLink } from 'vue-router'
 import AppShell from '@/layouts/AppShell.vue'
@@ -20,7 +20,7 @@ const projectId = computed(() => String(route.params.projectId))
 const projectStore = useProjectStore()
 const memberStore = useMemberStore()
 
-// 저장소 헤더 — API 연동
+// 프로젝트 헤더 — API 연동
 const repo = ref<Project | null>(null)
 async function loadRepo() {
   try {
@@ -50,7 +50,7 @@ watch(
   { immediate: true },
 )
 
-// 현재 사용자가 이 저장소의 관리자인지(초대·역할변경·제거 권한)
+// 현재 사용자가 이 프로젝트의 관리자인지(초대·역할변경·제거 권한)
 const isAdmin = computed(() =>
   members.value.some((m) => m.isYou && m.roleType === 'admin'),
 )
@@ -96,7 +96,7 @@ async function changeRole(userId: string, roleType: MemberRoleType) {
 
 // --- 멤버 제거 ---
 async function removeMember(userId: string, name: string) {
-  if (!window.confirm(`${name} 님을 저장소에서 제거하시겠습니까?`)) return
+  if (!window.confirm(`${name} 님을 프로젝트에서 제거하시겠습니까?`)) return
   try {
     await memberStore.remove(projectId.value, userId)
   } catch {
@@ -117,7 +117,7 @@ const usersLoading = ref(false)
 const showUserDropdown = ref(false)
 let userSearchTimer: ReturnType<typeof setTimeout> | null = null
 
-// 현재 저장소에 이미 속한 사용자 id (자동완성에서 제외)
+// 현재 프로젝트에 이미 속한 사용자 id (자동완성에서 제외)
 const memberIds = computed(() => new Set(members.value.map((m) => m.user.id)))
 const userOptions = computed(() =>
   userResults.value.filter((u) => !memberIds.value.has(u.id)),
@@ -208,7 +208,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
           to="/projects"
           class="lnk"
         >
-          저장소
+          프로젝트
         </RouterLink>
         <span class="sep">/</span>
         <RouterLink
@@ -232,6 +232,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
         active="members"
         :task-count="repo.totalCount"
         :member-count="counts.all"
+        :repo-count="repo.repoCount"
         :can-manage="repo.canManage"
       />
 
@@ -250,7 +251,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
             r="10"
           /><path d="M12 16v-4M12 8h.01" />
         </svg>
-        이 저장소의 멤버만 업무 담당자로 지정할 수 있습니다. <b>관리자</b>는 업무 지시·멤버 관리가 가능하고, <b>멤버</b>는 담당자로 배정되어 업무를 수행합니다.
+        이 프로젝트의 멤버만 업무 담당자로 지정할 수 있습니다. <b>관리자</b>는 업무 지시·멤버 관리가 가능하고, <b>멤버</b>는 담당자로 배정되어 업무를 수행합니다.
       </div>
 
       <!-- 툴바 -->
@@ -470,7 +471,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
             <div>
               <h2>멤버 초대</h2>
               <div class="mh-sub">
-                <b>{{ repo?.name }}</b> 저장소에 멤버를 추가합니다.
+                <b>{{ repo?.name }}</b> 프로젝트에 멤버를 추가합니다.
               </div>
             </div>
             <button
diff --git a/frontend/src/pages/relay/ProjectReposPage.vue b/frontend/src/pages/relay/ProjectReposPage.vue
new file mode 100644
index 0000000..3d55390
--- /dev/null
+++ b/frontend/src/pages/relay/ProjectReposPage.vue
@@ -0,0 +1,720 @@
+<script setup lang="ts">
+// 프로젝트 연동 저장소 — 연동된 Gitea 저장소 목록 + 저장소 연동(생성) + 연동 해제
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useRoute, RouterLink } from 'vue-router'
+import AppShell from '@/layouts/AppShell.vue'
+import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectTabs from '@/components/ProjectTabs.vue'
+import { useProjectStore } from '@/stores/project.store'
+import { useRepo } from '@/composables/useRepo'
+import type { Project, Visibility } from '@/mock/relay.mock'
+import type { ApiRepo, RepoCreateMeta } from '@/types/repo'
+
+const route = useRoute()
+const projectId = computed(() => String(route.params.projectId))
+const projectStore = useProjectStore()
+const repoApi = useRepo()
+
+// 프로젝트 헤더/탭 — API 연동
+const project = ref<Project | null>(null)
+async function loadProject() {
+  try {
+    project.value = await projectStore.fetchOne(projectId.value)
+  } catch {
+    project.value = null // 404/403 은 인터셉터가 알림 처리
+  }
+}
+
+const memberCount = computed(() =>
+  project.value ? project.value.members.length + project.value.moreCount : 0,
+)
+const canManage = computed(() => project.value?.canManage ?? false)
+
+// 연동 저장소 목록
+const repos = ref<ApiRepo[]>([])
+const loading = ref(false)
+async function loadRepos() {
+  loading.value = true
+  try {
+    const res = await repoApi.list(projectId.value)
+    repos.value = res.items
+  } catch {
+    // 인터셉터가 알림 처리
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  projectId,
+  () => {
+    loadProject()
+    loadRepos()
+  },
+  { immediate: true },
+)
+
+// --- 저장소 연동(생성) 폼 ---
+const showForm = ref(false)
+const meta = ref<RepoCreateMeta | null>(null)
+const slug = ref('')
+const name = ref('')
+const description = ref('')
+const visibility = ref<Visibility>('private')
+const useTemplate = ref(false)
+const submitting = ref(false)
+
+// slug 가용성 — null(미확인) / true / false
+const slugAvailable = ref<boolean | null>(null)
+const slugChecking = ref(false)
+let slugTimer: ReturnType<typeof setTimeout> | null = null
+
+const slugValid = computed(() => /^[a-z0-9-_]+$/.test(slug.value.trim()))
+
+// 폼 열기 — 메타(소유자/템플릿) 1회 로드
+async function openForm() {
+  showForm.value = true
+  if (!meta.value) {
+    try {
+      meta.value = await repoApi.getCreateMeta(projectId.value)
+    } catch {
+      // 인터셉터가 알림 처리
+    }
+  }
+}
+
+function closeForm() {
+  showForm.value = false
+  slug.value = ''
+  name.value = ''
+  description.value = ''
+  visibility.value = 'private'
+  useTemplate.value = false
+  slugAvailable.value = null
+}
+
+// slug 입력 디바운스 → 가용성 체크
+watch(slug, () => {
+  slugAvailable.value = null
+  if (slugTimer) clearTimeout(slugTimer)
+  const value = slug.value.trim()
+  if (!value || !slugValid.value) return
+  slugChecking.value = true
+  slugTimer = setTimeout(async () => {
+    try {
+      slugAvailable.value = await repoApi.checkName(projectId.value, value)
+    } catch {
+      slugAvailable.value = null
+    } finally {
+      slugChecking.value = false
+    }
+  }, 300)
+})
+onBeforeUnmount(() => {
+  if (slugTimer) clearTimeout(slugTimer)
+})
+
+const canSubmit = computed(
+  () =>
+    !submitting.value &&
+    slugValid.value &&
+    slugAvailable.value === true &&
+    name.value.trim() !== '' &&
+    description.value.trim() !== '',
+)
+
+// 저장소 연동 — 성공 시 목록 갱신 + 폼 닫기
+async function linkRepo() {
+  if (!canSubmit.value) return
+  submitting.value = true
+  try {
+    await repoApi.create(projectId.value, {
+      slug: slug.value.trim(),
+      name: name.value.trim(),
+      description: description.value.trim(),
+      visibility: visibility.value,
+      ...(meta.value?.template.available ? { useTemplate: useTemplate.value } : {}),
+    })
+    closeForm()
+    await Promise.all([loadRepos(), loadProject()])
+  } catch {
+    // 인터셉터가 알림 처리
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 연동 해제 — 확인 후 삭제, 목록 갱신
+async function unlinkRepo(repo: ApiRepo) {
+  const ok = window.confirm(
+    `저장소 ‘${repo.name}’의 연동을 해제합니다.\nGitea 저장소도 함께 삭제됩니다. 계속할까요?`,
+  )
+  if (!ok) return
+  try {
+    await repoApi.remove(projectId.value, repo.id)
+    await Promise.all([loadRepos(), loadProject()])
+  } catch {
+    // 인터셉터가 알림 처리
+  }
+}
+</script>
+
+<template>
+  <AppShell>
+    <div
+      v-if="project"
+      class="page"
+    >
+      <div class="crumb">
+        <RouterLink
+          to="/projects"
+          class="lnk"
+        >
+          프로젝트
+        </RouterLink>
+        <span class="sep">/</span>
+        <RouterLink
+          :to="`/projects/${project.id}`"
+          class="lnk"
+        >
+          {{ project.name }}
+        </RouterLink>
+        <span class="sep">/</span>
+        <b>저장소</b>
+      </div>
+
+      <ProjectHeader
+        :repo="project"
+        :meta-text="`연동 저장소 ${project.repoCount}개`"
+        :members="project.members"
+        :more-count="project.moreCount"
+      />
+      <ProjectTabs
+        :project-id="project.id"
+        active="repos"
+        :task-count="project.totalCount"
+        :member-count="memberCount"
+        :repo-count="project.repoCount"
+        :can-manage="project.canManage"
+      />
+
+      <!-- 안내 + 연동 버튼 -->
+      <div class="repos-head">
+        <p class="lede">
+          이 프로젝트에 코드 저장소를 연동하면 업무를 코드 변경과 연결해 관리할 수 있습니다.
+          한 프로젝트에 여러 저장소를 연동할 수 있습니다.
+        </p>
+        <button
+          v-if="canManage && !showForm"
+          class="btn primary"
+          type="button"
+          @click="openForm"
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M5 12h14M12 5v14" />
+          </svg>
+          저장소 연동
+        </button>
+      </div>
+
+      <!-- 연동(생성) 폼 -->
+      <form
+        v-if="showForm"
+        class="card form"
+        @submit.prevent="linkRepo"
+      >
+        <div class="fblock">
+          <div class="flabel">
+            <span class="req">*</span> 저장소 이름(slug)
+          </div>
+          <div class="fhint">
+            영문 소문자·숫자와 하이픈(-)·밑줄(_)만 사용. {{ meta?.owner ? `${meta.owner}/` : '' }}이름 형태로 생성됩니다.
+          </div>
+          <input
+            v-model="slug"
+            type="text"
+            class="tinput"
+            placeholder="예: q3-launch-campaign"
+            maxlength="60"
+            autocomplete="off"
+          >
+          <div
+            v-if="slug.trim() && !slugValid"
+            class="fstatus bad"
+          >
+            사용할 수 없는 형식입니다.
+          </div>
+          <div
+            v-else-if="slugChecking"
+            class="fstatus"
+          >
+            확인 중…
+          </div>
+          <div
+            v-else-if="slugAvailable === true"
+            class="fstatus ok"
+          >
+            사용 가능한 이름입니다.
+          </div>
+          <div
+            v-else-if="slugAvailable === false"
+            class="fstatus bad"
+          >
+            이미 사용 중인 이름입니다.
+          </div>
+        </div>
+
+        <div class="fblock">
+          <div class="flabel">
+            <span class="req">*</span> 표시 제목
+          </div>
+          <input
+            v-model="name"
+            type="text"
+            class="tinput"
+            placeholder="예: 3분기 신제품 런칭 캠페인"
+            maxlength="40"
+          >
+        </div>
+
+        <div class="fblock">
+          <div class="flabel">
+            <span class="req">*</span> 설명
+          </div>
+          <textarea
+            v-model="description"
+            class="tinput tarea"
+            maxlength="300"
+            placeholder="저장소의 목적을 간단히 적어주세요."
+          />
+        </div>
+
+        <div class="fblock">
+          <div class="flabel">
+            <span class="req">*</span> 공개 범위
+          </div>
+          <div class="radio-row">
+            <button
+              class="radio-chip"
+              :class="{ sel: visibility === 'private' }"
+              type="button"
+              @click="visibility = 'private'"
+            >
+              비공개
+            </button>
+            <button
+              class="radio-chip"
+              :class="{ sel: visibility === 'public' }"
+              type="button"
+              @click="visibility = 'public'"
+            >
+              공개
+            </button>
+          </div>
+        </div>
+
+        <div
+          v-if="meta?.template.available"
+          class="fblock"
+        >
+          <label class="check">
+            <input
+              v-model="useTemplate"
+              type="checkbox"
+            >
+            <span>템플릿 저장소(<code>{{ meta.template.slug }}</code>)를 복제해 생성</span>
+          </label>
+        </div>
+
+        <div class="form-footer">
+          <button
+            class="btn ghost"
+            type="button"
+            @click="closeForm"
+          >
+            취소
+          </button>
+          <button
+            class="btn primary"
+            type="submit"
+            :disabled="!canSubmit"
+          >
+            {{ submitting ? '연동 중…' : '연동' }}
+          </button>
+        </div>
+      </form>
+
+      <!-- 연동 저장소 목록 -->
+      <div class="list">
+        <div
+          v-for="repo in repos"
+          :key="repo.id"
+          class="repo-row"
+        >
+          <div class="repo-ico">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+            </svg>
+          </div>
+          <div class="repo-main">
+            <div class="repo-title">
+              <span class="repo-name">{{ repo.name }}</span>
+              <span
+                class="vis"
+                :class="repo.visibility"
+              >{{ repo.visibility === 'private' ? '비공개' : '공개' }}</span>
+              <span
+                v-if="repo.giteaMissing"
+                class="missing"
+              >Gitea 연결 끊김</span>
+            </div>
+            <div class="repo-sub">
+              <span class="slug">{{ repo.slug }}</span>
+              <span class="dot">·</span>
+              <span class="branch">{{ repo.branch }}</span>
+            </div>
+          </div>
+          <div class="repo-actions">
+            <a
+              v-if="repo.htmlUrl"
+              :href="repo.htmlUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn ghost sm"
+            >
+              Gitea 열기
+            </a>
+            <button
+              v-if="canManage"
+              class="btn danger sm"
+              type="button"
+              @click="unlinkRepo(repo)"
+            >
+              연동 해제
+            </button>
+          </div>
+        </div>
+
+        <div
+          v-if="loading && repos.length === 0"
+          class="list-empty"
+        >
+          불러오는 중…
+        </div>
+        <div
+          v-else-if="repos.length === 0"
+          class="list-empty"
+        >
+          아직 연동된 저장소가 없습니다.{{ canManage ? ' ‘저장소 연동’으로 추가해 보세요.' : '' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 프로젝트를 찾지 못한 경우 -->
+    <div
+      v-else
+      class="page"
+    >
+      <p class="not-found-msg">
+        요청하신 프로젝트를 찾을 수 없습니다.
+      </p>
+    </div>
+  </AppShell>
+</template>
+
+<style scoped>
+.crumb {
+  padding: 1.125rem 0 0.75rem;
+}
+.crumb .lnk {
+  color: var(--accent);
+  text-decoration: none;
+}
+.crumb .sep {
+  color: var(--text-3);
+  margin: 0 0.4375rem;
+}
+.repos-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin: 1.125rem 0 1rem;
+}
+.lede {
+  flex: 1;
+  color: var(--text-2);
+  font-size: 0.844rem;
+  line-height: 1.6;
+}
+.btn {
+  height: 2.25rem;
+  padding: 0 1rem;
+  border-radius: var(--radius);
+  font-size: 0.844rem;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.btn.sm {
+  height: 1.875rem;
+  padding: 0 0.75rem;
+  font-size: 0.781rem;
+}
+.btn.primary {
+  border: none;
+  background: var(--accent);
+  color: #fff;
+}
+.btn.primary:hover {
+  background: var(--accent-hover);
+}
+.btn.primary:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.btn.ghost {
+  border: 1px solid var(--border-strong);
+  background: #fff;
+  color: var(--text-2);
+}
+.btn.danger {
+  border: 1px solid var(--red-border);
+  background: #fff;
+  color: var(--red);
+}
+.btn.danger:hover {
+  background: var(--red-weak);
+}
+
+/* 연동 폼 */
+.card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 0.625rem;
+}
+.form {
+  margin-bottom: 1.125rem;
+}
+.fblock {
+  padding: 1.125rem 1.5rem;
+  border-top: 1px solid var(--border);
+}
+.fblock:first-child {
+  border-top: none;
+}
+.flabel {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 0.4375rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.flabel .req {
+  color: var(--accent);
+  font-weight: 700;
+}
+.fhint {
+  font-size: 0.781rem;
+  color: var(--text-3);
+  margin-bottom: 0.5625rem;
+  line-height: 1.5;
+}
+.tinput {
+  width: 100%;
+  height: 2.5rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  padding: 0 0.75rem;
+  font-family: inherit;
+  font-size: 0.875rem;
+  color: var(--text);
+  background: #fff;
+}
+.tinput:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-weak);
+}
+textarea.tarea {
+  min-height: 4.5rem;
+  padding: 0.625rem 0.75rem;
+  line-height: 1.6;
+  resize: vertical;
+  height: auto;
+}
+.fstatus {
+  font-size: 0.781rem;
+  margin-top: 0.4375rem;
+  color: var(--text-3);
+}
+.fstatus.ok {
+  color: #1b7a3d;
+}
+.fstatus.bad {
+  color: var(--red);
+}
+.radio-row {
+  display: flex;
+  gap: 0.5rem;
+}
+.radio-chip {
+  height: 2.25rem;
+  padding: 0 1rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: #fff;
+  font-family: inherit;
+  font-size: 0.844rem;
+  font-weight: 600;
+  color: var(--text-2);
+  cursor: pointer;
+}
+.radio-chip.sel {
+  border-color: var(--accent);
+  background: var(--accent-weak);
+  color: var(--accent);
+}
+.check {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.844rem;
+  color: var(--text-2);
+  cursor: pointer;
+}
+.check code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.8125rem;
+  color: var(--text);
+}
+.form-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5625rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--border);
+  background: #fafbfc;
+  border-radius: 0 0 0.625rem 0.625rem;
+}
+
+/* 저장소 목록 */
+.list {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 0.625rem;
+}
+.repo-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--border);
+}
+.repo-row:first-child {
+  border-top: none;
+}
+.repo-ico {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5625rem;
+  background: var(--accent-weak);
+  color: var(--accent);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+.repo-ico svg {
+  width: 1.1875rem;
+  height: 1.1875rem;
+}
+.repo-main {
+  flex: 1;
+  min-width: 0;
+}
+.repo-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5625rem;
+  flex-wrap: wrap;
+}
+.repo-name {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text);
+}
+.vis {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--text-2);
+  background: #f1f2f4;
+  border-radius: 20px;
+  padding: 0.125rem 0.5rem;
+}
+.vis.public {
+  color: #1b7a3d;
+  background: var(--green-weak);
+}
+.missing {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--red);
+  background: var(--red-weak);
+  border: 1px solid var(--red-border);
+  border-radius: 20px;
+  padding: 0.125rem 0.5rem;
+}
+.repo-sub {
+  display: flex;
+  align-items: center;
+  gap: 0.4375rem;
+  margin-top: 0.3125rem;
+  font-size: 0.781rem;
+  color: var(--text-3);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.repo-sub .dot {
+  font-family: inherit;
+}
+.repo-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+.list-empty {
+  padding: 2.5rem 1.25rem;
+  text-align: center;
+  color: var(--text-3);
+  font-size: 0.844rem;
+}
+.not-found-msg {
+  padding: 3rem 0;
+  text-align: center;
+  color: var(--text-2);
+}
+</style>
diff --git a/frontend/src/pages/relay/ProjectSettingsPage.vue b/frontend/src/pages/relay/ProjectSettingsPage.vue
index 4c8427b..5b1b301 100644
--- a/frontend/src/pages/relay/ProjectSettingsPage.vue
+++ b/frontend/src/pages/relay/ProjectSettingsPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// 저장소 설정 — 일반 설정 + 위험 구역 (관리자 전용)
+// 프로젝트 설정 — 일반 설정 + 위험 구역 (관리자 전용)
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter, RouterLink } from 'vue-router'
 import AppShell from '@/layouts/AppShell.vue'
@@ -29,7 +29,7 @@ const description = ref('')
 const visibility = ref<Visibility>('private')
 const saving = ref(false)
 
-// 저장소 로드 + 폼 초기화
+// 프로젝트 로드 + 폼 초기화
 async function loadRepo() {
   try {
     repo.value = await projectStore.fetchOne(projectId.value)
@@ -38,7 +38,7 @@ async function loadRepo() {
     return
   }
   if (!repo.value) return
-  // 비관리자는 설정 화면에 진입할 수 없음 — 저장소 상세로 되돌린다(탭도 숨겨져 있어 정상 경로로는 도달 불가)
+  // 비관리자는 설정 화면에 진입할 수 없음 — 프로젝트 상세로 되돌린다(탭도 숨겨져 있어 정상 경로로는 도달 불가)
   if (!repo.value.canManage) {
     void router.replace(`/projects/${projectId.value}`)
     return
@@ -67,10 +67,10 @@ async function save() {
   }
 }
 
-// 저장소 삭제 (소유자 전용)
+// 프로젝트 삭제 (소유자 전용)
 async function removeRepo() {
   if (!repo.value || !isOwner.value) return
-  if (!window.confirm('저장소와 그 안의 모든 업무·활동 기록이 영구 삭제됩니다. 계속할까요?')) return
+  if (!window.confirm('프로젝트와 그 안의 모든 업무·활동 기록이 영구 삭제됩니다. 계속할까요?')) return
   try {
     await projectStore.remove(projectId.value)
     await router.push('/projects')
@@ -91,7 +91,7 @@ async function removeRepo() {
           to="/projects"
           class="lnk"
         >
-          저장소
+          프로젝트
         </RouterLink>
         <span class="sep">/</span>
         <RouterLink
@@ -115,6 +115,7 @@ async function removeRepo() {
         active="settings"
         :task-count="repo.totalCount"
         :member-count="memberCount"
+        :repo-count="repo.repoCount"
         :can-manage="repo.canManage"
       />
 
@@ -136,7 +137,7 @@ async function removeRepo() {
               rx="2"
             /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
           </svg>
-          저장소 설정은 <b>관리자</b>만 변경할 수 있습니다.
+          프로젝트 설정은 <b>관리자</b>만 변경할 수 있습니다.
         </div>
 
         <!-- 일반 -->
@@ -174,7 +175,7 @@ async function removeRepo() {
               공개 범위
             </div>
             <div class="fhint">
-              저장소와 그 안의 업무를 누가 볼 수 있는지 결정합니다.
+              프로젝트와 그 안의 업무를 누가 볼 수 있는지 결정합니다.
             </div>
             <div class="radio-group">
               <button
@@ -199,7 +200,7 @@ async function removeRepo() {
                 </span>
                 <span class="rc-body">
                   <span class="rc-title">비공개</span>
-                  <span class="rc-desc">저장소에 초대된 멤버만 접근하고 업무를 확인할 수 있습니다.</span>
+                  <span class="rc-desc">프로젝트에 초대된 멤버만 접근하고 업무를 확인할 수 있습니다.</span>
                 </span>
                 <span class="rc-radio" />
               </button>
@@ -223,7 +224,7 @@ async function removeRepo() {
                 </span>
                 <span class="rc-body">
                   <span class="rc-title">공개</span>
-                  <span class="rc-desc">조직 내 모든 구성원이 저장소를 보고 업무 현황을 열람할 수 있습니다.</span>
+                  <span class="rc-desc">조직 내 모든 구성원이 프로젝트를 보고 업무 현황을 열람할 수 있습니다.</span>
                 </span>
                 <span class="rc-radio" />
               </button>
@@ -250,10 +251,10 @@ async function removeRepo() {
           <div class="danger-row">
             <div class="dr-main">
               <div class="dr-title">
-                저장소 삭제
+                프로젝트 삭제
               </div>
               <div class="dr-desc">
-                저장소와 그 안의 모든 업무·활동 기록이 영구 삭제됩니다. 되돌릴 수 없습니다.
+                프로젝트와 그 안의 모든 업무·활동 기록이 영구 삭제됩니다. 되돌릴 수 없습니다.
                 <span
                   v-if="!isOwner"
                   class="owner-only"
@@ -266,7 +267,7 @@ async function removeRepo() {
               :disabled="!isOwner"
               @click="removeRepo"
             >
-              저장소 삭제
+              프로젝트 삭제
             </button>
           </div>
         </div>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index e29701b..5f68f9c 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -44,6 +44,12 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/pages/relay/ProjectMembersPage.vue'),
     meta: { requiresAuth: true },
   },
+  {
+    path: '/projects/:projectId/repos',
+    name: 'project-repos',
+    component: () => import('@/pages/relay/ProjectReposPage.vue'),
+    meta: { requiresAuth: true },
+  },
   {
     path: '/projects/:projectId/activity',
     name: 'project-activity',
diff --git a/frontend/src/types/repo.ts b/frontend/src/types/repo.ts
index 9fd1685..7cf3850 100644
--- a/frontend/src/types/repo.ts
+++ b/frontend/src/types/repo.ts
@@ -9,26 +9,23 @@ export interface ApiMember {
   avatarUrl: string | null
 }
 
-// 저장소(API 원시) — 백엔드 RepoResponse 와 1:1
+// 저장소(API 원시) — 백엔드 RepoResponse 와 1:1. 프로젝트에 연동된 Gitea 저장소(코드 연동 전용).
 export interface ApiRepo {
   id: string // slugName (라우팅 식별자)
+  projectId: string // 소속 프로젝트
   name: string
   owner: string
   slug: string // owner/slugName
   desc: string | null
   visibility: Visibility
   branch: string
-  members: ApiMember[]
-  memberCount: number
-  doneCount: number
-  totalCount: number
   cloneUrl: string | null // Gitea HTTPS clone URL (미연동 시 null)
   htmlUrl: string | null // Gitea 웹 UI URL (미연동 시 null)
   giteaMissing: boolean // Gitea 조직에서 사라진 저장소 표시(동기화로 갱신)
   updatedAt: string
   // 현재 사용자 권한 — 단건 조회에서만 내려옴(목록은 미포함)
-  canManage?: boolean // admin (설정 변경/탭 노출)
-  isOwner?: boolean // 소유자 (저장소 삭제)
+  canManage?: boolean // 프로젝트 admin (설정 변경)
+  isOwner?: boolean // 프로젝트 소유자
 }
 
 // 저장소 생성 요청