430 lines
30 KiB
HTML
430 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>q3-launch-campaign · 멤버 — Relay</title>
|
||
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
:root {
|
||
--bg: #f4f5f7; --panel: #ffffff; --border: #e6e8ec; --border-strong: #d7dae0;
|
||
--text: #16181d; --text-2: #5b626e; --text-3: #9298a3;
|
||
--accent: #4f46e5; --accent-hover: #4338ca; --accent-weak: #eef0fe; --accent-border: #c7ccfb;
|
||
--green: #1f9d57; --green-weak: #e8f6ee; --red: #d6455d; --amber: #b7791f;
|
||
--radius: 6px; --radius-sm: 4px; --shadow-sm: 0 1px 2px rgba(20,24,33,.05);
|
||
}
|
||
html, body { background: var(--bg); color: var(--text); font-family: "Pretendard", -apple-system, system-ui, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
|
||
body { min-height: 100vh; }
|
||
|
||
/* topbar */
|
||
.topbar { height: 52px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 28px; padding: 0 20px; position: sticky; top: 0; z-index: 50; }
|
||
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
|
||
.brand .logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #5b54f0, #4338ca); display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 2px 6px rgba(79,70,229,.35); }
|
||
.topnav { display: flex; align-items: center; gap: 2px; }
|
||
.topnav a { color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 500; padding: 7px 12px; border-radius: var(--radius-sm); line-height: 1; white-space: nowrap; }
|
||
.topnav a:hover { background: #f1f2f4; color: var(--text); }
|
||
.topnav a.active { color: var(--accent); background: var(--accent-weak); font-weight: 600; }
|
||
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
|
||
.icon-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
|
||
.icon-btn:hover { background: #f1f2f4; color: var(--text); }
|
||
.me { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; background: #0ea5a3; margin-left: 4px; }
|
||
|
||
/* page */
|
||
.page { max-width: 1080px; margin: 0 auto; padding: 0 24px 70px; }
|
||
.crumb { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 12.5px; padding: 18px 0 12px; white-space: nowrap; }
|
||
.crumb .lnk { color: var(--text-2); font-weight: 600; text-decoration: none; }
|
||
.crumb .lnk:hover { color: var(--accent); }
|
||
.crumb .sep { opacity: .5; }
|
||
.crumb b { color: var(--text-2); font-weight: 600; }
|
||
|
||
/* btn */
|
||
.btn { height: 36px; padding: 0 15px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1; text-decoration: none; white-space: nowrap; }
|
||
.btn:hover { background: #f7f8fa; color: var(--text); }
|
||
.btn svg { width: 15px; height: 15px; }
|
||
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.4); }
|
||
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
|
||
|
||
/* repo header */
|
||
.repo-head { display: flex; align-items: flex-start; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; box-shadow: var(--shadow-sm); }
|
||
.repo-ico { width: 46px; height: 46px; border-radius: 10px; background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
|
||
.repo-ico svg { width: 24px; height: 24px; }
|
||
.rh-main { flex: 1; min-width: 0; }
|
||
.rh-title { display: flex; align-items: center; gap: 10px; }
|
||
.rh-name { font-size: 18px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
|
||
.rh-name .owner { color: var(--text-3); font-weight: 500; }
|
||
.rh-slug { font-size: 12.5px; color: var(--text-3); margin-top: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||
.vis { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1.5; }
|
||
.vis svg { width: 11px; height: 11px; }
|
||
.vis.private { color: var(--text-2); background: #f1f2f4; border: 1px solid var(--border); }
|
||
.rh-desc { font-size: 13.5px; color: var(--text-2); margin-top: 6px; }
|
||
.rh-meta { display: flex; align-items: center; gap: 15px; margin-top: 12px; font-size: 12px; color: var(--text-3); }
|
||
.rh-meta .mi { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
|
||
.rh-meta .mi svg { width: 13px; height: 13px; }
|
||
.rh-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||
|
||
.avatar { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||
.avstack { display: flex; align-items: center; }
|
||
.avstack .avatar { margin-left: -7px; box-shadow: 0 0 0 2px #fff; }
|
||
.avstack .avatar:first-child { margin-left: 0; }
|
||
.av-a { background: #e0518d; } .av-b { background: #3d8bf2; } .av-c { background: #16a37b; }
|
||
.av-d { background: #b3631f; } .av-e { background: #7c5cf0; } .av-f { background: #d0982a; }
|
||
.av-more { background: #eceef1; color: var(--text-2); box-shadow: 0 0 0 2px #fff; }
|
||
|
||
/* tabs */
|
||
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 20px 0 6px; }
|
||
.tabs a { padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||
.tabs a:hover { color: var(--text); }
|
||
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||
.tabs a .tb-label { line-height: 1; }
|
||
.tabs a .tb-count { font-size: 11px; font-weight: 600; color: var(--text-2); background: #f1f2f4; border-radius: 20px; padding: 0 7px; height: 17px; min-width: 17px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
|
||
.tabs a.active .tb-count { background: var(--accent-weak); color: var(--accent); }
|
||
|
||
.tab-note { font-size: 12.5px; color: var(--text-3); margin: 12px 0 16px; display: flex; align-items: center; gap: 7px; }
|
||
.tab-note svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
|
||
|
||
/* toolbar */
|
||
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
|
||
.search { display: flex; align-items: center; gap: 8px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 11px; background: #fff; width: 240px; }
|
||
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
|
||
.search svg { width: 16px; height: 16px; color: var(--text-3); }
|
||
.search input { border: none; outline: none; flex: 1; min-width: 0; font-family: inherit; font-size: 13.5px; background: transparent; }
|
||
.search input::placeholder { color: var(--text-3); }
|
||
.segmented { display: flex; background: #eceef1; border-radius: var(--radius); padding: 3px; gap: 2px; }
|
||
.segmented button { border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 5px 12px; border-radius: 4px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
|
||
.segmented button.active { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
|
||
.segmented button .n { font-size: 11px; color: var(--text-3); font-weight: 600; }
|
||
.segmented button.active .n { color: var(--accent); }
|
||
|
||
/* member list */
|
||
.list { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; }
|
||
.mem-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--border); }
|
||
.mem-row:first-child { border-top: none; }
|
||
.mem-row:hover { background: #fafbfc; }
|
||
.mem-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||
.mem-info { flex: 1; min-width: 0; }
|
||
.mem-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
|
||
.you-pill { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-weak); border: 1px solid var(--accent-border); border-radius: 20px; padding: 1px 7px; line-height: 1.5; }
|
||
.mem-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
|
||
.mem-sub .dot { margin: 0 6px; opacity: .5; }
|
||
.mem-tasks { font-size: 12.5px; color: var(--text-2); width: 86px; text-align: right; flex-shrink: 0; white-space: nowrap; }
|
||
.mem-tasks b { color: var(--text); }
|
||
.mem-tasks.zero { color: var(--text-3); }
|
||
|
||
/* role control */
|
||
.role { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 13px; font-weight: 600; color: var(--text-2); background: #fff; cursor: pointer; white-space: nowrap; width: 104px; }
|
||
.role:hover { background: #f7f8fa; }
|
||
.role .role-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
|
||
.role.admin { color: var(--accent); border-color: var(--accent-border); background: var(--accent-weak); }
|
||
.role.admin .role-dot { background: var(--accent); }
|
||
.role .caret { margin-left: auto; color: var(--text-3); display: grid; place-items: center; }
|
||
.role .caret svg { width: 14px; height: 14px; }
|
||
.role.fixed { background: #f1f2f4; cursor: not-allowed; color: var(--text-2); border-color: var(--border-strong); }
|
||
.role.fixed .role-dot { background: var(--accent); }
|
||
.role.fixed .caret { color: var(--text-3); }
|
||
.role.fixed .lock { margin-left: auto; color: var(--text-3); display: grid; place-items: center; }
|
||
.role.fixed .lock svg { width: 13px; height: 13px; }
|
||
|
||
.mem-remove { width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-3); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; opacity: 0; }
|
||
.mem-row:hover .mem-remove { opacity: 1; }
|
||
.mem-remove:hover { background: #f1f2f4; color: var(--red); }
|
||
.mem-remove svg { width: 16px; height: 16px; }
|
||
.mem-remove.disabled { opacity: 0 !important; pointer-events: none; }
|
||
|
||
/* invite modal */
|
||
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,24,33,.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
|
||
.modal-backdrop.open { display: flex; }
|
||
.modal { width: 100%; max-width: 524px; background: #fff; border-radius: 14px; box-shadow: 0 24px 64px rgba(20,24,33,.32); overflow: hidden; animation: pop .14s ease-out; }
|
||
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
|
||
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 16px; }
|
||
.modal-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
|
||
.modal-head .mh-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
|
||
.modal-close { margin-left: auto; width: 32px; height: 32px; border: none; background: transparent; color: var(--text-3); border-radius: var(--radius-sm); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
|
||
.modal-close:hover { background: #f1f2f4; color: var(--text); }
|
||
.modal-close svg { width: 18px; height: 18px; }
|
||
.modal-body { padding: 4px 24px 8px; }
|
||
.m-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; display: block; }
|
||
|
||
.icombo { position: relative; }
|
||
.icombo-field { border: 1px solid var(--accent); border-radius: var(--radius); padding: 7px 8px; background: #fff; box-shadow: 0 0 0 3px var(--accent-weak); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
||
.ichip { display: inline-flex; align-items: center; gap: 6px; background: #f1f2f4; border: 1px solid var(--border); border-radius: 20px; padding: 3px 8px 3px 4px; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
|
||
.ichip.ext { background: var(--accent-weak); border-color: var(--accent-border); color: var(--accent); }
|
||
.ichip .x { color: var(--text-3); cursor: pointer; font-size: 13px; line-height: 1; }
|
||
.ichip .x:hover { color: var(--red); }
|
||
.icombo-input { flex: 1; min-width: 120px; border: none; outline: none; font-family: inherit; font-size: 13px; padding: 4px 2px; background: transparent; }
|
||
.icombo-input::placeholder { color: var(--text-3); }
|
||
.idd { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5; background: #fff; border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 12px 32px rgba(20,24,33,.16); padding: 6px; }
|
||
.icombo .idd.show { display: block; }
|
||
.idd-cap { font-size: 11px; color: var(--text-3); font-weight: 600; padding: 5px 8px; }
|
||
.idd-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; }
|
||
.idd-item:hover { background: #f5f6f8; }
|
||
.idd-item .nm { font-size: 13px; font-weight: 600; white-space: nowrap; }
|
||
.idd-item .em { font-size: 12px; color: var(--text-3); margin-left: auto; white-space: nowrap; flex-shrink: 0; }
|
||
.idd-invite { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; border-top: 1px solid var(--border); margin-top: 4px; }
|
||
.idd-invite:hover { background: var(--accent-weak); }
|
||
.idd-invite .pl { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
|
||
.idd-invite .pl svg { width: 15px; height: 15px; }
|
||
.idd-invite .t1 { font-size: 13px; font-weight: 600; color: var(--accent); }
|
||
.idd-invite .t2 { font-size: 11.5px; color: var(--text-3); }
|
||
|
||
.m-row { display: flex; gap: 12px; margin-top: 18px; }
|
||
.m-role { flex: 0 0 150px; }
|
||
.m-grow { flex: 1; }
|
||
.select-wrap { position: relative; }
|
||
.select-wrap select { appearance: none; -webkit-appearance: none; width: 100%; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 34px 0 12px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); background: #fff; cursor: pointer; }
|
||
.select-wrap select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
|
||
.select-wrap .caret { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; display: grid; place-items: center; }
|
||
.select-wrap .caret svg { width: 15px; height: 15px; }
|
||
.m-input { width: 100%; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 12px; font-family: inherit; font-size: 13.5px; color: var(--text); background: #fff; }
|
||
.m-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
|
||
.m-input::placeholder { color: var(--text-3); }
|
||
.role-hint { font-size: 12px; color: var(--text-3); margin-top: 8px; line-height: 1.5; }
|
||
|
||
.modal-foot { display: flex; align-items: center; gap: 9px; padding: 16px 24px; border-top: 1px solid var(--border); background: #fafbfc; margin-top: 16px; }
|
||
.modal-foot .fnote { font-size: 12px; color: var(--text-3); margin-right: auto; }
|
||
.mbtn { height: 38px; padding: 0 16px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; border: 1px solid var(--border-strong); background: #fff; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
|
||
.mbtn:hover { background: #f1f2f4; color: var(--text); }
|
||
.mbtn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.4); }
|
||
.mbtn.primary:hover { background: var(--accent-hover); }
|
||
.mbtn svg { width: 15px; height: 15px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="topbar">
|
||
<div class="brand"><div class="logo">R</div>Relay</div>
|
||
<nav class="topnav">
|
||
<a href="내 업무.html">내 업무</a>
|
||
<a href="저장소 목록.html" class="active">저장소</a>
|
||
</nav>
|
||
<div class="topbar-right">
|
||
<button class="icon-btn" title="검색"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg></button>
|
||
<button class="icon-btn" title="알림"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg></button>
|
||
<div class="me">정</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="page" data-screen-label="저장소 멤버">
|
||
<div class="crumb">
|
||
<a href="저장소 목록.html" class="lnk">저장소</a>
|
||
<span class="sep">/</span>
|
||
<a href="저장소 상세.html" class="lnk">3분기 신제품 런칭 캘페인</a>
|
||
<span class="sep">/</span>
|
||
<b>멤버</b>
|
||
</div>
|
||
|
||
<!-- 저장소 헤더 -->
|
||
<div class="repo-head">
|
||
<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="rh-main">
|
||
<div class="rh-title">
|
||
<span class="rh-name">3분기 신제품 런칭 캘페인</span>
|
||
<span class="vis private"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>비공개</span>
|
||
</div>
|
||
<div class="rh-slug">marketing-team / q3-launch-campaign</div>
|
||
<div class="rh-desc">3분기 신제품(라인 클렌저) 런칭 캠페인 소재 제작 및 검수</div>
|
||
<div class="rh-meta">
|
||
<span class="mi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>main</span>
|
||
<span class="mi avstack"><span class="avatar av-f">정</span><span class="avatar av-a">김</span><span class="avatar av-b">박</span><span class="avatar av-c">이</span><span class="avatar av-d">최</span></span>
|
||
<span class="mi">멤버 5명</span>
|
||
</div>
|
||
</div>
|
||
<div class="rh-actions">
|
||
<a class="btn primary" href="업무 작성.html"><svg 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>새 업무</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 서브탭 -->
|
||
<nav class="tabs">
|
||
<a href="저장소 상세.html"><span class="tb-label">업무</span> <span class="tb-count">12</span></a>
|
||
<a href="#" class="active"><span class="tb-label">멤버</span> <span class="tb-count">5</span></a>
|
||
<a href="저장소 활동.html"><span class="tb-label">활동</span></a>
|
||
<a href="저장소 설정.html"><span class="tb-label">설정</span></a>
|
||
</nav>
|
||
|
||
<div class="tab-note">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
|
||
이 저장소의 멤버만 업무 담당자로 지정할 수 있습니다. <b style="color:var(--text-2);font-weight:600;white-space:nowrap">관리자</b>는 업무 지시·멤버 관리가 가능하고, <b style="color:var(--text-2);font-weight:600;white-space:nowrap">멤버</b>는 담당자로 배정되어 업무를 수행합니다.
|
||
</div>
|
||
|
||
<!-- 툴바 -->
|
||
<div class="toolbar">
|
||
<div class="search">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg>
|
||
<input type="text" placeholder="이름·이메일 검색…">
|
||
</div>
|
||
<div class="segmented">
|
||
<button class="active">전체 <span class="n">5</span></button>
|
||
<button>관리자 <span class="n">1</span></button>
|
||
<button>멤버 <span class="n">4</span></button>
|
||
</div>
|
||
<button class="btn primary" id="inviteBtn" type="button" style="margin-left:auto;border:none">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg>
|
||
멤버 초대
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 멤버 목록 -->
|
||
<div class="list">
|
||
|
||
<!-- 관리자 (소유자·현재 사용자) -->
|
||
<div class="mem-row">
|
||
<span class="mem-av av-f">정</span>
|
||
<div class="mem-info">
|
||
<div class="mem-name">정태경 <span class="you-pill">나</span></div>
|
||
<div class="mem-sub">tkjung@acme.co <span class="dot">·</span> 리드</div>
|
||
</div>
|
||
<div class="mem-tasks"><b>1</b>건 담당</div>
|
||
<div class="role fixed admin">
|
||
<span class="role-dot"></span>관리자
|
||
<span class="lock"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
|
||
</div>
|
||
<button class="mem-remove disabled" title="소유자는 제거할 수 없습니다"><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>
|
||
|
||
<!-- 멤버 -->
|
||
<div class="mem-row">
|
||
<span class="mem-av av-a">김</span>
|
||
<div class="mem-info">
|
||
<div class="mem-name">김서연</div>
|
||
<div class="mem-sub">sykim@acme.co <span class="dot">·</span> 콘텐츠 디자인</div>
|
||
</div>
|
||
<div class="mem-tasks"><b>2</b>건 담당</div>
|
||
<div class="role">
|
||
<span class="role-dot"></span>멤버
|
||
<span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></span>
|
||
</div>
|
||
<button class="mem-remove" title="멤버 제거"><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>
|
||
|
||
<div class="mem-row">
|
||
<span class="mem-av av-b">박</span>
|
||
<div class="mem-info">
|
||
<div class="mem-name">박지훈</div>
|
||
<div class="mem-sub">jhpark@acme.co <span class="dot">·</span> 퍼포먼스 마케팅</div>
|
||
</div>
|
||
<div class="mem-tasks"><b>2</b>건 담당</div>
|
||
<div class="role">
|
||
<span class="role-dot"></span>멤버
|
||
<span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></span>
|
||
</div>
|
||
<button class="mem-remove" title="멤버 제거"><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>
|
||
|
||
<div class="mem-row">
|
||
<span class="mem-av av-c">이</span>
|
||
<div class="mem-info">
|
||
<div class="mem-name">이도윤</div>
|
||
<div class="mem-sub">dylee@acme.co <span class="dot">·</span> 카피라이터</div>
|
||
</div>
|
||
<div class="mem-tasks"><b>2</b>건 담당</div>
|
||
<div class="role">
|
||
<span class="role-dot"></span>멤버
|
||
<span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></span>
|
||
</div>
|
||
<button class="mem-remove" title="멤버 제거"><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>
|
||
|
||
<div class="mem-row">
|
||
<span class="mem-av av-d">최</span>
|
||
<div class="mem-info">
|
||
<div class="mem-name">최유진</div>
|
||
<div class="mem-sub">yjchoi@acme.co <span class="dot">·</span> UX 디자인</div>
|
||
</div>
|
||
<div class="mem-tasks"><b>1</b>건 담당</div>
|
||
<div class="role">
|
||
<span class="role-dot"></span>멤버
|
||
<span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></span>
|
||
</div>
|
||
<button class="mem-remove" title="멤버 제거"><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>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 멤버 초대 모달 -->
|
||
<div class="modal-backdrop" id="inviteModal">
|
||
<div class="modal" role="dialog" aria-modal="true">
|
||
<div class="modal-head">
|
||
<div>
|
||
<h2>멤버 초대</h2>
|
||
<div class="mh-sub"><b style="color:var(--text-2);font-weight:600">3분기 신제품 런칭 캠페인</b> 저장소에 멤버를 추가합니다.</div>
|
||
</div>
|
||
<button class="modal-close" id="inviteClose" type="button"><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>
|
||
<div class="modal-body">
|
||
<label class="m-label">초대할 사람</label>
|
||
<div class="icombo">
|
||
<div class="icombo-field">
|
||
<span class="ichip"><span class="avatar av-f" style="width:18px;height:18px;font-size:9px">한</span>한지민 <span class="x">×</span></span>
|
||
<span class="ichip ext"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 6-10 7L2 6"/></svg>partner@vendor.com <span class="x">×</span></span>
|
||
<input class="icombo-input" placeholder="이름 또는 이메일 입력…">
|
||
</div>
|
||
<div class="idd">
|
||
<div class="idd-cap">조직 멤버 · 이 저장소에 없는 사람</div>
|
||
<div class="idd-item">
|
||
<span class="avatar av-b" style="width:26px;height:26px;font-size:11px">오</span>
|
||
<span class="nm">오세훈</span><span class="em">sehoon.oh@acme.co</span>
|
||
</div>
|
||
<div class="idd-item">
|
||
<span class="avatar av-c" style="width:26px;height:26px;font-size:11px">강</span>
|
||
<span class="nm">강민서</span><span class="em">minseo.kang@acme.co</span>
|
||
</div>
|
||
<div class="idd-item">
|
||
<span class="avatar av-e" style="width:26px;height:26px;font-size:11px">윤</span>
|
||
<span class="nm">윤하늘</span><span class="em">haneul.yoon@acme.co</span>
|
||
</div>
|
||
<div class="idd-invite">
|
||
<span class="pl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5v14"/></svg></span>
|
||
<span><div class="t1">이메일로 외부 초대</div><div class="t2">조직에 없는 사람도 이메일로 초대할 수 있어요</div></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="m-row">
|
||
<div class="m-role">
|
||
<label class="m-label">역할</label>
|
||
<div class="select-wrap">
|
||
<select>
|
||
<option>멤버</option>
|
||
<option>관리자</option>
|
||
</select>
|
||
<span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></span>
|
||
</div>
|
||
</div>
|
||
<div class="m-grow">
|
||
<label class="m-label">초대 메시지 <span style="color:var(--text-3);font-weight:500">(선택)</span></label>
|
||
<input class="m-input" type="text" placeholder="함께 캠페인 준비해요!">
|
||
</div>
|
||
</div>
|
||
<div class="role-hint"><b style="color:var(--text-2);font-weight:600">멤버</b>는 담당자로 배정되어 업무를 수행하고, <b style="color:var(--text-2);font-weight:600">관리자</b>는 업무 지시와 멤버 관리도 할 수 있습니다.</div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<span class="fnote">초대받은 사람에게 메일이 발송됩니다.</span>
|
||
<button class="mbtn" id="inviteCancel" type="button">취소</button>
|
||
<button class="mbtn primary" type="button">
|
||
<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>
|
||
초대 보내기 (2)
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var modal = document.getElementById('inviteModal');
|
||
function openModal() { modal.classList.add('open'); }
|
||
function closeModal() { modal.classList.remove('open'); }
|
||
document.getElementById('inviteBtn').addEventListener('click', openModal);
|
||
document.getElementById('inviteClose').addEventListener('click', closeModal);
|
||
document.getElementById('inviteCancel').addEventListener('click', closeModal);
|
||
modal.addEventListener('click', function (e) { if (e.target === modal) closeModal(); });
|
||
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeModal(); });
|
||
var iInput = document.querySelector('.icombo-input');
|
||
var idd = document.querySelector('.idd');
|
||
iInput.addEventListener('focus', function () { idd.classList.add('show'); });
|
||
iInput.addEventListener('blur', function () { setTimeout(function () { idd.classList.remove('show'); }, 120); });
|
||
</script>
|
||
|
||
</body>
|
||
</html> |