From d3a916dbd7aeb10f02ed1a911358c2b56c5c8255 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Mon, 22 Jun 2026 23:49:09 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=84=B8=EA=B7=B8=EB=A8=BC?=
 =?UTF-8?q?=ED=8A=B8=20=ED=86=A0=EA=B8=80=20SegmentedTabs=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=ED=86=B5=EC=9D=BC=20(Ph?=
 =?UTF-8?q?ase=203-1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

3개 페이지(활동/프로젝트 상세/멤버)에 반복되던 .segmented 버튼 마크업을
options 기반 SegmentedTabs 로 추출(전역 .segmented 스타일은 그대로 사용).
수량(.n) 표기는 option.count 로 처리.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/common/SegmentedTabs.vue   | 28 +++++++++++++
 .../src/pages/relay/ProjectActivityPage.vue   | 37 +++++------------
 .../src/pages/relay/ProjectDetailPage.vue     | 40 +++++++------------
 .../src/pages/relay/ProjectMembersPage.vue    | 34 +++++++---------
 4 files changed, 67 insertions(+), 72 deletions(-)
 create mode 100644 frontend/src/components/common/SegmentedTabs.vue

diff --git a/frontend/src/components/common/SegmentedTabs.vue b/frontend/src/components/common/SegmentedTabs.vue
new file mode 100644
index 0000000..d804d62
--- /dev/null
+++ b/frontend/src/components/common/SegmentedTabs.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts" generic="T extends string">
+// 세그먼트 토글(필터/탭) 공용 컴포넌트 — 전역 .segmented 스타일을 그대로 사용.
+// options 의 count 가 있으면 라벨 뒤에 수량(.n)을 표기한다.
+interface SegOption {
+  value: T
+  label: string
+  count?: number
+}
+defineProps<{ modelValue: T; options: SegOption[] }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: T): void }>()
+</script>
+
+<template>
+  <div class="segmented">
+    <button
+      v-for="o in options"
+      :key="o.value"
+      type="button"
+      :class="{ active: o.value === modelValue }"
+      @click="emit('update:modelValue', o.value)"
+    >
+      {{ o.label }}<span
+        v-if="o.count !== undefined"
+        class="n"
+      >{{ o.count }}</span>
+    </button>
+  </div>
+</template>
diff --git a/frontend/src/pages/relay/ProjectActivityPage.vue b/frontend/src/pages/relay/ProjectActivityPage.vue
index 38a053b..4133c9a 100644
--- a/frontend/src/pages/relay/ProjectActivityPage.vue
+++ b/frontend/src/pages/relay/ProjectActivityPage.vue
@@ -7,11 +7,18 @@ import ProjectHeader from '@/components/ProjectHeader.vue'
 import ProjectTabs from '@/components/ProjectTabs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import DropdownSelect from '@/components/DropdownSelect.vue'
+import SegmentedTabs from '@/components/common/SegmentedTabs.vue'
 import { useProjectStore } from '@/stores/project.store'
 import { useActivityStore } from '@/stores/activity.store'
 import type { Project, ActivityIcon } from '@/mock/relay.mock'
 
 type Filter = 'all' | 'task' | 'member' | 'setting'
+const FILTER_OPTIONS: { value: Filter; label: string }[] = [
+  { value: 'all', label: '전체' },
+  { value: 'task', label: '업무' },
+  { value: 'member', label: '멤버' },
+  { value: 'setting', label: '설정' },
+]
 
 const route = useRoute()
 const projectId = computed(() => String(route.params.projectId))
