generated from ttipo/project-base
docs: 메일 15단계(메일 · 메일함 다루기) 보드 셋을 더한다
읽기 화면 [이동 ▾] · 예약 메일 지금 보내기 · 같은 대화 모두 펼치기(Reader15), 목록 끌어다 놓기 · 좁은 폭 상단 바(ListDrag15), 메일함 옮기기 · 하위까지 지우기 · 차단할 때 받은편지함 정리(Mailbox15). 캔버스 v71 에서 확정 — 글은 화면 상수가 기준이다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,843 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>끌어다 놓기 · 스팸메일함으로 옮기기 · 좁은 폭 상단 바</title>
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
@font-face{font-family:'Pretendard';src:url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2-variations'),url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
|
||||
body{margin:0}
|
||||
a{color:#0E7C86}a:hover{color:#0A5F67}
|
||||
:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
|
||||
.on-dark:focus-visible{outline-color:#9ED6DB}
|
||||
.cv-grid{display:grid;grid-template-columns:32px 32px 168px minmax(0,1fr) 84px;column-gap:12px;align-items:center}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 3845px; box-sizing: border-box; display: flex; flex-direction: column; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5">
|
||||
|
||||
<div style="flex: 0 0 auto; box-sizing: border-box; padding: 40px 48px 0; display: flex; flex-direction: column; gap: 6px; max-width: 1200px">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">끌어다 놓기 · 스팸메일함으로 옮기기 · 좁은 폭 상단 바</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363; word-break: keep-all">메일 15단계(메일 · 메일함 다루기)에서 정한 것 가운데 3 · 4 · 9의 화면입니다. 목록에서 고른 메일이나 대화 줄을 메일함 패널로 끌어다 놓아 옮기고, 스팸메일함으로 옮기는 세 길(단추, 메뉴, 끌기)을 같게 맞추고, 휴대폰 폭에서 상단 바의 [로그아웃]이 꺾이지 않게 합니다. 1의 단추로 마우스가 있는 곳을 바꿔 볼 수 있습니다. 초안이며 사용자 확인 전입니다(2026-11-09).</p>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby="sec1-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 32px 48px 16px; display: flex; flex-direction: column; gap: 12px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="sec1-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">1. 분할 보기 (1440) · 고른 메일 3통을 끌어다 놓는 중</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363; word-break: keep-all">받은편지함에서 메일 3통을 고른 채 그중 한 줄(박지훈)을 눌러 메일함 패널로 끌고 있습니다. 마우스 오른쪽 아래에 메일 수를 적은 표가 따라옵니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px">
|
||||
<span id="over-label" style="font-size: 13.5px; font-weight: 700; color: #344054">마우스가 있는 곳</span>
|
||||
<div role="group" aria-labelledby="over-label" style="display: flex; flex-wrap: wrap; gap: 8px">
|
||||
<sc-for list="{{ overModes }}" as="s" hint-placeholder-count="6">
|
||||
<button type="button" aria-pressed="{{ s.pressed }}" onClick="{{ s.pick }}" style="flex: 0 0 auto; min-width: 112px; min-height: 44px; box-sizing: border-box; padding: 0 14px; border: 1px solid {{ s.border }}; border-radius: 10px; background: {{ s.bg }}; color: {{ s.fg }}; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">{{ s.label }}</button>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">{{ overTitle }}</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085; word-break: keep-all">{{ overNote }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="board-split" role="region" aria-label="{{ splitRegionLabel }}" style="flex: 0 0 auto; height: 724px; box-sizing: border-box; display: flex; background: #FFFFFF; border-top: 1px solid #E6E8EC; border-bottom: 1px solid #E6E8EC; overflow: hidden">
|
||||
|
||||
<nav aria-label="사내 시스템" style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
|
||||
<a href="#" style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px; border-radius: 10px; text-decoration: none">
|
||||
<img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
|
||||
</a>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px">
|
||||
<li>
|
||||
<a href="#" aria-current="page" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
<span>메일</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
<span>캘린더</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span>파일</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
||||
<span>주소록</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" style="margin-top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||
<span>설정</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
|
||||
<header style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC">
|
||||
<span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">메일</span>
|
||||
<form role="search" style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; margin: 0; padding: 0 4px 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
<input type="search" aria-label="메일 검색" placeholder="메일 검색" style="flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: #171C26">
|
||||
<button type="button" title="조건으로 찾기" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
||||
<span>조건</span>
|
||||
</button>
|
||||
</form>
|
||||
<div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-weight: 600">김</span>
|
||||
<div style="display: flex; flex-direction: column; line-height: 1.3">
|
||||
<span style="font-weight: 600">김아라</span>
|
||||
<span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
|
||||
</div>
|
||||
<button type="button" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #4A5363; font: inherit; font-weight: 500; cursor: pointer">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
<span>로그아웃</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style="flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch">
|
||||
|
||||
<nav aria-label="메일함" style="flex: 0 0 208px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
|
||||
<a href="#" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600; text-decoration: none">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
||||
<span>메일 쓰기</span>
|
||||
</a>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<sc-for list="{{ sys1 }}" as="b" hint-placeholder-count="6">
|
||||
<li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ b.bg }}; outline: {{ b.outline }}; outline-offset: -2px">
|
||||
<a href="#" aria-current="{{ b.current }}" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 36px 0 {{ b.indent }}px; border-radius: 7px; color: {{ b.fg }}; font-weight: {{ b.fw }}; text-decoration: none">
|
||||
<sc-if value="{{ b.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
|
||||
<sc-if value="{{ b.isSent }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></sc-if>
|
||||
<sc-if value="{{ b.isClock }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></sc-if>
|
||||
<sc-if value="{{ b.isDrafts }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg></sc-if>
|
||||
<sc-if value="{{ b.isJunk }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></sc-if>
|
||||
<sc-if value="{{ b.isTrash }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></sc-if>
|
||||
<sc-if value="{{ b.isFolder }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></sc-if>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ b.name }}</span>
|
||||
<sc-if value="{{ b.hasCount }}" hint-placeholder-val="{{ false }}"><span style="font-size: 12px; font-weight: 600; color: {{ b.countColor }}; font-variant-numeric: tabular-nums">{{ b.count }}</span></sc-if>
|
||||
</a>
|
||||
<sc-if value="{{ b.pointerHere }}" hint-placeholder-val="{{ false }}">
|
||||
<span aria-hidden="true" style="position: absolute; left: {{ b.pointerX }}px; top: 13px; z-index: 6; width: 0; height: 0; pointer-events: none">
|
||||
<sc-if value="{{ b.dropOk }}" hint-placeholder-val="{{ true }}"><svg width="16" height="22" viewBox="0 0 16 22" style="position: absolute; left: -1px; top: -1px; display: block"><path d="M1.5 1.5 L1.5 17.5 L5.4 13.9 L8 20 L10.8 18.8 L8.3 12.9 L13.6 12.9 Z" fill="#FFFFFF" stroke="#171C26" stroke-width="1.3" stroke-linejoin="round"></path></svg></sc-if>
|
||||
<sc-if value="{{ b.dropNo }}" hint-placeholder-val="{{ false }}"><svg width="24" height="24" viewBox="0 0 24 24" style="position: absolute; left: -12px; top: -12px; display: block"><circle cx="12" cy="12" r="8.5" fill="none" stroke="#FFFFFF" stroke-width="5"></circle><line x1="6" y1="6" x2="18" y2="18" stroke="#FFFFFF" stroke-width="5"></line><circle cx="12" cy="12" r="8.5" fill="none" stroke="#171C26" stroke-width="2.4"></circle><line x1="6" y1="6" x2="18" y2="18" stroke="#171C26" stroke-width="2.4"></line></svg></sc-if>
|
||||
<span style="position: absolute; left: 16px; top: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px; background: #0B3640; color: #FFFFFF; font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; box-shadow: 0 6px 16px rgba(16, 24, 28, 0.28)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ED6DB" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
<span>{{ chip1 }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</sc-if>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<p style="margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">내 메일함</p>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<sc-for list="{{ mine1 }}" as="b" hint-placeholder-count="4">
|
||||
<li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ b.bg }}; outline: {{ b.outline }}; outline-offset: -2px">
|
||||
<a href="#" aria-current="{{ b.current }}" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 36px 0 {{ b.indent }}px; border-radius: 7px; color: {{ b.fg }}; font-weight: {{ b.fw }}; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ b.name }}</span>
|
||||
<sc-if value="{{ b.hasCount }}" hint-placeholder-val="{{ false }}"><span style="font-size: 12px; font-weight: 600; color: {{ b.countColor }}; font-variant-numeric: tabular-nums">{{ b.count }}</span></sc-if>
|
||||
</a>
|
||||
<sc-if value="{{ b.pointerHere }}" hint-placeholder-val="{{ false }}">
|
||||
<span aria-hidden="true" style="position: absolute; left: {{ b.pointerX }}px; top: 13px; z-index: 6; width: 0; height: 0; pointer-events: none">
|
||||
<sc-if value="{{ b.dropOk }}" hint-placeholder-val="{{ true }}"><svg width="16" height="22" viewBox="0 0 16 22" style="position: absolute; left: -1px; top: -1px; display: block"><path d="M1.5 1.5 L1.5 17.5 L5.4 13.9 L8 20 L10.8 18.8 L8.3 12.9 L13.6 12.9 Z" fill="#FFFFFF" stroke="#171C26" stroke-width="1.3" stroke-linejoin="round"></path></svg></sc-if>
|
||||
<sc-if value="{{ b.dropNo }}" hint-placeholder-val="{{ false }}"><svg width="24" height="24" viewBox="0 0 24 24" style="position: absolute; left: -12px; top: -12px; display: block"><circle cx="12" cy="12" r="8.5" fill="none" stroke="#FFFFFF" stroke-width="5"></circle><line x1="6" y1="6" x2="18" y2="18" stroke="#FFFFFF" stroke-width="5"></line><circle cx="12" cy="12" r="8.5" fill="none" stroke="#171C26" stroke-width="2.4"></circle><line x1="6" y1="6" x2="18" y2="18" stroke="#171C26" stroke-width="2.4"></line></svg></sc-if>
|
||||
<span style="position: absolute; left: 16px; top: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px; background: #0B3640; color: #FFFFFF; font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; box-shadow: 0 6px 16px rgba(16, 24, 28, 0.28)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ED6DB" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
<span>{{ chip1 }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</sc-if>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<span style="display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2px; padding: 0 10px; border-radius: 7px; color: #344054; font-weight: 500">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
<span>새 메일함</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 2px; border-top: 1px solid #E6E8EC">
|
||||
<div style="display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #667085">
|
||||
<span>메일함 사용량</span>
|
||||
<span style="font-variant-numeric: tabular-nums">0.9 / 5 GB</span>
|
||||
</div>
|
||||
<div style="height: 4px; border-radius: 2px; background: #E4E7EC">
|
||||
<div style="width: 18%; height: 4px; border-radius: 2px; background: #0E7C86"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section aria-labelledby="split-count" style="flex: 0 0 384px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; border-right: 1px solid #E6E8EC">
|
||||
<div style="display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 4px 4px 4px 12px; border-bottom: 1px solid #E6E8EC; background: #F3F8F8">
|
||||
<h2 id="split-count" style="flex: 0 0 auto; margin: 0 4px 0 0; font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums">3통 선택됨</h2>
|
||||
<div role="toolbar" aria-label="고른 메일" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center">
|
||||
<button type="button" aria-label="읽음 표시" title="읽음 표시" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"></path><path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"></path></svg></button>
|
||||
<button type="button" aria-label="안 읽음 표시" title="안 읽음 표시" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg></button>
|
||||
<button type="button" aria-label="중요 표시" title="중요 표시" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></button>
|
||||
<button type="button" aria-label="이동" title="이동" aria-haspopup="menu" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-1.5"></path><path d="M2 13h10"></path><path d="m9 16 3-3-3-3"></path></svg></button>
|
||||
<button type="button" aria-label="스팸 신고" title="스팸 신고" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></button>
|
||||
<button type="button" aria-label="삭제" title="삭제" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #B42318; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
|
||||
<button type="button" aria-label="선택 해제" title="선택 해제 (Esc)" style="margin-left: auto; width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<ul aria-label="받은편지함 메일 목록" style="list-style: none; margin: 0; padding: 0">
|
||||
<sc-for list="{{ items1 }}" as="r" hint-placeholder-count="10">
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: {{ r.bg }}">
|
||||
<button type="button" role="checkbox" aria-checked="{{ r.checkedStr }}" aria-label="{{ r.pickLabel }}" style="flex: 0 0 auto; width: 36px; display: flex; align-items: center; justify-content: flex-end; padding: 0; border: 0; background: transparent; cursor: pointer">
|
||||
<sc-if value="{{ r.checked }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><rect x="0.25" y="0.25" width="15.5" height="15.5" rx="4" fill="#0E7C86"></rect><polyline points="4.2 8.3 6.9 10.8 11.8 5.4" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline></svg></sc-if>
|
||||
<sc-if value="{{ r.notChecked }}" hint-placeholder-val="{{ true }}"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><rect x="1" y="1" width="14" height="14" rx="3.5" fill="#FFFFFF" stroke="#8A94A3" stroke-width="1.5"></rect></svg></sc-if>
|
||||
</button>
|
||||
<a href="#" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 10px; line-height: 1.4; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: {{ r.whoFw }}; color: {{ r.whoColor }}">{{ r.who }}</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums">{{ r.time }}</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: {{ r.subFw }}; color: #171C26">{{ r.subject }}</span>
|
||||
<sc-if value="{{ r.hasAtt }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><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"></path></svg></sc-if>
|
||||
</span>
|
||||
</a>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="{{ r.starredStr }}" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: {{ r.starColor }}; cursor: pointer">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="{{ r.starFill }}" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
<div style="border-bottom: 1px solid #E6E8EC">
|
||||
<div role="group" aria-label="이 메일로 할 일" style="display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 52px; max-width: 800px; box-sizing: border-box; padding: 4px 32px 4px 22px">
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; color: #344054; font-weight: 500">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>
|
||||
<span>답장</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; color: #344054; font-weight: 500">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 17 2 12 7 7"></polyline><polyline points="12 17 7 12 12 7"></polyline><path d="M22 18v-2a4 4 0 0 0-4-4H7"></path></svg>
|
||||
<span>전체 답장</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; color: #344054; font-weight: 500">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
|
||||
<span>전달</span>
|
||||
</span>
|
||||
<span aria-hidden="true" style="width: 1px; height: 20px; margin: 0 6px; background: #E6E8EC"></span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 8px 0 10px; border-radius: 8px; color: #344054; font-weight: 500">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-1.5"></path><path d="M2 13h10"></path><path d="m9 16 3-3-3-3"></path></svg>
|
||||
<span>이동</span>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; color: #344054; font-weight: 500">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span>스팸 신고</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; color: #B42318; font-weight: 500">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
|
||||
<span>삭제</span>
|
||||
</span>
|
||||
<span aria-label="더 보기" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #344054"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
<article aria-labelledby="split-subject" style="display: flex; flex-direction: column; gap: 18px; max-width: 800px; box-sizing: border-box; padding: 20px 32px 36px">
|
||||
<div style="display: flex; align-items: flex-start; gap: 8px">
|
||||
<h3 id="split-subject" style="flex: 1 1 auto; margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">Re: 유지보수 계약 갱신 건</h3>
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #98A2B3"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 600">이</span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
|
||||
<span style="font-size: 13.5px; font-weight: 600">이도윤</span>
|
||||
<span style="font-size: 12.5px; color: #667085">doyun.lee@arasystem.it.kr</span>
|
||||
<span style="margin-left: auto; font-size: 12.5px; color: #667085; white-space: nowrap; font-variant-numeric: tabular-nums">2026. 11. 9. (월) 오전 10:42</span>
|
||||
</div>
|
||||
<span style="font-size: 12.5px; color: #4A5363">받는 사람 김아라 <ara.kim@arasystem.it.kr></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 14px; line-height: 1.75; color: #1F2733; max-width: 680px">
|
||||
<p style="margin: 0">김아라님, 안녕하세요.</p>
|
||||
<p style="margin: 14px 0 0">말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다.<br>기간은 1년이고, 단가는 작년과 같습니다.</p>
|
||||
<p style="margin: 14px 0 0">이도윤 드림</p>
|
||||
</div>
|
||||
<section aria-labelledby="split-att" style="display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid #EEF0F3">
|
||||
<h4 id="split-att" style="margin: 0; font-size: 12.5px; font-weight: 600; color: #4A5363">첨부 파일 1개</h4>
|
||||
<div style="display: flex; align-items: center; gap: 10px; max-width: 320px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">유지보수_계약서_초안.docx</span>
|
||||
<span style="font-size: 12px; color: #667085">64 KB</span>
|
||||
</span>
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #344054"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="flex: 0 0 auto; margin: 0; padding: 12px 48px 0; font-size: 12.5px; color: #667085; word-break: keep-all">고르지 않은 줄을 끌면 그 줄만 옮기고, 고른 메일은 그대로 둡니다. 보내기를 기다리는 메일의 줄은 끌 수 없습니다. 읽기 화면 도구 줄의 [이동 ▾]는 정한 것 1의 모습입니다.</p>
|
||||
|
||||
<section aria-labelledby="sec2-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 16px; display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="sec2-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">2. 목록 보기 (1440) · 대화 줄 하나를 끌어다 놓는 중</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363; word-break: keep-all">대화로 묶은 받은편지함에서 고르지 않은 줄(박지훈, 나 · 3통)을 끌어 견적 메일함 위에 두었습니다. 따라오는 표에는 대화 수를 적습니다.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="board-list" role="region" aria-label="화면: 목록 보기, 대화로 묶은 받은편지함에서 대화 줄을 견적 메일함으로 끌어다 놓는 중" style="flex: 0 0 auto; height: 680px; box-sizing: border-box; display: flex; background: #FFFFFF; border-top: 1px solid #E6E8EC; border-bottom: 1px solid #E6E8EC; overflow: hidden">
|
||||
|
||||
<nav aria-label="사내 시스템" style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
|
||||
<a href="#" style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px; border-radius: 10px; text-decoration: none">
|
||||
<img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
|
||||
</a>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px">
|
||||
<li>
|
||||
<a href="#" aria-current="page" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
<span>메일</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
<span>캘린더</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span>파일</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
||||
<span>주소록</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" style="margin-top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||
<span>설정</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
|
||||
<header style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC">
|
||||
<span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">메일</span>
|
||||
<form role="search" style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; margin: 0; padding: 0 4px 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
<input type="search" aria-label="메일 검색" placeholder="메일 검색" style="flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: #171C26">
|
||||
<button type="button" title="조건으로 찾기" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
||||
<span>조건</span>
|
||||
</button>
|
||||
</form>
|
||||
<div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-weight: 600">김</span>
|
||||
<div style="display: flex; flex-direction: column; line-height: 1.3">
|
||||
<span style="font-weight: 600">김아라</span>
|
||||
<span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
|
||||
</div>
|
||||
<button type="button" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #4A5363; font: inherit; font-weight: 500; cursor: pointer">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
<span>로그아웃</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style="flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch">
|
||||
|
||||
<nav aria-label="메일함" style="flex: 0 0 208px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
|
||||
<a href="#" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600; text-decoration: none">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
||||
<span>메일 쓰기</span>
|
||||
</a>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<sc-for list="{{ sys2 }}" as="b" hint-placeholder-count="6">
|
||||
<li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ b.bg }}; outline: {{ b.outline }}; outline-offset: -2px">
|
||||
<a href="#" aria-current="{{ b.current }}" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 36px 0 {{ b.indent }}px; border-radius: 7px; color: {{ b.fg }}; font-weight: {{ b.fw }}; text-decoration: none">
|
||||
<sc-if value="{{ b.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
|
||||
<sc-if value="{{ b.isSent }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></sc-if>
|
||||
<sc-if value="{{ b.isClock }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></sc-if>
|
||||
<sc-if value="{{ b.isDrafts }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg></sc-if>
|
||||
<sc-if value="{{ b.isJunk }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></sc-if>
|
||||
<sc-if value="{{ b.isTrash }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></sc-if>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ b.name }}</span>
|
||||
<sc-if value="{{ b.hasCount }}" hint-placeholder-val="{{ false }}"><span style="font-size: 12px; font-weight: 600; color: {{ b.countColor }}; font-variant-numeric: tabular-nums">{{ b.count }}</span></sc-if>
|
||||
</a>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<p style="margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">내 메일함</p>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<sc-for list="{{ mine2 }}" as="b" hint-placeholder-count="4">
|
||||
<li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ b.bg }}; outline: {{ b.outline }}; outline-offset: -2px">
|
||||
<a href="#" aria-current="{{ b.current }}" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 36px 0 {{ b.indent }}px; border-radius: 7px; color: {{ b.fg }}; font-weight: {{ b.fw }}; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ b.name }}</span>
|
||||
<sc-if value="{{ b.hasCount }}" hint-placeholder-val="{{ false }}"><span style="font-size: 12px; font-weight: 600; color: {{ b.countColor }}; font-variant-numeric: tabular-nums">{{ b.count }}</span></sc-if>
|
||||
</a>
|
||||
<sc-if value="{{ b.pointerHere }}" hint-placeholder-val="{{ false }}">
|
||||
<span aria-hidden="true" style="position: absolute; left: {{ b.pointerX }}px; top: 13px; z-index: 6; width: 0; height: 0; pointer-events: none">
|
||||
<svg width="16" height="22" viewBox="0 0 16 22" style="position: absolute; left: -1px; top: -1px; display: block"><path d="M1.5 1.5 L1.5 17.5 L5.4 13.9 L8 20 L10.8 18.8 L8.3 12.9 L13.6 12.9 Z" fill="#FFFFFF" stroke="#171C26" stroke-width="1.3" stroke-linejoin="round"></path></svg>
|
||||
<span style="position: absolute; left: 16px; top: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px; background: #0B3640; color: #FFFFFF; font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; box-shadow: 0 6px 16px rgba(16, 24, 28, 0.28)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ED6DB" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span>{{ chip2 }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</sc-if>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<span style="display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2px; padding: 0 10px; border-radius: 7px; color: #344054; font-weight: 500">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
<span>새 메일함</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 2px; border-top: 1px solid #E6E8EC">
|
||||
<div style="display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #667085">
|
||||
<span>메일함 사용량</span>
|
||||
<span style="font-variant-numeric: tabular-nums">0.9 / 5 GB</span>
|
||||
</div>
|
||||
<div style="height: 4px; border-radius: 2px; background: #E4E7EC">
|
||||
<div style="width: 18%; height: 4px; border-radius: 2px; background: #0E7C86"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section aria-labelledby="list-title" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 4px 8px 4px 20px; border-bottom: 1px solid #E6E8EC">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px">
|
||||
<h2 id="list-title" style="margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap">받은편지함</h2>
|
||||
<span style="font-size: 12px; color: #667085; white-space: nowrap; font-variant-numeric: tabular-nums">대화 7개, 안 읽은 메일 2통</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; align-items: center; gap: 8px">
|
||||
<button type="button" aria-pressed="true" style="display: inline-flex; align-items: center; gap: 6px; min-height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid #D0D5DD; border-radius: 8px; background: #E3F2F3; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span>대화로 묶기</span>
|
||||
</button>
|
||||
<div role="group" aria-label="보기 방식" style="display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF">
|
||||
<span style="display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border-radius: 6px; color: #344054; font-size: 12px; font-weight: 500">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2" ry="2"></rect><line x1="10" y1="4" x2="10" y2="20"></line></svg>
|
||||
<span>분할</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border-radius: 6px; background: #E3F2F3; color: #0A5F67; font-size: 12px; font-weight: 600">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="9" y1="6" x2="20" y2="6"></line><line x1="9" y1="12" x2="20" y2="12"></line><line x1="9" y1="18" x2="20" y2="18"></line><line x1="4" y1="6" x2="4.01" y2="6"></line><line x1="4" y1="12" x2="4.01" y2="12"></line><line x1="4" y1="18" x2="4.01" y2="18"></line></svg>
|
||||
<span>목록</span>
|
||||
</span>
|
||||
</div>
|
||||
<span aria-label="새로고침" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #4A5363">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div aria-hidden="true" class="cv-grid" style="height: 32px; box-sizing: border-box; padding: 0 8px 0 20px; background: #FBFBFC; border-bottom: 1px solid #E6E8EC; font-size: 12px; font-weight: 600; color: #667085">
|
||||
<span style="display: flex; align-items: center"><svg width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" rx="3.5" fill="#FFFFFF" stroke="#8A94A3" stroke-width="1.5"></rect></svg></span>
|
||||
<span style="display: flex; align-items: center"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
|
||||
<span>참여자</span>
|
||||
<span>제목</span>
|
||||
<span style="text-align: right">날짜</span>
|
||||
</div>
|
||||
<ul aria-label="받은편지함 대화 목록" style="list-style: none; margin: 0; padding: 0">
|
||||
<sc-for list="{{ convRows }}" as="c" hint-placeholder-count="7">
|
||||
<li class="cv-grid" style="height: 38px; box-sizing: border-box; padding: 0 8px 0 20px; border-bottom: 1px solid #EEF0F3; background: {{ c.bg }}">
|
||||
<span style="display: flex; align-items: center"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><rect x="1" y="1" width="14" height="14" rx="3.5" fill="#FFFFFF" stroke="#8A94A3" stroke-width="1.5"></rect></svg></span>
|
||||
<span style="display: flex; align-items: center; color: {{ c.starColor }}"><svg width="14" height="14" viewBox="0 0 24 24" fill="{{ c.starFill }}" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
|
||||
<span style="min-width: 0; display: flex; align-items: center; gap: 6px">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: {{ c.fw }}; color: {{ c.whoColor }}">{{ c.who }}</span>
|
||||
<sc-if value="{{ c.hasCount }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 500; color: #667085; font-variant-numeric: tabular-nums">{{ c.count }}</span></sc-if>
|
||||
</span>
|
||||
<span style="min-width: 0; display: flex; align-items: center; gap: 6px">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: {{ c.fw }}; color: #171C26">{{ c.subject }}</span>
|
||||
<sc-if value="{{ c.hasAtt }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><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"></path></svg></sc-if>
|
||||
</span>
|
||||
<span style="text-align: right; white-space: nowrap; font-size: 12px; font-weight: {{ c.dateFw }}; color: {{ c.dateColor }}; font-variant-numeric: tabular-nums">{{ c.date }}</span>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<div style="display: flex; justify-content: center; padding: 10px 20px 20px">
|
||||
<span style="display: inline-flex; align-items: center; min-height: 40px; padding: 0 24px; border-radius: 8px; color: #0E7C86; font-weight: 600">메일 더 보기</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="flex: 0 0 auto; margin: 0; padding: 12px 48px 0; font-size: 12.5px; color: #667085; word-break: keep-all">대화 줄을 끌면 그 대화에서 지금 메일함(받은편지함)에 있는 메일만 옮깁니다. [이동 ▾]와 같이 보내기를 기다리는 메일은 빼고, 놓은 뒤 알림은 3e입니다.</p>
|
||||
|
||||
<section aria-labelledby="sec3-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 16px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="sec3-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">3. 놓은 뒤 알림</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363; word-break: keep-all">메뉴로 옮길 때와 같은 알림이고, 화면 오른쪽 아래에 뜹니다. [되돌리기]가 있는 알림은 10초 동안 남습니다.</p>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: stretch">
|
||||
|
||||
<sc-for list="{{ toasts }}" as="t" hint-placeholder-count="5">
|
||||
<section style="grid-column: {{ t.span }}; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: 18px 16px 18px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 700; word-break: keep-all">{{ t.title }}</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085; word-break: keep-all">{{ t.note }}</p>
|
||||
</div>
|
||||
<div role="status" style="width: 100%; max-width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere">{{ t.text }}</span>
|
||||
<button type="button" class="on-dark" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #9ED6DB; font: inherit; font-weight: 600; cursor: pointer">되돌리기</button>
|
||||
</div>
|
||||
</section>
|
||||
</sc-for>
|
||||
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085; word-break: keep-all">끌어다 놓기는 마우스로만 합니다. 키보드와 터치 화면에서는 지금처럼 [이동 ▾]로 옮기고, 옮길 곳과 알림은 같습니다.</p>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="sec4-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 16px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="sec4-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">4. 상단 바 · 휴대폰 폭 360 (2배로 확대)</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363; word-break: keep-all">레일 72와 상단 바만 잘라 2배로 키웠습니다. 바 안쪽 폭은 256입니다(360에서 레일 72와 바의 좌우 여백 32를 뺀 폭). 넓은 화면은 달라지지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: flex-start; gap: 32px">
|
||||
<div style="flex: 0 0 auto; width: 720px; height: 400px; box-sizing: content-box; overflow: hidden; border: 1px solid #D0D5DD; border-radius: 12px; background: #FFFFFF">
|
||||
<div style="width: 360px; height: 200px; transform: scale(2); transform-origin: 0 0; display: flex; overflow: hidden; background: #FFFFFF">
|
||||
<div style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="48" height="17" style="display: block; width: 48px; height: auto"></span>
|
||||
<span style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
<span>메일</span>
|
||||
</span>
|
||||
<span style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
<span>캘린더</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC; background: #FFFFFF">
|
||||
<span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">메일</span>
|
||||
<div style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 4px 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; color: #757D8A">메일 검색</span>
|
||||
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border-radius: 6px; color: #4A5363; font-size: 12.5px; font-weight: 600">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
||||
<span>조건</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-weight: 600">김</span>
|
||||
<div style="display: flex; flex-direction: column; line-height: 1.3">
|
||||
<span style="font-weight: 600">김아라</span>
|
||||
<span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
|
||||
</div>
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #4A5363; font-weight: 500">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
<span>로그아웃</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; box-sizing: border-box; padding: 14px 10px; background: #F8F9FB">
|
||||
<span style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
||||
<span>메일 쓰기</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4px">
|
||||
<h3 style="margin: 0; font-size: 15px; font-weight: 700; color: #B42318">4a. 지금</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
|
||||
<li>검색 칸(기본 폭 280)이 둘째 줄로, 계정 칸이 셋째 줄로 내려갑니다.</li>
|
||||
<li>계정 칸은 아바타 32, 이름과 주소, [로그아웃] 순서입니다. 주소는 줄지 않아 [로그아웃]만 줄어들고 글자가 두 줄로 꺾입니다.</li>
|
||||
<li>주소가 더 긴 직원은 [로그아웃]이 한 글자씩 꺾여 셋째 줄이 더 높아집니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: flex-start; gap: 32px">
|
||||
<div style="flex: 0 0 auto; width: 720px; height: 400px; box-sizing: content-box; overflow: hidden; border: 1px solid #D0D5DD; border-radius: 12px; background: #FFFFFF">
|
||||
<div style="width: 360px; height: 200px; transform: scale(2); transform-origin: 0 0; display: flex; overflow: hidden; background: #FFFFFF">
|
||||
<div style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="48" height="17" style="display: block; width: 48px; height: auto"></span>
|
||||
<span style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
<span>메일</span>
|
||||
</span>
|
||||
<span style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
<span>캘린더</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC; background: #FFFFFF">
|
||||
<span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">메일</span>
|
||||
<div style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 4px 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; color: #757D8A">메일 검색</span>
|
||||
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border-radius: 6px; color: #4A5363; font-size: 12.5px; font-weight: 600">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
||||
<span>조건</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-left: auto; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 10px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-weight: 600">김</span>
|
||||
<div style="min-width: 0; display: flex; flex-direction: column; line-height: 1.3">
|
||||
<span title="김아라 (ara.kim@arasystem.it.kr)" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">김아라</span>
|
||||
</div>
|
||||
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #4A5363; font-weight: 500; white-space: nowrap">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
<span>로그아웃</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; box-sizing: border-box; padding: 14px 10px; background: #F8F9FB">
|
||||
<span style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
||||
<span>메일 쓰기</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4px">
|
||||
<h3 style="margin: 0; font-size: 15px; font-weight: 700; color: #0A5F67">4b. 고친 뒤</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
|
||||
<li>[로그아웃]은 줄지도 꺾이지도 않습니다. 늘 한 줄입니다.</li>
|
||||
<li>화면 폭이 480 이하면 주소를 감추고 이름만 둡니다.</li>
|
||||
<li>이름이나 주소가 아주 길어 넘치면 끝을 "…"로 줄이고, 마우스를 올리면 다 보입니다.</li>
|
||||
<li>줄 수와 차례(메일, 검색 칸, 계정)는 지금과 같습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">정한 것 · 끌 수 있는 것과 놓을 곳</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
|
||||
<li>고른 줄을 끌면 고른 메일을 모두, 고르지 않은 줄을 끌면 그 줄만 옮깁니다. 고른 것은 그대로 둡니다.</li>
|
||||
<li>대화로 묶은 목록의 줄은 그 대화에서 지금 메일함에 있는 메일을 옮깁니다. 보내기를 기다리는 메일은 빼고([이동 ▾]와 같다), 그런 메일뿐인 줄은 끌 수 없습니다.</li>
|
||||
<li>놓을 곳은 [이동 ▾]의 옮길 곳에 휴지통을 더한 곳입니다. 지금 메일함, 임시보관함, 예약됨에는 놓을 수 없습니다.</li>
|
||||
<li>휴지통에 놓으면 [삭제], 스팸메일함에 놓으면 [스팸 신고]와 같고, 그 밖은 [이동 ▾]와 같습니다. 알림과 [되돌리기]도 같습니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">끌어다 놓는 동안의 모양</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
|
||||
<li>마우스를 따라오는 표는 커서 오른쪽 아래에 붙습니다. "메일 N통" 또는 "대화 N개"이고, 알림과 같은 어두운 바탕(#0B3640)에 12.5px 굵은 흰 글자, 봉투나 말풍선 아이콘입니다.</li>
|
||||
<li>놓을 수 있는 메일함 위에서는 그 줄에 2px 청록 점선과 옅은 청록 바탕이 생깁니다. 쓰기 화면에 파일을 끌어다 놓을 때와 같은 모양이라 초점 선(실선)과 헷갈리지 않습니다.</li>
|
||||
<li>놓을 수 없는 곳 위에서는 줄이 그대로이고 마우스 커서만 금지 모양(⊘)이 됩니다. 메일함 줄마다 금지 표시를 그리지 않습니다.</li>
|
||||
<li>끌기 시작한 줄은 흐리게 하지 않습니다. 고른 줄은 고른 바탕 그대로입니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">정한 것 · 스팸메일함으로 옮기는 길</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
|
||||
<li>[스팸 신고], [이동 ▾]에서 스팸메일함 고르기, 스팸메일함에 끌어다 놓기는 모두 스팸 표시를 붙여 옮깁니다(3c). 지금은 [이동 ▾]만 표시 없이 옮깁니다.</li>
|
||||
<li>스팸메일함에서 휴지통이 아닌 메일함으로 옮기면(메뉴, 끌기) [스팸 아님]과 같이 스팸 아님 표시를 붙입니다(3d). 휴지통으로 옮길 때는 표시를 바꾸지 않습니다.</li>
|
||||
<li>[되돌리기]는 원래 메일함으로 옮기며 표시도 되돌립니다. 지금의 [스팸 신고], [스팸 아님]과 같습니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">구현 때 맞출 것</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
|
||||
<li>HTML5 끌어다 놓기로 만들고, 따라오는 표는 setDragImage 로 붙입니다. 놓을 수 없는 곳에서는 dropEffect 를 none 으로 두어 브라우저가 금지 커서를 보입니다. 커서 모양과 따라오는 표의 투명도는 운영체제와 브라우저마다 조금 다릅니다.</li>
|
||||
<li>목록 줄은 링크라 지금도 끌면 그 메일 화면의 주소(URL)가 끌려 나갑니다. 우리 끌기 자료로 바꾸고, 다른 창이나 바깥 프로그램에 놓아도 아무 일도 일어나지 않게 합니다.</li>
|
||||
<li>메일함 패널은 쓰기 화면에도 보이므로 파일 끌기는 받지 않습니다(첨부 놓기와 겹치지 않게). 메일 화면에 파일을 잘못 놓으면 지금은 브라우저가 그 파일을 열어 웹메일을 떠나는데, 앞으로는 무시합니다.</li>
|
||||
<li>패널의 메일함이 많아 아래가 가려져 있으면 패널 끝에서 저절로 스크롤되는지 확인합니다.</li>
|
||||
<li>상단 바는 아바타와 [로그아웃]을 줄지 않게 하고 이름 칸만 줄게 합니다. 480 이하에서 주소를 감추는 것은 tokens.css 의 화면 폭 기준에 한 줄을 더합니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":3845}}'>
|
||||
class Component extends DCLogic {
|
||||
state = { over: null };
|
||||
|
||||
// 상태 고르기 단추 — 다른 보드(SettingsMobileApp)와 같은 모양
|
||||
modes(list, current, choose) {
|
||||
return list.map((x) => {
|
||||
const on = x.id === current;
|
||||
return {
|
||||
label: x.label,
|
||||
pressed: on ? 'true' : 'false',
|
||||
pick: () => choose(x.id),
|
||||
bg: on ? '#E3F2F3' : '#FFFFFF',
|
||||
fg: on ? '#0A5F67' : '#344054',
|
||||
border: on ? '#0E7C86' : '#D0D5DD',
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 메일함 패널 — target 은 마우스가 있는 메일함. 지금 메일함(받은편지함) · 임시보관함 · 예약됨에는 놓을 수 없다
|
||||
panel(target) {
|
||||
const SYSTEM = [
|
||||
{ id: 'inbox', name: '받은편지함', icon: 'inbox', count: '2' },
|
||||
{ id: 'sent', name: '보낸편지함', icon: 'sent' },
|
||||
{ id: 'scheduled', name: '예약됨', icon: 'clock', count: '1' },
|
||||
{ id: 'drafts', name: '임시보관함', icon: 'drafts' },
|
||||
{ id: 'junk', name: '스팸메일함', icon: 'junk' },
|
||||
{ id: 'trash', name: '휴지통', icon: 'trash' },
|
||||
];
|
||||
const MINE = [
|
||||
{ id: 'clients', name: '거래처', icon: 'folder', count: '1' },
|
||||
{ id: 'project', name: '프로젝트', icon: 'folder', count: '2' },
|
||||
{ id: 'quotes', name: '견적', icon: 'folder', depth: 1 },
|
||||
{ id: 'partners', name: '협력사', icon: 'folder' },
|
||||
];
|
||||
const BLOCKED = ['inbox', 'drafts', 'scheduled'];
|
||||
const row = (b) => {
|
||||
const current = b.id === 'inbox';
|
||||
const here = b.id === target;
|
||||
const ok = here && BLOCKED.indexOf(b.id) < 0;
|
||||
const strong = current || ok;
|
||||
const indent = b.depth ? 28 : 10;
|
||||
return {
|
||||
name: b.name,
|
||||
isInbox: b.icon === 'inbox',
|
||||
isSent: b.icon === 'sent',
|
||||
isClock: b.icon === 'clock',
|
||||
isDrafts: b.icon === 'drafts',
|
||||
isJunk: b.icon === 'junk',
|
||||
isTrash: b.icon === 'trash',
|
||||
isFolder: b.icon === 'folder',
|
||||
hasCount: !!b.count,
|
||||
count: b.count || '',
|
||||
indent: indent,
|
||||
current: current ? 'page' : 'false',
|
||||
bg: ok ? '#F3F8F8' : current ? '#E3F2F3' : 'transparent',
|
||||
outline: ok ? '2px dashed #0E7C86' : 'none',
|
||||
fg: strong ? '#0A5F67' : '#344054',
|
||||
fw: strong ? '600' : '500',
|
||||
countColor: strong ? '#0A5F67' : '#171C26',
|
||||
pointerHere: here,
|
||||
dropOk: ok,
|
||||
dropNo: here && !ok,
|
||||
pointerX: indent + 56,
|
||||
};
|
||||
};
|
||||
return { system: SYSTEM.map(row), mine: MINE.map(row) };
|
||||
}
|
||||
|
||||
renderVals() {
|
||||
const st = this.state;
|
||||
const over = st.over ?? 'clients';
|
||||
const OVER = [
|
||||
{ id: 'clients', label: '거래처', title: '1a. 거래처 위 · 놓을 수 있음', note: '줄에 청록 점선과 옅은 바탕이 생깁니다. 놓으면 메일 3통을 거래처로 옮기고, 알림에 [되돌리기]를 붙입니다(3a).' },
|
||||
{ id: 'trash', label: '휴지통', title: '1b. 휴지통 위 · 놓을 수 있음', note: '[삭제]와 같습니다. 휴지통으로 옮기고, 알림에 [되돌리기]를 붙입니다(3b).' },
|
||||
{ id: 'junk', label: '스팸메일함', title: '1c. 스팸메일함 위 · 놓을 수 있음', note: '[스팸 신고]와 같습니다. 스팸 표시를 붙여 옮기고, [되돌리기]는 표시도 되돌립니다(3c).' },
|
||||
{ id: 'drafts', label: '임시보관함', title: '1d. 임시보관함 위 · 놓을 수 없음', note: '줄은 밝아지지 않고 마우스 커서만 금지 모양이 됩니다. 여기서 놓으면 아무 일도 일어나지 않습니다.' },
|
||||
{ id: 'scheduled', label: '예약됨', title: '1e. 예약됨 위 · 놓을 수 없음', note: '예약한 메일을 모아 보는 곳이라 놓을 수 없습니다. 줄은 그대로이고 커서만 금지 모양입니다.' },
|
||||
{ id: 'inbox', label: '받은편지함', title: '1f. 받은편지함 위 · 놓을 수 없음', note: '지금 보고 있는 메일함입니다. 지금 메일함 바탕 그대로이고 커서만 금지 모양입니다.' },
|
||||
];
|
||||
const cur = OVER.find((x) => x.id === over) || OVER[0];
|
||||
const p1 = this.panel(over);
|
||||
const p2 = this.panel('quotes');
|
||||
|
||||
// 분할 보기 목록 — 고른 줄 셋(박지훈 줄에서 끌기 시작), 연 메일은 맨 위 줄
|
||||
const MAILS = [
|
||||
{ who: '이도윤', time: '오전 10:42', subject: 'Re: 유지보수 계약 갱신 건', unread: true, att: true, open: true },
|
||||
{ who: '(주)한빛솔루션', time: '오전 9:31', subject: '서버 증설 견적서 송부드립니다', att: true, checked: true },
|
||||
{ who: '인사팀', time: '오전 9:05', subject: '[공지] 계약직 채용 일정 안내', unread: true },
|
||||
{ who: '박지훈', time: '어제', subject: 'Re: 견적 조건 문의드립니다', checked: true, grabbed: true },
|
||||
{ who: '박준호', time: '어제', subject: '11월 인프라 점검 일정 조율' },
|
||||
{ who: '(주)한빛솔루션', time: '11월 6일', subject: '유지보수 계약 갱신 안내', checked: true },
|
||||
{ who: '정하늘', time: '11월 6일', subject: 'Re: 신규 입사자 교육 회의록' },
|
||||
{ who: '최서연', time: '11월 5일', subject: '11월 비용 정산 안내', star: true },
|
||||
{ who: '보안팀', time: '11월 4일', subject: '[공지] 하반기 정보보안 교육 이수 요청' },
|
||||
{ who: '김민수', time: '11월 3일', subject: 'Re: 전사 회의 참석 안내', att: true },
|
||||
];
|
||||
const items1 = MAILS.map((m) => ({
|
||||
who: m.who,
|
||||
time: m.time,
|
||||
subject: m.subject,
|
||||
hasAtt: !!m.att,
|
||||
checked: !!m.checked,
|
||||
notChecked: !m.checked,
|
||||
checkedStr: m.checked ? 'true' : 'false',
|
||||
pickLabel: '고르기: ' + m.subject,
|
||||
bg: m.grabbed ? '#DDEFF0' : m.checked ? '#E8F4F5' : m.open ? '#E3F2F3' : '#FFFFFF',
|
||||
whoFw: m.unread ? '650' : '450',
|
||||
whoColor: m.unread ? '#171C26' : '#344054',
|
||||
subFw: m.unread ? '600' : '400',
|
||||
timeFw: m.unread ? '600' : '400',
|
||||
timeColor: m.unread ? '#171C26' : '#667085',
|
||||
starredStr: m.star ? 'true' : 'false',
|
||||
starColor: m.star ? '#B7791F' : '#98A2B3',
|
||||
starFill: m.star ? '#B7791F' : 'none',
|
||||
}));
|
||||
|
||||
// 목록 보기 · 대화로 묶은 받은편지함 — 박지훈, 나 줄을 끌어다 놓는 중(끌기 시작한 줄은 마우스를 올린 바탕 그대로)
|
||||
const CONVS = [
|
||||
{ who: '이도윤, 나', count: '4통', subject: 'Re: 유지보수 계약 갱신 건', date: '오전 10:42', unread: true, att: true },
|
||||
{ who: '인사팀', subject: '[공지] 계약직 채용 일정 안내', date: '오전 9:05', unread: true },
|
||||
{ who: '박지훈, 나', count: '3통', subject: 'Re: 견적 조건 문의드립니다', date: '11.08', grabbed: true },
|
||||
{ who: '정하늘, 나', count: '3통', subject: 'Re: 신규 입사자 교육 회의록', date: '11.08' },
|
||||
{ who: '박준호', subject: '11월 인프라 점검 일정 조율', date: '11.06' },
|
||||
{ who: '최서연', subject: '11월 비용 정산 안내', date: '11.05', star: true },
|
||||
{ who: '인사팀, 김민수, 나', count: '6통', subject: 'Re: 전사 회의 참석 안내', date: '11.03', att: true },
|
||||
];
|
||||
const convRows = CONVS.map((c) => ({
|
||||
who: c.who,
|
||||
count: c.count || '',
|
||||
hasCount: !!c.count,
|
||||
subject: c.subject,
|
||||
date: c.date,
|
||||
hasAtt: !!c.att,
|
||||
bg: c.grabbed ? '#F3F8F8' : '#FFFFFF',
|
||||
fw: c.unread ? '650' : '450',
|
||||
whoColor: c.unread ? '#171C26' : '#344054',
|
||||
dateFw: c.unread ? '600' : '400',
|
||||
dateColor: c.unread ? '#171C26' : '#667085',
|
||||
starColor: c.star ? '#B7791F' : '#98A2B3',
|
||||
starFill: c.star ? '#B7791F' : 'none',
|
||||
}));
|
||||
|
||||
// 놓은 뒤 알림 — 글은 화면 상수 그대로 (MAIL_BULK_TEXT.moved · movedFrom · MAIL_SPAM_TEXT.notSpamMoved)
|
||||
const toasts = [
|
||||
{ span: 'span 2', title: '3a. 내 메일함(거래처)에 놓았을 때', note: '[이동 ▾]로 옮길 때와 같습니다.', text: '메일 3통을 거래처로 옮겼습니다.' },
|
||||
{ span: 'span 2', title: '3b. 휴지통에 놓았을 때', note: '[삭제]와 같습니다. 영구 삭제하지 않고 휴지통으로 옮깁니다.', text: '메일 3통을 휴지통으로 옮겼습니다.' },
|
||||
{ span: 'span 2', title: '3c. 스팸메일함에 놓았을 때', note: '[스팸 신고]와 같습니다. [이동 ▾]에서 스팸메일함을 골라도 같습니다.', text: '메일 3통을 스팸메일함으로 옮겼습니다.' },
|
||||
{ span: 'span 3', title: '3d. 스팸메일함에서 다른 메일함으로 옮겼을 때', note: '[스팸 아님]과 같습니다. 끌어다 놓기와 [이동 ▾]가 같고, 휴지통으로 옮길 때는 3b와 같습니다.', text: '메일 1통을 스팸이 아닌 메일로 표시해 거래처로 옮겼습니다.' },
|
||||
{ span: 'span 3', title: '3e. 대화 줄을 견적에 놓았을 때(2)', note: '줄의 3통은 대화 전체라서, 옮긴 메일이 받은편지함에 있던 것임을 밝힙니다. 대화 줄에 [이동 ▾]를 쓸 때와 같습니다.', text: '받은편지함에 있는 메일 2통을 견적으로 옮겼습니다.' },
|
||||
];
|
||||
|
||||
return {
|
||||
overModes: this.modes(OVER, over, (id) => this.setState({ over: id })),
|
||||
overTitle: cur.title,
|
||||
overNote: cur.note,
|
||||
splitRegionLabel: '화면: 분할 보기, 고른 메일 3통을 ' + cur.label + ' 위로 끌어다 놓는 중',
|
||||
sys1: p1.system,
|
||||
mine1: p1.mine,
|
||||
sys2: p2.system,
|
||||
mine2: p2.mine,
|
||||
chip1: '메일 3통',
|
||||
chip2: '대화 1개',
|
||||
items1: items1,
|
||||
convRows: convRows,
|
||||
toasts: toasts,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,765 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>메일함 옮기기 · 하위 메일함까지 지우기 · 차단할 때 받은 메일 옮기기</title>
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
@font-face{font-family:'Pretendard';src:url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2-variations'),url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
|
||||
body{margin:0}
|
||||
a{color:#0E7C86}a:hover{color:#0A5F67}
|
||||
:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
|
||||
.on-dark:focus-visible{outline-color:#9ED6DB}
|
||||
.primary{background:#0E7C86;color:#FFFFFF}
|
||||
.primary:hover{background:#0A5F67}
|
||||
.ghost{background:transparent;color:#344054}
|
||||
.ghost:hover{background:#F2F4F7;color:#171C26}
|
||||
.danger-solid{background:#B42318;color:#FFFFFF}
|
||||
.danger-solid:hover{background:#912018}
|
||||
.menu-item{background:transparent;color:#171C26}
|
||||
.menu-item:hover,.menu-item.is-hover{background:#F2F4F7}
|
||||
.menu-item.is-danger{color:#B42318}
|
||||
.menu-item.is-danger:hover{background:#FEF3F2}
|
||||
.dest-row{background:transparent}
|
||||
.dest-row:hover{background:#F2F4F7}
|
||||
.dest-row.is-on,.dest-row.is-on:hover{background:#E3F2F3}
|
||||
.dest-row.is-off:hover{background:transparent}
|
||||
.toast-action{background:transparent;color:#9ED6DB;text-decoration:none}
|
||||
.toast-action:hover{color:#FFFFFF}
|
||||
.toast-link{background:transparent;color:#0E7C86}
|
||||
.toast-link:hover{color:#0A5F67}
|
||||
.toast-close{background:transparent;color:#4A5363}
|
||||
.toast-close:hover{background:#F2F4F7}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 4937px; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: 48px; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
|
||||
|
||||
<div style="flex: 0 0 auto; box-sizing: border-box; padding: 40px 48px 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<h1 style="margin: 0; max-width: 1200px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">메일 15단계 · 메일함 옮기기 · 하위 메일함까지 지우기 · 차단할 때 받은 메일 옮기기</h1>
|
||||
<p style="margin: 0; max-width: 1100px; font-size: 13.5px; color: #4A5363">메일함 패널의 ⋯ 메뉴와 보낸 사람 차단 창에 더하는 것입니다. 메일함을 다른 메일함 안이나 맨 위로 옮기고, 하위 메일함이 있는 메일함도 한 번에 지우고, 보낸 사람을 차단할 때 받은편지함에 이미 있는 그 사람의 메일까지 스팸메일함으로 옮깁니다. 2의 목록은 줄을 눌러 고를 수 있습니다. 예시의 보낸 사람은 news@example.com입니다. 초안이며 사용자 확인 전입니다(2026-11-09).</p>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby="s1-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 40px 48px 0; display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="s1-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">1. 메일함 ⋯ 메뉴</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">내 메일함의 ⋯ 메뉴에 [옮기기]가 생깁니다. 이름 바꾸기 다음, 지우기 앞입니다. 받은편지함 같은 기본 메일함에는 없습니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 24px; align-items: flex-start">
|
||||
|
||||
<div style="flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">내 메일함의 ⋯</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">거래처 안의 2025</p>
|
||||
</div>
|
||||
<nav aria-label="메일함" style="box-sizing: border-box; width: 210px; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: #F8F9FB; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<span style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
||||
<span>메일 쓰기</span>
|
||||
</span>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<sc-for list="{{ f1Roles }}" as="m" hint-placeholder-count="5">
|
||||
<li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ m.bg }}">
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 {{ m.indent }}px; color: {{ m.fg }}; font-weight: {{ m.fw }}">
|
||||
<sc-if value="{{ m.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
|
||||
<sc-if value="{{ m.isSent }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></sc-if>
|
||||
<sc-if value="{{ m.isDrafts }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg></sc-if>
|
||||
<sc-if value="{{ m.isJunk }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></sc-if>
|
||||
<sc-if value="{{ m.isTrash }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></sc-if>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ m.name }}</span>
|
||||
<sc-if value="{{ m.hasCount }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: {{ m.countColor }}; font-variant-numeric: tabular-nums">{{ m.count }}</span></sc-if>
|
||||
</span>
|
||||
<sc-if value="{{ m.hasMore }}" hint-placeholder-val="{{ true }}">
|
||||
<button type="button" aria-label="{{ m.moreLabel }}" aria-haspopup="menu" aria-expanded="{{ m.openStr }}" style="flex: 0 0 auto; width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: {{ m.moreBg }}; color: #4A5363; opacity: {{ m.moreOpacity }}; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
|
||||
</sc-if>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<p style="margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">내 메일함</p>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<sc-for list="{{ f1Mine }}" as="n" hint-placeholder-count="7">
|
||||
<li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ n.bg }}">
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 {{ n.indent }}px; color: {{ n.fg }}; font-weight: {{ n.fw }}">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ n.name }}</span>
|
||||
<sc-if value="{{ n.hasCount }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: {{ n.countColor }}; font-variant-numeric: tabular-nums">{{ n.count }}</span></sc-if>
|
||||
</span>
|
||||
<button type="button" aria-label="{{ n.moreLabel }}" aria-haspopup="menu" aria-expanded="{{ n.openStr }}" style="flex: 0 0 auto; width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: {{ n.moreBg }}; color: #4A5363; opacity: {{ n.moreOpacity }}; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
|
||||
<sc-if value="{{ n.open }}" hint-placeholder-val="{{ false }}">
|
||||
<div role="menu" aria-label="{{ n.menuLabel }}" style="position: absolute; top: 44px; right: 0; z-index: 6; min-width: 196px; box-sizing: border-box; display: flex; flex-direction: column; padding: 6px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
|
||||
<sc-for list="{{ n.items }}" as="it" hint-placeholder-count="5">
|
||||
<button type="button" role="menuitem" class="{{ it.cls }}" style="display: flex; align-items: center; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; text-align: left; white-space: nowrap; cursor: pointer">{{ it.label }}</button>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<span style="display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; color: #344054; font-weight: 500">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
<span>새 메일함</span>
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div style="flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">받은편지함의 ⋯</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">기본 메일함에는 옮기기가 없습니다</p>
|
||||
</div>
|
||||
<nav aria-label="메일함" style="box-sizing: border-box; width: 210px; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: #F8F9FB; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<span style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
||||
<span>메일 쓰기</span>
|
||||
</span>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<sc-for list="{{ f1RolesB }}" as="m" hint-placeholder-count="5">
|
||||
<li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ m.bg }}">
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 {{ m.indent }}px; color: {{ m.fg }}; font-weight: {{ m.fw }}">
|
||||
<sc-if value="{{ m.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
|
||||
<sc-if value="{{ m.isSent }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></sc-if>
|
||||
<sc-if value="{{ m.isDrafts }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg></sc-if>
|
||||
<sc-if value="{{ m.isJunk }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></sc-if>
|
||||
<sc-if value="{{ m.isTrash }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></sc-if>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ m.name }}</span>
|
||||
<sc-if value="{{ m.hasCount }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: {{ m.countColor }}; font-variant-numeric: tabular-nums">{{ m.count }}</span></sc-if>
|
||||
</span>
|
||||
<sc-if value="{{ m.hasMore }}" hint-placeholder-val="{{ true }}">
|
||||
<button type="button" aria-label="{{ m.moreLabel }}" aria-haspopup="menu" aria-expanded="{{ m.openStr }}" style="flex: 0 0 auto; width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: {{ m.moreBg }}; color: #4A5363; opacity: {{ m.moreOpacity }}; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
|
||||
</sc-if>
|
||||
<sc-if value="{{ m.open }}" hint-placeholder-val="{{ false }}">
|
||||
<div role="menu" aria-label="{{ m.menuLabel }}" style="position: absolute; top: 44px; right: 0; z-index: 6; min-width: 196px; box-sizing: border-box; display: flex; flex-direction: column; padding: 6px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
|
||||
<sc-for list="{{ m.items }}" as="it" hint-placeholder-count="2">
|
||||
<button type="button" role="menuitem" class="{{ it.cls }}" style="display: flex; align-items: center; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; text-align: left; white-space: nowrap; cursor: pointer">{{ it.label }}</button>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>항목 차례는 모두 읽음으로 표시, 하위 메일함 만들기, 이름 바꾸기, 옮기기, 지우기입니다. 안 읽은 메일이 없으면 첫 항목이 빠지는 것은 지금과 같습니다.</li>
|
||||
<li>옮기기는 내 메일함에만 있습니다. 받은편지함, 보낸편지함 같은 기본 메일함은 옮기지 않습니다.</li>
|
||||
<li>하위 메일함이 있어도 옮길 수 있습니다. 하위 메일함과 안의 메일이 함께 가고, 그 메일함으로 옮기는 필터도 그대로 돕니다.</li>
|
||||
<li>창을 여는 다른 항목(하위 메일함 만들기, 이름 바꾸기)처럼 이름 뒤에 …를 붙이지 않았습니다.</li>
|
||||
<li>메일함을 지우는 동안에는 지금처럼 모든 항목을 누를 수 없습니다. 항목 높이 40은 지금 메뉴와 같습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="s2-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="s2-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">2. 옮기기 창</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">옮길 곳은 맨 위, 받은편지함, 내 메일함 가운데서 고릅니다. 목록의 줄을 눌러 고를 수 있습니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 24px; align-items: flex-start">
|
||||
|
||||
<div style="flex: 0 0 640px; box-sizing: border-box; display: flex; justify-content: center; padding: 36px 0; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
|
||||
<div role="dialog" aria-modal="true" aria-labelledby="f2-title" aria-describedby="f2-msg" style="width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
|
||||
<h3 id="f2-title" style="margin: 0; font-size: 15px; font-weight: 700">‘2025’ 메일함을 어디로 옮길까요?</h3>
|
||||
<p id="f2-msg" style="margin: 0; color: #4A5363">하위 메일함과 안의 메일도 함께 옮깁니다.</p>
|
||||
<div role="radiogroup" aria-label="옮길 곳" style="display: flex; flex-direction: column; gap: 1px; margin-top: 4px; padding: 4px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<sc-for list="{{ f2Rows }}" as="r" hint-placeholder-count="10">
|
||||
<sc-if value="{{ r.isHeading }}" hint-placeholder-val="{{ false }}">
|
||||
<p style="margin: 8px 10px 2px; font-size: 12px; font-weight: 600; color: #667085">{{ r.name }}</p>
|
||||
</sc-if>
|
||||
<sc-if value="{{ r.isRow }}" hint-placeholder-val="{{ true }}">
|
||||
<button type="button" role="radio" aria-checked="{{ r.checked }}" aria-disabled="{{ r.off }}" class="{{ r.cls }}" onClick="{{ r.pick }}" style="display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px 0 {{ r.indent }}px; border: 0; border-radius: 7px; color: {{ r.fg }}; font: inherit; font-weight: {{ r.fw }}; text-align: left; cursor: {{ r.cursor }}">
|
||||
<sc-if value="{{ r.isTop }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg></sc-if>
|
||||
<sc-if value="{{ r.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
|
||||
<sc-if value="{{ r.isFolder }}" hint-placeholder-val="{{ true }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></sc-if>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: {{ r.dim }}">{{ r.name }}</span>
|
||||
<sc-if value="{{ r.hasNote }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085">{{ r.note }}</span></sc-if>
|
||||
<sc-if value="{{ r.isChecked }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg></sc-if>
|
||||
</button>
|
||||
</sc-if>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; opacity: {{ f2MoveOpacity }}; cursor: pointer">옮기기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>창 폭은 400입니다(주소록의 그룹 창과 같습니다). 처음에는 아무 곳도 고르지 않은 채 열리고, 고르기 전에는 [옮기기]를 누를 수 없습니다.</li>
|
||||
<li>목록은 메일함 패널과 같은 차례와 들여쓰기이고 줄 높이는 40입니다. 고른 줄은 패널의 지금 메일함처럼 청록 바탕에 굵은 글자이고, 오른쪽에 체크 표시가 붙습니다.</li>
|
||||
<li>옮기는 메일함(거래처 안의 2025)과 그 안의 정산은 흐리게 두고 고를 수 없습니다. 지금 있는 곳(거래처)도 고를 수 없고 지금 있는 곳 표시를 붙입니다. 맨 위에 있는 메일함이면 맨 위 줄에 붙습니다.</li>
|
||||
<li>바로 아래에 같은 이름의 메일함이 있는 곳(보관 안의 2025)도 처음부터 고를 수 없게 하고, 같은 자리에 같은 이름의 메일함이 있습니다 표시를 붙입니다. 대소문자는 가리지 않고 견줍니다. 서버에 묻기 전에 화면이 하는 검사라 화면 상수 글입니다.</li>
|
||||
<li>옮길 곳에 보낸편지함, 임시보관함, 스팸메일함, 휴지통은 없습니다. 하위 메일함을 만들 수 있는 곳과 같습니다.</li>
|
||||
<li>하위 메일함이 없으면 제목 아래 글은 "안의 메일도 함께 옮깁니다."입니다.</li>
|
||||
<li>메일함이 많으면 목록 칸 안에서 스크롤합니다. 화살표 키로 줄을 옮기고, Enter는 [옮기기], Esc는 [취소]와 같습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="s3-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="s3-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">3. 그사이 같은 이름이 생겼을 때</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">드문 경우입니다. 창을 연 사이 다른 창에서 프로젝트 안에 2025를 만들어, 프로젝트를 고르고 [옮기기]를 누르자 서버가 거절한 모습입니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 24px; align-items: flex-start">
|
||||
|
||||
<div style="flex: 0 0 640px; box-sizing: border-box; display: flex; justify-content: center; padding: 36px 0; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
|
||||
<div role="dialog" aria-modal="true" aria-labelledby="f3-title" aria-describedby="f3-msg" style="width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
|
||||
<h3 id="f3-title" style="margin: 0; font-size: 15px; font-weight: 700">‘2025’ 메일함을 어디로 옮길까요?</h3>
|
||||
<p id="f3-msg" style="margin: 0; color: #4A5363">하위 메일함과 안의 메일도 함께 옮깁니다.</p>
|
||||
<div role="radiogroup" aria-label="옮길 곳" aria-describedby="f3-err" style="display: flex; flex-direction: column; gap: 1px; margin-top: 4px; padding: 4px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<sc-for list="{{ f3Rows }}" as="r" hint-placeholder-count="10">
|
||||
<sc-if value="{{ r.isHeading }}" hint-placeholder-val="{{ false }}">
|
||||
<p style="margin: 8px 10px 2px; font-size: 12px; font-weight: 600; color: #667085">{{ r.name }}</p>
|
||||
</sc-if>
|
||||
<sc-if value="{{ r.isRow }}" hint-placeholder-val="{{ true }}">
|
||||
<button type="button" role="radio" aria-checked="{{ r.checked }}" aria-disabled="{{ r.off }}" class="{{ r.cls }}" onClick="{{ r.pick }}" style="display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px 0 {{ r.indent }}px; border: 0; border-radius: 7px; color: {{ r.fg }}; font: inherit; font-weight: {{ r.fw }}; text-align: left; cursor: {{ r.cursor }}">
|
||||
<sc-if value="{{ r.isTop }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg></sc-if>
|
||||
<sc-if value="{{ r.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
|
||||
<sc-if value="{{ r.isFolder }}" hint-placeholder-val="{{ true }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></sc-if>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: {{ r.dim }}">{{ r.name }}</span>
|
||||
<sc-if value="{{ r.hasNote }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085">{{ r.note }}</span></sc-if>
|
||||
<sc-if value="{{ r.isChecked }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg></sc-if>
|
||||
</button>
|
||||
</sc-if>
|
||||
</sc-for>
|
||||
</div>
|
||||
<p id="f3-err" role="alert" style="display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: #B42318">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span>같은 이름의 메일함이 이미 있습니다.</span>
|
||||
</p>
|
||||
<div style="display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">옮기기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>같은 이름은 보통 2의 표시로 미리 막습니다. 이 그림은 창의 목록이 연 때의 것이라 막지 못한 경우입니다.</li>
|
||||
<li>글은 오류 사전의 MAIL_009를 그대로 씁니다. 알림은 띄우지 않고 창을 그대로 둡니다(이름 바꾸기 창과 같습니다). 다른 곳을 고르면 글이 사라집니다.</li>
|
||||
<li>대소문자만 다른 이름(Report와 report)도 같은 이름으로 봅니다. 미리 막는 검사도 같은 규칙입니다.</li>
|
||||
<li>그사이 메일함이 사라졌으면 RES_001 알림을 띄우고 창을 닫은 뒤 메일함 목록을 다시 받습니다(이름 바꾸기 창과 같습니다).</li>
|
||||
<li>옮기는 동안에는 [옮기기]를 다시 누를 수 없습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="s4-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="s4-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">4. 옮긴 뒤 알림</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">메일함 패널에 바로 나타나고, 알림의 [되돌리기]로 원래 있던 곳에 되돌립니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 24px; align-items: flex-start">
|
||||
|
||||
<div style="flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">옮긴 뒤 메일함 패널</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">2025가 정산과 함께 프로젝트 안으로</p>
|
||||
</div>
|
||||
<nav aria-label="메일함" style="box-sizing: border-box; width: 210px; display: flex; flex-direction: column; gap: 1px; padding: 2px 10px 10px; background: #F8F9FB; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<p style="margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">내 메일함</p>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<sc-for list="{{ f4Mine }}" as="n" hint-placeholder-count="7">
|
||||
<li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ n.bg }}">
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 {{ n.indent }}px; color: {{ n.fg }}; font-weight: {{ n.fw }}">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ n.name }}</span>
|
||||
<sc-if value="{{ n.hasCount }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: {{ n.countColor }}; font-variant-numeric: tabular-nums">{{ n.count }}</span></sc-if>
|
||||
</span>
|
||||
<button type="button" aria-label="{{ n.moreLabel }}" aria-haspopup="menu" aria-expanded="{{ n.openStr }}" style="flex: 0 0 auto; width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: {{ n.moreBg }}; color: #4A5363; opacity: {{ n.moreOpacity }}; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div style="flex: 0 0 400px; display: flex; flex-direction: column; gap: 18px">
|
||||
<div style="display: flex; flex-direction: column; gap: 8px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">다른 메일함 안으로 옮겼을 때</h3>
|
||||
<div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘2025’ 메일함을 ‘프로젝트’ 안으로 옮겼습니다.</span>
|
||||
<button type="button" class="toast-action on-dark" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">되돌리기</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">맨 위로 옮겼을 때</h3>
|
||||
<div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘2025’ 메일함을 다른 메일함 밖으로 옮겼습니다.</span>
|
||||
<button type="button" class="toast-action on-dark" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">되돌리기</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">[되돌리기]를 누른 뒤</h3>
|
||||
<div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘2025’ 메일함을 ‘거래처’ 안으로 되돌렸습니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>메일함 패널에 바로 나타납니다. 보던 메일함을 옮겨도 그 메일함을 계속 봅니다.</li>
|
||||
<li>[되돌리기]는 원래 있던 곳으로 다시 옮깁니다. 단추가 있는 알림은 지금처럼 10초 동안 남습니다.</li>
|
||||
<li>받은편지함 안으로 옮겼으면 "‘2025’ 메일함을 받은편지함 안으로 옮겼습니다."처럼 받은편지함에는 따옴표를 붙이지 않습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="s5-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="s5-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">5. 하위 메일함까지 지우기</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">하위 메일함이 있는 메일함을 지우려 하면 지금은 지울 수 없다고만 알립니다. 15단계부터는 하위 메일함까지 함께 지울지 묻습니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 24px; align-items: flex-start">
|
||||
|
||||
<div style="flex: 0 0 408px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">지금</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">하위 메일함을 먼저 지우라고만 합니다</p>
|
||||
</div>
|
||||
<div style="box-sizing: border-box; height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
|
||||
<div role="alertdialog" aria-modal="true" aria-labelledby="f5a-title" aria-describedby="f5a-msg" style="width: 360px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
|
||||
<h3 id="f5a-title" style="margin: 0; font-size: 15px; font-weight: 700">‘거래처’ 메일함을 지울 수 없습니다</h3>
|
||||
<p id="f5a-msg" style="margin: 0; color: #4A5363">하위 메일함이 있습니다. 하위 메일함을 먼저 지워 주세요.</p>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 0 0 408px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">15단계</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">하위 메일함까지 지울지 묻습니다 · 처음 초점은 [취소]</p>
|
||||
</div>
|
||||
<div style="box-sizing: border-box; height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
|
||||
<div role="alertdialog" aria-modal="true" aria-labelledby="f5b-title" aria-describedby="f5b-msg" style="width: 360px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
|
||||
<h3 id="f5b-title" style="margin: 0; font-size: 15px; font-weight: 700">‘거래처’ 메일함과 하위 메일함 2개를 지울까요?</h3>
|
||||
<p id="f5b-msg" style="margin: 0; color: #4A5363">하위 메일함에 든 메일까지 모두 40통을 휴지통으로 옮깁니다. 휴지통에 들어간 메일은 30일 뒤 자동으로 지워집니다. 지운 메일함은 되돌릴 수 없습니다.</p>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="danger-solid" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; outline: 2px solid #0E7C86; outline-offset: 2px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>하위 메일함 수는 아래의 모든 깊이를 셉니다(2025와 그 안의 정산으로 2개). 메일 수도 하위 메일함까지 더한 수입니다.</li>
|
||||
<li>메일이 하나도 없으면 둘째 글은 "하위 메일함까지 모두 비어 있습니다. 지운 메일함은 되돌릴 수 없습니다."입니다.</li>
|
||||
<li>처음 초점은 [취소]이고, 휴지통을 비우는 동안에는 [지우기]를 누를 수 없습니다. 둘 다 지금 지우기 창과 같습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">진행과 결과는 지금 메일함 지우기와 같습니다. "‘거래처’ 메일함을 지우는 중 · 12 / 40통" 알림이 끝나면 "‘거래처’ 메일함을 지웠습니다. 안의 메일 40통은 휴지통에 있습니다."로 바뀝니다.</p>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="s6-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="s6-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">6. 보낸 사람 차단 창</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">지금 창에 칸 하나를 더해, 받은편지함에 이미 있는 같은 보낸 사람의 메일까지 스팸메일함으로 옮깁니다. 많을 수 있고 한꺼번에 되돌릴 수 없어서 처음에는 꺼져 있습니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 12px; align-items: stretch">
|
||||
|
||||
<div style="flex: 0 0 440px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">처음 모습</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">이 주소만 · 새 칸은 꺼져 있습니다</p>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding: 20px 0; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
|
||||
<div role="dialog" aria-modal="true" aria-labelledby="f6a-title" aria-describedby="f6a-msg" style="width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
|
||||
<h3 id="f6a-title" style="margin: 0; font-size: 15px; font-weight: 700">보낸 사람 차단</h3>
|
||||
<p id="f6a-msg" style="margin: 0; color: #4A5363">앞으로 오는 메일은 스팸메일함으로 옮겨지고, 부재중 자동 응답도 보내지 않습니다.</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 14px; margin-top: 6px">
|
||||
<div role="radiogroup" aria-label="차단할 범위" style="display: flex; flex-direction: column; gap: 4px">
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #0E7C86; border-radius: 8px; background: #F3F8F8; cursor: pointer">
|
||||
<input type="radio" name="f6a-scope" checked style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 주소만</span><span style="font-size: 12.5px; color: #4A5363">news@example.com</span></span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #D0D5DD; border-radius: 8px; cursor: pointer">
|
||||
<input type="radio" name="f6a-scope" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 도메인 전체</span><span style="font-size: 12.5px; color: #4A5363">@example.com에서 오는 메일 모두</span></span>
|
||||
</label>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: pointer">
|
||||
<input type="checkbox" checked style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span>이 메일도 스팸메일함으로 옮기기</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: pointer">
|
||||
<input type="checkbox" aria-describedby="f6a-note" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span>받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기</span>
|
||||
</label>
|
||||
<p id="f6a-note" style="margin: 2px 0 0 28px; font-size: 12.5px; color: #667085">옮긴 메일은 한꺼번에 되돌릴 수 없습니다.</p>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">차단은 [설정] → [차단한 주소]에서 풀 수 있습니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">차단</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 0 0 440px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">이 도메인 전체를 고르고 새 칸을 켬</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">이 메일이 받은편지함에 있어 첫 칸이 켜진 채 잠깁니다</p>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding: 20px 0; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
|
||||
<div role="dialog" aria-modal="true" aria-labelledby="f6b-title" aria-describedby="f6b-msg" style="width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
|
||||
<h3 id="f6b-title" style="margin: 0; font-size: 15px; font-weight: 700">보낸 사람 차단</h3>
|
||||
<p id="f6b-msg" style="margin: 0; color: #4A5363">앞으로 오는 메일은 스팸메일함으로 옮겨지고, 부재중 자동 응답도 보내지 않습니다.</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 14px; margin-top: 6px">
|
||||
<div role="radiogroup" aria-label="차단할 범위" style="display: flex; flex-direction: column; gap: 4px">
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #D0D5DD; border-radius: 8px; cursor: pointer">
|
||||
<input type="radio" name="f6b-scope" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 주소만</span><span style="font-size: 12.5px; color: #4A5363">news@example.com</span></span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #0E7C86; border-radius: 8px; background: #F3F8F8; cursor: pointer">
|
||||
<input type="radio" name="f6b-scope" checked style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 도메인 전체</span><span style="font-size: 12.5px; color: #4A5363">@example.com에서 오는 메일 모두</span></span>
|
||||
</label>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: default">
|
||||
<input type="checkbox" checked aria-disabled="true" aria-describedby="f6b-lock" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86; opacity: 0.5">
|
||||
<span style="opacity: 0.5">이 메일도 스팸메일함으로 옮기기</span>
|
||||
</label>
|
||||
<p id="f6b-lock" style="margin: -10px 0 0 28px; font-size: 12.5px; color: #667085">받은편지함의 메일을 옮길 때 함께 옮깁니다.</p>
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: pointer">
|
||||
<input type="checkbox" checked aria-describedby="f6b-note" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span>받은편지함에 있는 이 도메인의 메일도 스팸메일함으로 옮기기</span>
|
||||
</label>
|
||||
<p id="f6b-note" style="margin: 2px 0 0 28px; font-size: 12.5px; color: #667085">옮긴 메일은 한꺼번에 되돌릴 수 없습니다.</p>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">차단은 [설정] → [차단한 주소]에서 풀 수 있습니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">차단</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 0 0 440px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">스팸메일함의 메일에서 차단할 때</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">첫 칸은 지금처럼 없고 새 칸은 남습니다</p>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding: 20px 0; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
|
||||
<div role="dialog" aria-modal="true" aria-labelledby="f6c-title" aria-describedby="f6c-msg" style="width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
|
||||
<h3 id="f6c-title" style="margin: 0; font-size: 15px; font-weight: 700">보낸 사람 차단</h3>
|
||||
<p id="f6c-msg" style="margin: 0; color: #4A5363">앞으로 오는 메일은 스팸메일함으로 옮겨지고, 부재중 자동 응답도 보내지 않습니다.</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 14px; margin-top: 6px">
|
||||
<div role="radiogroup" aria-label="차단할 범위" style="display: flex; flex-direction: column; gap: 4px">
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #0E7C86; border-radius: 8px; background: #F3F8F8; cursor: pointer">
|
||||
<input type="radio" name="f6c-scope" checked style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 주소만</span><span style="font-size: 12.5px; color: #4A5363">news@example.com</span></span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #D0D5DD; border-radius: 8px; cursor: pointer">
|
||||
<input type="radio" name="f6c-scope" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 도메인 전체</span><span style="font-size: 12.5px; color: #4A5363">@example.com에서 오는 메일 모두</span></span>
|
||||
</label>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: pointer">
|
||||
<input type="checkbox" aria-describedby="f6c-note" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span>받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기</span>
|
||||
</label>
|
||||
<p id="f6c-note" style="margin: 2px 0 0 28px; font-size: 12.5px; color: #667085">옮긴 메일은 한꺼번에 되돌릴 수 없습니다.</p>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">차단은 [설정] → [차단한 주소]에서 풀 수 있습니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">차단</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="display: flex; gap: 12px; align-items: flex-start">
|
||||
|
||||
<div style="flex: 0 0 440px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">이 탭에서 필터를 적용하는 중일 때</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">창 안의 두 칸만 그렸습니다 · 새 칸이 꺼지고 까닭이 붙습니다</p>
|
||||
</div>
|
||||
<div style="box-sizing: border-box; display: flex; flex-direction: column; padding: 2px 20px 16px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF">
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: pointer">
|
||||
<input type="checkbox" checked style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
|
||||
<span>이 메일도 스팸메일함으로 옮기기</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: default">
|
||||
<input type="checkbox" aria-disabled="true" aria-describedby="f6d-busy" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86; opacity: 0.5">
|
||||
<span style="opacity: 0.5">받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기</span>
|
||||
</label>
|
||||
<p id="f6d-busy" style="margin: 2px 0 0 28px; font-size: 12.5px; color: #667085">받은편지함을 정리하는 중이라 지금은 고를 수 없습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>새 칸은 창을 열 때마다 꺼진 채 시작합니다. 첫 칸은 지금처럼 켜진 채 시작합니다.</li>
|
||||
<li>새 칸을 켰는데 이 메일이 받은편지함에 있으면 첫 칸은 켜진 채 잠기고(aria-disabled) 칸 아래에 까닭이 붙습니다. 새 칸을 끄면 첫 칸은 원래대로 돌아옵니다. 이 메일이 다른 메일함에 있으면 잠그지 않습니다.</li>
|
||||
<li>이 도메인 전체를 고르면 새 칸의 이 보낸 사람이 이 도메인으로 바뀝니다. 차단처럼 그 도메인만 보고 하위 도메인은 보지 않습니다.</li>
|
||||
<li>받은편지함에 있는 메일만 옮깁니다. 직원이 정리해 둔 다른 메일함은 그대로 둡니다(필터 적용과 같습니다).</li>
|
||||
<li>이 탭에서 필터를 받은편지함에 적용하는 동안에는 새 칸을 끄고(aria-disabled) 칸 아래 글을 까닭으로 바꿉니다. 7단계 필터 창의 칸과 같습니다.</li>
|
||||
<li>두 칸은 붙여 두고, 칸 글이 두 줄이면 고르기 상자를 첫 줄에 맞춥니다. 칸 아래 글은 글 선(28)에 맞춰 들여 씁니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="s7-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; align-items: baseline; gap: 16px">
|
||||
<h2 id="s7-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">7. 차단한 뒤 알림</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">새 칸을 켜고 차단하면 차단 알림을 따로 띄우지 않습니다. 알림 하나가 차단했다는 글로 시작해 진행 숫자를 보이다가, 같은 자리에서 결과로 바뀝니다. 7단계 필터 적용의 진행 알림과 같은 결입니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 32px; align-items: flex-start">
|
||||
|
||||
<div style="flex: 0 0 400px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">새 칸을 켜지 않았을 때</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">지금 차단 알림 그대로</p>
|
||||
</div>
|
||||
<div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단하고 이 메일을 스팸메일함으로 옮겼습니다.</span>
|
||||
<button type="button" class="toast-action on-dark" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">되돌리기</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 0 0 400px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">새 칸을 켰을 때</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">알림 하나가 진행을 보이다가 같은 자리에서 결과로</p>
|
||||
</div>
|
||||
<div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ED6DB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M21 12a9 9 0 1 1-6.22-8.56"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500; font-variant-numeric: tabular-nums">‘news@example.com’을(를) 차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중 · 1,200 / 4,800통 확인</span>
|
||||
</div>
|
||||
<div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단하고 받은편지함의 메일 37통을 스팸메일함으로 옮겼습니다.</span>
|
||||
<a href="#" class="toast-action on-dark" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 6px; font-weight: 600">스팸메일함 보기</a>
|
||||
</div>
|
||||
<div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단했습니다. 받은편지함에는 옮길 메일이 없습니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 0 0 400px; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">새 칸을 켰는데 멈췄을 때</h3>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">도중에 멈춤 · 처음부터 실패 · 다른 창에서 하는 중</p>
|
||||
</div>
|
||||
<div role="alert" style="width: 400px; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; padding: 12px 6px 12px 14px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 1px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단했습니다. 받은편지함은 4,800통 가운데 1,200통까지 확인해 12통을 옮긴 뒤 멈췄습니다. 다시 시도해 주세요.</span>
|
||||
<button type="button" class="toast-link" style="flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">다시 시도</button>
|
||||
<button type="button" class="toast-close" aria-label="알림 닫기" style="flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div role="alert" style="width: 400px; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; padding: 12px 6px 12px 14px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 1px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단했지만 받은편지함의 메일은 옮기지 못했습니다. 다시 시도해 주세요.</span>
|
||||
<button type="button" class="toast-link" style="flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">다시 시도</button>
|
||||
<button type="button" class="toast-close" aria-label="알림 닫기" style="flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div role="alert" style="width: 400px; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; padding: 12px 6px 12px 14px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 1px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단했습니다. 다른 창에서 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.</span>
|
||||
<button type="button" class="toast-link" style="flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">다시 시도</button>
|
||||
<button type="button" class="toast-close" aria-label="알림 닫기" style="flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 40px; color: #344054">
|
||||
<li>새 칸을 켠 차단은 알림이 하나라 [되돌리기]가 없습니다. 차단은 [설정] → [차단한 주소]에서 풉니다. 새 칸을 켜지 않았으면 지금 알림이 [되돌리기]와 함께 그대로 뜹니다.</li>
|
||||
<li>결과와 멈춤 글은 모두 차단했다는 말로 시작합니다. 차단은 이미 끝났고, 받은편지함의 메일 옮기기만 멈춘 것입니다.</li>
|
||||
<li>숫자는 확인한 메일 / 받은편지함의 메일 수이고, 최근 메일부터 확인합니다. 첫 응답 전에는 받은편지함의 메일 수를 씁니다.</li>
|
||||
<li>[스팸메일함 보기]는 스팸메일함 목록으로 갑니다. 옮긴 메일이 없으면 단추가 없습니다. 잘못 옮긴 메일은 스팸메일함에서 [스팸 아님]으로 돌려놓습니다.</li>
|
||||
<li>[다시 시도]는 멈춘 자리부터, 처음부터 실패했으면 처음부터 합니다. 차단한 뒤에는 ⋯ 메뉴가 차단 풀기로 바뀌어 다시 고를 길이 없으므로, 다른 창에서 하는 중일 때도 단추를 둡니다.</li>
|
||||
<li>다른 창에서 하는 중 글은 필터 적용과 함께 씁니다. 지금 필터 글(다른 창에서 필터로 받은편지함을 정리하는 중입니다.)도 구현 때 이 글로 바꿉니다.</li>
|
||||
<li>그동안 다른 화면으로 가도 이어 하고, 탭을 닫거나 로그아웃하면 멈추고 알림을 닫습니다. 필터 적용과 이 일은 한 직원에 한 번에 하나만 돕니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":4937}}'>
|
||||
class Component extends DCLogic {
|
||||
state = { dest: null };
|
||||
|
||||
// 메일함 패널의 한 줄 — MailboxPanelRow 와 같은 값(줄 40 · 들여쓰기 10 · 28 · 44 · 56 · ⋯ 32×40)
|
||||
panelRow(m, extra) {
|
||||
const x = extra || {};
|
||||
const INDENT = [10, 28, 44, 56];
|
||||
const active = Boolean(x.active);
|
||||
const open = Array.isArray(x.items);
|
||||
return {
|
||||
name: m.name,
|
||||
count: m.count ? String(m.count) : '',
|
||||
hasCount: Boolean(m.count),
|
||||
indent: INDENT[Math.min(m.depth || 0, 3)],
|
||||
isInbox: m.kind === 'inbox',
|
||||
isSent: m.kind === 'sent',
|
||||
isDrafts: m.kind === 'drafts',
|
||||
isJunk: m.kind === 'junk',
|
||||
isTrash: m.kind === 'trash',
|
||||
bg: active ? '#E3F2F3' : open ? '#F2F4F7' : 'transparent',
|
||||
fg: active ? '#0A5F67' : '#344054',
|
||||
fw: active ? '600' : '500',
|
||||
countColor: active ? '#0A5F67' : '#171C26',
|
||||
hasMore: m.more !== false,
|
||||
open: open,
|
||||
openStr: open ? 'true' : 'false',
|
||||
moreOpacity: open ? '1' : '0',
|
||||
moreBg: open ? '#E6E8EC' : 'transparent',
|
||||
moreLabel: m.name + ' 메일함 메뉴',
|
||||
menuLabel: m.name + ' 메일함',
|
||||
items: x.items || [],
|
||||
};
|
||||
}
|
||||
|
||||
// 옮기기 창의 줄 — 패널과 같은 차례 · 들여쓰기, 고를 수 없는 줄은 이름 · 아이콘만 흐리게(까닭 글은 그대로)
|
||||
destRows(chosen, pickable) {
|
||||
const INDENT = [10, 28, 44, 56];
|
||||
const LIST = [
|
||||
{ id: 'top', kind: 'top', name: '맨 위', depth: 0, note: '다른 메일함 안에 두지 않습니다', can: true },
|
||||
{ id: 'inbox', kind: 'inbox', name: '받은편지함', depth: 0, can: true },
|
||||
{ id: 'mine', kind: 'heading', name: '내 메일함' },
|
||||
{ id: 'c', kind: 'folder', name: '거래처', depth: 0, note: '지금 있는 곳', can: false },
|
||||
{ id: 'c25', kind: 'folder', name: '2025', depth: 1, can: false },
|
||||
{ id: 'c25s', kind: 'folder', name: '정산', depth: 2, can: false },
|
||||
{ id: 'b', kind: 'folder', name: '보관', depth: 0, note: '같은 이름의 메일함이 있습니다', can: false },
|
||||
{ id: 'b25', kind: 'folder', name: '2025', depth: 1, can: true },
|
||||
{ id: 'p', kind: 'folder', name: '프로젝트', depth: 0, can: true },
|
||||
{ id: 'pq', kind: 'folder', name: '견적', depth: 1, can: true },
|
||||
];
|
||||
return LIST.map((x) => {
|
||||
const heading = x.kind === 'heading';
|
||||
const on = !heading && x.can && x.id === chosen;
|
||||
const off = !heading && !x.can;
|
||||
return {
|
||||
isHeading: heading,
|
||||
isRow: !heading,
|
||||
isTop: x.kind === 'top',
|
||||
isInbox: x.kind === 'inbox',
|
||||
isFolder: x.kind === 'folder',
|
||||
name: x.name,
|
||||
note: x.note || '',
|
||||
hasNote: Boolean(x.note),
|
||||
indent: INDENT[Math.min(x.depth || 0, 3)],
|
||||
checked: on ? 'true' : 'false',
|
||||
isChecked: on,
|
||||
off: off ? 'true' : 'false',
|
||||
cls: on ? 'dest-row is-on' : off ? 'dest-row is-off' : 'dest-row',
|
||||
fg: on ? '#0A5F67' : '#344054',
|
||||
fw: on ? '600' : '500',
|
||||
dim: off ? '0.5' : '1',
|
||||
cursor: off ? 'default' : 'pointer',
|
||||
pick: () => {
|
||||
if (pickable && !off && !heading) this.setState({ dest: x.id });
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
renderVals() {
|
||||
const st = this.state;
|
||||
const dest = st.dest ?? 'p';
|
||||
const item = (label, cls) => ({ label: label, cls: cls || 'menu-item' });
|
||||
|
||||
const ROLES = [
|
||||
{ kind: 'inbox', name: '받은편지함', count: 3 },
|
||||
{ kind: 'sent', name: '보낸편지함', more: false },
|
||||
{ kind: 'drafts', name: '임시보관함', more: false },
|
||||
{ kind: 'junk', name: '스팸메일함', count: 1 },
|
||||
{ kind: 'trash', name: '휴지통' },
|
||||
];
|
||||
// 옮기기 전 — 거래처 안에 2025(그 안에 정산), 보관 안에도 2025 가 있다
|
||||
const BEFORE = [
|
||||
{ id: 'c', name: '거래처', depth: 0, count: 1 },
|
||||
{ id: 'c25', name: '2025', depth: 1, count: 4 },
|
||||
{ id: 'c25s', name: '정산', depth: 2 },
|
||||
{ id: 'b', name: '보관', depth: 0 },
|
||||
{ id: 'b25', name: '2025', depth: 1 },
|
||||
{ id: 'p', name: '프로젝트', depth: 0, count: 2 },
|
||||
{ id: 'pq', name: '견적', depth: 1 },
|
||||
];
|
||||
// 옮긴 뒤 — 2025 가 정산과 함께 프로젝트 안으로 (같은 상위 안은 이름 차례 — 숫자가 먼저)
|
||||
const AFTER = [
|
||||
{ id: 'c', name: '거래처', depth: 0, count: 1 },
|
||||
{ id: 'b', name: '보관', depth: 0 },
|
||||
{ id: 'b25', name: '2025', depth: 1 },
|
||||
{ id: 'p', name: '프로젝트', depth: 0, count: 2 },
|
||||
{ id: 'c25', name: '2025', depth: 1, count: 4 },
|
||||
{ id: 'c25s', name: '정산', depth: 2 },
|
||||
{ id: 'pq', name: '견적', depth: 1 },
|
||||
];
|
||||
const mineMenu = [
|
||||
item('모두 읽음으로 표시'),
|
||||
item('하위 메일함 만들기'),
|
||||
item('이름 바꾸기'),
|
||||
item('옮기기', 'menu-item is-hover'),
|
||||
item('지우기', 'menu-item is-danger'),
|
||||
];
|
||||
const inboxMenu = [item('모두 읽음으로 표시'), item('하위 메일함 만들기')];
|
||||
|
||||
const f2Rows = this.destRows(dest, true);
|
||||
const canMove = f2Rows.some((r) => r.isChecked);
|
||||
return {
|
||||
f1Roles: ROLES.map((m) => this.panelRow(m, { active: m.kind === 'inbox' })),
|
||||
f1Mine: BEFORE.map((m) => this.panelRow(m, m.id === 'c25' ? { items: mineMenu } : {})),
|
||||
f1RolesB: ROLES.map((m) => this.panelRow(m, m.kind === 'inbox' ? { active: true, items: inboxMenu } : {})),
|
||||
f4Mine: AFTER.map((m) => this.panelRow(m)),
|
||||
f2Rows: f2Rows,
|
||||
f2MoveOpacity: canMove ? '1' : '0.5',
|
||||
f3Rows: this.destRows('p', false),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -59,9 +59,12 @@
|
||||
"App1SearchStates.dc.html": { "x": 3178, "y": 33450, "w": 2660, "h": 1028, "title": "앱 · 검색 (상태 · 결과에서 연 메일)", "is_interactive": true },
|
||||
"App1SearchConditions.dc.html": { "x": 5918, "y": 33450, "w": 1784, "h": 1028, "title": "앱 · 검색 2차 (조건으로 찾기)", "is_interactive": true },
|
||||
"App1Push.dc.html": { "x": 0, "y": 34900, "w": 2222, "h": 3270, "title": "앱 · 새 메일 알림 (푸시)", "is_interactive": true },
|
||||
"SettingsMobileApp.dc.html": { "x": 0, "y": 38770, "w": 1440, "h": 3209, "title": "설정 · 휴대폰 앱 · 앱 받기 화면", "is_interactive": true }
|
||||
"SettingsMobileApp.dc.html": { "x": 0, "y": 38770, "w": 1440, "h": 3209, "title": "설정 · 휴대폰 앱 · 앱 받기 화면", "is_interactive": true },
|
||||
"Reader15.dc.html": { "x": 0, "y": 42600, "w": 1440, "h": 8043, "title": "읽기 화면 · 이동 · 지금 보내기 · 같은 대화", "is_interactive": true },
|
||||
"ListDrag15.dc.html": { "x": 1520, "y": 42600, "w": 1440, "h": 3845, "title": "목록 · 끌어다 놓기 · 상단 바 좁은 폭", "is_interactive": true },
|
||||
"Mailbox15.dc.html": { "x": 3040, "y": 42600, "w": 1440, "h": 4937, "title": "메일함 옮기기 · 하위까지 지우기 · 차단할 때 받은 메일", "is_interactive": true }
|
||||
},
|
||||
"order": ["Main.dc.html", "Login.dc.html", "Compose.dc.html", "States.dc.html", "MainList.dc.html", "MainListRead.dc.html", "ComposeEditor.dc.html", "Settings.dc.html", "ComposeAssist.dc.html", "Search.dc.html", "BulkSelect.dc.html", "ListStates.dc.html", "SettingsAccount.dc.html", "SettingsVacation.dc.html", "MailboxManage.dc.html", "MailActions4.dc.html", "SettingsNotify.dc.html", "MailRealtime.dc.html", "SettingsFilter.dc.html", "MailFilterStates.dc.html", "MailFilterApply.dc.html", "MailFilterApplyStates.dc.html", "Contacts.dc.html", "ContactsEdit.dc.html", "ContactsMail.dc.html", "MailReadTools.dc.html", "MailPrint.dc.html", "MailSendLater.dc.html", "SettingsSendRead.dc.html", "ComposeLargeFiles.dc.html", "LargeFileBlock.dc.html", "MailReadLargeFiles.dc.html", "SharePage.dc.html", "SettingsLargeFiles.dc.html", "LoginTwoFactor.dc.html", "SettingsTwoFactor.dc.html", "SettingsAppPasswords.dc.html", "SettingsLoginHistory.dc.html", "LoginPasswordChange.dc.html", "LoginTwoFactorSetup.dc.html", "SettingsMailClients.dc.html", "MailNoticesCutover.dc.html", "Search14.dc.html", "Thread14.dc.html", "ListThreads14.dc.html", "App1Login.dc.html", "App1MailList.dc.html", "App1Reader.dc.html", "App1Compose.dc.html", "App1Shell.dc.html", "App1Search.dc.html", "App1SearchStates.dc.html", "App1SearchConditions.dc.html", "App1Push.dc.html", "SettingsMobileApp.dc.html"],
|
||||
"order": ["Main.dc.html", "Login.dc.html", "Compose.dc.html", "States.dc.html", "MainList.dc.html", "MainListRead.dc.html", "ComposeEditor.dc.html", "Settings.dc.html", "ComposeAssist.dc.html", "Search.dc.html", "BulkSelect.dc.html", "ListStates.dc.html", "SettingsAccount.dc.html", "SettingsVacation.dc.html", "MailboxManage.dc.html", "MailActions4.dc.html", "SettingsNotify.dc.html", "MailRealtime.dc.html", "SettingsFilter.dc.html", "MailFilterStates.dc.html", "MailFilterApply.dc.html", "MailFilterApplyStates.dc.html", "Contacts.dc.html", "ContactsEdit.dc.html", "ContactsMail.dc.html", "MailReadTools.dc.html", "MailPrint.dc.html", "MailSendLater.dc.html", "SettingsSendRead.dc.html", "ComposeLargeFiles.dc.html", "LargeFileBlock.dc.html", "MailReadLargeFiles.dc.html", "SharePage.dc.html", "SettingsLargeFiles.dc.html", "LoginTwoFactor.dc.html", "SettingsTwoFactor.dc.html", "SettingsAppPasswords.dc.html", "SettingsLoginHistory.dc.html", "LoginPasswordChange.dc.html", "LoginTwoFactorSetup.dc.html", "SettingsMailClients.dc.html", "MailNoticesCutover.dc.html", "Search14.dc.html", "Thread14.dc.html", "ListThreads14.dc.html", "App1Login.dc.html", "App1MailList.dc.html", "App1Reader.dc.html", "App1Compose.dc.html", "App1Shell.dc.html", "App1Search.dc.html", "App1SearchStates.dc.html", "App1SearchConditions.dc.html", "App1Push.dc.html", "SettingsMobileApp.dc.html", "Reader15.dc.html", "ListDrag15.dc.html", "Mailbox15.dc.html"],
|
||||
"notes": {
|
||||
"flow": { "x": 0, "y": -300, "text": "arasystem 웹메일 — 1단계 화면 (로그인 → 메일함 → 쓰기)", "kind": "title1", "maxW": 4480 },
|
||||
"phase2": { "x": 0, "y": 2180, "text": "2단계 화면 — 임시 저장 · 받는 사람 자동 완성 · 서명 (2026-10-27 확정)", "kind": "title1", "maxW": 2960 },
|
||||
@@ -80,7 +83,8 @@
|
||||
"app1search": { "x": 0, "y": 33150, "text": "앱 1단계 검색 화면 — 찾기 · 결과 · 강조 · 이어 찾기 · 안내 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 5838 },
|
||||
"app1search2": { "x": 5918, "y": 33150, "text": "앱 검색 2차 — 조건으로 찾기 · 날짜 · 조건 줄 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1784 },
|
||||
"app1push": { "x": 0, "y": 34600, "text": "앱 새 메일 알림 — 허락 묻기 · 설정 · 휴대폰 알림 · 업데이트 · 앱 아이콘 — 2026-11-07 확정(글은 화면 상수가 기준) · 11-08 업데이트 화면 · 앱 정보를 사내 배포에 맞게 바꿈(확정)", "kind": "title1", "maxW": 2222 },
|
||||
"appdist": { "x": 0, "y": 38470, "text": "휴대폰 앱 받기 — 설정 › 휴대폰 앱 · 휴대폰 받기 화면(로그인한 직원만) — 2026-11-08 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1440 }
|
||||
"appdist": { "x": 0, "y": 38470, "text": "휴대폰 앱 받기 — 설정 › 휴대폰 앱 · 휴대폰 받기 화면(로그인한 직원만) — 2026-11-08 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1440 },
|
||||
"phase15": { "x": 0, "y": 42300, "text": "15단계 화면 — 메일 · 메일함 다루기(이동 · 끌어다 놓기 · 메일함 옮기기 · 지금 보내기 · 같은 대화) — 2026-11-09 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 4480 }
|
||||
},
|
||||
"designSystems": []
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user