first commit
This commit is contained in:
@@ -0,0 +1,482 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>새 업무 작성 — 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;
|
||||
--amber: #b7791f;
|
||||
--radius: 6px;
|
||||
--radius-sm: 4px;
|
||||
--shadow-sm: 0 1px 2px rgba(20,24,33,.05);
|
||||
--shadow-md: 0 4px 16px rgba(20,24,33,.10), 0 1px 3px rgba(20,24,33,.06);
|
||||
--shadow-pop: 0 8px 28px rgba(20,24,33,.16), 0 2px 6px rgba(20,24,33,.08);
|
||||
}
|
||||
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; }
|
||||
|
||||
/* ---------- Top app bar ---------- */
|
||||
.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; }
|
||||
.crumb .lnk { color: var(--text-2); font-weight: 600; text-decoration: none; }
|
||||
.crumb .lnk:hover { color: var(--accent); }
|
||||
.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 header ---------- */
|
||||
.page { max-width: 1240px; 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 b { color: var(--text-2); font-weight: 600; }
|
||||
.crumb .sep { opacity: .5; }
|
||||
.pagehead { display: flex; align-items: center; gap: 16px; padding: 8px 0 18px; }
|
||||
.pagehead h1 { font-size: 21px; font-weight: 700; letter-spacing: -.4px; white-space: nowrap; flex-shrink: 0; }
|
||||
.draft-tag {
|
||||
font-size: 11.5px; font-weight: 600; color: var(--amber); background: #fdf4e3;
|
||||
border: 1px solid #f3e2bd; padding: 3px 8px; border-radius: 20px; line-height: 1; white-space: nowrap;
|
||||
}
|
||||
.pagehead .actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
|
||||
.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;
|
||||
}
|
||||
.btn:hover { background: #f7f8fa; color: var(--text); }
|
||||
.btn.ghost { border-color: transparent; background: transparent; }
|
||||
.btn.ghost:hover { background: #eceef1; }
|
||||
.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); }
|
||||
|
||||
/* ---------- Layout ---------- */
|
||||
.layout { display: grid; grid-template-columns: 1fr 348px; 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: 8px 26px 26px; }
|
||||
|
||||
/* Title field */
|
||||
.title-input {
|
||||
width: 100%; border: none; outline: none; background: transparent;
|
||||
font-family: inherit; font-size: 24px; font-weight: 700; letter-spacing: -.5px;
|
||||
color: var(--text); padding: 20px 0 14px; line-height: 1.3;
|
||||
}
|
||||
.title-input::placeholder { color: #c4c8cf; }
|
||||
|
||||
.divider { height: 1px; background: var(--border); margin: 0 -26px; }
|
||||
|
||||
.field { padding-top: 22px; }
|
||||
.field-label {
|
||||
display: flex; align-items: center; gap: 7px;
|
||||
font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 9px; white-space: nowrap;
|
||||
}
|
||||
.field-label .req { color: var(--accent); font-weight: 700; }
|
||||
.field-label .hint { margin-left: auto; font-weight: 500; color: var(--text-3); font-size: 12px; }
|
||||
|
||||
/* Content editor */
|
||||
.editor { border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
|
||||
.editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
|
||||
.toolbar {
|
||||
display: flex; align-items: center; gap: 2px; padding: 6px 8px;
|
||||
border-bottom: 1px solid var(--border); background: #fafbfc;
|
||||
}
|
||||
.tb {
|
||||
height: 28px; min-width: 28px; padding: 0 7px; border-radius: var(--radius-sm); border: none; background: transparent;
|
||||
color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; display: grid; place-items: center;
|
||||
}
|
||||
.tb:hover { background: #eceef1; color: var(--text); }
|
||||
.tb svg { width: 16px; height: 16px; }
|
||||
.tb-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 5px; }
|
||||
.editor-body { padding: 14px 16px; font-size: 14px; color: var(--text); min-height: 150px; line-height: 1.65; }
|
||||
.editor-body p { margin-bottom: 11px; }
|
||||
.editor-body p:last-child { margin-bottom: 0; }
|
||||
.editor-body .mention { color: var(--accent); font-weight: 600; background: var(--accent-weak); padding: 0 3px; border-radius: 3px; }
|
||||
|
||||
/* Checklist */
|
||||
.check-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
.progress-wrap { 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; }
|
||||
|
||||
.checklist { display: flex; flex-direction: column; }
|
||||
.check-item {
|
||||
display: flex; align-items: center; gap: 11px; padding: 9px 0;
|
||||
border-radius: var(--radius-sm); position: relative;
|
||||
}
|
||||
.check-item:hover { background: #f7f8fa; }
|
||||
.check-item .grip { position: absolute; left: -21px; top: 50%; transform: translateY(-50%); color: #c4c8cf; cursor: grab; opacity: 0; font-size: 14px; line-height: 1; letter-spacing: -2px; }
|
||||
.check-item:hover .grip { opacity: 1; }
|
||||
.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; cursor: pointer;
|
||||
}
|
||||
.cbox.done { background: var(--green); border-color: var(--green); }
|
||||
.cbox svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
|
||||
.cbox.done svg { opacity: 1; }
|
||||
.check-item .txt { font-size: 13.5px; color: var(--text); flex: 1; }
|
||||
.check-item.done .txt { color: var(--text-3); text-decoration: line-through; }
|
||||
.check-item .row-del { opacity: 0; color: var(--text-3); cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; }
|
||||
.check-item:hover .row-del { opacity: 1; }
|
||||
.check-item .row-del:hover { background: #eceef1; color: #d6455d; }
|
||||
.add-row {
|
||||
display: flex; align-items: center; gap: 11px; padding: 10px 0 4px 0; color: var(--text-3);
|
||||
font-size: 13.5px; cursor: text;
|
||||
}
|
||||
.add-row .plus { width: 18px; height: 18px; border-radius: 5px; border: 1.5px dashed var(--border-strong); display: grid; place-items: center; font-size: 13px; line-height: 1; }
|
||||
|
||||
/* nested subtasks */
|
||||
.task-group + .task-group { border-top: 1px solid var(--border); }
|
||||
.check-item.parent .txt { font-weight: 600; }
|
||||
.sub-count {
|
||||
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;
|
||||
}
|
||||
.check-item.parent.done .sub-count { color: var(--green); background: var(--green-weak); border-color: #cde8d8; }
|
||||
.subtasks { margin-left: 31px; 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); position: relative;
|
||||
}
|
||||
.subtask:hover { background: #f7f8fa; }
|
||||
.subtask .grip { position: absolute; left: -19px; top: 50%; transform: translateY(-50%); color: #c4c8cf; cursor: grab; opacity: 0; font-size: 13px; line-height: 1; letter-spacing: -2px; }
|
||||
.subtask:hover .grip { opacity: 1; }
|
||||
.cbox.sm { width: 16px; height: 16px; border-radius: 5px; }
|
||||
.cbox.sm svg { width: 11px; height: 11px; }
|
||||
.subtask .txt { font-size: 13px; color: var(--text-2); flex: 1; }
|
||||
.subtask.done .txt { color: var(--text-3); text-decoration: line-through; }
|
||||
.subtask .row-del { opacity: 0; color: var(--text-3); cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; }
|
||||
.subtask:hover .row-del { opacity: 1; }
|
||||
.subtask .row-del:hover { background: #eceef1; color: #d6455d; }
|
||||
.add-sub {
|
||||
display: flex; align-items: center; gap: 9px; margin-left: 31px; padding: 7px 0 9px 0;
|
||||
color: var(--text-3); font-size: 12.5px; cursor: text;
|
||||
}
|
||||
.add-sub .plus-sm { width: 16px; height: 16px; border-radius: 5px; border: 1.5px dashed var(--border-strong); display: grid; place-items: center; font-size: 12px; line-height: 1; }
|
||||
|
||||
/* ---------- Sidebar ---------- */
|
||||
.side { display: flex; flex-direction: column; gap: 16px; }
|
||||
.side-card { padding: 16px 18px 18px; }
|
||||
.side-field + .side-field { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
|
||||
.side-label { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||||
.side-label .req { color: var(--accent); }
|
||||
|
||||
/* assignee combobox */
|
||||
.combo { position: relative; }
|
||||
.combo-field {
|
||||
border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 7px 8px; background: #fff;
|
||||
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
|
||||
}
|
||||
.combo-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
|
||||
.combo-caret { color: var(--text-3); display: grid; place-items: center; margin-left: auto; flex-shrink: 0; }
|
||||
.combo-caret svg { width: 16px; height: 16px; }
|
||||
.chip {
|
||||
display: inline-flex; align-items: center; gap: 6px; background: #f1f2f4; border: 1px solid var(--border);
|
||||
border-radius: 20px; padding: 3px 8px 3px 3px; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap;
|
||||
}
|
||||
.chip .x { color: var(--text-3); cursor: pointer; font-size: 13px; line-height: 1; margin-left: 1px; }
|
||||
.chip .x:hover { color: #d6455d; }
|
||||
.combo-input { flex: 1; min-width: 70px; border: none; outline: none; font-family: inherit; font-size: 13px; padding: 4px 2px; background: transparent; }
|
||||
.combo-input::placeholder { color: var(--text-3); }
|
||||
|
||||
.avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; 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-e { background: #7c5cf0; } .av-f { background: #d0982a; }
|
||||
|
||||
.dropdown {
|
||||
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
|
||||
background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-pop);
|
||||
padding: 6px; overflow: hidden;
|
||||
}
|
||||
.dd-search { font-size: 11px; color: var(--text-3); padding: 4px 8px 6px; font-weight: 600; }
|
||||
.dd-item {
|
||||
display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer;
|
||||
}
|
||||
.dd-item:hover { background: #f5f6f8; }
|
||||
.dd-item.sel { background: var(--accent-weak); }
|
||||
.dd-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
|
||||
.dd-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
|
||||
.dd-role { font-size: 11.5px; color: var(--text-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.dd-check { flex-shrink: 0; width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; background: #fff; }
|
||||
.dd-item.sel .dd-check { background: var(--accent); border-color: var(--accent); }
|
||||
.dd-check svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
|
||||
.dd-item.sel .dd-check svg { opacity: 1; }
|
||||
|
||||
/* date */
|
||||
.input {
|
||||
width: 100%; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius);
|
||||
padding: 0 11px; font-family: inherit; font-size: 13.5px; color: var(--text); background: #fff;
|
||||
display: flex; align-items: center; gap: 9px;
|
||||
}
|
||||
.input .ico { color: var(--text-3); display: grid; place-items: center; }
|
||||
.input .ico svg { width: 16px; height: 16px; }
|
||||
.date-meta { font-size: 12px; color: var(--amber); font-weight: 600; margin-top: 7px; display: flex; align-items: center; gap: 5px; }
|
||||
.date-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
|
||||
|
||||
/* attachments */
|
||||
.dropzone {
|
||||
border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 13px;
|
||||
text-align: center; color: var(--text-3); font-size: 12.5px; cursor: pointer; background: #fafbfc;
|
||||
}
|
||||
.dropzone:hover { border-color: var(--accent-border); background: var(--accent-weak); color: var(--accent); }
|
||||
.dropzone b { color: var(--accent); font-weight: 600; }
|
||||
.files { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
|
||||
.file {
|
||||
display: flex; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid var(--border);
|
||||
border-radius: var(--radius); background: #fff;
|
||||
}
|
||||
.file-ico { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; font-size: 10px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
|
||||
.fi-pdf { background: #e25950; } .fi-zip { background: #8a64d6; } .fi-doc { background: #3d8bf2; }
|
||||
.file-info { min-width: 0; flex: 1; }
|
||||
.file-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
|
||||
.file-size { font-size: 11.5px; color: var(--text-3); display: block; }
|
||||
.file .x { color: var(--text-3); cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; flex-shrink: 0; }
|
||||
.file .x:hover { background: #eceef1; color: #d6455d; }
|
||||
|
||||
/* issuer meta */
|
||||
.issuer { display: flex; align-items: center; gap: 10px; }
|
||||
.issuer .avatar { width: 30px; height: 30px; font-size: 12px; }
|
||||
.issuer .nm { font-size: 13px; font-weight: 600; }
|
||||
.issuer .rl { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
|
||||
.side-foot { font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
|
||||
</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">
|
||||
<div class="crumb"><a href="저장소 목록.html" class="lnk">저장소</a> <span class="sep">/</span> <a href="저장소 상세.html" class="lnk">3분기 신제품 런칭 캠페인</a> <span class="sep">/</span> 새 업무</div>
|
||||
<div class="pagehead">
|
||||
<h1>새 업무 작성</h1>
|
||||
<span class="draft-tag">임시저장됨 · 방금</span>
|
||||
<div class="actions">
|
||||
<a class="btn ghost" href="저장소 상세.html">취소</a>
|
||||
<button class="btn">임시저장</button>
|
||||
<button class="btn primary">
|
||||
<svg width="15" height="15" 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>
|
||||
지시 보내기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout">
|
||||
<!-- ============ MAIN ============ -->
|
||||
<section class="card main-card">
|
||||
<input class="title-input" value="3분기 신제품 런칭 캠페인 소재 제작" placeholder="업무 제목을 입력하세요">
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 내용 -->
|
||||
<div class="field">
|
||||
<div class="field-label"><span class="req">*</span> 업무 내용</div>
|
||||
<div class="editor">
|
||||
<div class="toolbar">
|
||||
<button class="tb" style="font-weight:800">B</button>
|
||||
<button class="tb" style="font-style:italic;font-family:Georgia,serif">I</button>
|
||||
<button class="tb" style="text-decoration:underline">U</button>
|
||||
<span class="tb-sep"></span>
|
||||
<button class="tb" title="목록"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg></button>
|
||||
<button class="tb" title="번호 목록"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 6h11M10 12h11M10 18h11M4 6h1v4M4 10h2M6 18H4l2-3H4"/></svg></button>
|
||||
<span class="tb-sep"></span>
|
||||
<button class="tb" title="링크"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
||||
<button class="tb" title="멘션">@</button>
|
||||
<button class="tb" title="코드"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg></button>
|
||||
</div>
|
||||
<div class="editor-body">
|
||||
<p>9월 신제품(라인 클렌저) 정식 출시에 맞춰 사용할 캠페인 소재 일체를 제작합니다. 톤앤매너는 <span class="mention">@브랜드_가이드라인.pdf</span> 기준을 따라주세요.</p>
|
||||
<p>퍼포먼스 광고용 배너와 자사몰 상세페이지를 우선순위로 진행하고, SNS 콘텐츠는 1차 시안 확정 후 착수합니다. 카피는 "민감 피부 저자극" 메시지를 핵심으로 잡되, 과장 광고 표현은 법무 검토를 반드시 거쳐주세요.</p>
|
||||
<p>각 산출물은 아래 체크리스트 기준으로 관리하며, 진행 상황은 업무 상세에서 코멘트로 공유 바랍니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 체크리스트 -->
|
||||
<div class="field">
|
||||
<div class="check-head">
|
||||
<div class="field-label" style="margin-bottom:0">해야 할 일</div>
|
||||
<div class="progress-wrap">
|
||||
<div class="progress-bar"><i style="width:40%"></i></div>
|
||||
<span class="progress-txt">2 / 5 완료</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="checklist">
|
||||
<div class="check-item done">
|
||||
<span class="grip">⠿</span>
|
||||
<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="txt">캠페인 핵심 메시지 3개 시안 작성</span>
|
||||
<span class="row-del"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
|
||||
</div>
|
||||
<div class="check-item done">
|
||||
<span class="grip">⠿</span>
|
||||
<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="txt">레퍼런스 리서치 및 무드보드 정리</span>
|
||||
<span class="row-del"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
|
||||
</div>
|
||||
<div class="check-item">
|
||||
<span class="grip">⠿</span>
|
||||
<span class="cbox"><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="txt">메인 배너 이미지 2종 (가로/세로) 디자인</span>
|
||||
<span class="row-del"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
|
||||
</div>
|
||||
<div class="check-item">
|
||||
<span class="grip">⠿</span>
|
||||
<span class="cbox"><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="txt">상세페이지 카피라이팅 및 법무 검토</span>
|
||||
<span class="row-del"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
|
||||
</div>
|
||||
<div class="check-item">
|
||||
<span class="grip">⠿</span>
|
||||
<span class="cbox"><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="txt">최종 산출물 공유 드라이브 업로드</span>
|
||||
<span class="row-del"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="add-row"><span class="plus">+</span> 항목 추가</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SIDEBAR ============ -->
|
||||
<aside class="side">
|
||||
<div class="card side-card">
|
||||
<!-- 담당자 (열린 드롭다운) -->
|
||||
<div class="side-field">
|
||||
<div class="side-label"><span class="req">*</span> 담당자 <span style="color:var(--text-3);font-weight:500">· 3명</span></div>
|
||||
<div class="combo">
|
||||
<div class="combo-field">
|
||||
<span class="chip"><span class="avatar av-a">김</span>김서연 <span class="x">×</span></span>
|
||||
<span class="chip"><span class="avatar av-b">박</span>박지훈 <span class="x">×</span></span>
|
||||
<span class="chip"><span class="avatar av-c">이</span>이도윤 <span class="x">×</span></span>
|
||||
<input class="combo-input" placeholder="이름 검색…" value="">
|
||||
<span class="combo-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>
|
||||
</div>
|
||||
|
||||
<div class="card side-card">
|
||||
<!-- 마감기한 -->
|
||||
<div class="side-field">
|
||||
<div class="side-label"><span class="req">*</span> 마감기한</div>
|
||||
<div class="input">
|
||||
<span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></span>
|
||||
2026년 6월 30일 (화) 18:00
|
||||
</div>
|
||||
<div class="date-meta"><span class="dot"></span> 마감까지 15일 남음</div>
|
||||
</div>
|
||||
|
||||
<!-- 첨부파일 -->
|
||||
<div class="side-field">
|
||||
<div class="side-label">첨부파일 <span style="color:var(--text-3);font-weight:500">· 3개</span></div>
|
||||
<div class="files">
|
||||
<div class="file">
|
||||
<span class="file-ico fi-pdf">PDF</span>
|
||||
<span class="file-info"><span class="file-name">캠페인_브리프_v2.pdf</span><span class="file-size">2.4 MB</span></span>
|
||||
<span class="x"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
|
||||
</div>
|
||||
<div class="file">
|
||||
<span class="file-ico fi-pdf">PDF</span>
|
||||
<span class="file-info"><span class="file-name">브랜드_가이드라인.pdf</span><span class="file-size">8.1 MB</span></span>
|
||||
<span class="x"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></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">34.7 MB</span></span>
|
||||
<span class="x"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropzone">파일을 끌어다 놓거나 <b>찾아보기</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card side-card">
|
||||
<div class="side-field" style="border:none;padding:0;margin:0">
|
||||
<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="side-foot" style="margin-top:12px">지시를 보내면 담당자 3명에게 알림이 전송되고, 업무가 각자의 ‘내 업무’에 추가됩니다.</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user