ttipo/comrelay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 멤버 초대 모달을 BaseModal 로 전환 (Phase 1b)

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
ttipo
2026-06-22 23:41:41 +09:00
parent 5f8b2597bf
commit 0c4f0817e6
2 changed files with 149 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/common/BaseModal.vue
+30 -2
View File
@@ -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;
frontend/src/pages/relay/ProjectMembersPage.vue
+119 -278
View File
@@ -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>