@@ -139,32 +146,10 @@ const ActIcon = defineComponent({
 
       <!-- 툴바 -->
       <div class="toolbar">
-        <div class="segmented">
-          <button
-            :class="{ active: filter === 'all' }"
-            @click="filter = 'all'"
-          >
-            전체
-          </button>
-          <button
-            :class="{ active: filter === 'task' }"
-            @click="filter = 'task'"
-          >
-            업무
-          </button>
-          <button
-            :class="{ active: filter === 'member' }"
-            @click="filter = 'member'"
-          >
-            멤버
-          </button>
-          <button
-            :class="{ active: filter === 'setting' }"
-            @click="filter = 'setting'"
-          >
-            설정
-          </button>
-        </div>
+        <SegmentedTabs
+          v-model="filter"
+          :options="FILTER_OPTIONS"
+        />
         <DropdownSelect
           v-model="memberFilter"
           :options="memberOptions"
diff --git a/frontend/src/pages/relay/ProjectDetailPage.vue b/frontend/src/pages/relay/ProjectDetailPage.vue
index 9f0d714..e2f1652 100644
--- a/frontend/src/pages/relay/ProjectDetailPage.vue
+++ b/frontend/src/pages/relay/ProjectDetailPage.vue
@@ -9,6 +9,7 @@ import ProjectHeader from '@/components/ProjectHeader.vue'
 import ProjectTabs from '@/components/ProjectTabs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import DropdownSelect from '@/components/DropdownSelect.vue'
+import SegmentedTabs from '@/components/common/SegmentedTabs.vue'
 import { useProjectStore } from '@/stores/project.store'
 import { useTaskStore } from '@/stores/task.store'
 import type { TaskListQuery, TaskSegment, TaskSort } from '@/types/task'
@@ -32,6 +33,15 @@ async function loadProject() {
 
 const keyword = ref('')
 const segment = ref<TaskSegment>('all')
+// 세그먼트 탭 옵션(수량 포함) — counts 갱신에 반응
+const segOptions = computed<{ value: TaskSegment; label: string; count: number }[]>(
+  () => [
+    { value: 'all', label: '전체', count: counts.value.all },
+    { value: 'prog', label: '진행 중', count: counts.value.prog },
+    { value: 'todo', label: '대기', count: counts.value.todo },
+    { value: 'done', label: '완료', count: counts.value.done },
+  ],
+)
 const sort = ref<TaskSort>('latest')
 const SORT_OPTIONS: { value: TaskSort; label: string }[] = [
   { value: 'latest', label: '최신순' },
@@ -188,32 +198,10 @@ const STATUS_LABEL: Record<TaskStatus, string> = {
             placeholder="업무 검색…"
           >
         </div>
-        <div class="segmented">
-          <button
-            :class="{ active: segment === 'all' }"
-            @click="segment = 'all'"
-          >
-            전체 <span class="n">{{ counts.all }}</span>
-          </button>
-          <button
-            :class="{ active: segment === 'prog' }"
-            @click="segment = 'prog'"
-          >
-            진행 중 <span class="n">{{ counts.prog }}</span>
-          </button>
-          <button
-            :class="{ active: segment === 'todo' }"
-            @click="segment = 'todo'"
-          >
-            대기 <span class="n">{{ counts.todo }}</span>
-          </button>
-          <button
-            :class="{ active: segment === 'done' }"
-            @click="segment = 'done'"
-          >
-            완료 <span class="n">{{ counts.done }}</span>
-          </button>
-        </div>
+        <SegmentedTabs
+          v-model="segment"
+          :options="segOptions"
+        />
         <DropdownSelect
           v-model="sort"
           :options="SORT_OPTIONS"
diff --git a/frontend/src/pages/relay/ProjectMembersPage.vue b/frontend/src/pages/relay/ProjectMembersPage.vue
index c67c78c..f89970a 100644
--- a/frontend/src/pages/relay/ProjectMembersPage.vue
+++ b/frontend/src/pages/relay/ProjectMembersPage.vue
@@ -8,6 +8,7 @@ import ProjectTabs from '@/components/ProjectTabs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import DropdownSelect from '@/components/DropdownSelect.vue'
 import BaseModal from '@/components/common/BaseModal.vue'
+import SegmentedTabs from '@/components/common/SegmentedTabs.vue'
 import { useProjectStore } from '@/stores/project.store'
 import { useMemberStore } from '@/stores/member.store'
 import { useUser } from '@/composables/useUser'
@@ -71,6 +72,15 @@ const counts = computed(() => ({
   member: members.value.filter((m) => m.roleType === 'member').length,
 }))
 
+// 역할 필터 세그먼트 옵션(수량 포함)
+const filterOptions = computed<{ value: RoleFilter; label: string; count: number }[]>(
+  () => [
+    { value: 'all', label: '전체', count: counts.value.all },
+    { value: 'admin', label: '관리자', count: counts.value.admin },
+    { value: 'member', label: '멤버', count: counts.value.member },
+  ],
+)
+
 const filteredMembers = computed(() =>
   members.value.filter((m) => {
     const matchRole = filter.value === 'all' || m.roleType === filter.value
@@ -286,26 +296,10 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
             placeholder="이름·이메일 검색…"
           >
         </div>
-        <div class="segmented">
-          <button
-            :class="{ active: filter === 'all' }"
-            @click="filter = 'all'"
-          >
-            전체 <span class="n">{{ counts.all }}</span>
-          </button>
-          <button
-            :class="{ active: filter === 'admin' }"
-            @click="filter = 'admin'"
-          >
-            관리자 <span class="n">{{ counts.admin }}</span>
-          </button>
-          <button
-            :class="{ active: filter === 'member' }"
-            @click="filter = 'member'"
-          >
-            멤버 <span class="n">{{ counts.member }}</span>
-          </button>
-        </div>
+        <SegmentedTabs
+          v-model="filter"
+          :options="filterOptions"
+        />
         <button
           v-if="isAdmin"
           class="btn primary invite"