463 lines
32 KiB
HTML
463 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>메인 배너 이미지 2종 디자인 — 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; --blue: #1d4ed8; --blue-weak: #e8efff; --blue-border: #c9dbff;
|
||
--red: #d6455d; --red-weak: #fdeef0; --red-border: #f1c0c8; --amber: #b7791f; --amber-weak: #fdf4e3; --amber-border: #f3e2bd;
|
||
--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 60px; }
|
||
.crumb { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 12.5px; padding: 16px 0 0; 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; }
|
||
|
||
.pagehead { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0 18px; }
|
||
.ph-main { flex: 1; min-width: 0; }
|
||
.ph-titlerow { display: flex; align-items: center; gap: 10px; }
|
||
.st-badge { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
|
||
.st-badge.prog { color: var(--blue); background: var(--blue-weak); border: 1px solid var(--blue-border); }
|
||
.st-badge.review { color: var(--amber); background: var(--amber-weak); border: 1px solid var(--amber-border); }
|
||
.st-badge.done { color: var(--green); background: var(--green-weak); border: 1px solid #cde8d8; }
|
||
.st-badge.changes { color: var(--red); background: var(--red-weak); border: 1px solid var(--red-border); }
|
||
.ph-tid { font-size: 14px; font-weight: 600; color: var(--text-3); }
|
||
h1.ph-title { font-size: 23px; font-weight: 700; letter-spacing: -.5px; margin-top: 8px; line-height: 1.3; }
|
||
.pagehead .actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 2px; }
|
||
.btn { height: 34px; padding: 0 14px; 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.icon { width: 34px; padding: 0; justify-content: center; }
|
||
|
||
/* more menu */
|
||
.more-wrap { position: relative; }
|
||
.menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 168px; background: #fff; border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 12px 32px rgba(20,24,33,.16); padding: 5px; }
|
||
.menu.open { display: block; }
|
||
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text); padding: 8px 9px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; white-space: nowrap; }
|
||
.menu-item:hover { background: #f5f6f8; }
|
||
.menu-item svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
|
||
.menu-item.danger { color: var(--red); }
|
||
.menu-item.danger svg { color: var(--red); }
|
||
.menu-item.danger:hover { background: var(--red-weak); }
|
||
.menu-sep { height: 1px; background: var(--border); margin: 5px 0; }
|
||
|
||
/* 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: 440px; background: #fff; border-radius: 14px; box-shadow: 0 24px 64px rgba(20,24,33,.32); overflow: hidden; }
|
||
.modal-body { padding: 26px 24px 8px; text-align: center; }
|
||
.modal-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--red-weak); color: var(--red); display: grid; place-items: center; margin: 0 auto 14px; }
|
||
.modal-ico svg { width: 22px; height: 22px; }
|
||
.modal-title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
|
||
.modal-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-top: 8px; }
|
||
.modal-desc b { color: var(--text); font-weight: 600; }
|
||
.modal-foot { display: flex; gap: 9px; padding: 18px 24px 20px; }
|
||
.mbtn { flex: 1; height: 40px; 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; }
|
||
.mbtn:hover { background: #f1f2f4; color: var(--text); }
|
||
.mbtn.danger { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 1px 2px rgba(214,69,93,.4); }
|
||
.mbtn.danger:hover { background: #c23a51; }
|
||
.mbtn.approve { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(31,157,87,.4); }
|
||
.mbtn.approve:hover { background: #188a4b; }
|
||
.mbtn.request-send { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.4); }
|
||
.mbtn.request-send:hover { background: var(--accent-hover); }
|
||
.modal-textarea { width: 100%; min-height: 92px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 12px; font-family: inherit; font-size: 13.5px; line-height: 1.6; color: var(--text); resize: vertical; }
|
||
.modal-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
|
||
.modal-textarea::placeholder { color: var(--text-3); }
|
||
|
||
/* approval sidebar card */
|
||
.ap-card { padding: 16px 18px 18px; border-width: 1px; border-style: solid; }
|
||
.ap-card.review { border-color: var(--amber-border); background: var(--amber-weak); }
|
||
.ap-card.request { border-color: var(--accent-border); background: var(--accent-weak); }
|
||
.ap-card.done { border-color: #cde8d8; background: var(--green-weak); }
|
||
.ap-card.done .ap-card-ico { color: var(--green); border-color: #cde8d8; }
|
||
.ap-card.done .ap-card-title { color: #167a44; }
|
||
.ap-card-head { display: flex; align-items: center; gap: 9px; }
|
||
.ap-card-ico { width: 30px; height: 30px; border-radius: 8px; background: #fff; display: grid; place-items: center; flex-shrink: 0; border: 1px solid; }
|
||
.ap-card.review .ap-card-ico { color: var(--amber); border-color: var(--amber-border); }
|
||
.ap-card.request .ap-card-ico { color: var(--accent); border-color: var(--accent-border); }
|
||
.ap-card-ico svg { width: 17px; height: 17px; }
|
||
.ap-card-title { font-size: 14px; font-weight: 700; white-space: nowrap; }
|
||
.ap-card.review .ap-card-title { color: #8a5a12; }
|
||
.ap-card.request .ap-card-title { color: var(--accent-hover); }
|
||
.ap-card-meta { font-size: 12px; color: var(--text-2); margin-top: 10px; line-height: 1.5; }
|
||
.ap-card-meta b { color: var(--text); font-weight: 600; }
|
||
.ap-card-desc { font-size: 12.5px; color: var(--text-2); margin-top: 10px; line-height: 1.55; }
|
||
.ap-card-note { font-size: 12.5px; color: var(--text); background: #fff; border: 1px solid var(--amber-border); border-radius: 8px; padding: 9px 11px; margin-top: 10px; line-height: 1.5; }
|
||
.ap-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }
|
||
.ap-btn { height: 38px; padding: 0 14px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-strong); background: #fff; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
|
||
.ap-btn svg { width: 15px; height: 15px; }
|
||
.ap-btn.reject:hover { background: #fdeef0; border-color: var(--red-border); color: var(--red); }
|
||
.ap-btn.approve { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(31,157,87,.4); }
|
||
.ap-btn.approve:hover { background: #188a4b; }
|
||
.ap-btn.request-send { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.4); }
|
||
.ap-btn.request-send:hover { background: var(--accent-hover); }
|
||
|
||
/* approval system event in thread */
|
||
.sys-event { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
|
||
.sys-event .se-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--amber-weak); color: var(--amber); display: grid; place-items: center; flex-shrink: 0; }
|
||
.sys-event .se-ico svg { width: 14px; height: 14px; }
|
||
.sys-event b { color: var(--text); font-weight: 600; }
|
||
.sys-event .se-time { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
|
||
|
||
/* layout */
|
||
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
|
||
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); }
|
||
.main-card { padding: 22px 26px 26px; }
|
||
|
||
.sect + .sect { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
|
||
.sect-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 12px; white-space: nowrap; }
|
||
.sect-label .pr { margin-left: auto; display: flex; align-items: center; gap: 9px; }
|
||
.progress-bar { width: 92px; height: 6px; border-radius: 4px; background: #eceef1; overflow: hidden; }
|
||
.progress-bar > i { display: block; height: 100%; background: var(--green); border-radius: 4px; }
|
||
.progress-txt { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
|
||
|
||
.content { font-size: 14px; color: var(--text); line-height: 1.7; }
|
||
.content p { margin-bottom: 11px; }
|
||
.content p:last-child { margin-bottom: 0; }
|
||
.content .mention { color: var(--accent); font-weight: 600; background: var(--accent-weak); padding: 0 3px; border-radius: 3px; }
|
||
|
||
/* checklist */
|
||
.checklist { display: flex; flex-direction: column; }
|
||
.citem { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-radius: var(--radius-sm); }
|
||
.cbox { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); flex-shrink: 0; display: grid; place-items: center; background: #fff; }
|
||
.cbox.done { background: var(--green); border-color: var(--green); }
|
||
.cbox svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
|
||
.cbox.done svg { opacity: 1; }
|
||
.citem .ctext { font-size: 13.5px; color: var(--text); white-space: nowrap; }
|
||
.citem.done .ctext { color: var(--text-3); text-decoration: line-through; }
|
||
|
||
/* nested subtasks (read-only) */
|
||
.task-group + .task-group { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); }
|
||
.citem.parent .ctext { font-weight: 600; }
|
||
.sub-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-2); background: #f1f2f4; border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; line-height: 1.55; white-space: nowrap; }
|
||
.citem.parent.done .sub-count { color: var(--green); background: var(--green-weak); border-color: #cde8d8; }
|
||
.subtasks { margin-left: 29px; padding-left: 14px; border-left: 1.5px solid var(--border); display: flex; flex-direction: column; }
|
||
.subtask { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-radius: var(--radius-sm); }
|
||
.cbox.sm { width: 16px; height: 16px; border-radius: 5px; }
|
||
.cbox.sm svg { width: 11px; height: 11px; }
|
||
.subtask .ctext { font-size: 13px; color: var(--text-2); white-space: nowrap; }
|
||
.subtask.done .ctext { color: var(--text-3); text-decoration: line-through; }
|
||
|
||
/* comments */
|
||
.comment { display: flex; gap: 11px; padding: 14px 0; border-top: 1px solid var(--border); }
|
||
.comment:first-of-type { border-top: none; }
|
||
.c-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||
.c-body { flex: 1; min-width: 0; }
|
||
.c-head { display: flex; align-items: center; gap: 8px; }
|
||
.c-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
|
||
.c-role { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-weak); border-radius: 20px; padding: 1px 7px; white-space: nowrap; }
|
||
.c-time { font-size: 12px; color: var(--text-3); white-space: nowrap; }
|
||
.c-text { font-size: 13.5px; color: var(--text); line-height: 1.6; margin-top: 4px; }
|
||
.c-file { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
|
||
.c-file .fi { width: 22px; height: 22px; border-radius: 5px; background: #e25950; color: #fff; display: grid; place-items: center; font-size: 8px; font-weight: 800; }
|
||
.composer { display: flex; gap: 11px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
|
||
.composer .field { flex: 1; }
|
||
.composer textarea { width: 100%; min-height: 64px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 12px; font-family: inherit; font-size: 13.5px; resize: vertical; color: var(--text); }
|
||
.composer textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
|
||
.composer textarea::placeholder { color: var(--text-3); }
|
||
.composer .crow { display: flex; justify-content: flex-end; margin-top: 9px; }
|
||
.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); }
|
||
|
||
/* sidebar */
|
||
.side { display: flex; flex-direction: column; gap: 16px; }
|
||
.side-card { padding: 16px 18px 18px; }
|
||
.side-field + .side-field { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
|
||
.side-label { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 9px; white-space: nowrap; }
|
||
.status-badge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border: 1px solid var(--blue-border); background: var(--blue-weak); border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; }
|
||
.status-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
|
||
.status-badge.review { color: var(--amber); background: var(--amber-weak); border-color: var(--amber-border); }
|
||
.status-badge.review .dot { background: var(--amber); }
|
||
.status-badge.done { color: var(--green); background: var(--green-weak); border-color: #cde8d8; }
|
||
.status-badge.done .dot { background: var(--green); }
|
||
.assignees { display: flex; flex-direction: column; gap: 9px; }
|
||
.ass { display: flex; align-items: center; gap: 9px; }
|
||
.avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||
.av-a { background: #e0518d; } .av-b { background: #3d8bf2; } .av-c { background: #16a37b; } .av-d { background: #b3631f; } .av-f { background: #d0982a; }
|
||
.ass .nm { font-size: 13px; font-weight: 600; white-space: nowrap; }
|
||
.ass .rl { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
|
||
.dl { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
|
||
.dl svg { width: 16px; height: 16px; color: var(--text-3); }
|
||
.dl .dday { font-size: 11.5px; font-weight: 700; color: var(--amber); background: #fdf4e3; border: 1px solid #f3e2bd; border-radius: 20px; padding: 1px 7px; margin-left: auto; white-space: nowrap; }
|
||
.files { display: flex; flex-direction: column; gap: 7px; }
|
||
.file { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid var(--border); border-radius: var(--radius); }
|
||
.file-ico { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; font-size: 9px; font-weight: 800; color: #fff; }
|
||
.fi-img { background: #2aa775; } .fi-zip { background: #8a64d6; }
|
||
.file-info { min-width: 0; flex: 1; }
|
||
.file-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
|
||
.file-size { font-size: 11.5px; color: var(--text-3); display: block; }
|
||
.issuer { display: flex; align-items: center; gap: 10px; }
|
||
.issuer .nm { font-size: 13px; font-weight: 600; white-space: nowrap; }
|
||
.issuer .rl { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
|
||
.meta-line { font-size: 12px; color: var(--text-3); margin-top: 4px; white-space: nowrap; }
|
||
</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" style="background:#3d8bf2">박</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>
|
||
<a href="저장소 상세.html" class="lnk">업무</a>
|
||
<span class="sep">/</span>
|
||
<b>#9</b>
|
||
</div>
|
||
|
||
<div class="pagehead">
|
||
<div class="ph-main">
|
||
<div class="ph-titlerow">
|
||
<span class="st-badge done">완료</span>
|
||
<span class="ph-tid">#9</span>
|
||
</div>
|
||
<h1 class="ph-title">메인 배너 이미지 2종 (가로/세로) 디자인</h1>
|
||
</div>
|
||
<div class="actions">
|
||
<a class="btn" href="업무 작성.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>수정</a>
|
||
<div class="more-wrap">
|
||
<button class="btn icon" id="moreBtn" type="button" title="더보기"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></button>
|
||
<div class="menu" id="moreMenu">
|
||
<button class="menu-item" type="button">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||
업무 복제
|
||
</button>
|
||
<button class="menu-item" type="button">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg>
|
||
링크 복사
|
||
</button>
|
||
<div class="menu-sep"></div>
|
||
<button class="menu-item danger" id="deleteOpen" type="button">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
|
||
업무 삭제
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layout">
|
||
<!-- main -->
|
||
<section class="card main-card">
|
||
<div class="sect">
|
||
<div class="sect-label">업무 내용</div>
|
||
<div class="content">
|
||
<p>9월 신제품 런칭 캠페인에 사용할 메인 배너를 가로형/세로형 2종으로 제작합니다. 톤앤매너는 <span class="mention">@브랜드_가이드라인.pdf</span> 기준을 따라주세요.</p>
|
||
<p>퍼포먼스 광고와 자사몰 상단에 동시 노출되므로, 두 비율 모두 핵심 메시지("민감 피부 저자극")가 명확히 보이도록 구성해주세요. 1차 시안 확정 후 모바일 적응형까지 진행합니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sect">
|
||
<div class="sect-label">해야 할 일
|
||
<span class="pr"><span class="progress-bar"><i style="width:100%"></i></span><span class="progress-txt">3 / 3 완료</span></span>
|
||
</div>
|
||
<div class="checklist">
|
||
<div class="citem done">
|
||
<span class="cbox done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
|
||
<span class="ctext">가로형 메인 배너 1920×1080</span>
|
||
</div>
|
||
<div class="citem done">
|
||
<span class="cbox done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
|
||
<span class="ctext">세로형 메인 배너 1080×1920</span>
|
||
</div>
|
||
<div class="citem done">
|
||
<span class="cbox done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
|
||
<span class="ctext">모바일 적응형 600×600</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sect">
|
||
<div class="sect-label">댓글 <span style="color:var(--text-3);font-weight:500">3</span></div>
|
||
|
||
<div class="comment">
|
||
<span class="c-av av-f">정</span>
|
||
<div class="c-body">
|
||
<div class="c-head"><span class="c-name">정태경</span><span class="c-role">지시자</span><span class="c-time">2일 전</span></div>
|
||
<div class="c-text">가로형부터 확정하고 세로형 진행해주세요. 카피 위치는 좌측 정렬 기준입니다.</div>
|
||
</div>
|
||
</div>
|
||
<div class="comment">
|
||
<span class="c-av av-b">박</span>
|
||
<div class="c-body">
|
||
<div class="c-head"><span class="c-name">박지훈</span><span class="c-time">1일 전</span></div>
|
||
<div class="c-text">가로형 1차 시안 업로드했습니다. 검토 부탁드려요.</div>
|
||
<div class="c-file"><span class="fi">IMG</span>main_banner_h_v1.png</div>
|
||
</div>
|
||
</div>
|
||
<div class="comment">
|
||
<span class="c-av av-d">최</span>
|
||
<div class="c-body">
|
||
<div class="c-head"><span class="c-name">최유진</span><span class="c-time">3시간 전</span></div>
|
||
<div class="c-text">세로형은 내일 오전까지 공유하겠습니다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sys-event">
|
||
<span class="se-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span>
|
||
<span><b>박지훈</b>님이 승인을 요청했습니다</span>
|
||
<span class="se-time">2시간 전</span>
|
||
</div>
|
||
|
||
<div class="composer">
|
||
<span class="c-av" style="background:#3d8bf2">박</span>
|
||
<div class="field">
|
||
<textarea placeholder="댓글을 입력하세요…"></textarea>
|
||
<div class="crow"><button class="btn primary" type="button">댓글 등록</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- sidebar -->
|
||
<aside class="side">
|
||
<!-- 승인 완료 -->
|
||
<div class="card ap-card done">
|
||
<div class="ap-card-head">
|
||
<span class="ap-card-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/></svg></span>
|
||
<span class="ap-card-title">승인 완료</span>
|
||
</div>
|
||
<div class="ap-card-meta"><b>정태경</b>님이 검토를 승인했습니다 · 방금 · 해야 할 일이 모두 완료되었습니다.</div>
|
||
</div>
|
||
|
||
<div class="card side-card">
|
||
<div class="side-field">
|
||
<div class="side-label">상태</div>
|
||
<span class="status-badge done"><span class="dot"></span>완료</span>
|
||
</div>
|
||
<div class="side-field">
|
||
<div class="side-label">담당자 · 2명</div>
|
||
<div class="assignees">
|
||
<div class="ass"><span class="avatar av-b">박</span><span><div class="nm">박지훈</div><div class="rl">퍼포먼스 마케팅</div></span></div>
|
||
<div class="ass"><span class="avatar av-d">최</span><span><div class="nm">최유진</div><div class="rl">UX 디자인</div></span></div>
|
||
</div>
|
||
</div>
|
||
<div class="side-field">
|
||
<div class="side-label">마감기한</div>
|
||
<div class="dl">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
|
||
6월 18일 (목)
|
||
<span class="dday">D-3</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card side-card">
|
||
<div class="side-field">
|
||
<div class="side-label">첨부파일 · 2개</div>
|
||
<div class="files">
|
||
<div class="file"><span class="file-ico fi-img">IMG</span><span class="file-info"><span class="file-name">레퍼런스_무드보드.png</span><span class="file-size">3.2 MB</span></span></div>
|
||
<div class="file"><span class="file-ico fi-zip">ZIP</span><span class="file-info"><span class="file-name">배너_소스_파일.zip</span><span class="file-size">18.4 MB</span></span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card side-card">
|
||
<div class="side-field">
|
||
<div class="side-label">지시자</div>
|
||
<div class="issuer"><span class="avatar av-f">정</span><span><div class="nm">정태경</div><div class="rl">마케팅 그룹 리드</div></span></div>
|
||
<div class="meta-line">6월 8일 지시 · #9</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 삭제 확인 모달 -->
|
||
<div class="modal-backdrop" id="deleteModal">
|
||
<div class="modal" role="dialog" aria-modal="true">
|
||
<div class="modal-body">
|
||
<div class="modal-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg></div>
|
||
<h2 class="modal-title">업무를 삭제할까요?</h2>
|
||
<p class="modal-desc"><b>#9 메인 배너 이미지 2종 (가로/세로) 디자인</b> 업무와 체크리스트·댓글·첨부파일이 영구적으로 삭제됩니다. 이 작업은 되돌릴 수 없습니다.</p>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="mbtn" id="deleteCancel" type="button">취소</button>
|
||
<button class="mbtn danger" type="button">삭제</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 승인 요청 모달 -->
|
||
<div class="modal-backdrop" id="requestModal">
|
||
<div class="modal" role="dialog" aria-modal="true">
|
||
<div class="modal-body" style="text-align:left;padding:22px 24px 8px">
|
||
<h2 class="modal-title">승인 요청 보내기</h2>
|
||
<p class="modal-desc" style="margin:8px 0 14px">지시자 <b>정태경</b>님에게 검토 승인을 요청합니다. 완료한 작업과 전달할 내용을 간단히 적어주세요. 업무가 <b>승인 대기</b> 상태로 변경됩니다.</p>
|
||
<textarea class="modal-textarea" placeholder="예) 가로형/세로형 메인 배너 1차 제작을 완료했습니다. 검토 부탁드립니다."></textarea>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="mbtn" data-close="requestModal" type="button">취소</button>
|
||
<button class="mbtn request-send" type="button">요청 보내기</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var moreBtn = document.getElementById('moreBtn');
|
||
var moreMenu = document.getElementById('moreMenu');
|
||
moreBtn.addEventListener('click', function (e) { e.stopPropagation(); moreMenu.classList.toggle('open'); });
|
||
document.addEventListener('click', function () { moreMenu.classList.remove('open'); });
|
||
moreMenu.addEventListener('click', function (e) { e.stopPropagation(); });
|
||
|
||
/* 삭제 모달 */
|
||
var dModal = document.getElementById('deleteModal');
|
||
document.getElementById('deleteOpen').addEventListener('click', function () { moreMenu.classList.remove('open'); dModal.classList.add('open'); });
|
||
document.getElementById('deleteCancel').addEventListener('click', function () { dModal.classList.remove('open'); });
|
||
dModal.addEventListener('click', function (e) { if (e.target === dModal) dModal.classList.remove('open'); });
|
||
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') dModal.classList.remove('open'); });
|
||
|
||
/* 승인 요청 모달 */
|
||
function openModal(id) { document.getElementById(id).classList.add('open'); }
|
||
function closeModal(el) { el.classList.remove('open'); }
|
||
document.querySelectorAll('[data-close]').forEach(function (b) {
|
||
b.addEventListener('click', function () { closeModal(document.getElementById(b.getAttribute('data-close'))); });
|
||
});
|
||
var reqModal = document.getElementById('requestModal');
|
||
reqModal.addEventListener('click', function (e) { if (e.target === reqModal) closeModal(reqModal); });
|
||
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeModal(reqModal); });
|
||
</script>
|
||
|
||
</body>
|
||
</html> |