Files
comrelay/Relay 화면 전체/저장소 상세.html
T
2026-06-16 17:12:08 +09:00

350 lines
25 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; --blue: #1d4ed8; --blue-weak: #e8efff; --blue-border: #c9dbff;
--red: #d6455d; --red-weak: #fdecef; --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 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; }
.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; }
.avatar { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; 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; }
.av-more { background: #eceef1; color: var(--text-2); box-shadow: 0 0 0 2px #fff; }
.rh-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* progress strip */
.prog-strip { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
.prog-strip .pbar { flex: 1; height: 8px; border-radius: 5px; background: #eceef1; overflow: hidden; max-width: 360px; }
.prog-strip .pbar > i { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.prog-txt { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.prog-txt span { color: var(--text-3); font-weight: 500; }
.prog-warn { font-size: 12.5px; font-weight: 600; color: var(--red); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.prog-warn svg { width: 14px; height: 14px; }
/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 20px 0 18px; }
.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); }
/* 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); }
.sort { margin-left: auto; display: flex; align-items: center; gap: 6px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 11px; background: #fff; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.sort svg { width: 15px; height: 15px; color: var(--text-3); }
/* task list */
.list { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; }
.task-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; }
.task-row:first-child { border-top: none; }
.task-row:hover { background: #fafbfc; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.st-dot.done { background: var(--green); } .st-dot.prog { background: var(--blue); } .st-dot.review { background: var(--amber); } .st-dot.todo { background: #c4c8cf; }
.task-main { flex: 1; min-width: 0; }
.task-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.task-title .tid { font-size: 12px; font-weight: 600; color: var(--text-3); }
.task-row.is-done .task-title { color: var(--text-2); }
.task-meta { display: flex; align-items: center; gap: 13px; margin-top: 3px; font-size: 12px; color: var(--text-3); }
.task-meta .mi { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.task-meta .mi svg { width: 13px; height: 13px; }
.task-meta .mi.overdue { color: var(--red); font-weight: 600; }
.task-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.st-badge { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; min-width: 56px; text-align: center; }
.st-badge.done { color: var(--green); background: var(--green-weak); border: 1px solid #cde8d8; }
.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.todo { color: var(--text-2); background: #f1f2f4; border: 1px solid var(--border); }
.chev { color: var(--text-3); display: grid; place-items: center; }
.chev svg { width: 18px; height: 18px; }
</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>
<b>3분기 신제품 런칭 캘페인</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-a"></span><span class="avatar av-b"></span><span class="avatar av-c"></span><span class="avatar av-d"></span><span class="avatar av-more">+1</span></span>
<span class="mi">2시간 전 업데이트</span>
</div>
<div class="prog-strip">
<span class="prog-txt">8 <span>/ 12 업무 완료</span> · 67%</span>
<div class="pbar"><i style="width:67%"></i></div>
<span class="prog-warn"><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="9"/><path d="M12 7v5l3 2"/></svg>지연 1건</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="#" class="active"><span class="tb-label">업무</span> <span class="tb-count">12</span></a>
<a href="저장소 멤버.html"><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="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">12</span></button>
<button>진행 중 <span class="n">2</span></button>
<button>대기 <span class="n">2</span></button>
<button>완료 <span class="n">8</span></button>
</div>
<div class="sort">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5h10M11 9h7M11 13h4M3 17l3 3 3-3M6 18V4"/></svg>
마감 임박순
</div>
</div>
<!-- 업무 목록 -->
<div class="list">
<a class="task-row" href="업무 상세.html">
<span class="st-dot prog"></span>
<span class="task-main">
<span class="task-title">법무 검토 요청 및 회신 반영 <span class="tid">#11</span></span>
<span class="task-meta">
<span class="mi overdue"><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="9"/><path d="M12 7v5l3 2"/></svg>2일 지남</span>
<span class="mi"><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>1/3</span>
</span>
</span>
<span class="task-right">
<span class="avstack"><span class="avatar av-c"></span></span>
<span class="st-badge prog">진행 중</span>
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
</span>
</a>
<a class="task-row" href="업무 상세.html">
<span class="st-dot review"></span>
<span class="task-main">
<span class="task-title">메인 배너 이미지 2종 (가로/세로) 디자인 <span class="tid">#9</span></span>
<span class="task-meta">
<span class="mi"><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>D-3</span>
<span class="mi"><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>1/3</span>
<span class="mi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>2</span>
</span>
</span>
<span class="task-right">
<span class="avstack"><span class="avatar av-b"></span><span class="avatar av-d"></span></span>
<span class="st-badge review">승인 대기</span>
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
</span>
</a>
<a class="task-row" href="업무 상세.html">
<span class="st-dot todo"></span>
<span class="task-main">
<span class="task-title">상세페이지 카피라이팅 <span class="tid">#8</span></span>
<span class="task-meta">
<span class="mi"><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>D-5</span>
<span class="mi"><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>0/3</span>
</span>
</span>
<span class="task-right">
<span class="avstack"><span class="avatar av-c"></span></span>
<span class="st-badge todo">대기</span>
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
</span>
</a>
<a class="task-row" href="업무 상세.html">
<span class="st-dot todo"></span>
<span class="task-main">
<span class="task-title">SNS 콘텐츠 1차 시안 <span class="tid">#7</span></span>
<span class="task-meta">
<span class="mi"><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>D-8</span>
<span class="mi"><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>0/4</span>
</span>
</span>
<span class="task-right">
<span class="avstack"><span class="avatar av-e"></span></span>
<span class="st-badge todo">대기</span>
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
</span>
</a>
<a class="task-row is-done" href="업무 상세.html">
<span class="st-dot done"></span>
<span class="task-main">
<span class="task-title">캠페인 핵심 메시지 시안 작성 <span class="tid">#6</span></span>
<span class="task-meta">
<span class="mi"><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>3/3</span>
<span class="mi">6월 9일 완료</span>
</span>
</span>
<span class="task-right">
<span class="avstack"><span class="avatar av-a"></span></span>
<span class="st-badge done">완료</span>
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
</span>
</a>
<a class="task-row is-done" href="업무 상세.html">
<span class="st-dot done"></span>
<span class="task-main">
<span class="task-title">레퍼런스 리서치 및 무드보드 정리 <span class="tid">#5</span></span>
<span class="task-meta"><span class="mi">6월 6일 완료</span></span>
</span>
<span class="task-right">
<span class="avstack"><span class="avatar av-a"></span></span>
<span class="st-badge done">완료</span>
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
</span>
</a>
<a class="task-row is-done" href="업무 상세.html">
<span class="st-dot done"></span>
<span class="task-main">
<span class="task-title">퍼포먼스 광고 소재 세팅 <span class="tid">#4</span></span>
<span class="task-meta">
<span class="mi"><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>2/2</span>
<span class="mi">6월 5일 완료</span>
</span>
</span>
<span class="task-right">
<span class="avstack"><span class="avatar av-b"></span></span>
<span class="st-badge done">완료</span>
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
</span>
</a>
<a class="task-row is-done" href="업무 상세.html">
<span class="st-dot done"></span>
<span class="task-main">
<span class="task-title">타깃 오디언스 정의 및 페르소나 정리 <span class="tid">#3</span></span>
<span class="task-meta"><span class="mi">6월 4일 완료</span></span>
</span>
<span class="task-right">
<span class="avstack"><span class="avatar av-b"></span></span>
<span class="st-badge done">완료</span>
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
</span>
</a>
<a class="task-row is-done" href="업무 상세.html">
<span class="st-dot done"></span>
<span class="task-main">
<span class="task-title">킥오프 미팅 및 일정 수립 <span class="tid">#1</span></span>
<span class="task-meta"><span class="mi">6월 2일 완료</span></span>
</span>
<span class="task-right">
<span class="avstack"><span class="avatar av-f"></span></span>
<span class="st-badge done">완료</span>
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
</span>
</a>
</div>
</div>
</body>
</html>