From 0c4f0817e614ce19c6d918aacebc11aaa3259a5d Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Mon, 22 Jun 2026 23:41:41 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=A9=A4=EB=B2=84=20=EC=B4=88?=
 =?UTF-8?q?=EB=8C=80=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20BaseModal=20=EB=A1=9C?=
 =?UTF-8?q?=20=EC=A0=84=ED=99=98=20(Phase=201b)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 중복 모달 셸/헤더/푸터/필드 CSS(~150줄) 제거 → BaseModal + 전역 .form-*
- BaseModal 에 subtitle 슬롯 + 푸터 버튼 아이콘 정렬 추가
- 본문 폼은 display:contents 로 BaseModal 본문 간격 상속,
  고유 요소(자동완성/역할 힌트/푸터 노트)만 .invite-body 로 재스코프

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/common/BaseModal.vue  |  32 +-
 .../src/pages/relay/ProjectMembersPage.vue    | 397 ++++++------------
 2 files changed, 149 insertions(+), 280 deletions(-)

diff --git a/frontend/src/components/common/BaseModal.vue b/frontend/src/components/common/BaseModal.vue
index f29b4d6..d1a1046 100644
--- a/frontend/src/components/common/BaseModal.vue
+++ b/frontend/src/components/common/BaseModal.vue
@@ -35,7 +35,15 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
         aria-modal="true"
       >
         <div class="bm-head">
-          <h3>{{ title }}</h3>
+          <div class="bm-head-text">
+            <h3>{{ title }}</h3>
+            <div
+              v-if="$slots.subtitle"
+              class="bm-sub"
+            >
+              <slot name="subtitle" />
+            </div>
+          </div>
           <button
             type="button"
             class="bm-x"
@@ -92,8 +100,9 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
 }
 .bm-head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
+  gap: 0.75rem;
   padding: 1.375rem 1.5rem 1rem;
   position: sticky;
   top: 0;
@@ -106,6 +115,18 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
   font-weight: 700;
   letter-spacing: -0.01875rem;
 }
