generated from ttipo/project-base
feat: 앱 기반과 앱 서버 — 앱 전용 로그인 · 새 메일 알림(FCM) · 앱 설정 #20
@@ -0,0 +1,55 @@
|
||||
# ARA SYSTEM 앱 — 디자인 기준
|
||||
|
||||
안드로이드 앱(Flutter — `flutter/`)의 화면 기준이다. 보드는 웹과 같은 디자인 캔버스의 "앱 1단계 화면" 줄에 있고, 저장소 사본은 `docs/design/webmail/App1*.dc.html`(캔버스 사본 폴더 — `canvas.json` 이 모든 보드를 가리킨다)이다.
|
||||
**화면 글의 원본은 보드다** — 이 문서는 정한 것과 까닭만 적는다. 웹 README(`docs/design/webmail/README.md`)의 원칙 · 「화면 문구 — 사용자에게 말하듯」을 그대로 따르고, 다른 점만 여기에 적는다.
|
||||
|
||||
## 앱 1단계 (2026-11-05 확정 — `App1Login` · `App1MailList` · `App1Reader` · `App1Compose` · `App1Shell`)
|
||||
|
||||
첫 판은 안드로이드 먼저(Play 내부 테스트), 로그인 전체 + 메일 기본 + 새 메일 알림이다. iOS 는 맥 · Apple 개발자 계정을 준비한 뒤.
|
||||
|
||||
### 크기 · 글꼴 (웹과 다른 점)
|
||||
- 누르는 곳 48(웹 44). 예외는 받는 사람 칩의 ✕ 40 하나(밀도 예외 — 사용자 확정).
|
||||
- 글자: 화면 글 15 · 입력 칸 16 · 메일 본문 15(줄 간격 1.75) · 위 막대 제목 18. 글꼴은 웹과 같은 Pretendard(Regular · Medium · SemiBold · Bold — OFL, 앱 안 라이선스 화면에 싣는다).
|
||||
- 색은 웹 토큰(`frontend/src/styles/tokens.css`) 그대로 — 바탕 #0B3640 · 강조 #0E7C86.
|
||||
- 휴대폰 틀에 가짜 상태 표시줄을 그리지 않는다.
|
||||
|
||||
### 앱 틀 (`App1Shell`) — 모듈이 늘어나는 구조
|
||||
- **아래 탭 막대**(Material 3 NavigationBar · 높이 72 · 고른 탭은 청록 바탕 56×32 안의 아이콘)가 웹의 전역 앱 레일에 해당한다. 모듈 목록은 웹 `frontend/src/shared/constants/app-modules.ts` 와 짝(메일 · 캘린더 · 파일 · 주소록 · 설정 — 같은 이름 · 차례).
|
||||
- **켜진 모듈만 보인다**(웹은 준비 중 모듈을 꺼진 채 보이지만, 휴대폰의 누를 수 없는 탭은 어색해서 숨긴다). 첫 판은 [메일 · 설정], 캘린더 · 파일 · 주소록이 준비되면 하나씩 늘어난다.
|
||||
- 탭마다 이동 기록을 따로 지킨다(메일에서 읽던 화면이 설정 탭에 다녀와도 남는다). 읽기 · 쓰기는 탭 막대 없는 전체 화면이다.
|
||||
- 여러 통 고르기 중에는 탭 막대를 숨긴다(잠깐의 상태이고, 다른 탭으로 가면 고른 것을 잃는다). ✕ · 뒤로 가기로 나오면 다시 보인다.
|
||||
- 화면 낭독기 이름은 "앱 메뉴".
|
||||
- **설정 탭**: 내 정보(이름 · 주소) · 알림(새 메일 알림 켬/끔) · 앱 정보(앱 버전 · 오픈소스 라이선스) · 문의 연락처 · [로그아웃]. 비밀번호 · 2단계 인증 같은 계정 설정은 웹에서 한다.
|
||||
[로그아웃]은 데이터를 지우는 일이 아니라 회색 테두리 단추이고, 누르면 확인 창(처음 초점 [취소]) — 로그아웃하면 이 휴대폰의 새 메일 알림도 오지 않는다고 알린다.
|
||||
|
||||
### 로그인 (`App1Login`) — 네 단계
|
||||
- 단계는 웹 로그인 틀과 같다: 주소 · 비밀번호 → (2단계를 켠 직원) 인증 앱 코드 → (임시 비밀번호로 처음) 새 비밀번호 정하기 → (2단계 필수이고 아직 안 켬) 2단계 인증 켜기.
|
||||
- 첫 단계만 큰 브랜드 띠, 그다음 단계는 짙은 띠(56)에 ARA 마크와 [다른 계정으로 로그인] — 웹처럼 주소 줄 안에 단추를 두면 390 폭에 들지 않는다.
|
||||
- 칸 이름은 칸 위(웹과 같다 — 웹 · 앱을 함께 쓰는 직원에게 같은 모양, 오류 글도 칸 아래에 잘 보인다). 첫 단계 비밀번호 칸에 [보기].
|
||||
- 2단계 켜기는 같은 휴대폰이라 QR 을 찍을 수 없다 — [인증 앱에 추가](인증 앱을 바로 연다) · 키와 [복사](키를 직접 넣는 길) · 코드 칸. 인증 앱을 찾지 못하면 키를 직접 넣으라고 알린다.
|
||||
- 웹 첫 화면의 메일 프로그램(IMAP) 안내 줄은 넣지 않는다(앱이 메일 앱이다). 문의 연락처 줄은 웹과 같은 자리.
|
||||
|
||||
### 메일 목록 (`App1MailList`)
|
||||
- 위 막대: 서랍 열기 · 메일함 이름 · 찾기. 서랍은 메일함만(안 읽은 수는 회색 글 — 뱃지 없음), 탭 막대 위까지 화면 전체를 덮는다.
|
||||
- 줄: 동그란 사진(40) · 보낸 사람 · 시각 / 제목 · 첨부 표시 / **미리 보기 한 줄**. 안 읽음은 굵게, 중요는 별.
|
||||
웹 목록은 미리 보기를 넣지 않지만 휴대폰은 폭이 좁아 제목 한 줄로는 메일을 가르기 어렵다 — 앱에서만 넣는다(사용자 확정).
|
||||
- 사진을 누르거나 줄을 길게 누르면 고르기 — 위 막대가 고르기 막대(읽음 표시 · 중요 표시 · 이동 · 삭제)로 바뀌고 탭 막대를 숨긴다. 삭제는 휴지통으로 옮기고 알림의 [되돌리기].
|
||||
- 당겨서 새로고침. 빈 메일함 · 빈 휴지통(30일 안내 글).
|
||||
- [메일 쓰기]는 넓은 단추로 탭 막대 위(아래에서 88). 알림이 뜨면 함께 올라간다.
|
||||
|
||||
### 읽기 (`App1Reader`)
|
||||
- 위 막대: 뒤로 · 삭제 · 더 보기(안 읽음 표시 · 중요 표시 · 이동 · 스팸 신고). 아래 행동 막대: 답장 · 전체 답장 · 전달.
|
||||
- 머리(제목 · 보낸 사람 · 받는 사람 펼치기 · 시각)는 앱 화면, 본문은 앱 안 WebView — 스크립트를 끄고 앱이 감싼 문서의 CSP 로 바깥에 나가지 않는다. 외부 이미지는 안내 줄의 [이미지 보기]를 누르면 앱이 받아서 넣는다. 링크는 바깥 브라우저 · mailto 는 앱의 쓰기 화면.
|
||||
- 첨부 목록 — 받는 중에는 진행(%)을 보인다.
|
||||
|
||||
### 쓰기 (`App1Compose`)
|
||||
- 위 막대: 닫기 · 첨부 · 보내기. 받는 사람 · 제목은 웹 쓰기 화면처럼 줄 왼쪽에 이름(칸 안에서 떠오르는 꼴이 아니다). 받는 사람 추천은 맞은 글자를 굵게.
|
||||
- 참조 · 숨은참조는 펼쳐서. **첨부는 제목 아래**(휴대폰은 본문이 길어지면 아래 첨부가 묻힌다) — 크기 · 빼기 · 올리는 중.
|
||||
- 본문은 글만(서식 편집은 다음 판). **서명은 본문과 따로 된 칸에 [서명 빼기]만** — 서명 고치기는 웹에서. 답장의 원본 메일은 접혀 있고 펼쳐 볼 수 있다.
|
||||
- 보낸 뒤에는 쓰기를 시작한 화면(읽기 · 목록)으로 돌아가고, 그 화면 아래에 "메일을 보냈습니다. [보내기 취소]"와 남은 시간 막대.
|
||||
|
||||
### 새 메일 알림 (푸시)
|
||||
- 알림 내용은 "새 메일 N통"만 — 보낸 사람 · 제목이 Google · Apple 서버를 거치지 않게. 누르면 메일 모듈의 받은편지함으로(알림에는 모듈 이름과 id 만 싣는다).
|
||||
|
||||
### 처음 판에서 미룬 것
|
||||
서식 편집 · 대용량 첨부 · 필터 · 주소록 화면 · 서명 고치기 · 계정 설정(웹에서) · 오프라인 저장 · iOS.
|
||||
@@ -0,0 +1,289 @@
|
||||
<!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}
|
||||
input::placeholder,textarea::placeholder{color:#8A94A3}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1784px; height: 956px; box-sizing: border-box; padding: 40px; display: flex; gap: 48px; align-items: flex-start; background: #EEF1F4; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 15px; line-height: 1.5">
|
||||
<div style="flex: 0 0 390px; order: 1; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">새 메일 · 받는 사람 추천</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<a href="App1MailList.dc.html" aria-label="닫기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" 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></a>
|
||||
<h1 style="flex: 1 1 auto; min-width: 0; margin: 0; padding-left: 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">새 메일</h1>
|
||||
<button type="button" aria-label="파일 첨부" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" 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.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></button>
|
||||
<button type="button" aria-label="보내기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0E7C86"><svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></button>
|
||||
</header>
|
||||
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto">
|
||||
<div style="position: relative">
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #0E7C86; box-shadow: inset 0 -1px 0 #0E7C86">
|
||||
<label for="ca-to" style="flex: 0 0 72px; font-size: 14px; color: #667085">받는 사람</label>
|
||||
<input id="ca-to" type="text" value="이도" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="ca-to-list" aria-activedescendant="ca-opt-1" autocomplete="off" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26">
|
||||
<button type="button" aria-label="참조, 숨은참조 펼치기" aria-expanded="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #667085"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
|
||||
</div>
|
||||
<ul id="ca-to-list" role="listbox" aria-label="받는 사람 추천" style="position: absolute; left: 0; right: 0; top: 100%; z-index: 2; margin: 0; padding: 6px 0; list-style: none; background: #FFFFFF; border-bottom: 1px solid #E6E8EC; box-shadow: 0 12px 24px rgba(16, 24, 28, 0.14)">
|
||||
<li id="ca-opt-1" role="option" aria-selected="true" style="display: flex; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 6px 16px; background: #F3F8F8">
|
||||
<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: 15px; font-weight: 600">이</span>
|
||||
<span style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-size: 15px; color: #171C26"><strong style="font-weight: 700">이도</strong>윤</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #667085">doyun.lee@arasystem.it.kr</span>
|
||||
</span>
|
||||
</li>
|
||||
<li id="ca-opt-2" role="option" aria-selected="false" style="display: flex; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 6px 16px; background: #FFFFFF">
|
||||
<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: 15px; font-weight: 600">이</span>
|
||||
<span style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-size: 15px; color: #171C26"><strong style="font-weight: 700">이도</strong>현</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #667085">dohyun.lee@hanbit-partners.co.kr</span>
|
||||
</span>
|
||||
</li>
|
||||
<li id="ca-opt-3" role="option" aria-selected="false" style="display: flex; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 6px 16px; background: #FFFFFF">
|
||||
<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: 15px; font-weight: 600">이</span>
|
||||
<span style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-size: 15px; color: #171C26"><strong style="font-weight: 700">이도</strong>연</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #667085">doyeon.lee@arasystem.it.kr</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #EEF0F3">
|
||||
<label for="ca-subject" style="flex: 0 0 72px; font-size: 14px; color: #667085">제목</label>
|
||||
<input id="ca-subject" type="text" placeholder="제목을 입력해 주세요" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; font-weight: 600">
|
||||
</div>
|
||||
<textarea aria-label="본문" placeholder="내용을 입력해 주세요" rows="8" style="display: block; width: 100%; min-height: 240px; box-sizing: border-box; padding: 16px; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 15.5px; line-height: 1.7; color: #1F2733"></textarea>
|
||||
<div style="margin: 0 16px; padding: 12px 0 16px; border-top: 1px dashed #D0D5DD; display: flex; align-items: flex-start; gap: 4px">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px">
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #667085">서명</span>
|
||||
<p style="margin: 0; font-size: 14px; line-height: 1.65; color: #4A5363; white-space: pre-line">김아라
|
||||
경영지원팀 · ARA SYSTEM
|
||||
02-000-0000</p>
|
||||
</div>
|
||||
<button type="button" aria-label="서명 빼기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #667085"><svg width="18" height="18" 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>
|
||||
</div>
|
||||
</div>
|
||||
<sc-for list="{{ phones }}" as="p" hint-placeholder-count="2">
|
||||
<div style="flex: 0 0 390px; order: {{ p.order }}; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ p.label }}</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<a href="App1MailList.dc.html" aria-label="닫기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" 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></a>
|
||||
<h1 style="flex: 1 1 auto; min-width: 0; margin: 0; padding-left: 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">답장</h1>
|
||||
<button type="button" aria-label="파일 첨부" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" 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.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></button>
|
||||
<button type="button" aria-label="보내기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0E7C86"><svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></button>
|
||||
</header>
|
||||
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 72px">
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #EEF0F3">
|
||||
<label for="{{ p.id }}-to" style="flex: 0 0 72px; font-size: 14px; color: #667085">받는 사람</label>
|
||||
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; height: 40px; box-sizing: border-box; padding-left: 14px; border-radius: 20px; background: #F2F4F7; font-size: 14.5px; color: #171C26">이도윤<button type="button" aria-label="이도윤 빼기" style="width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4A5363; cursor: pointer"><svg width="16" height="16" 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></span>
|
||||
<input id="{{ p.id }}-to" type="text" autocomplete="off" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; flex-basis: 40px">
|
||||
<button type="button" aria-label="{{ p.ccLabel }}" aria-expanded="{{ p.ccStr }}" onClick="{{ p.toggleCc }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #667085">
|
||||
<sc-if value="{{ p.ccOpen }}" hint-placeholder-val="{{ true }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"></polyline></svg></sc-if>
|
||||
<sc-if value="{{ p.ccClosed }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></sc-if>
|
||||
</button>
|
||||
</div>
|
||||
<sc-if value="{{ p.ccOpen }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #EEF0F3">
|
||||
<label for="{{ p.id }}-cc" style="flex: 0 0 72px; font-size: 14px; color: #667085">참조</label>
|
||||
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; height: 40px; box-sizing: border-box; padding-left: 14px; border-radius: 20px; background: #F2F4F7; font-size: 14.5px; color: #171C26">박준호<button type="button" aria-label="박준호 빼기" style="width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4A5363; cursor: pointer"><svg width="16" height="16" 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></span>
|
||||
<input id="{{ p.id }}-cc" type="text" autocomplete="off" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; flex-basis: 40px">
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #EEF0F3">
|
||||
<label for="{{ p.id }}-bcc" style="flex: 0 0 72px; font-size: 14px; color: #667085">숨은참조</label>
|
||||
<input id="{{ p.id }}-bcc" type="text" autocomplete="off" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26">
|
||||
</div>
|
||||
</sc-if>
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #EEF0F3">
|
||||
<label for="{{ p.id }}-subject" style="flex: 0 0 72px; font-size: 14px; color: #667085">제목</label>
|
||||
<input id="{{ p.id }}-subject" type="text" value="Re: 유지보수 계약 갱신 건" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; font-weight: 600">
|
||||
</div>
|
||||
<section aria-labelledby="{{ p.id }}-att" style="padding: 10px 16px 12px; border-bottom: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; align-items: baseline; justify-content: space-between; gap: 8px">
|
||||
<h2 id="{{ p.id }}-att" style="margin: 0; font-size: 13px; font-weight: 600; color: #4A5363">첨부 2개</h2>
|
||||
<span style="font-size: 12.5px; color: #667085">파일당 최대 20MB · 합계 25MB</span>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<li style="display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 10px; border: 1px solid #E6E8EC; border-radius: 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: 8px; background: #F2F4F7; color: #4A5363"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
||||
<div 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-size: 14.5px; font-weight: 500">회신_검토의견.docx</span>
|
||||
<span style="font-size: 12.5px; color: #667085">38 KB</span>
|
||||
</div>
|
||||
<button type="button" aria-label="회신_검토의견.docx 빼기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #4A5363"><svg width="18" height="18" 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>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 10px; border: 1px solid #E6E8EC; border-radius: 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: 8px; background: #F2F4F7; color: #4A5363"><svg width="18" height="18" 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="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; line-height: 1.35">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500">현장사진_1104.jpg</span>
|
||||
<span style="display: flex; align-items: center; gap: 8px">
|
||||
<span role="progressbar" aria-label="현장사진_1104.jpg 올리는 중" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="flex: 1 1 auto; display: block; height: 4px; border-radius: 2px; background: #E4E7EC; overflow: hidden"><span style="display: block; width: 40%; height: 100%; border-radius: 2px; background: #0E7C86"></span></span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; color: #0A5F67; font-variant-numeric: tabular-nums">올리는 중 40%</span>
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" aria-label="현장사진_1104.jpg 올리기 취소" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #4A5363"><svg width="18" height="18" 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>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<textarea aria-label="본문" rows="5" style="display: block; width: 100%; min-height: 150px; box-sizing: border-box; padding: 16px; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 15.5px; line-height: 1.7; color: #1F2733">이도윤님,
|
||||
|
||||
보내 주신 초안 잘 받았습니다.
|
||||
조건 그대로 진행해 주세요. 다음 주 월요일 서명 일정도 좋습니다.</textarea>
|
||||
<div style="margin: 0 16px; padding: 12px 0 16px; border-top: 1px dashed #D0D5DD; display: flex; align-items: flex-start; gap: 4px">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px">
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #667085">서명</span>
|
||||
<p style="margin: 0; font-size: 14px; line-height: 1.65; color: #4A5363; white-space: pre-line">김아라
|
||||
경영지원팀 · ARA SYSTEM
|
||||
02-000-0000</p>
|
||||
</div>
|
||||
<button type="button" aria-label="서명 빼기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #667085"><svg width="18" height="18" 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>
|
||||
<button type="button" aria-expanded="{{ p.quoteStr }}" onClick="{{ p.toggleQuote }}" style="margin: 4px 16px 12px; width: calc(100% - 32px); display: flex; align-items: center; gap: 8px; min-height: 56px; box-sizing: border-box; padding: 6px 4px 6px 14px; border: 1px solid #E6E8EC; border-radius: 10px; background: #F8F9FB; font: inherit; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.4">
|
||||
<span style="font-size: 14px; font-weight: 600; color: #344054">원본 메일</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #667085">이도윤 · 11월 5일 (목) 오전 10:42</span>
|
||||
</span>
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; width: 40px; justify-content: center; color: #667085">
|
||||
<sc-if value="{{ p.quoteOpen }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"></polyline></svg></sc-if>
|
||||
<sc-if value="{{ p.quoteClosed }}" hint-placeholder-val="{{ true }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></sc-if>
|
||||
</span>
|
||||
</button>
|
||||
<sc-if value="{{ p.quoteOpen }}" hint-placeholder-val="{{ false }}">
|
||||
<blockquote style="margin: 0 16px 24px; padding: 0 0 0 14px; border-left: 2px solid #D0D5DD; display: flex; flex-direction: column; gap: 10px; color: #4A5363">
|
||||
<span style="font-size: 12.5px; font-weight: 700">원본 메일</span>
|
||||
<dl style="margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 10px; font-size: 13px; line-height: 1.5">
|
||||
<dt style="color: #667085">보낸 사람</dt><dd style="margin: 0; overflow-wrap: anywhere">이도윤 <doyun.lee@arasystem.it.kr></dd>
|
||||
<dt style="color: #667085">날짜</dt><dd style="margin: 0">2026년 11월 5일 (목) 오전 10:42</dd>
|
||||
<dt style="color: #667085">제목</dt><dd style="margin: 0">Re: 유지보수 계약 갱신 건</dd>
|
||||
</dl>
|
||||
<p style="margin: 0; font-size: 14px; line-height: 1.7; white-space: pre-line">김아라님, 안녕하세요.
|
||||
|
||||
말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다.
|
||||
기간은 1년이고, 단가는 작년과 같습니다.
|
||||
|
||||
이번 주 안에 회신 주시면 다음 주 월요일에 서명하겠습니다.
|
||||
|
||||
이도윤 드림</p>
|
||||
</blockquote>
|
||||
</sc-if>
|
||||
</div>
|
||||
<sc-if value="{{ p.undone }}" hint-placeholder-val="{{ false }}">
|
||||
<div role="status" style="position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 12px 16px; border-radius: 10px; background: #0B3640; color: #FFFFFF; font-size: 14.5px; line-height: 1.5; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">보내기를 취소했습니다. 쓰던 메일로 돌아왔습니다.</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
<div style="flex: 0 0 390px; order: 3; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">보낸 뒤 (답장을 시작한 읽기 화면으로)</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; background: #FFFFFF">
|
||||
<a href="App1MailList.dc.html" aria-label="목록으로" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>
|
||||
<span style="flex: 1 1 auto"></span>
|
||||
<button type="button" aria-label="삭제" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></button>
|
||||
<button type="button" aria-label="더 보기" aria-haspopup="menu" aria-expanded="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="5" r="1.3" fill="currentColor"></circle><circle cx="12" cy="12" r="1.3" fill="currentColor"></circle><circle cx="12" cy="19" r="1.3" fill="currentColor"></circle></svg></button>
|
||||
</header>
|
||||
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 72px">
|
||||
<article aria-labelledby="cc-subject">
|
||||
<h1 id="cc-subject" style="margin: 0; padding: 6px 20px 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">Re: 유지보수 계약 갱신 건</h1>
|
||||
<div style="display: flex; gap: 12px; padding: 14px 20px 0">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">이</span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
<div style="display: flex; align-items: baseline; gap: 8px; padding-top: 1px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600">이도윤</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; color: #667085; font-variant-numeric: tabular-nums">오전 10:42</span>
|
||||
</div>
|
||||
<button type="button" aria-expanded="false" style="align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin: -10px 0 -6px -8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #4A5363; font: inherit; font-size: 13.5px; cursor: pointer"><span>받는 사람 나 외 1명</span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 16px 20px 20px; font-size: 15px; line-height: 1.75; color: #1F2733; white-space: pre-line">김아라님, 안녕하세요.
|
||||
|
||||
말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다.
|
||||
기간은 1년이고, 단가는 작년과 같습니다.
|
||||
|
||||
이번 주 안에 회신 주시면 다음 주 월요일에 서명하겠습니다.
|
||||
|
||||
이도윤 드림</div>
|
||||
<section aria-labelledby="cc-att" style="margin: 0 16px 24px; padding-top: 16px; border-top: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 8px">
|
||||
<h2 id="cc-att" style="margin: 0 4px; font-size: 13px; font-weight: 600; color: #4A5363">첨부 파일 2개</h2>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<li style="display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 8px 4px 8px 12px; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
||||
<div 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-size: 14.5px; font-weight: 500">유지보수_계약서_수정본.docx</span>
|
||||
<span style="font-size: 12.5px; color: #667085">52 KB</span>
|
||||
</div>
|
||||
<button type="button" aria-label="유지보수_계약서_수정본.docx 받기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="20" height="20" 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 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></button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 8px 4px 8px 12px; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
||||
<div 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-size: 14.5px; font-weight: 500">견적서_2026.pdf</span>
|
||||
<span style="font-size: 12.5px; color: #667085">1.2 MB</span>
|
||||
</div>
|
||||
<button type="button" aria-label="견적서_2026.pdf 받기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="20" height="20" 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 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></button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<div role="toolbar" aria-label="답장과 전달" style="flex: 0 0 auto; display: flex; height: 64px; border-top: 1px solid #E6E8EC; background: #FFFFFF">
|
||||
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></a>
|
||||
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></a>
|
||||
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></a>
|
||||
</div>
|
||||
<div role="status" style="position: absolute; left: 12px; right: 12px; bottom: 76px; border-radius: 10px; background: #0B3640; color: #FFFFFF; overflow: hidden; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 2px 4px 2px 16px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-size: 14.5px">메일을 보냈습니다.</span>
|
||||
<button type="button" style="flex: 0 0 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #9ED6DB; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer">보내기 취소</button>
|
||||
</div>
|
||||
<span aria-hidden="true" style="display: block; height: 3px; background: rgba(255, 255, 255, 0.18)"><span style="display: block; width: 62%; height: 100%; background: #7FD3DA"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1784,"height":956}}'>
|
||||
class Component extends DCLogic {
|
||||
state = { cc: true, quote: false };
|
||||
|
||||
renderVals() {
|
||||
const st = this.state;
|
||||
const noop = () => {};
|
||||
const make = (live) => {
|
||||
const ccOpen = live ? st.cc : true;
|
||||
const quoteOpen = live ? st.quote : false;
|
||||
return {
|
||||
id: live ? 'cb' : 'cd',
|
||||
order: live ? '2' : '4',
|
||||
label: live ? '답장 · 참조 펼침 · 첨부 · 원본 접힘' : '보내기 취소한 뒤',
|
||||
undone: !live,
|
||||
ccOpen: ccOpen,
|
||||
ccClosed: !ccOpen,
|
||||
ccStr: ccOpen ? 'true' : 'false',
|
||||
ccLabel: ccOpen ? '참조, 숨은참조 접기' : '참조, 숨은참조 펼치기',
|
||||
quoteOpen: quoteOpen,
|
||||
quoteClosed: !quoteOpen,
|
||||
quoteStr: quoteOpen ? 'true' : 'false',
|
||||
toggleCc: live ? () => this.setState({ cc: !st.cc }) : noop,
|
||||
toggleQuote: live ? () => this.setState({ quote: !st.quote }) : noop,
|
||||
};
|
||||
};
|
||||
return {
|
||||
phones: [make(true), make(false)],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,259 @@
|
||||
<!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}
|
||||
input::placeholder{color:#8A94A3}
|
||||
.pwbox:focus-within{outline:2px solid #0E7C86;outline-offset:2px}
|
||||
.pwbox input:focus-visible{outline:none}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 908px; height: 1028px; box-sizing: border-box; padding: 40px; display: flex; flex-direction: column; gap: 24px; background: #EEF1F4; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 15px; line-height: 1.5">
|
||||
|
||||
<div role="group" aria-label="로그인 단계 고르기" style="display: flex; gap: 8px; height: 48px">
|
||||
<sc-for list="{{ steps }}" as="s" hint-placeholder-count="4">
|
||||
<button type="button" aria-pressed="{{ s.pressed }}" onClick="{{ s.pick }}" style="flex: 1 1 0; min-width: 0; min-height: 48px; box-sizing: border-box; padding: 0 12px; 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 style="display: flex; gap: 48px; align-items: flex-start">
|
||||
<sc-for list="{{ phones }}" as="ph" hint-placeholder-count="2">
|
||||
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ ph.label }}</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<sc-if value="{{ ph.isStep1 }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column">
|
||||
<section aria-label="ARA SYSTEM 소개" style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 18px; padding: 36px 24px 28px; background: #0B3640">
|
||||
<img src="/_blob/3a2f4115a8f90207faa7d3a51cd9aec2" alt="ARA SYSTEM" width="150" height="72" style="display: block; width: 150px; height: auto">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<p style="margin: 0; font-size: 21px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF">사내 업무를 한 계정으로</p>
|
||||
<p style="margin: 0; font-size: 14px; line-height: 1.6; color: #A3C2C6">메일부터 시작해 캘린더와 파일 저장소까지 같은 계정으로 이어집니다.</p>
|
||||
</div>
|
||||
</section>
|
||||
<main style="display: flex; flex-direction: column; gap: 20px; padding: 28px 20px 32px">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px">
|
||||
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">로그인</h1>
|
||||
<p style="margin: 0; font-size: 14.5px; color: #4A5363">회사 메일 주소(@arasystem.it.kr)로 로그인해 주세요.</p>
|
||||
</div>
|
||||
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
|
||||
<p id="err-login-alert" role="alert" style="display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 10px; background: #FEF3F2; color: #B42318; font-size: 14px; line-height: 1.5">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>이메일 또는 비밀번호가 올바르지 않습니다.</span>
|
||||
</p>
|
||||
</sc-if>
|
||||
<form style="display: flex; flex-direction: column; gap: 16px; margin: 0">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="{{ ph.id }}-email" style="font-size: 13.5px; font-weight: 600; color: #344054">메일 주소</label>
|
||||
<sc-if value="{{ ph.isDefault }}" hint-placeholder-val="{{ true }}">
|
||||
<input id="ok-email" type="email" inputmode="email" autocomplete="username" placeholder="name@arasystem.it.kr" style="height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #8A94A3; border-radius: 10px; font: inherit; font-size: 16px; color: #171C26; background: #FFFFFF">
|
||||
</sc-if>
|
||||
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
|
||||
<input id="err-email" type="email" inputmode="email" autocomplete="username" value="ara.kim@arasystem.it.kr" aria-invalid="true" aria-describedby="err-login-alert" style="height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #B42318; border-radius: 10px; font: inherit; font-size: 16px; color: #171C26; background: #FFFFFF; box-shadow: 0 0 0 1px #B42318">
|
||||
</sc-if>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="{{ ph.id }}-password" style="font-size: 13.5px; font-weight: 600; color: #344054">비밀번호</label>
|
||||
<div class="pwbox" style="display: flex; align-items: center; height: 52px; box-sizing: border-box; padding-left: 14px; border: 1px solid {{ ph.credBorder }}; border-radius: 10px; background: #FFFFFF; box-shadow: {{ ph.credShadow }}">
|
||||
<input id="{{ ph.id }}-password" type="password" autocomplete="current-password" placeholder="비밀번호 입력" aria-invalid="{{ ph.invalidStr }}" style="flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #171C26">
|
||||
<button type="button" aria-label="비밀번호 보기" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #4A5363; cursor: pointer">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" onClick="{{ ph.next }}" style="display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; border: 0; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer">로그인</button>
|
||||
</form>
|
||||
<p style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #667085; word-break: keep-all">비밀번호를 잊으셨나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
|
||||
</main>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ ph.isLater }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 56px; box-sizing: border-box; padding: 0 6px 0 20px; background: #0B3640">
|
||||
<img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
|
||||
<button type="button" onClick="{{ ph.restart }}" style="min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #9ED6DB; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">다른 계정으로 로그인</button>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ ph.isStep2 }}" hint-placeholder-val="{{ false }}">
|
||||
<main style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 28px 20px 32px">
|
||||
<div style="display: flex; flex-direction: column; gap: 10px">
|
||||
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">2단계 인증</h1>
|
||||
<p style="margin: 0; font-size: 14.5px; color: #4A5363">비밀번호를 확인했습니다. 휴대폰 인증 앱에 표시된 코드를 넣어 주세요.</p>
|
||||
<span style="align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; padding: 0 14px 0 10px; border-radius: 18px; background: #F2F4F7; color: #344054; font-size: 14px">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">ara.kim@arasystem.it.kr</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="{{ ph.id }}-code" style="font-size: 13.5px; font-weight: 600; color: #344054">인증 앱에 표시된 6자리 코드</label>
|
||||
<input id="{{ ph.id }}-code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" aria-invalid="{{ ph.invalidStr }}" aria-describedby="{{ ph.codeDesc }}" style="height: 56px; box-sizing: border-box; padding: 0 16px; border: 1px solid {{ ph.credBorder }}; border-radius: 10px; font: inherit; font-size: 22px; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; color: #171C26; background: #FFFFFF; box-shadow: {{ ph.credShadow }}">
|
||||
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
|
||||
<p id="err-code-msg" style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #B42318">코드가 올바르지 않습니다. 휴대폰의 날짜와 시간이 자동으로 맞춰지도록 설정되어 있는지 확인해 주세요.</p>
|
||||
</sc-if>
|
||||
</div>
|
||||
<a href="App1MailList.dc.html" style="display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font-size: 15.5px; font-weight: 600; text-decoration: none">확인</a>
|
||||
<p style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #667085; word-break: keep-all">인증 앱을 쓸 수 없나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
|
||||
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">Outlook이나 휴대폰 기본 메일 앱 같은 다른 메일 프로그램은 이 코드를 묻지 않습니다. 웹메일의 [설정] → [앱 비밀번호]에서 만든 비밀번호로 연결해 주세요.</p>
|
||||
</main>
|
||||
</sc-if>
|
||||
<sc-if value="{{ ph.isStep3 }}" hint-placeholder-val="{{ false }}">
|
||||
<main style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 28px 20px 32px">
|
||||
<div style="display: flex; flex-direction: column; gap: 10px">
|
||||
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">새 비밀번호를 정해 주세요</h1>
|
||||
<p style="margin: 0; font-size: 14.5px; color: #4A5363">관리자가 정한 임시 비밀번호로 로그인했습니다. 메일을 쓰려면 먼저 새 비밀번호를 정해 주세요.</p>
|
||||
<span style="align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; padding: 0 14px 0 10px; border-radius: 18px; background: #F2F4F7; color: #344054; font-size: 14px">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">ara.kim@arasystem.it.kr</span>
|
||||
</span>
|
||||
</div>
|
||||
<form style="display: flex; flex-direction: column; gap: 16px; margin: 0">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="{{ ph.id }}-next" style="font-size: 13.5px; font-weight: 600; color: #344054">새 비밀번호</label>
|
||||
<div class="pwbox" style="display: flex; align-items: center; height: 52px; box-sizing: border-box; padding-left: 14px; border: 1px solid #8A94A3; border-radius: 10px; background: #FFFFFF">
|
||||
<sc-if value="{{ ph.isDefault }}" hint-placeholder-val="{{ true }}">
|
||||
<input id="ok-next" type="password" autocomplete="new-password" aria-describedby="ok-next-hint" style="flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #171C26">
|
||||
</sc-if>
|
||||
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
|
||||
<input id="err-next" type="password" autocomplete="new-password" value="arasystem2026" aria-describedby="err-next-hint" style="flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #171C26">
|
||||
</sc-if>
|
||||
<button type="button" aria-label="새 비밀번호 보기" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #4A5363; cursor: pointer">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
||||
</button>
|
||||
</div>
|
||||
<p id="{{ ph.id }}-next-hint" style="margin: 0; font-size: 13px; line-height: 1.55; color: #667085">8자 이상이고 임시 비밀번호와 달라야 합니다. 영문, 숫자, 기호를 섞으면 더 안전합니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="{{ ph.id }}-confirm" style="font-size: 13.5px; font-weight: 600; color: #344054">새 비밀번호 확인</label>
|
||||
<sc-if value="{{ ph.isDefault }}" hint-placeholder-val="{{ true }}">
|
||||
<input id="ok-confirm" type="password" autocomplete="new-password" style="height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #8A94A3; border-radius: 10px; font: inherit; font-size: 16px; color: #171C26; background: #FFFFFF">
|
||||
</sc-if>
|
||||
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
|
||||
<input id="err-confirm" type="password" autocomplete="new-password" value="arasystem2062" aria-invalid="true" aria-describedby="err-confirm-msg" style="height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #B42318; border-radius: 10px; font: inherit; font-size: 16px; color: #171C26; background: #FFFFFF; box-shadow: 0 0 0 1px #B42318">
|
||||
<p id="err-confirm-msg" style="margin: 0; font-size: 13.5px; color: #B42318">새 비밀번호가 서로 다릅니다.</p>
|
||||
</sc-if>
|
||||
</div>
|
||||
<button type="button" onClick="{{ ph.next }}" style="display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; border: 0; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer">비밀번호 바꾸고 계속</button>
|
||||
</form>
|
||||
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">아웃룩 같은 메일 프로그램을 연결해 두었다면 비밀번호를 바꾼 뒤 다시 연결해 주세요.</p>
|
||||
</main>
|
||||
</sc-if>
|
||||
<sc-if value="{{ ph.isStep4 }}" hint-placeholder-val="{{ false }}">
|
||||
<main style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 24px 20px 32px">
|
||||
<div style="display: flex; flex-direction: column; gap: 10px">
|
||||
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">2단계 인증을 켜 주세요</h1>
|
||||
<p style="margin: 0; font-size: 14.5px; color: #4A5363">회사 정책에 따라 로그인할 때 휴대폰 인증 앱의 코드도 확인합니다. 지금 켜면 바로 메일로 이어집니다.</p>
|
||||
<span style="align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; padding: 0 14px 0 10px; border-radius: 18px; background: #F2F4F7; color: #344054; font-size: 14px">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">ara.kim@arasystem.it.kr</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px">
|
||||
<li style="display: flex; gap: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 18px; font-size: 16px; line-height: 1.4; font-weight: 700; color: #0E7C86">1</span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px">
|
||||
<h2 style="margin: 0; font-size: 15.5px; line-height: 1.4; font-weight: 650">인증 앱에 추가해 주세요</h2>
|
||||
<p style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #4A5363">이 휴대폰의 인증 앱에 바로 추가합니다. 앱이 없으면 Google Authenticator나 Microsoft Authenticator를 먼저 설치해 주세요.</p>
|
||||
</div>
|
||||
<button type="button" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid #0E7C86; border-radius: 10px; background: #FFFFFF; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
|
||||
<span>인증 앱에 추가</span>
|
||||
</button>
|
||||
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
|
||||
<p role="alert" style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #B42318">이 휴대폰에서 인증 앱을 찾지 못했습니다. 인증 앱을 설치한 뒤 다시 눌러 주세요. 아래 키를 직접 입력해도 됩니다.</p>
|
||||
</sc-if>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; padding-top: 2px">
|
||||
<span style="font-size: 13px; font-weight: 600; color: #344054">추가되지 않으면 이 키를 인증 앱에 직접 입력해 주세요</span>
|
||||
<div style="display: flex; align-items: center; gap: 4px; padding: 4px 2px 4px 12px; border: 1px solid #E6E8EC; border-radius: 10px; background: #F8F9FB">
|
||||
<span style="flex: 1 1 auto; min-width: 0; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 14px; line-height: 1.65; letter-spacing: 0.03em; color: #171C26; white-space: nowrap">K7QF 2M4X HB6R TZ3N<br>PW5C YL7D JQ2V MGAS</span>
|
||||
<button type="button" aria-label="키 복사" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #0E7C86; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
<span>복사</span>
|
||||
</button>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; line-height: 1.5; color: #667085; word-break: keep-all">앱에는 ‘ARA SYSTEM (ara.kim@arasystem.it.kr)’로 저장됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li style="display: flex; gap: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 18px; font-size: 16px; line-height: 1.4; font-weight: 700; color: #0E7C86">2</span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="{{ ph.id }}-setup-code" style="font-size: 15.5px; line-height: 1.4; font-weight: 650">앱에 표시된 6자리 코드</label>
|
||||
<p id="{{ ph.id }}-setup-code-hint" style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #4A5363">인증 앱에서 코드를 복사해 와서 붙여 넣어도 됩니다.</p>
|
||||
<input id="{{ ph.id }}-setup-code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" aria-describedby="{{ ph.id }}-setup-code-hint" style="height: 56px; box-sizing: border-box; margin-top: 2px; padding: 0 16px; border: 1px solid #8A94A3; border-radius: 10px; font: inherit; font-size: 22px; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; color: #171C26; background: #FFFFFF">
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<a href="App1MailList.dc.html" style="display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font-size: 15.5px; font-weight: 600; text-decoration: none">켜고 계속</a>
|
||||
<p style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #667085; word-break: keep-all">인증 앱을 쓸 수 없나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
|
||||
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">Outlook이나 휴대폰 기본 메일 앱 같은 다른 메일 프로그램은 이 코드를 묻지 않습니다. 켠 뒤에는 웹메일의 [설정] → [앱 비밀번호]에서 만든 비밀번호로 연결해 주세요.</p>
|
||||
</main>
|
||||
</sc-if>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"step":{"editor":"enum","options":["주소와 비밀번호","2단계 인증 코드","새 비밀번호 정하기","2단계 인증 켜기"],"default":"주소와 비밀번호"},"$preview":{"width":908,"height":1028}}'>
|
||||
class Component extends DCLogic {
|
||||
state = { step: null };
|
||||
|
||||
renderVals() {
|
||||
const NAMES = ['주소와 비밀번호', '2단계 인증 코드', '새 비밀번호 정하기', '2단계 인증 켜기'];
|
||||
const ERRORS = ['비밀번호가 틀렸을 때', '코드가 틀렸을 때', '확인 칸이 다를 때', '인증 앱을 찾지 못했을 때'];
|
||||
const fromProp = NAMES.indexOf(this.props.step ?? NAMES[0]);
|
||||
const step = this.state.step ?? (fromProp < 0 ? 0 : fromProp);
|
||||
const go = (n) => () => this.setState({ step: n });
|
||||
const noop = () => {};
|
||||
|
||||
const steps = NAMES.map((label, i) => ({
|
||||
label: label,
|
||||
pressed: i === step ? 'true' : 'false',
|
||||
pick: go(i),
|
||||
bg: i === step ? '#E3F2F3' : '#FFFFFF',
|
||||
fg: i === step ? '#0A5F67' : '#344054',
|
||||
border: i === step ? '#0E7C86' : '#D0D5DD',
|
||||
}));
|
||||
|
||||
// 1단계 [로그인] → 코드 단계, 3단계 [비밀번호 바꾸고 계속] → 2단계 인증 켜기
|
||||
const nextOf = { 0: 1, 2: 3 };
|
||||
const phones = [false, true].map((isError) => {
|
||||
// 오류 칸의 빨간 테두리는 1단계(주소 · 비밀번호)와 2단계(코드)에서만 쓴다
|
||||
const redField = isError && (step === 0 || step === 1);
|
||||
return {
|
||||
id: isError ? 'err' : 'ok',
|
||||
label: NAMES[step] + ' · ' + (isError ? ERRORS[step] : '기본'),
|
||||
isError: isError,
|
||||
isDefault: !isError,
|
||||
isStep1: step === 0,
|
||||
isStep2: step === 1,
|
||||
isStep3: step === 2,
|
||||
isStep4: step === 3,
|
||||
isLater: step !== 0,
|
||||
credBorder: redField ? '#B42318' : '#8A94A3',
|
||||
credShadow: redField ? '0 0 0 1px #B42318' : 'none',
|
||||
invalidStr: redField ? 'true' : 'false',
|
||||
codeDesc: isError && step === 1 ? 'err-code-msg' : undefined,
|
||||
next: isError || nextOf[step] === undefined ? noop : go(nextOf[step]),
|
||||
restart: go(0),
|
||||
};
|
||||
});
|
||||
|
||||
return { steps: steps, phones: phones };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,355 @@
|
||||
<!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}
|
||||
input::placeholder,textarea::placeholder{color:#8A94A3}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 2222px; height: 956px; box-sizing: border-box; padding: 40px; display: flex; gap: 48px; align-items: flex-start; background: #EEF1F4; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 15px; line-height: 1.5">
|
||||
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">받은편지함</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<sc-if value="{{ selecting }}" hint-placeholder-val="{{ false }}">
|
||||
<div role="toolbar" aria-label="고른 메일" style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #E3EEEF; background: #F3F8F8">
|
||||
<button type="button" aria-label="선택 해제" onClick="{{ clear }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="24" height="24" 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>
|
||||
<span style="flex: 1 1 auto; min-width: 0; padding-left: 4px; font-size: 17px; font-weight: 700; color: #0A5F67">{{ pickedText }}</span>
|
||||
<button type="button" aria-label="읽음 표시" onClick="{{ markRead }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" 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.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="중요 표시" onClick="{{ flagPicked }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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="이동" onClick="{{ noop }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><line x1="8" y1="13.5" x2="15" y2="13.5"></line><polyline points="12.5 11 15 13.5 12.5 16"></polyline></svg></button>
|
||||
<button type="button" aria-label="삭제" onClick="{{ removePicked }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></button>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ notSelecting }}" hint-placeholder-val="{{ true }}">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
|
||||
<span style="font-size: 12.5px; color: #667085">{{ unreadText }}</span>
|
||||
</div>
|
||||
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
|
||||
</header>
|
||||
</sc-if>
|
||||
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 96px">
|
||||
<sc-for list="{{ rowsLive }}" as="r" hint-placeholder-count="8">
|
||||
<li style="border-bottom: 1px solid #F2F4F7; background: {{ r.bg }}">
|
||||
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
|
||||
<button type="button" aria-label="{{ r.pickLabel }}" aria-pressed="{{ r.pressedStr }}" onClick="{{ r.toggle }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer">
|
||||
<sc-if value="{{ r.picked }}" hint-placeholder-val="{{ false }}">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="stroke-width: 2.6"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
|
||||
</sc-if>
|
||||
<sc-if value="{{ r.unpicked }}" hint-placeholder-val="{{ true }}">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">{{ r.initial }}</span>
|
||||
</sc-if>
|
||||
</button>
|
||||
<a href="App1Reader.dc.html" onContextMenu="{{ r.longPress }}" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: baseline; gap: 8px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: {{ r.fw }}; color: #171C26">{{ r.who }}</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; 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="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
|
||||
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" 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>
|
||||
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><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></sc-if>
|
||||
</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<sc-if value="{{ notSelecting }}" hint-placeholder-val="{{ true }}">
|
||||
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: {{ fabBottom }}; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
|
||||
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<a href="#" aria-current="page" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: #E3F2F3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></a>
|
||||
<a href="App1Shell.dc.html" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></a>
|
||||
</nav>
|
||||
</sc-if>
|
||||
<sc-if value="{{ hasToast }}" hint-placeholder-val="{{ false }}">
|
||||
<div role="status" style="position: absolute; left: 12px; right: 12px; bottom: 84px; display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 2px 4px 2px 16px; border-radius: 10px; background: #0B3640; color: #FFFFFF; font-size: 14.5px; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<span style="flex: 1 1 auto; min-width: 0">{{ toastText }}</span>
|
||||
<button type="button" onClick="{{ undo }}" style="flex: 0 0 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #9ED6DB; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer">되돌리기</button>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">메일함 서랍</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
|
||||
<span style="font-size: 12.5px; color: #667085">안 읽은 메일 3통</span>
|
||||
</div>
|
||||
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
|
||||
</header>
|
||||
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 96px">
|
||||
<sc-for list="{{ rowsStatic }}" as="r" hint-placeholder-count="8">
|
||||
<li style="border-bottom: 1px solid #F2F4F7; background: {{ r.bg }}">
|
||||
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
|
||||
<button type="button" aria-label="{{ r.pickLabel }}" aria-pressed="{{ r.pressedStr }}" onClick="{{ r.toggle }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer">
|
||||
<sc-if value="{{ r.picked }}" hint-placeholder-val="{{ false }}">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="stroke-width: 2.6"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
|
||||
</sc-if>
|
||||
<sc-if value="{{ r.unpicked }}" hint-placeholder-val="{{ true }}">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">{{ r.initial }}</span>
|
||||
</sc-if>
|
||||
</button>
|
||||
<a href="App1Reader.dc.html" onContextMenu="{{ r.longPress }}" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: baseline; gap: 8px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: {{ r.fw }}; color: #171C26">{{ r.who }}</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; 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="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
|
||||
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" 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>
|
||||
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><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></sc-if>
|
||||
</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<a href="#" aria-current="page" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: #E3F2F3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></a>
|
||||
<a href="App1Shell.dc.html" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></a>
|
||||
</nav>
|
||||
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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 aria-hidden="true" style="position: absolute; inset: 0; background: rgba(11, 54, 64, 0.32)"></div>
|
||||
<nav aria-label="메일함" style="position: absolute; top: 0; bottom: 0; left: 0; width: 304px; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 0 16px 16px 0; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.2); overflow: hidden">
|
||||
<h2 style="flex: 0 0 auto; margin: 0; padding: 24px 28px 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">메일함</h2>
|
||||
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 4px 12px 12px">
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px">
|
||||
<li><a href="#" aria-current="page" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; background: #E3F2F3; color: #0A5F67; font-weight: 600; font-size: 15px; text-decoration: none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><span style="flex: 1 1 auto; min-width: 0">받은편지함</span><span style="flex: 0 0 auto; font-size: 13.5px; font-variant-numeric: tabular-nums; color: #0A5F67">3</span></a></li>
|
||||
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><span style="flex: 1 1 auto; min-width: 0">보낸편지함</span></a></li>
|
||||
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><span style="flex: 1 1 auto; min-width: 0">임시보관함</span></a></li>
|
||||
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><span style="flex: 1 1 auto; min-width: 0">스팸메일함</span><span style="flex: 0 0 auto; font-size: 13.5px; font-variant-numeric: tabular-nums; color: #667085">2</span></a></li>
|
||||
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg><span style="flex: 1 1 auto; min-width: 0">휴지통</span></a></li>
|
||||
</ul>
|
||||
<div aria-hidden="true" style="height: 1px; margin: 8px 4px; background: #EEF0F3"></div>
|
||||
<h2 style="margin: 4px 16px 2px; font-size: 12.5px; font-weight: 600; color: #667085">내 메일함</h2>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px">
|
||||
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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">거래처</span><span style="flex: 0 0 auto; font-size: 13.5px; font-variant-numeric: tabular-nums; color: #667085">1</span></a></li>
|
||||
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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">프로젝트</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">길게 눌러 고르기 (탭 막대 숨김)</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<div role="toolbar" aria-label="고른 메일" style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #E3EEEF; background: #F3F8F8">
|
||||
<button type="button" aria-label="선택 해제" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="24" height="24" 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>
|
||||
<span style="flex: 1 1 auto; min-width: 0; padding-left: 4px; font-size: 17px; font-weight: 700; color: #0A5F67">2통 선택됨</span>
|
||||
<button type="button" aria-label="읽음 표시" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" 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.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="중요 표시" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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="이동" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><line x1="8" y1="13.5" x2="15" y2="13.5"></line><polyline points="12.5 11 15 13.5 12.5 16"></polyline></svg></button>
|
||||
<button type="button" aria-label="삭제" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></button>
|
||||
</div>
|
||||
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 96px">
|
||||
<sc-for list="{{ rowsPicked }}" as="r" hint-placeholder-count="8">
|
||||
<li style="border-bottom: 1px solid #F2F4F7; background: {{ r.bg }}">
|
||||
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
|
||||
<button type="button" aria-label="{{ r.pickLabel }}" aria-pressed="{{ r.pressedStr }}" onClick="{{ r.toggle }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer">
|
||||
<sc-if value="{{ r.picked }}" hint-placeholder-val="{{ false }}">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="stroke-width: 2.6"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
|
||||
</sc-if>
|
||||
<sc-if value="{{ r.unpicked }}" hint-placeholder-val="{{ true }}">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">{{ r.initial }}</span>
|
||||
</sc-if>
|
||||
</button>
|
||||
<a href="App1Reader.dc.html" onContextMenu="{{ r.longPress }}" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: baseline; gap: 8px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: {{ r.fw }}; color: #171C26">{{ r.who }}</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; 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="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
|
||||
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" 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>
|
||||
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><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></sc-if>
|
||||
</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">당겨서 새로고침</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
|
||||
<span style="font-size: 12.5px; color: #667085">안 읽은 메일 3통</span>
|
||||
</div>
|
||||
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
|
||||
</header>
|
||||
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 96px">
|
||||
<sc-for list="{{ rowsStatic }}" as="r" hint-placeholder-count="8">
|
||||
<li style="border-bottom: 1px solid #F2F4F7; background: {{ r.bg }}">
|
||||
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
|
||||
<button type="button" aria-label="{{ r.pickLabel }}" aria-pressed="{{ r.pressedStr }}" onClick="{{ r.toggle }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer">
|
||||
<sc-if value="{{ r.picked }}" hint-placeholder-val="{{ false }}">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="stroke-width: 2.6"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
|
||||
</sc-if>
|
||||
<sc-if value="{{ r.unpicked }}" hint-placeholder-val="{{ true }}">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">{{ r.initial }}</span>
|
||||
</sc-if>
|
||||
</button>
|
||||
<a href="App1Reader.dc.html" onContextMenu="{{ r.longPress }}" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: baseline; gap: 8px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: {{ r.fw }}; color: #171C26">{{ r.who }}</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; 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="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
|
||||
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" 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>
|
||||
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><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></sc-if>
|
||||
</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<a href="#" aria-current="page" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: #E3F2F3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></a>
|
||||
<a href="App1Shell.dc.html" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></a>
|
||||
</nav>
|
||||
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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 aria-hidden="true" style="position: absolute; top: 84px; left: 175px; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 8px rgba(16, 24, 28, 0.2); display: flex; align-items: center; justify-content: center">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0E7C86" stroke-width="2.6" stroke-linecap="round"><path d="M12 4a8 8 0 1 1-7.6 5.5"></path></svg>
|
||||
</div>
|
||||
<span role="status" style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap">새 메일을 확인하는 중</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">빈 메일함 (휴지통)</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">휴지통</h1>
|
||||
</div>
|
||||
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
|
||||
</header>
|
||||
<div style="flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 40px 120px; text-align: center">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #F2F4F7; color: #667085"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></span>
|
||||
<h2 style="margin: 4px 0 0; font-size: 17px; font-weight: 650">휴지통이 비어 있습니다</h2>
|
||||
<p style="margin: 0; font-size: 14px; line-height: 1.6; color: #667085; word-break: keep-all">삭제한 메일이 여기에 표시됩니다. 들어간 지 30일이 지난 메일은 자동으로 지워집니다.</p>
|
||||
</div>
|
||||
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<a href="#" aria-current="page" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: #E3F2F3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></a>
|
||||
<a href="App1Shell.dc.html" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></a>
|
||||
</nav>
|
||||
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":2222,"height":956}}'>
|
||||
class Component extends DCLogic {
|
||||
state = { picked: {}, read: {}, flagged: {}, removed: {}, toastIds: null };
|
||||
|
||||
mails() {
|
||||
return [
|
||||
{ id: 'm1', who: '이도윤', initial: '이', time: '오전 10:42', subject: 'Re: 유지보수 계약 갱신 건', preview: '말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다. 기간은 1년이고, 단가는 작년과 같습니다.', unread: true, att: true },
|
||||
{ id: 'm2', who: '인사팀', initial: '인', time: '오전 9:05', subject: '[공지] 계약직 채용 일정 안내', preview: '11월 채용 일정을 알려 드립니다. 서류 접수는 11월 14일(금)까지입니다.', unread: true },
|
||||
{ id: 'm3', who: '박준호', initial: '박', time: '오전 8:31', subject: '11월 인프라 점검 일정 조율', preview: '점검 시간은 토요일 오전 2시부터 4시까지로 잡으려고 합니다. 괜찮은지 확인 부탁드립니다.', unread: true, flag: true },
|
||||
{ id: 'm4', who: '한빛파트너스 고객지원', initial: '한', time: '어제', subject: '11월 정기 점검 일정 안내', preview: '안녕하세요, 한빛파트너스 고객지원팀입니다. 11월 정기 점검 일정을 안내해 드립니다.', att: true },
|
||||
{ id: 'm5', who: '최서연', initial: '최', time: '11월 3일', subject: '11월 비용 정산 안내', preview: '10월 사용분 영수증을 11월 10일까지 올려 주세요.', att: true },
|
||||
{ id: 'm6', who: '정하늘', initial: '정', time: '11월 2일', subject: '신규 입사자 교육 회의록', preview: '지난 회의에서 정한 교육 일정과 담당자를 정리했습니다.' },
|
||||
{ id: 'm7', who: '김민수', initial: '김', time: '10월 30일', subject: '회의실 예약 변경', preview: '목요일 회의를 3층 큰 회의실로 옮겼습니다.' },
|
||||
{ id: 'm8', who: '이도윤', initial: '이', time: '10월 29일', subject: '회신: 유지보수 계약 갱신 건', preview: '네, 확인했습니다. 단가와 기간을 정리해서 다음 주 초에 보내 드리겠습니다.' },
|
||||
];
|
||||
}
|
||||
|
||||
row(m, picked, unread, flagged, toggle, longPress) {
|
||||
return {
|
||||
who: m.who,
|
||||
initial: m.initial,
|
||||
time: m.time,
|
||||
subject: m.subject,
|
||||
preview: m.preview,
|
||||
att: !!m.att,
|
||||
flag: !!flagged,
|
||||
picked: !!picked,
|
||||
unpicked: !picked,
|
||||
pressedStr: picked ? 'true' : 'false',
|
||||
pickLabel: '고르기: ' + m.subject,
|
||||
bg: picked ? '#E8F4F5' : '#FFFFFF',
|
||||
fw: unread ? '650' : '450',
|
||||
subFw: unread ? '600' : '400',
|
||||
subColor: unread ? '#171C26' : '#344054',
|
||||
timeFw: unread ? '600' : '400',
|
||||
timeColor: unread ? '#171C26' : '#667085',
|
||||
toggle: toggle,
|
||||
longPress: longPress,
|
||||
};
|
||||
}
|
||||
|
||||
renderVals() {
|
||||
const st = this.state;
|
||||
const all = this.mails();
|
||||
const pickedIds = Object.keys(st.picked).filter((id) => st.picked[id]);
|
||||
const without = (obj, ids, value) => {
|
||||
const next = { ...obj };
|
||||
ids.forEach((id) => { next[id] = value; });
|
||||
return next;
|
||||
};
|
||||
const toggleOf = (id) => () => this.setState({ picked: { ...st.picked, [id]: !st.picked[id] } });
|
||||
|
||||
const live = all.filter((m) => !st.removed[m.id]);
|
||||
const rowsLive = live.map((m) => {
|
||||
const toggle = toggleOf(m.id);
|
||||
const longPress = (e) => {
|
||||
if (e && e.preventDefault) e.preventDefault();
|
||||
toggle();
|
||||
};
|
||||
return this.row(m, st.picked[m.id], m.unread && !st.read[m.id], m.flag || st.flagged[m.id], toggle, longPress);
|
||||
});
|
||||
const unread = live.filter((m) => m.unread && !st.read[m.id]).length;
|
||||
|
||||
const rowsStatic = all.map((m) => this.row(m, false, m.unread, m.flag));
|
||||
const rowsPicked = all.map((m) => this.row(m, m.id === 'm1' || m.id === 'm3', m.unread, m.flag));
|
||||
|
||||
const selecting = pickedIds.length > 0;
|
||||
return {
|
||||
rowsLive: rowsLive,
|
||||
rowsStatic: rowsStatic,
|
||||
rowsPicked: rowsPicked,
|
||||
selecting: selecting,
|
||||
notSelecting: !selecting,
|
||||
pickedText: pickedIds.length + '통 선택됨',
|
||||
unreadText: unread > 0 ? '안 읽은 메일 ' + unread + '통' : '안 읽은 메일이 없습니다',
|
||||
hasToast: !!st.toastIds,
|
||||
toastText: st.toastIds ? '메일 ' + st.toastIds.length + '통을 휴지통으로 옮겼습니다.' : '',
|
||||
fabBottom: st.toastIds ? '148px' : '88px',
|
||||
clear: () => this.setState({ picked: {} }),
|
||||
markRead: () => this.setState({ read: without(st.read, pickedIds, true), picked: {} }),
|
||||
flagPicked: () => this.setState({ flagged: without(st.flagged, pickedIds, true), picked: {} }),
|
||||
noop: () => {},
|
||||
removePicked: () => this.setState({ removed: without(st.removed, pickedIds, true), picked: {}, toastIds: pickedIds }),
|
||||
undo: () => this.setState({ removed: without(st.removed, st.toastIds || [], false), toastIds: null }),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,216 @@
|
||||
<!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}
|
||||
input::placeholder,textarea::placeholder{color:#8A94A3}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1346px; height: 956px; box-sizing: border-box; padding: 40px; display: flex; gap: 48px; align-items: flex-start; background: #EEF1F4; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 15px; line-height: 1.5">
|
||||
<sc-for list="{{ phones }}" as="p" hint-placeholder-count="2">
|
||||
<div style="flex: 0 0 390px; order: {{ p.order }}; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ p.label }}</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; background: #FFFFFF">
|
||||
<a href="App1MailList.dc.html" aria-label="목록으로" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>
|
||||
<span style="flex: 1 1 auto"></span>
|
||||
<button type="button" aria-label="삭제" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></button>
|
||||
<button type="button" aria-label="더 보기" aria-haspopup="menu" aria-expanded="{{ p.menuStr }}" onClick="{{ p.toggleMenu }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="5" r="1.3" fill="currentColor"></circle><circle cx="12" cy="12" r="1.3" fill="currentColor"></circle><circle cx="12" cy="19" r="1.3" fill="currentColor"></circle></svg></button>
|
||||
</header>
|
||||
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto">
|
||||
<article aria-labelledby="{{ p.id }}-subject">
|
||||
<h1 id="{{ p.id }}-subject" style="margin: 0; padding: 6px 20px 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">11월 정기 점검 일정 안내</h1>
|
||||
<div style="display: flex; gap: 12px; padding: 14px 20px 0">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">한</span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
<div style="display: flex; align-items: baseline; gap: 8px; padding-top: 1px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600">한빛파트너스 고객지원</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; color: #667085; font-variant-numeric: tabular-nums">어제 오후 4:20</span>
|
||||
</div>
|
||||
<button type="button" aria-expanded="{{ p.detailsStr }}" onClick="{{ p.toggleDetails }}" style="align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin: -10px 0 -6px -8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #4A5363; font: inherit; font-size: 13.5px; cursor: pointer">
|
||||
<span>받는 사람 나</span>
|
||||
<sc-if value="{{ p.details }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"></polyline></svg></sc-if>
|
||||
<sc-if value="{{ p.noDetails }}" hint-placeholder-val="{{ true }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></sc-if>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<sc-if value="{{ p.details }}" hint-placeholder-val="{{ false }}">
|
||||
<dl style="margin: 10px 16px 4px; padding: 12px 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; border-radius: 10px; background: #F8F9FB; font-size: 13.5px; line-height: 1.45">
|
||||
<dt style="color: #667085">보낸 사람</dt>
|
||||
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">한빛파트너스 고객지원</span><span style="font-size: 13px; color: #667085; overflow-wrap: anywhere">support@hanbit-partners.co.kr</span></dd>
|
||||
<dt style="color: #667085">받는 사람</dt>
|
||||
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">김아라</span><span style="font-size: 13px; color: #667085; overflow-wrap: anywhere">ara.kim@arasystem.it.kr</span></dd>
|
||||
<dt style="color: #667085">날짜</dt>
|
||||
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">2026년 11월 4일 (수) 오후 4:20</span></dd>
|
||||
</dl>
|
||||
</sc-if>
|
||||
<sc-if value="{{ p.notice }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="margin: 12px 16px 0; display: flex; flex-direction: column; padding: 12px 6px 2px 14px; border: 1px solid #F0D9A8; border-radius: 10px; background: #FFF7E6; color: #7A5200">
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><line x1="2" y1="2" x2="22" y2="22"></line><path d="M10.41 10.41a2 2 0 1 1-2.83-2.82"></path><line x1="13.5" y1="13.5" x2="6" y2="21"></line><line x1="18" y1="12" x2="21" y2="15"></line><path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"></path><path d="M21 15V5a2 2 0 0 0-2-2H9"></path></svg>
|
||||
<p style="margin: 0; font-size: 13.5px; line-height: 1.55; word-break: keep-all">외부 이미지를 차단했습니다. 개인정보 보호를 위해 보낸 사람 서버의 이미지는 불러오지 않습니다.</p>
|
||||
</div>
|
||||
<button type="button" onClick="{{ p.showImages }}" style="align-self: flex-end; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #7A5200; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer">이미지 보기</button>
|
||||
</div>
|
||||
</sc-if>
|
||||
<div style="padding: 16px 20px 20px; font-size: 15px; line-height: 1.75; color: #1F2733; white-space: pre-line">안녕하세요, 한빛파트너스 고객지원팀입니다.
|
||||
|
||||
11월 정기 점검 일정을 안내해 드립니다.
|
||||
점검하는 동안에는 고객 포털 접속이 잠시 끊깁니다.
|
||||
|
||||
일시: 11월 15일 (토) 오전 2:00부터 오전 5:00까지
|
||||
대상: 고객 포털, 원격 지원 서비스
|
||||
|
||||
자세한 내용은 첨부한 안내문을 확인해 주세요.
|
||||
감사합니다.</div>
|
||||
<section aria-labelledby="{{ p.id }}-att" style="margin: 0 16px 24px; padding-top: 16px; border-top: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 8px">
|
||||
<h2 id="{{ p.id }}-att" style="margin: 0 4px; font-size: 13px; font-weight: 600; color: #4A5363">첨부 파일 1개</h2>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<li style="display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 8px 4px 8px 12px; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
||||
<div 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-size: 14.5px; font-weight: 500">11월_정기점검_안내.pdf</span>
|
||||
<span style="font-size: 12.5px; color: #667085">248 KB</span>
|
||||
</div>
|
||||
<button type="button" aria-label="11월_정기점검_안내.pdf 받기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="20" height="20" 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 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></button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<div role="toolbar" aria-label="답장과 전달" style="flex: 0 0 auto; display: flex; height: 64px; border-top: 1px solid #E6E8EC; background: #FFFFFF">
|
||||
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></a>
|
||||
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></a>
|
||||
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></a>
|
||||
</div>
|
||||
<sc-if value="{{ p.menuOpen }}" hint-placeholder-val="{{ false }}">
|
||||
<div role="menu" aria-label="더 보기" style="position: absolute; top: 52px; right: 8px; width: 224px; box-sizing: border-box; padding: 8px 0; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.16)">
|
||||
<button type="button" role="menuitem" onClick="{{ p.closeMenu }}" style="width: 100%; display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #171C26; text-align: left; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>안 읽음 표시</span></button>
|
||||
<button type="button" role="menuitem" onClick="{{ p.closeMenu }}" style="width: 100%; display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #171C26; text-align: left; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>중요 표시</span></button>
|
||||
<button type="button" role="menuitem" onClick="{{ p.closeMenu }}" style="width: 100%; display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #171C26; text-align: left; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><line x1="8" y1="13.5" x2="15" y2="13.5"></line><polyline points="12.5 11 15 13.5 12.5 16"></polyline></svg></span><span>이동</span></button>
|
||||
<button type="button" role="menuitem" onClick="{{ p.closeMenu }}" style="width: 100%; display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #171C26; text-align: left; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
<div style="flex: 0 0 390px; order: 2; display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">머리 펼침 · 첨부 받는 중</h2>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; background: #FFFFFF">
|
||||
<a href="App1MailList.dc.html" aria-label="목록으로" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>
|
||||
<span style="flex: 1 1 auto"></span>
|
||||
<button type="button" aria-label="삭제" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></button>
|
||||
<button type="button" aria-label="더 보기" aria-haspopup="menu" aria-expanded="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="5" r="1.3" fill="currentColor"></circle><circle cx="12" cy="12" r="1.3" fill="currentColor"></circle><circle cx="12" cy="19" r="1.3" fill="currentColor"></circle></svg></button>
|
||||
</header>
|
||||
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto">
|
||||
<article aria-labelledby="rb-subject">
|
||||
<h1 id="rb-subject" style="margin: 0; padding: 6px 20px 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">Re: 유지보수 계약 갱신 건</h1>
|
||||
<div style="display: flex; gap: 12px; padding: 14px 20px 0">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">이</span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
<div style="display: flex; align-items: baseline; gap: 8px; padding-top: 1px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600">이도윤</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; color: #667085; font-variant-numeric: tabular-nums">오전 10:42</span>
|
||||
</div>
|
||||
<button type="button" aria-expanded="true" style="align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin: -10px 0 -6px -8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #4A5363; font: inherit; font-size: 13.5px; cursor: pointer">
|
||||
<span>받는 사람 나 외 1명</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<dl style="margin: 10px 16px 4px; padding: 12px 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; border-radius: 10px; background: #F8F9FB; font-size: 13.5px; line-height: 1.45">
|
||||
<dt style="color: #667085">보낸 사람</dt>
|
||||
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">이도윤</span><span style="font-size: 13px; color: #667085; overflow-wrap: anywhere">doyun.lee@arasystem.it.kr</span></dd>
|
||||
<dt style="color: #667085">받는 사람</dt>
|
||||
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">김아라</span><span style="font-size: 13px; color: #667085; overflow-wrap: anywhere">ara.kim@arasystem.it.kr</span></dd>
|
||||
<dt style="color: #667085">참조</dt>
|
||||
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">박준호</span><span style="font-size: 13px; color: #667085; overflow-wrap: anywhere">junho.park@arasystem.it.kr</span></dd>
|
||||
<dt style="color: #667085">날짜</dt>
|
||||
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">2026년 11월 5일 (목) 오전 10:42</span></dd>
|
||||
</dl>
|
||||
<div style="padding: 16px 20px 20px; font-size: 15px; line-height: 1.75; color: #1F2733; white-space: pre-line">김아라님, 안녕하세요.
|
||||
|
||||
말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다.
|
||||
기간은 1년이고, 단가는 작년과 같습니다.
|
||||
|
||||
이번 주 안에 회신 주시면 다음 주 월요일에 서명하겠습니다.
|
||||
|
||||
이도윤 드림</div>
|
||||
<section aria-labelledby="rb-att" style="margin: 0 16px 24px; padding-top: 16px; border-top: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 8px">
|
||||
<h2 id="rb-att" style="margin: 0 4px; font-size: 13px; font-weight: 600; color: #4A5363">첨부 파일 2개</h2>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<li style="display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 8px 4px 8px 12px; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; line-height: 1.35">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500">유지보수_계약서_수정본.docx</span>
|
||||
<span style="display: flex; align-items: center; gap: 8px">
|
||||
<span role="progressbar" aria-label="유지보수_계약서_수정본.docx 받는 중" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="flex: 1 1 auto; display: block; height: 4px; border-radius: 2px; background: #E4E7EC; overflow: hidden"><span style="display: block; width: 64%; height: 100%; border-radius: 2px; background: #0E7C86"></span></span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; color: #0A5F67; font-variant-numeric: tabular-nums">받는 중 64%</span>
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" aria-label="유지보수_계약서_수정본.docx 받기 취소" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="20" height="20" 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>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 8px 4px 8px 12px; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
||||
<div 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-size: 14.5px; font-weight: 500">견적서_2026.pdf</span>
|
||||
<span style="font-size: 12.5px; color: #667085">1.2 MB</span>
|
||||
</div>
|
||||
<button type="button" aria-label="견적서_2026.pdf 받기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="20" height="20" 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 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></button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<div role="toolbar" aria-label="답장과 전달" style="flex: 0 0 auto; display: flex; height: 64px; border-top: 1px solid #E6E8EC; background: #FFFFFF">
|
||||
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></a>
|
||||
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></a>
|
||||
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1346,"height":956}}'>
|
||||
class Component extends DCLogic {
|
||||
state = { menu: false, details: false, images: false };
|
||||
|
||||
renderVals() {
|
||||
const st = this.state;
|
||||
const noop = () => {};
|
||||
const make = (live) => {
|
||||
const menuOpen = live ? st.menu : true;
|
||||
const details = live ? st.details : false;
|
||||
return {
|
||||
id: live ? 'ra' : 'rc',
|
||||
order: live ? '1' : '3',
|
||||
label: live ? '기본 (외부 이미지 차단)' : '더 보기 메뉴',
|
||||
menuOpen: menuOpen,
|
||||
menuStr: menuOpen ? 'true' : 'false',
|
||||
details: details,
|
||||
noDetails: !details,
|
||||
detailsStr: details ? 'true' : 'false',
|
||||
notice: live ? !st.images : true,
|
||||
toggleMenu: live ? () => this.setState({ menu: !st.menu }) : noop,
|
||||
closeMenu: live ? () => this.setState({ menu: false }) : noop,
|
||||
toggleDetails: live ? () => this.setState({ details: !st.details }) : noop,
|
||||
showImages: live ? () => this.setState({ images: true }) : noop,
|
||||
};
|
||||
};
|
||||
return { phones: [make(true), make(false)] };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,303 @@
|
||||
<!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}
|
||||
input::placeholder,textarea::placeholder{color:#8A94A3}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 2352px; height: 976px; box-sizing: border-box; padding: 40px; display: flex; gap: 48px; align-items: flex-start; background: #EEF1F4; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 15px; line-height: 1.5">
|
||||
<sc-for list="{{ phones }}" as="p" hint-placeholder-count="4">
|
||||
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
|
||||
<div style="height: 40px; display: flex; flex-direction: column">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ p.label }}</h2>
|
||||
<p style="margin: 0; height: 20px; font-size: 12.5px; line-height: 20px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ p.note }}</p>
|
||||
</div>
|
||||
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
|
||||
<sc-if value="{{ p.showMail }}" hint-placeholder-val="{{ true }}">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
|
||||
<span style="font-size: 12.5px; color: #667085">안 읽은 메일 3통</span>
|
||||
</div>
|
||||
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
|
||||
</header>
|
||||
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 96px">
|
||||
<li style="border-bottom: 1px solid #F2F4F7">
|
||||
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
|
||||
<button type="button" aria-label="고르기: Re: 유지보수 계약 갱신 건" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">이</span></button>
|
||||
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: baseline; gap: 8px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; color: #171C26">이도윤</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오전 10:42</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: #171C26">Re: 유지보수 계약 갱신 건</span><svg role="img" aria-label="첨부 있음" width="15" height="15" 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>
|
||||
</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다. 기간은 1년이고, 단가는 작년과 같습니다.</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #F2F4F7">
|
||||
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
|
||||
<button type="button" aria-label="고르기: [공지] 계약직 채용 일정 안내" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">인</span></button>
|
||||
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: baseline; gap: 8px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; color: #171C26">인사팀</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오전 9:05</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: #171C26">[공지] 계약직 채용 일정 안내</span>
|
||||
</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">11월 채용 일정을 알려 드립니다. 서류 접수는 11월 14일(금)까지입니다.</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #F2F4F7">
|
||||
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
|
||||
<button type="button" aria-label="고르기: 11월 인프라 점검 일정 조율" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">박</span></button>
|
||||
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: baseline; gap: 8px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; color: #171C26">박준호</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오전 8:31</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: #171C26">11월 인프라 점검 일정 조율</span>
|
||||
</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">점검 시간은 토요일 오전 2시부터 4시까지로 잡으려고 합니다. 괜찮은지 확인 부탁드립니다.</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #F2F4F7">
|
||||
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
|
||||
<button type="button" aria-label="고르기: 11월 정기 점검 일정 안내" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">한</span></button>
|
||||
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: baseline; gap: 8px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 450; color: #171C26">한빛파트너스 고객지원</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">어제</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 400; color: #344054">11월 정기 점검 일정 안내</span><svg role="img" aria-label="첨부 있음" width="15" height="15" 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>
|
||||
</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">안녕하세요, 한빛파트너스 고객지원팀입니다. 11월 정기 점검 일정을 안내해 드립니다.</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #F2F4F7">
|
||||
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
|
||||
<button type="button" aria-label="고르기: 11월 비용 정산 안내" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">최</span></button>
|
||||
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: baseline; gap: 8px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 450; color: #171C26">최서연</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">11월 3일</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 400; color: #344054">11월 비용 정산 안내</span><svg role="img" aria-label="첨부 있음" width="15" height="15" 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>
|
||||
</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">10월 사용분 영수증을 11월 10일까지 올려 주세요.</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #F2F4F7">
|
||||
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
|
||||
<button type="button" aria-label="고르기: 신규 입사자 교육 회의록" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">정</span></button>
|
||||
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
|
||||
<span style="display: flex; align-items: baseline; gap: 8px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 450; color: #171C26">정하늘</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">11월 2일</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 400; color: #344054">신규 입사자 교육 회의록</span>
|
||||
</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">지난 회의에서 정한 교육 일정과 담당자를 정리했습니다.</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
|
||||
</sc-if>
|
||||
<sc-if value="{{ p.showSettings }}" hint-placeholder-val="{{ false }}">
|
||||
<header style="flex: 0 0 auto; display: flex; align-items: center; height: 64px; box-sizing: border-box; padding: 0 20px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">설정</h1>
|
||||
</header>
|
||||
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 24px">
|
||||
<section aria-labelledby="{{ p.id }}-me">
|
||||
<h2 id="{{ p.id }}-me" style="margin: 0; padding: 18px 20px 6px; font-size: 13px; font-weight: 600; color: #667085">내 정보</h2>
|
||||
<div style="display: flex; align-items: center; gap: 14px; min-height: 68px; box-sizing: border-box; padding: 6px 20px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 18px; font-weight: 600">김</span>
|
||||
<div style="min-width: 0; display: flex; flex-direction: column; line-height: 1.4">
|
||||
<span style="font-size: 16px; font-weight: 600">김아라</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #667085">ara.kim@arasystem.it.kr</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div aria-hidden="true" style="height: 1px; margin: 8px 0 0; background: #EEF0F3"></div>
|
||||
<section aria-labelledby="{{ p.id }}-notify-h">
|
||||
<h2 id="{{ p.id }}-notify-h" style="margin: 0; padding: 18px 20px 6px; font-size: 13px; font-weight: 600; color: #667085">알림</h2>
|
||||
<div style="display: flex; align-items: center; gap: 12px; min-height: 68px; box-sizing: border-box; padding: 6px 12px 6px 20px">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px">
|
||||
<span id="{{ p.id }}-notify-label" style="font-size: 15.5px; font-weight: 500">새 메일 알림</span>
|
||||
<span id="{{ p.id }}-notify-desc" style="font-size: 13px; line-height: 1.5; color: #667085">새 메일이 오면 휴대폰 알림으로 알려 드립니다.</span>
|
||||
</div>
|
||||
<button type="button" role="switch" aria-checked="{{ p.notifyStr }}" aria-labelledby="{{ p.id }}-notify-label" aria-describedby="{{ p.id }}-notify-desc" onClick="{{ p.toggleNotify }}" style="flex: 0 0 auto; width: 64px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 24px; background: transparent; cursor: pointer">
|
||||
<span aria-hidden="true" style="display: flex; align-items: center; justify-content: {{ p.thumbJustify }}; width: 52px; height: 32px; box-sizing: border-box; padding: 0 2px; border: 2px solid {{ p.trackBorder }}; border-radius: 16px; background: {{ p.trackBg }}">
|
||||
<span style="display: block; width: {{ p.thumbSize }}; height: {{ p.thumbSize }}; margin: 0 {{ p.thumbGap }}; border-radius: 50%; background: {{ p.thumbBg }}"></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<div aria-hidden="true" style="height: 1px; margin: 8px 0 0; background: #EEF0F3"></div>
|
||||
<section aria-labelledby="{{ p.id }}-about">
|
||||
<h2 id="{{ p.id }}-about" style="margin: 0; padding: 18px 20px 6px; font-size: 13px; font-weight: 600; color: #667085">앱 정보</h2>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 0 20px">
|
||||
<span style="font-size: 15.5px">앱 버전</span>
|
||||
<span style="font-size: 14px; color: #667085; font-variant-numeric: tabular-nums">1.0.0</span>
|
||||
</div>
|
||||
<button type="button" style="width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 0 12px 0 20px; border: 0; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; text-align: left; cursor: pointer"><span>오픈소스 라이선스</span><span aria-hidden="true" style="display: inline-flex; color: #667085"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"></polyline></svg></span></button>
|
||||
</section>
|
||||
<div aria-hidden="true" style="height: 1px; margin: 8px 0 0; background: #EEF0F3"></div>
|
||||
<section aria-labelledby="{{ p.id }}-help">
|
||||
<h2 id="{{ p.id }}-help" style="margin: 0; padding: 18px 20px 6px; font-size: 13px; font-weight: 600; color: #667085">문의</h2>
|
||||
<p style="margin: 0; padding: 2px 20px 8px; font-size: 14px; line-height: 1.6; color: #667085; word-break: keep-all">앱이나 계정 문제로 도움이 필요하면 연락해 주세요.<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
|
||||
</section>
|
||||
<div style="padding: 20px 20px 0">
|
||||
<button type="button" onClick="{{ p.openDialog }}" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 10px; background: #FFFFFF; color: #344054; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ p.twoTabs }}" hint-placeholder-val="{{ true }}">
|
||||
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" aria-current="{{ p.mailCurrent }}" onClick="{{ p.pickMail }}" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: {{ p.mailFg }}; font: inherit; font-size: 12.5px; font-weight: {{ p.mailWeight }}; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: {{ p.mailPill }}"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></button>
|
||||
<button type="button" aria-current="{{ p.setCurrent }}" onClick="{{ p.pickSettings }}" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: {{ p.setFg }}; font: inherit; font-size: 12.5px; font-weight: {{ p.setWeight }}; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: {{ p.setPill }}"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></button>
|
||||
</nav>
|
||||
</sc-if>
|
||||
<sc-if value="{{ p.fiveTabs }}" hint-placeholder-val="{{ false }}">
|
||||
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" aria-current="page" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: #E3F2F3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></button>
|
||||
<button type="button" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" 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="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></button>
|
||||
<button type="button" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>파일</span></button>
|
||||
<button type="button" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>주소록</span></button>
|
||||
<button type="button" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></button>
|
||||
</nav>
|
||||
</sc-if>
|
||||
<sc-if value="{{ p.dialogOpen }}" hint-placeholder-val="{{ false }}">
|
||||
<div aria-hidden="true" style="position: absolute; inset: 0; background: rgba(11, 54, 64, 0.32)"></div>
|
||||
<div role="alertdialog" aria-modal="true" aria-labelledby="{{ p.id }}-logout-title" aria-describedby="{{ p.id }}-logout-desc" style="position: absolute; left: 24px; right: 24px; top: 300px; box-sizing: border-box; padding: 24px 16px 12px 24px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.2); display: flex; flex-direction: column; gap: 12px">
|
||||
<h2 id="{{ p.id }}-logout-title" style="margin: 0; padding-right: 8px; font-size: 19px; line-height: 1.4; font-weight: 700">로그아웃할까요?</h2>
|
||||
<p id="{{ p.id }}-logout-desc" style="margin: 0; padding-right: 8px; font-size: 14.5px; line-height: 1.6; color: #4A5363; word-break: keep-all">로그아웃하면 이 휴대폰에서 새 메일 알림도 오지 않습니다. 다음에 쓸 때는 다시 로그인해 주세요.</p>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px">
|
||||
<button type="button" ref="{{ p.cancelRef }}" onClick="{{ p.closeDialog }}" style="min-height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: {{ p.cancelRing }}">취소</button>
|
||||
<a href="App1Login.dc.html" style="display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none">로그아웃</a>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
<div style="flex: 0 0 520px; display: flex; flex-direction: column; gap: 12px">
|
||||
<div style="height: 40px; display: flex; flex-direction: column">
|
||||
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">읽기 · 쓰기는 전체 화면</h2>
|
||||
<p style="margin: 0; height: 20px; font-size: 12.5px; line-height: 20px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">탭 막대는 목록 화면에만 있고, 메일을 열거나 쓰면 화면 전체를 씁니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; justify-content: center; padding: 28px 20px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD">
|
||||
<figure style="flex: 0 0 132px; margin: 0; display: flex; flex-direction: column; gap: 10px">
|
||||
<span aria-hidden="true" style="position: relative; width: 132px; height: 286px; box-sizing: border-box; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD; display: flex; flex-direction: column">
|
||||
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #98A2B3"></span><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #98A2B3"></span></span>
|
||||
<span style="flex: 1 1 auto; display: flex; flex-direction: column"><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 70%; height: 4px; border-radius: 3px; background: #667085"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 70%; height: 4px; border-radius: 3px; background: #667085"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #C5CBD3"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #C5CBD3"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #C5CBD3"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #C5CBD3"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span></span>
|
||||
<span style="position: absolute; right: 8px; bottom: 34px; width: 34px; height: 16px; border-radius: 6px; background: #0E7C86"></span>
|
||||
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around; height: 26px; border-top: 1px solid #0E7C86; background: #E3F2F3"><span style="display: block; width: 20px; height: 8px; border-radius: 4px; background: #0E7C86"></span><span style="display: block; width: 20px; height: 8px; border-radius: 4px; background: #98A2B3"></span></span>
|
||||
</span>
|
||||
<figcaption style="font-size: 12.5px; line-height: 1.45; color: #344054; text-align: center">목록<br>탭 막대 있음</figcaption>
|
||||
</figure>
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; width: 32px; justify-content: center; margin-top: 133px; color: #8A94A3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
||||
<figure style="flex: 0 0 132px; margin: 0; display: flex; flex-direction: column; gap: 10px">
|
||||
<span aria-hidden="true" style="position: relative; width: 132px; height: 286px; box-sizing: border-box; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD; display: flex; flex-direction: column">
|
||||
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #4A5363"></span><span style="display: flex; gap: 6px"><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #98A2B3"></span><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #98A2B3"></span></span></span>
|
||||
<span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px"><span style="display: block; width: 80%; height: 6px; border-radius: 3px; background: #4A5363"></span><span style="display: block; width: 50%; height: 4px; border-radius: 3px; background: #98A2B3"></span><span style="height: 4px"></span><span style="display: block; width: 95%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 92%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="height: 4px"></span><span style="display: block; width: 85%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 70%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span>
|
||||
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around; height: 24px; border-top: 1px solid #E6E8EC"><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #4A5363"></span><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #4A5363"></span><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #4A5363"></span></span>
|
||||
</span>
|
||||
<figcaption style="font-size: 12.5px; line-height: 1.45; color: #344054; text-align: center">읽기<br>탭 막대 없음</figcaption>
|
||||
</figure>
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; width: 32px; justify-content: center; margin-top: 133px; color: #8A94A3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
||||
<figure style="flex: 0 0 132px; margin: 0; display: flex; flex-direction: column; gap: 10px">
|
||||
<span aria-hidden="true" style="position: relative; width: 132px; height: 286px; box-sizing: border-box; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD; display: flex; flex-direction: column">
|
||||
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #4A5363"></span><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #0E7C86"></span></span>
|
||||
<span style="display: flex; flex-direction: column"><span style="display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 24px; height: 4px; border-radius: 3px; background: #98A2B3"></span><span style="display: block; width: 55%; height: 4px; border-radius: 3px; background: #C5CBD3"></span></span><span style="display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 24px; height: 4px; border-radius: 3px; background: #98A2B3"></span><span style="display: block; width: 45%; height: 4px; border-radius: 3px; background: #C5CBD3"></span></span><span style="display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 24px; height: 4px; border-radius: 3px; background: #98A2B3"></span><span style="display: block; width: 70%; height: 4px; border-radius: 3px; background: #C5CBD3"></span></span></span>
|
||||
<span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px"><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 80%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span>
|
||||
</span>
|
||||
<figcaption style="font-size: 12.5px; line-height: 1.45; color: #344054; text-align: center">쓰기<br>탭 막대 없음</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":2352,"height":976}}'>
|
||||
class Component extends DCLogic {
|
||||
state = { tab: 'mail', notify: { s1: true, s3: true }, dialog: { s1: false, s3: false } };
|
||||
|
||||
renderVals() {
|
||||
const st = this.state;
|
||||
const noop = () => {};
|
||||
const CONFIGS = [
|
||||
{ id: 's1', label: '첫 판 탭 막대 [메일 · 설정]', note: '탭을 누르면 화면이 바뀝니다', live: true, interactive: true, tabs: 2 },
|
||||
{ id: 's2', label: '나중 모습', note: '예시 — 모듈이 준비되면 하나씩 늘어납니다', tab: 'mail', tabs: 5 },
|
||||
{ id: 's3', label: '설정 탭', note: '[로그아웃]을 누르면 확인 창이 열립니다', tab: 'settings', interactive: true, tabs: 2 },
|
||||
{ id: 's4', label: '로그아웃 확인 창', note: '처음 초점은 [취소]에 둡니다', tab: 'settings', fixedDialog: true, tabs: 2 },
|
||||
];
|
||||
const phones = CONFIGS.map((c) => {
|
||||
const tab = c.live ? st.tab : c.tab;
|
||||
const onMail = tab === 'mail';
|
||||
const notifyOn = c.interactive ? st.notify[c.id] !== false : true;
|
||||
const dialogOpen = c.fixedDialog ? true : c.interactive ? !!st.dialog[c.id] : false;
|
||||
const setDialog = (open) => () => this.setState({ dialog: { ...st.dialog, [c.id]: open } });
|
||||
return {
|
||||
id: c.id,
|
||||
label: c.label,
|
||||
note: c.note,
|
||||
showMail: onMail,
|
||||
showSettings: !onMail,
|
||||
twoTabs: c.tabs === 2,
|
||||
fiveTabs: c.tabs === 5,
|
||||
mailCurrent: onMail ? 'page' : undefined,
|
||||
setCurrent: onMail ? undefined : 'page',
|
||||
mailFg: onMail ? '#0A5F67' : '#4A5363',
|
||||
mailPill: onMail ? '#E3F2F3' : 'transparent',
|
||||
mailWeight: onMail ? '700' : '500',
|
||||
setFg: onMail ? '#4A5363' : '#0A5F67',
|
||||
setPill: onMail ? 'transparent' : '#E3F2F3',
|
||||
setWeight: onMail ? '500' : '700',
|
||||
pickMail: c.live ? () => this.setState({ tab: 'mail' }) : noop,
|
||||
pickSettings: c.live ? () => this.setState({ tab: 'settings' }) : noop,
|
||||
notifyStr: notifyOn ? 'true' : 'false',
|
||||
trackBg: notifyOn ? '#0E7C86' : '#FFFFFF',
|
||||
trackBorder: notifyOn ? '#0E7C86' : '#8A94A3',
|
||||
thumbBg: notifyOn ? '#FFFFFF' : '#8A94A3',
|
||||
thumbSize: notifyOn ? '24px' : '16px',
|
||||
thumbGap: notifyOn ? '0' : '4px',
|
||||
thumbJustify: notifyOn ? 'flex-end' : 'flex-start',
|
||||
toggleNotify: c.interactive ? () => this.setState({ notify: { ...st.notify, [c.id]: !notifyOn } }) : noop,
|
||||
dialogOpen: dialogOpen,
|
||||
openDialog: c.interactive ? setDialog(true) : noop,
|
||||
closeDialog: c.interactive ? setDialog(false) : noop,
|
||||
// 눌러서 연 창은 [취소]에 초점을 준다. 늘 열려 있는 그림은 초점을 뺏지 않고 고리만 그린다
|
||||
cancelRef: c.interactive ? (el) => { if (el) el.focus(); } : undefined,
|
||||
cancelRing: c.fixedDialog ? '0 0 0 2px #FFFFFF, 0 0 0 4px #0E7C86' : 'none',
|
||||
};
|
||||
});
|
||||
return { phones: phones };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -49,9 +49,14 @@
|
||||
"MailNoticesCutover.dc.html": { "x": 4560, "y": 25610, "w": 1440, "h": 3780, "title": "알림 · 안내 모음(13단계)" },
|
||||
"Search14.dc.html": { "x": 0, "y": 30500, "w": 1440, "h": 900, "title": "메일 검색 · 조건 검색 · 강조", "expand": "fill", "is_interactive": true },
|
||||
"Thread14.dc.html": { "x": 1520, "y": 30500, "w": 1440, "h": 900, "title": "읽기 화면 · 같은 대화", "expand": "fill", "is_interactive": true },
|
||||
"ListThreads14.dc.html": { "x": 3040, "y": 30500, "w": 1440, "h": 900, "title": "목록 · 대화로 묶어 보기", "expand": "fill", "is_interactive": true }
|
||||
"ListThreads14.dc.html": { "x": 3040, "y": 30500, "w": 1440, "h": 900, "title": "목록 · 대화로 묶어 보기", "expand": "fill", "is_interactive": true },
|
||||
"App1Login.dc.html": { "x": 0, "y": 32000, "w": 908, "h": 1028, "title": "앱 · 로그인 (네 단계 전환)", "is_interactive": true },
|
||||
"App1MailList.dc.html": { "x": 988, "y": 32000, "w": 2222, "h": 956, "title": "앱 · 메일 목록", "is_interactive": true },
|
||||
"App1Reader.dc.html": { "x": 3290, "y": 32000, "w": 1346, "h": 956, "title": "앱 · 읽기", "is_interactive": true },
|
||||
"App1Compose.dc.html": { "x": 4716, "y": 32000, "w": 1784, "h": 956, "title": "앱 · 쓰기", "is_interactive": true },
|
||||
"App1Shell.dc.html": { "x": 6580, "y": 32000, "w": 2352, "h": 976, "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"],
|
||||
"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"],
|
||||
"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 },
|
||||
@@ -65,7 +70,8 @@
|
||||
"phase11": { "x": 0, "y": 18620, "text": "11단계 화면 — 대용량 첨부 (쓰기 · 본문 덩이 · 읽기 · 내려받기 화면 · 설정) — 2026-10-30 확정", "kind": "title1", "maxW": 7520 },
|
||||
"phase12": { "x": 0, "y": 21580, "text": "12단계 화면 — 계정 보안(2단계 인증 · 앱 비밀번호 · 로그인 기록) — 2026-10-31 확정", "kind": "title1", "maxW": 6000 },
|
||||
"phase13": { "x": 0, "y": 25310, "text": "13단계 화면 — 전환 준비(새 비밀번호 · 2단계 필수 · 메일 프로그램 연결 · 알림) — 2026-10-31 확정", "kind": "title1", "maxW": 6000 },
|
||||
"phase14": { "x": 0, "y": 30200, "text": "14단계 화면 — 검색 · 조건 검색 · 강조 · 같은 대화 · 대화로 묶어 보기 — 2026-11-05 확정", "kind": "title1", "maxW": 4480 }
|
||||
"phase14": { "x": 0, "y": 30200, "text": "14단계 화면 — 검색 · 조건 검색 · 강조 · 같은 대화 · 대화로 묶어 보기 — 2026-11-05 확정", "kind": "title1", "maxW": 4480 },
|
||||
"app1": { "x": 0, "y": 31700, "text": "앱 1단계 화면 — 로그인 · 메일 목록 · 읽기 · 쓰기 · 앱 틀 — 2026-11-05 확정(안드로이드 먼저)", "kind": "title1", "maxW": 8932 }
|
||||
},
|
||||
"designSystems": []
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user