+.bm-sub {
+  font-size: 0.8125rem;
+  color: var(--text-2);
+  margin-top: 0.25rem;
+}
+.bm-sub :deep(b) {
+  color: var(--text-2);
+  font-weight: 600;
+}
+.bm-x {
+  flex-shrink: 0;
+}
 .bm-x {
   width: 2rem;
   height: 2rem;
@@ -149,6 +170,13 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
   flex: 0 0 auto;
   height: 2.375rem;
   padding: 0 1rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.bm-foot :deep(.mbtn svg) {
+  width: 0.9375rem;
+  height: 0.9375rem;
 }
 .bm-foot :deep(.mbtn:disabled) {
   opacity: 0.45;
diff --git a/frontend/src/pages/relay/ProjectMembersPage.vue b/frontend/src/pages/relay/ProjectMembersPage.vue
index b622133..c67c78c 100644
--- a/frontend/src/pages/relay/ProjectMembersPage.vue
+++ b/frontend/src/pages/relay/ProjectMembersPage.vue
@@ -7,6 +7,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 BaseModal from '@/components/common/BaseModal.vue'
 import { useProjectStore } from '@/stores/project.store'
 import { useMemberStore } from '@/stores/member.store'
 import { useUser } from '@/composables/useUser'
@@ -466,134 +467,109 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
     </div>
 
     <!-- 멤버 초대 모달 -->
-    <Teleport to="body">
-      <div
-        class="modal-backdrop"
-        :class="{ open: showInvite }"
-        @click.self="showInvite = false"
-      >
-        <div
-          class="invite-modal"
-          role="dialog"
-          aria-modal="true"
-        >
-          <div class="modal-head">
-            <div>
-              <h2>멤버 초대</h2>
-              <div class="mh-sub">
-                <b>{{ repo?.name }}</b> 프로젝트에 멤버를 추가합니다.
-              </div>
-            </div>
-            <button
-              class="modal-close"
-              type="button"
-              @click="showInvite = false"
-            >
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              ><path d="M18 6 6 18M6 6l12 12" /></svg>
-            </button>
-          </div>
-          <form
-            class="modal-body"
-            @submit.prevent="submitInvite"
-          >
-            <div class="m-field uc-field">
-              <label class="m-label">초대할 사람 (이메일)</label>
-              <input
-                v-model="inviteEmail"
-                class="m-input"
-                type="email"
-                placeholder="가입된 사용자의 이메일 입력…"
-                autocomplete="off"
-                @focus="onEmailFocus"
-                @input="onEmailInput"
-                @blur="onEmailBlur"
-              >
-              <!-- 사용자 자동완성 드롭다운 -->
-              <div
-                v-if="showUserDropdown"
-                class="user-dd"
-              >
-                <div
-                  v-if="usersLoading"
-                  class="user-dd-msg"
-                >
-                  불러오는 중…
-                </div>
-                <template v-else>
-                  <button
-                    v-for="u in userOptions"
-                    :key="u.id"
-                    type="button"
-                    class="user-dd-item"
-                    @mousedown.prevent="selectUser(u)"
-                  >
-                    <span class="avatar user-av"><UserAvatar
-                      :url="u.avatarUrl"
-                      :name="u.name"
-                    /></span>
-                    <span class="user-nm">{{ u.name }}</span>
-                    <span class="user-em">{{ u.email }}</span>
-                  </button>
-                  <div
-                    v-if="userOptions.length === 0"
-                    class="user-dd-msg"
-                  >
-                    {{ inviteEmail.trim() ? '일치하는 사용자가 없습니다.' : '초대할 수 있는 사용자가 없습니다.' }}
-                  </div>
-                </template>
-              </div>
-            </div>
+    <BaseModal
+      v-if="showInvite"
+      title="멤버 초대"
+      @close="closeInvite"
+    >
+      <template #subtitle>
+        <b>{{ repo?.name }}</b> 프로젝트에 멤버를 추가합니다.
+      </template>
 
-            <div class="m-field">
-              <label class="m-label">역할</label>
-              <DropdownSelect
-                v-model="inviteRole"
-                :options="ROLE_OPTIONS"
-                block
-                class="role-select"
-                aria-label="역할"
-              />
-            </div>
-            <div class="role-hint">
-              <b>멤버</b>는 담당자로 배정되어 업무를 수행하고, <b>관리자</b>는 업무 지시와 멤버 관리도 할 수 있습니다.
-            </div>
-          </form>
-          <div class="modal-foot">
-            <span class="fnote">이미 가입된 사용자만 초대할 수 있습니다.</span>
-            <button
-              class="mbtn"
-              type="button"
-              @click="closeInvite"
+      <form
+        class="invite-body"
+        @submit.prevent="submitInvite"
+      >
+        <div class="form-field uc-field">
+          <label class="form-label">초대할 사람 (이메일)</label>
+          <input
+            v-model="inviteEmail"
+            class="form-input"
+            type="email"
+            placeholder="가입된 사용자의 이메일 입력…"
+            autocomplete="off"
+            @focus="onEmailFocus"
+            @input="onEmailInput"
+            @blur="onEmailBlur"
+          >
+          <!-- 사용자 자동완성 드롭다운 -->
+          <div
+            v-if="showUserDropdown"
+            class="user-dd"
+          >
+            <div
+              v-if="usersLoading"
+              class="user-dd-msg"
             >
-              취소
-            </button>
-            <button
-              class="mbtn primary"
-              type="button"
-              :disabled="!canSubmitInvite"
-              @click="submitInvite"
-            >
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              ><path d="m22 2-7 20-4-9-9-4Z" /><path d="M22 2 11 13" /></svg>
-              {{ inviteBusy ? '초대 중…' : '초대 보내기' }}
-            </button>
+              불러오는 중…
+            </div>
+            <template v-else>
+              <button
+                v-for="u in userOptions"
+                :key="u.id"
+                type="button"
+                class="user-dd-item"
+                @mousedown.prevent="selectUser(u)"
+              >
+                <span class="avatar user-av"><UserAvatar
+                  :url="u.avatarUrl"
+                  :name="u.name"
+                /></span>
+                <span class="user-nm">{{ u.name }}</span>
+                <span class="user-em">{{ u.email }}</span>
+              </button>
+              <div
+                v-if="userOptions.length === 0"
+                class="user-dd-msg"
+              >
+                {{ inviteEmail.trim() ? '일치하는 사용자가 없습니다.' : '초대할 수 있는 사용자가 없습니다.' }}
+              </div>
+            </template>
           </div>
         </div>
-      </div>
-    </Teleport>
+
+        <div class="form-field">
+          <label class="form-label">역할</label>
+          <DropdownSelect
+            v-model="inviteRole"
+            :options="ROLE_OPTIONS"
+            block
+            class="role-select"
+            aria-label="역할"
+          />
+          <div class="role-hint">
+            <b>멤버</b>는 담당자로 배정되어 업무를 수행하고, <b>관리자</b>는 업무 지시와 멤버 관리도 할 수 있습니다.
+          </div>
+        </div>
+      </form>
+
+      <template #foot>
+        <span class="fnote">이미 가입된 사용자만 초대할 수 있습니다.</span>
+        <button
+          class="mbtn"
+          type="button"
+          @click="closeInvite"
+        >
+          취소
+        </button>
+        <button
+          class="mbtn primary"
+          type="button"
+          :disabled="!canSubmitInvite"
+          @click="submitInvite"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ><path d="m22 2-7 20-4-9-9-4Z" /><path d="M22 2 11 13" /></svg>
+          {{ inviteBusy ? '초대 중…' : '초대 보내기' }}
+        </button>
+      </template>
+    </BaseModal>
   </AppShell>
 </template>
 
@@ -867,73 +843,17 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
 
 <!-- 초대 모달은 Teleport 로 body 에 렌더되므로 비-scoped 전역 스타일 -->
 <style>
-.invite-modal {
-  width: 100%;
-  max-width: 32.75rem;
-  background: #fff;
-  border-radius: 0.875rem;
-  box-shadow: 0 24px 64px rgba(20, 24, 33, 0.32);
-  /* overflow:hidden 제거 — 자동완성 드롭다운이 모달 밖으로 넘쳐도 잘리지 않도록 */
+/* 멤버 초대 모달 — 셸/헤더/푸터/필드는 BaseModal + 전역 .form-* 사용.
+   본문 폼은 display:contents 로 BaseModal 본문 간격을 상속받고,
+   고유 요소(자동완성 드롭다운/역할 힌트/푸터 노트)만 여기서 정의.
+   (BaseModal 이 body 로 Teleport 하므로 비-scoped 전역 스타일) */
+.invite-body {
+  display: contents;
 }
-.invite-modal .modal-head {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 1.375rem 1.5rem 1rem;
-}
-.invite-modal .modal-head h2 {
-  font-size: 1.125rem;
-  font-weight: 700;
-  letter-spacing: -0.01875rem;
-}
-.invite-modal .mh-sub {
-  font-size: 0.8125rem;
-  color: var(--text-2);
-  margin-top: 0.25rem;
-}
-.invite-modal .mh-sub b {
-  color: var(--text-2);
-  font-weight: 600;
-}
-.invite-modal .modal-close {
-  margin-left: auto;
-  width: 2rem;
-  height: 2rem;
-  border: none;
-  background: transparent;
-  color: var(--text-3);
-  border-radius: var(--radius-sm);
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.invite-modal .modal-close:hover {
-  background: #f1f2f4;
-  color: var(--text);
-}
-.invite-modal .modal-close svg {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-.invite-modal .modal-body {
-  padding: 0.25rem 1.5rem 0.5rem;
-  /* 전역 .modal-body(text-align:center) 상속 차단 — 폼은 좌측 정렬 */
-  text-align: left;
-}
-/* 모달 입력 필드(이메일/역할) — 세로 스택, 전체 너비 */
-.invite-modal .m-field {
-  margin-top: 1.125rem;
-}
-.invite-modal .m-field:first-child {
-  margin-top: 0;
-}
-
-/* 사용자 자동완성 드롭다운 */
-.invite-modal .uc-field {
+.invite-body .uc-field {
   position: relative;
 }
-.invite-modal .user-dd {
+.invite-body .user-dd {
   position: absolute;
   top: calc(100% + 0.375rem);
   left: 0;
@@ -947,7 +867,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
   max-height: 16rem;
   overflow-y: auto;
 }
-.invite-modal .user-dd-item {
+.invite-body .user-dd-item {
   display: flex;
   align-items: center;
   gap: 0.625rem;
@@ -960,22 +880,22 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
   font-family: inherit;
   text-align: left;
 }
-.invite-modal .user-dd-item:hover {
+.invite-body .user-dd-item:hover {
   background: #f5f6f8;
 }
-.invite-modal .user-av {
+.invite-body .user-av {
   width: 1.625rem;
   height: 1.625rem;
   font-size: 0.6875rem;
   flex-shrink: 0;
 }
-.invite-modal .user-nm {
+.invite-body .user-nm {
   font-size: 0.8125rem;
   font-weight: 600;
   color: var(--text);
   white-space: nowrap;
 }
-.invite-modal .user-em {
+.invite-body .user-em {
   font-size: 0.75rem;
   color: var(--text-3);
   margin-left: auto;
@@ -985,111 +905,32 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
   max-width: 14rem;
   padding-left: 0.5rem;
 }
-.invite-modal .user-dd-msg {
+.invite-body .user-dd-msg {
   padding: 0.75rem 0.5rem;
   font-size: 0.781rem;
   color: var(--text-3);
   text-align: center;
 }
-.invite-modal .m-label {
-  font-size: 0.781rem;
-  font-weight: 600;
-  color: var(--text-2);
-  margin-bottom: 0.5rem;
-  display: block;
-}
-.invite-modal .m-label .muted {
-  color: var(--text-3);
-  font-weight: 500;
-}
 /* 역할 선택 드롭다운(DropdownSelect) — 모달 폼 입력 높이/서체에 맞춤 */
-.invite-modal .role-select :deep(.dd-trigger) {
+.invite-body .role-select .dd-trigger {
   height: 2.5rem;
   font-size: 0.844rem;
   font-weight: 600;
   color: var(--text);
 }
-.invite-modal .m-input {
-  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.844rem;
-  color: var(--text);
-  background: #fff;
-}
-.invite-modal .m-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-weak);
-}
-.invite-modal .m-input::placeholder {
-  color: var(--text-3);
-}
-.invite-modal .role-hint {
+.invite-body .role-hint {
   font-size: 0.75rem;
   color: var(--text-3);
-  margin-top: 0.5rem;
   line-height: 1.5;
 }
-.invite-modal .role-hint b {
+.invite-body .role-hint b {
   color: var(--text-2);
   font-weight: 600;
 }
-.invite-modal .modal-foot {
-  display: flex;
-  align-items: center;
-  gap: 0.5625rem;
-  padding: 1rem 1.5rem;
-  border-top: 1px solid var(--border);
-  background: #fafbfc;
-  margin-top: 1rem;
-  /* overflow:hidden 제거에 따른 하단 라운드 보정 */
-  border-radius: 0 0 0.875rem 0.875rem;
-}
-.invite-modal .modal-foot .fnote {
+/* 푸터 좌측 안내 문구(BaseModal 푸터 슬롯) */
+.fnote {
   font-size: 0.75rem;
   color: var(--text-3);
   margin-right: auto;
 }
-.invite-modal .mbtn {
-  /* 전역 .mbtn(flex:1, 확인 다이얼로그용) 상속 차단 — 버튼은 내용 너비로 우측 정렬 */
-  flex: 0 0 auto;
-  height: 2.375rem;
-  padding: 0 1rem;
-  border-radius: var(--radius);
-  font-size: 0.844rem;
-  font-weight: 600;
-  border: 1px solid var(--border-strong);
-  background: #fff;
-  color: var(--text-2);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-family: inherit;
-}
-.invite-modal .mbtn:hover {
-  background: #f1f2f4;
-  color: var(--text);
-}
-.invite-modal .mbtn.primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #fff;
-  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.4);
-}
-.invite-modal .mbtn.primary:hover {
-  background: var(--accent-hover);
-}
-.invite-modal .mbtn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-.invite-modal .mbtn svg {
-  width: 0.9375rem;
-  height: 0.9375rem;
-}
 </style>