generated from ttipo/project-base
docs: 11단계 대용량 첨부 — 계약 4절 · 디자인 보드 다섯 · README
일반 첨부 한도를 넘는 파일을 로그인 없이 받는 링크로 보내는 기능의 계약과 화면 원본이다. 계약 4절은 2026-10-30 확정한 한도(파일 2GB · 메일 10개 · 직원 10GB · 30일)와 조각 올리기 · 악성 검사(ClamAV 실측 판정) · 공개 호스트 분리 · 받기 동시 연결 상한 · 운영 확인을 담는다. 리뷰에서 바꾼 것(경로 대소문자 · 공개 호스트 경로 해석 · 판정 대기 30분 + 1MB 마다 1초 · 전체 상한을 공개 400 · 앱 안 200 으로 나눔)과 알려진 한계도 함께 적었다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,459 @@
|
||||
<!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}
|
||||
.primary{background:#0E7C86;color:#FFFFFF}
|
||||
.primary:hover{background:#0A5F67}
|
||||
.ghost{background:transparent;color:#4A5363}
|
||||
.ghost:hover{background:#F2F4F7;color:#171C26}
|
||||
.icon-btn{background:transparent;color:#4A5363}
|
||||
.icon-btn:hover{background:#F2F4F7;color:#171C26}
|
||||
.card-btn{background:#FFFFFF;color:#0A5F67;border:1px solid #D0D5DD}
|
||||
.card-btn:hover{background:#F2F4F7}
|
||||
.warn-btn{background:#FFFFFF;color:#7A5200;border:1px solid #F0D9A8}
|
||||
.warn-btn:hover{background:#FFF1D6}
|
||||
.danger-btn{background:#FFFFFF;color:#B42318;border:1px solid #FBD7D3}
|
||||
.danger-btn:hover{background:#FEF3F2}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 2360px; box-sizing: border-box; padding: 48px; display: flex; flex-direction: column; gap: 28px; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; max-width: 1060px">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">메일 쓰기 · 대용량 첨부</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">20MB 가 넘는 파일과, 메일에 담은 파일의 합계를 25MB 넘게 만드는 파일은 링크로 보냅니다. 파일은 회사 서버에 올라가고, 보낼 때 서버가 본문에 내려받기 안내를 넣습니다. 받는 사람은 보낸 날부터 30일 동안 내려받습니다. 큰 파일은 조각으로 나눠 올려 끊겨도 올린 만큼은 남습니다. 초안 — 사용자 확인 전.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 800px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="쓰기 화면 아래쪽 — 일반 첨부와 링크 파일이 섞인 때" style="display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px; overflow: hidden">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 32px; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">쓰기 화면 — 첨부 칸 · 보내기 줄</h2>
|
||||
<span style="font-size: 12px; color: #667085">콘텐츠 열 800 · 32px 선 그대로 · 위쪽(받는 사람 · 제목 · 툴바)은 줄였습니다</span>
|
||||
</div>
|
||||
|
||||
<div style="padding: 14px 32px 18px; border-bottom: 1px solid #EEF0F3; font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.75; color: #1F2733">
|
||||
<p style="margin: 0">김민수 과장님, 요청하신 설계도와 현장 영상 보내드립니다.</p>
|
||||
<p style="margin: 0">파일이 커서 링크로 보내니 메일 아래의 주소로 내려받아 주세요.</p>
|
||||
<p style="margin: 0"><br></p>
|
||||
<p style="margin: 0; color: #4A5363">김아라 · 인프라팀 · ARA SYSTEM</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 8px; padding: 10px 32px 14px">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px">
|
||||
<button type="button" class="ghost" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: -6px; padding: 0 10px 0 6px; border: 0; border-radius: 8px; color: #344054; font: inherit; font-weight: 500; cursor: pointer">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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>
|
||||
</button>
|
||||
<span style="font-size: 12px; color: #667085">파일당 최대 20MB · 합계 25MB · 최대 20개 · 더 큰 파일은 링크로 보냅니다 (파일당 2GB · 10개까지)</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px">
|
||||
<h3 style="margin: 0; font-size: 12.5px; font-weight: 600; color: #344054">메일에 담는 파일 2개</h3>
|
||||
<span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">합계 18.1 MB / 25 MB</span>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px">
|
||||
<li style="position: relative; display: flex; align-items: center; gap: 10px; padding: 2px 2px 2px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">견적서_11월.xlsx</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">52 KB</span>
|
||||
<button type="button" class="icon-btn" aria-label="견적서_11월.xlsx 링크로 보내기" aria-describedby="lf-tip" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: #F2F4F7; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button>
|
||||
<button type="button" class="icon-btn" aria-label="견적서_11월.xlsx 첨부 취소" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
<span id="lf-tip" role="tooltip" style="position: absolute; right: 18px; bottom: calc(100% + 4px); z-index: 2; padding: 4px 8px; border-radius: 6px; background: #171C26; color: #FFFFFF; font-size: 12px; white-space: nowrap">링크로 보내기</span>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; gap: 10px; padding: 2px 2px 2px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">현장사진_요약.pdf</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">18 MB</span>
|
||||
<button type="button" class="icon-btn" aria-label="현장사진_요약.pdf 링크로 보내기" title="링크로 보내기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button>
|
||||
<button type="button" class="icon-btn" aria-label="현장사진_요약.pdf 첨부 취소" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 6px">
|
||||
<h3 style="margin: 0; font-size: 12.5px; font-weight: 600; color: #344054">링크로 보내는 파일 3개</h3>
|
||||
<span style="font-size: 12px; color: #667085">받는 사람은 보낸 날부터 30일 동안 내려받습니다 — 오늘 보내면 11월 29일(일)까지</span>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px">
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">설계도_v3.dwg</span>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 올리기 멈춤" title="멈춤" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg></button>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; padding: 0 10px 0 26px; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">
|
||||
<span style="flex: 1 1 auto">올리는 중 · 420 MB / 1.2 GB</span>
|
||||
<span>약 3분 남음</span>
|
||||
</div>
|
||||
<div role="progressbar" aria-label="설계도_v3.dwg 올리는 중" aria-valuemin="0" aria-valuemax="100" aria-valuenow="35" style="height: 3px; margin: 5px 10px 0 26px; border-radius: 2px; background: #E4E7EC"><div style="width: 35%; height: 3px; border-radius: 2px; background: #0E7C86"></div></div>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">현장영상_1029.mp4</span>
|
||||
<button type="button" class="icon-btn" aria-label="현장영상_1029.mp4 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div style="padding: 0 10px 0 26px; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">612 MB · 보안 검사 중 — 끝나지 않아도 보낼 수 있습니다</div>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">회의자료_전체.pptx</span>
|
||||
<button type="button" class="icon-btn" aria-label="회의자료_전체.pptx 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div style="padding: 0 10px 0 26px; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">9.4 MB</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p role="status" style="display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: #4A5363">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
||||
<span>‘회의자료_전체.pptx’(9.4 MB)는 메일에 담으면 합계가 25MB 를 넘어 링크로 보냅니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 32px; border-top: 1px solid #E6E8EC">
|
||||
<div style="display: inline-flex; align-items: stretch; border-radius: 8px; overflow: hidden">
|
||||
<button type="submit" aria-disabled="true" aria-describedby="lf-send-why" style="display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 18px; border: 0; background: #D0D5DD; color: #FFFFFF; font: inherit; font-size: 13.5px; font-weight: 600; cursor: not-allowed"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>보내기</span></button>
|
||||
<span aria-hidden="true" style="width: 1px; background: rgba(255, 255, 255, 0.6)"></span>
|
||||
<button type="button" aria-disabled="true" aria-label="보내기 방법 더 보기" aria-describedby="lf-send-why" style="display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; border: 0; background: #D0D5DD; color: #FFFFFF; cursor: not-allowed"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
|
||||
</div>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; color: #344054; font: inherit; font-weight: 500; cursor: pointer">임시 저장</button>
|
||||
<p id="lf-send-why" style="display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: #4A5363">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
||||
<span>파일 1개를 올리는 중입니다 — 다 올리면 보낼 수 있습니다.</span>
|
||||
</p>
|
||||
<span style="margin-left: auto; font-size: 12px; color: #667085">보내는 사람 김아라 <ara.kim@arasystem.it.kr></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 20px">
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">링크로 바뀌는 때</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>파일 하나가 20MB 를 넘으면 그 파일은 링크로 보냅니다.</li>
|
||||
<li>메일에 담은 파일의 합계가 25MB 를 넘게 되면 그 파일부터 링크로 보냅니다(고른 차례대로). 그때 칸 아래에 한 줄로 알립니다(왼쪽 ⓘ).</li>
|
||||
<li>메일에 담지 못하는 형식(동영상 mp4 · mov, CAD dwg · dxf, 디자인 psd · ai, 7z)은 크기와 상관없이 링크로 보냅니다.</li>
|
||||
<li>메일에 담은 파일도 링크 단추(「링크로 보내기」)로 바꿀 수 있습니다 — 받는 사람이 많거나 받는 서버가 큰 메일을 막을 때. 단추는 이 쓰기 화면에서 고른 파일에만 있습니다 — 전달 원본 · 저장본에서 이어 온 첨부에는 없습니다(처음 판).</li>
|
||||
<li>받는 사람이 사내 직원이어도 같은 규칙입니다.</li>
|
||||
</ul>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">묻는 창은 띄우지 않습니다(국내 메일은 모두 저절로 바꾸고, 칸 안의 글로 충분합니다). 링크 파일을 메일에 담는 쪽으로 되돌리는 단추는 처음 판에 없습니다 — 빼고 다시 고르면 한도 안에서 메일에 담깁니다.</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">링크 파일의 한도 · 모양</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>파일당 2GB · 메일 한 통에 10개 · 직원마다 동시에 보관 10GB(올리는 중 · 임시 저장 포함). 모두 운영 설정입니다.</li>
|
||||
<li>칸 안의 두 묶음 — 「메일에 담는 파일」 · 「링크로 보내는 파일」. 링크 파일만 있거나 일반 첨부만 있으면 묶음 이름은 그 하나만.</li>
|
||||
<li>링크 파일은 아이콘이 링크 모양(청록)이고 줄이 둘입니다 — 이름 · 단추 / 크기 · 상태(12px). 뱃지 · 알약 없이 글자만.</li>
|
||||
<li>✕ 는 「빼기」 — 올리던 것을 멈추고 서버에 올린 조각도 지웁니다.</li>
|
||||
</ul>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">본문 편집기에는 내려받기 안내가 보이지 않습니다 — 보낼 때 서버가 내 글 · 서명 아래, 인용 위에 넣습니다(「본문 덩이」 보드).</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">올리는 중 · 멈춤</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">16MB 조각으로 올립니다 · 남은 시간은 최근 속도로 셉니다</p>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">설계도_v3.dwg</span>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 올리기 멈춤" title="멈춤" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg></button>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; padding: 0 10px 0 26px; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">
|
||||
<span style="flex: 1 1 auto">올리는 중 · 420 MB / 1.2 GB</span>
|
||||
<span>약 3분 남음</span>
|
||||
</div>
|
||||
<div aria-hidden="true" style="height: 3px; margin: 5px 10px 0 26px; border-radius: 2px; background: #E4E7EC"><div style="width: 35%; height: 3px; border-radius: 2px; background: #0E7C86"></div></div>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">설계도_v3.dwg</span>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 이어 올리기" title="이어 올리기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="6 4 20 12 6 20 6 4"></polygon></svg></button>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div style="padding: 0 10px 0 26px; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">멈춤 · 420 MB / 1.2 GB 올림</div>
|
||||
<div aria-hidden="true" style="height: 3px; margin: 5px 10px 0 26px; border-radius: 2px; background: #E4E7EC"><div style="width: 35%; height: 3px; border-radius: 2px; background: #98A2B3"></div></div>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">[멈춤]은 그 파일만 멈추고 [이어 올리기]로 다시 올립니다 — 다른 파일은 계속 올립니다. 처음 몇 초는 남은 시간 대신 "시간 계산 중". 멈춘 파일이 있으면 보내기는 막힌 채입니다. 진행 글은 화면 낭독기에 10% 마다 알립니다.</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">잠깐 끊김 — 저절로 다시</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">망이 끊기거나 PC 가 잠들었다 깨었을 때</p>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">설계도_v3.dwg</span>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 올리기 멈춤" title="멈춤" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg></button>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; padding: 0 10px 0 26px; font-size: 12px; color: #7A5200; font-variant-numeric: tabular-nums">
|
||||
<span style="flex: 1 1 auto">연결이 끊겨 다시 잇는 중… · 420 MB / 1.2 GB 올림</span>
|
||||
</div>
|
||||
<div aria-hidden="true" style="height: 3px; margin: 5px 10px 0 26px; border-radius: 2px; background: #E4E7EC"><div style="width: 35%; height: 3px; border-radius: 2px; background: #0E7C86"></div></div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>2 · 5 · 15 · 30초 간격으로 저절로 다시 잇습니다(실시간 알림의 다시 잇기와 같은 결). 누를 것이 없습니다.</li>
|
||||
<li>서버에 받은 조각은 그대로 — 받지 못한 조각부터 다시 보냅니다. 이어지면 글이 "올리는 중"으로 돌아갑니다.</li>
|
||||
<li>로그인이 끝났으면 세션을 한 번 갱신하고 같은 조각을 다시 보냅니다(지금 요청 규칙). 갱신도 실패하면 세션 만료 창.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">오래 끊김 — [다시 시도]</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">저절로 다시 잇기를 1분 넘게 하지 못했을 때 · 올린 만큼은 남습니다</p>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #FBD7D3; border-radius: 8px; background: #FEF3F2">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #B42318">설계도_v3.dwg</span>
|
||||
<button type="button" class="danger-btn" style="flex: 0 0 auto; min-height: 40px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">다시 시도</button>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; color: #B42318; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<p role="alert" style="margin: 0; padding: 0 10px 0 26px; font-size: 12.5px; color: #B42318">올리지 못하고 멈췄습니다 — 올린 420 MB 는 남아 있습니다.</p>
|
||||
<div aria-hidden="true" style="height: 3px; margin: 5px 10px 0 26px; border-radius: 2px; background: #FBD7D3"><div style="width: 35%; height: 3px; border-radius: 2px; background: #B42318"></div></div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>[다시 시도]는 올린 곳부터 이어서 올립니다. 서버는 마지막 조각을 받은 뒤 24시간 기다립니다 — 그 뒤에는 처음부터 다시 올립니다("처음부터 다시 올립니다" 한 줄).</li>
|
||||
<li>서버가 조각을 거절하면(받은 내용이 깨짐) 그 조각만 다시 보냅니다 — 사용자에게는 보이지 않습니다. 세 번 거듭되면 이 모양으로 멈춥니다.</li>
|
||||
<li>알림은 띄우지 않습니다 — 칸 안의 빨간 줄과 보내기 줄의 까닭으로 충분합니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">다 올린 뒤 — 보안 검사</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">서버가 올리기를 마치는 대로 검사합니다(ClamAV)</p>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">현장영상_1029.mp4</span>
|
||||
<button type="button" class="icon-btn" aria-label="현장영상_1029.mp4 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div style="padding: 0 10px 0 26px; font-size: 12px; color: #667085">612 MB · 보안 검사 중 — 끝나지 않아도 보낼 수 있습니다</div>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">설계도_v3.dwg</span>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div style="padding: 0 10px 0 26px; font-size: 12px; color: #667085">1.2 GB</div>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">협력사_자료모음.7z</span>
|
||||
<button type="button" class="icon-btn" aria-label="협력사_자료모음.7z 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div style="padding: 0 10px 0 26px; font-size: 12px; color: #667085">860 MB · 검사하지 못함 — 암호가 걸린 압축 파일</div>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #FBD7D3; border-radius: 8px; background: #FEF3F2">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #B42318">견적_요청서.zip</span>
|
||||
<button type="button" class="icon-btn" aria-label="견적_요청서.zip 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; color: #B42318; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<p role="alert" style="margin: 0; padding: 0 10px 0 26px; font-size: 12.5px; color: #B42318">위험한 내용이 발견되어 보낼 수 없습니다. 이 파일을 빼 주세요.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">검사가 끝나기 전에 보내도 됩니다 — 받는 사람은 검사가 끝난 뒤 받습니다. 검사가 끝난 깨끗한 파일은 크기만 남습니다. 암호 압축처럼 검사하지 못하는 파일은 막지 않고 글로만 알립니다. 위험이면 보낼 수 없고, 보낸 뒤에 위험이 나오면 그 파일을 막고 알립니다(설정 › 대용량 첨부).</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">한도를 넘을 때 — 올리지 않는다</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">고르는 순간 먼저 검사합니다(지금 첨부 사전 검사와 같은 결)</p>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #FBD7D3; border-radius: 8px; background: #FEF3F2">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #B42318">전체백업_2026.zip</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; color: #B42318; font-variant-numeric: tabular-nums">2.4 GB</span>
|
||||
<button type="button" class="icon-btn" aria-label="전체백업_2026.zip 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; color: #B42318; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<p role="alert" style="margin: 0; padding: 0 10px 0 26px; font-size: 12.5px; color: #B42318">파일 하나는 2GB 까지 보낼 수 있습니다.</p>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #FBD7D3; border-radius: 8px; background: #FEF3F2">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #B42318">회의녹화_11.mp4</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; color: #B42318; font-variant-numeric: tabular-nums">380 MB</span>
|
||||
<button type="button" class="icon-btn" aria-label="회의녹화_11.mp4 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; color: #B42318; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<p role="alert" style="margin: 0; padding: 0 10px 0 26px; font-size: 12.5px; color: #B42318">링크로 보내는 파일은 메일 한 통에 10개까지입니다.</p>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #FBD7D3; border-radius: 8px; background: #FEF3F2">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #B42318">시공영상_전체.mov</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; color: #B42318; font-variant-numeric: tabular-nums">1.9 GB</span>
|
||||
<button type="button" class="icon-btn" aria-label="시공영상_전체.mov 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; color: #B42318; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<p role="alert" style="margin: 0; padding: 0 10px 0 26px; font-size: 12.5px; color: #B42318">대용량 보관 한도(10GB)를 넘어 올릴 수 없습니다. 보내지 않은 파일을 지우거나 링크를 끊으면 바로 공간이 생깁니다. <a href="SettingsLargeFiles.dc.html" style="color: #B42318; font-weight: 600">대용량 첨부 보기</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 10px; border: 1px dashed #D0D5DD; border-radius: 8px">
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #344054">링크로 보내는 파일 2개</span>
|
||||
<span style="font-size: 12px; color: #667085">받는 사람은 보낸 날부터 30일 …</span>
|
||||
<span style="margin-left: auto; font-size: 12px; font-weight: 600; color: #7A5200; font-variant-numeric: tabular-nums">보관 8.4 / 10 GB</span>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">넘는 파일은 빨간 줄로 남고 보내기를 막지 않습니다(그 파일만 빠집니다 — 지금 첨부와 같다). 보관 사용량은 80%를 넘을 때만 링크 묶음 머리 오른쪽에 보입니다(점선 상자). 서버 공간이 모자라면 같은 모양으로 "지금은 서버에 공간이 모자라 올릴 수 없습니다. 잠시 후 다시 시도해 주세요."</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">막힌 형식</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">허용 목록에 있는 형식만 — 실행 파일 · 디스크 이미지는 막습니다</p>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #FBD7D3; border-radius: 8px; background: #FEF3F2">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #B42318">설치파일_v2.exe</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; color: #B42318; font-variant-numeric: tabular-nums">48 MB</span>
|
||||
<button type="button" class="icon-btn" aria-label="설치파일_v2.exe 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; color: #B42318; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<p role="alert" style="margin: 0; padding: 0 10px 0 26px; font-size: 12.5px; color: #B42318">허용되지 않는 파일 형식입니다. 파일을 확인해 주세요.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<dl style="margin: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 10px; font-size: 12.5px">
|
||||
<dt style="color: #667085">메일에 담기</dt><dd style="margin: 0; color: #344054">pdf · doc · docx · xls · xlsx · ppt · pptx · hwp · hwpx · txt · csv · png · jpg · jpeg · gif · webp · zip (지금 그대로)</dd>
|
||||
<dt style="color: #667085">링크로 더</dt><dd style="margin: 0; color: #344054">mp4 · mov · dwg · dxf · psd · ai · 7z</dd>
|
||||
<dt style="color: #667085">막음</dt><dd style="margin: 0; color: #344054">exe · msi · bat · cmd · js · vbs · scr 같은 실행 파일, iso · img · vhd 같은 디스크 이미지, 그 밖의 목록 밖 형식</dd>
|
||||
</dl>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">파일 고르기 창도 두 목록을 합친 형식만 보여 줍니다. 서버도 이름의 형식을 다시 봅니다. 받는 쪽은 형식과 상관없이 늘 "내려받기"로만 받습니다 — 브라우저가 열어 실행하지 않습니다. 칸 아래 문구는 사전의 FILE_001 그대로입니다.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">새로고침 · 창을 닫은 뒤 — 저장본을 다시 열면</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">브라우저는 고른 파일을 스스로 다시 읽지 못합니다</p>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #F0D9A8; border-radius: 8px; background: #FFF7E6">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7A5200" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">현장영상_1029.mp4</span>
|
||||
<button type="button" class="warn-btn" style="flex: 0 0 auto; min-height: 40px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">파일 고르기</button>
|
||||
<button type="button" class="icon-btn" aria-label="현장영상_1029.mp4 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<p style="margin: 0; padding: 0 10px 0 26px; font-size: 12.5px; color: #7A5200">올리다 멈춘 파일 — 같은 파일을 다시 고르면 이어서 올립니다 · 420 MB / 1.2 GB 올림</p>
|
||||
<div aria-hidden="true" style="height: 3px; margin: 5px 10px 0 26px; border-radius: 2px; background: #F0D9A8"><div style="width: 35%; height: 3px; border-radius: 2px; background: #B7791F"></div></div>
|
||||
<p role="alert" style="margin: 4px 0 0; padding: 0 10px 0 26px; font-size: 12.5px; color: #B42318">고른 파일이 멈춘 파일과 다릅니다(이름 · 크기). 같은 파일을 골라 주세요.</p>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">설계도_v3.dwg</span>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<div style="padding: 0 10px 0 26px; font-size: 12px; color: #667085">1.2 GB · 이 임시 저장본에 11월 29일까지 남습니다</div>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #FBD7D3; border-radius: 8px; background: #FEF3F2">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #B42318">회의녹화_09.mp4</span>
|
||||
<button type="button" class="icon-btn" aria-label="회의녹화_09.mp4 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; color: #B42318; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<p role="alert" style="margin: 0; padding: 0 10px 0 26px; font-size: 12.5px; color: #B42318">기간이 지나 지운 파일입니다 — 빼고 다시 올려 주세요.</p>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 8px 10px; border: 1px solid #FBD7D3; border-radius: 8px; background: #FEF3F2">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #B42318">시공도면_v4.dwg</span>
|
||||
<button type="button" class="icon-btn" aria-label="시공도면_v4.dwg 빼기" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; color: #B42318; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<p role="alert" style="margin: 0; padding: 0 10px 0 26px; font-size: 12.5px; color: #B42318">설정 › 대용량 첨부에서 지운 파일입니다 — 빼고 다시 올려 주세요.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">그래서 같은 파일을 한 번 더 골라야 이어서 올립니다(이름 · 크기 · 고친 시각으로 맞춰 봅니다 — 서버는 마지막 조각 뒤 24시간 기다립니다). 다 올린 파일은 임시 저장본에 붙어 올린 날부터 30일 동안 남고, 지나거나 설정 › 대용량 첨부에서 지우면 빨간 줄입니다(글만 다르다). 네이버웍스 모바일처럼 저장하면 큰 파일이 빠지는 일은 없습니다.</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">다 올릴 때까지 보내기를 막는다</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">꺼진 단추는 aria-disabled — 까닭을 단추 옆 글로</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #EEF0F3; border-radius: 10px">
|
||||
<div style="display: inline-flex; align-items: stretch; border-radius: 8px; overflow: hidden">
|
||||
<button type="submit" aria-disabled="true" aria-describedby="lf-send-why-2" style="display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 18px; border: 0; background: #D0D5DD; color: #FFFFFF; font: inherit; font-size: 13.5px; font-weight: 600; cursor: not-allowed"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>보내기</span></button>
|
||||
<span aria-hidden="true" style="width: 1px; background: rgba(255, 255, 255, 0.6)"></span>
|
||||
<button type="button" aria-disabled="true" aria-label="보내기 방법 더 보기" aria-describedby="lf-send-why-2" style="display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; border: 0; background: #D0D5DD; color: #FFFFFF; cursor: not-allowed"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
|
||||
</div>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; color: #344054; font: inherit; font-weight: 500; cursor: pointer">임시 저장</button>
|
||||
<p id="lf-send-why-2" style="flex: 1 1 100%; margin: 0; font-size: 12.5px; color: #4A5363">파일 2개를 올리는 중입니다 — 다 올리면 보낼 수 있습니다.</p>
|
||||
</div>
|
||||
<dl style="margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px"><dt style="color: #667085">올리는 중 · 다시 잇는 중</dt><dd style="margin: 0; color: #344054">"파일 2개를 올리는 중입니다 — 다 올리면 보낼 수 있습니다."</dd></div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px"><dt style="color: #667085">멈춤 · 오래 끊김 · 새로고침 뒤 멈춘 파일</dt><dd style="margin: 0; color: #344054">"다 올리지 못한 파일이 있습니다 — 이어 올리거나 빼 주세요."</dd></div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px"><dt style="color: #667085">위험 · 지운 파일(기간 지남 · 설정에서 지움)</dt><dd style="margin: 0; color: #344054">"보낼 수 없는 파일이 있습니다 — 빨간 줄의 파일을 빼 주세요."</dd></div>
|
||||
</dl>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">[보내기]와 ▾ 는 초점을 받습니다. 누르거나 Ctrl+Enter 를 치면 보내지 않고 까닭 글을 화면 낭독기에 읽어 줍니다(role=status). 「예약 발송…」도 같은 까닭으로 막힙니다. 임시 저장은 그대로 됩니다 — 올리는 중인 파일도 저장본에 남습니다(왼쪽 카드).</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">나가기 확인 — 올리는 중인 파일</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">앱 안에서 다른 화면으로 갈 때 · 쓰기 화면 닫기(✕)</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 22px 16px; border-radius: 10px; background: rgba(16, 24, 28, 0.08)">
|
||||
<div role="alertdialog" aria-modal="true" aria-labelledby="lf-leave-title" aria-describedby="lf-leave-message" style="width: 100%; max-width: 360px; box-sizing: border-box; padding: 20px 20px 16px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14); display: flex; flex-direction: column; gap: 8px">
|
||||
<h3 id="lf-leave-title" style="margin: 0; font-size: 15px; font-weight: 700">올리는 중인 파일이 있습니다</h3>
|
||||
<p id="lf-leave-message" style="margin: 0; color: #4A5363">이 화면을 나가면 올리기가 멈춥니다. 임시보관함에서 이 메일을 다시 열고 같은 파일을 고르면 이어서 올립니다.</p>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; outline: 2px solid #0E7C86; outline-offset: 2px">계속 쓰기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">나가기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">처음 초점은 [계속 쓰기] · Esc 도 같습니다(지금 나가기 확인과 같은 모양). 떠나기 전 임시 저장은 지금처럼 먼저 하고, 올리는 중인 파일은 저장본에 "올리다 멈춘 파일"로 남깁니다. 탭을 닫거나 새로 고치면 브라우저가 묻습니다. 다 올린 뒤에는 이 확인이 없습니다.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2360}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,213 @@
|
||||
<!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}
|
||||
.ghost{background:transparent;color:#4A5363}
|
||||
.ghost:hover{background:#F2F4F7;color:#171C26}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 2020px; box-sizing: border-box; padding: 48px; display: flex; flex-direction: column; gap: 28px; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; max-width: 1060px">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">본문 덩이 — 바깥 메일 프로그램에서</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">링크 파일이 있는 메일은 보낼 때 서버가 본문에 내려받기 안내(덩이)를 넣습니다. 자리는 내 글 · 서명 아래, 인용 위입니다. 서식 본문(HTML)과 텍스트 대체 본문에 같은 내용이 들어갑니다. 우리 웹메일 안에서는 링크 주인이 보낸 메일이면 덩이를 접고 첨부 칸에 첨부처럼 보입니다(「읽기 화면 · 대용량 첨부」 보드). 초안 — 사용자 확인 전.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 820px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="바깥 메일 프로그램에서 받은 답장 메일" style="display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px; overflow: hidden">
|
||||
<div style="display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 20px; background: #EEF0F3; color: #4A5363; font-size: 12px">
|
||||
<span style="font-weight: 600">바깥 메일 프로그램</span>
|
||||
<span>(예: Gmail · Outlook · 네이버 메일 — 받는 사람 김민수, 거래처)</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px; padding: 18px 28px 14px; border-bottom: 1px solid #EEF0F3; font-family: system-ui, -apple-system, 'Segoe UI', 'Malgun Gothic', sans-serif">
|
||||
<h2 style="margin: 0 0 6px; font-size: 18px; font-weight: 600; color: #1F1F1F">Re: 11월 현장 점검 자료 요청</h2>
|
||||
<span style="font-size: 13px; color: #1F1F1F"><strong style="font-weight: 600">김아라</strong> <ara.kim@arasystem.it.kr></span>
|
||||
<span style="font-size: 12.5px; color: #5F6368">받는 사람: 김민수 <minsu.kim@hanbit-partners.co.kr> · 2026. 10. 30. 오후 2:15</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; padding: 20px 28px 28px; font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.75; color: #1F2733">
|
||||
<p style="margin: 0">김민수 과장님, 안녕하세요.</p>
|
||||
<p style="margin: 0"><br></p>
|
||||
<p style="margin: 0">요청하신 설계도와 현장 영상 보내드립니다.</p>
|
||||
<p style="margin: 0">파일이 커서 아래 주소로 내려받으실 수 있습니다.</p>
|
||||
<p style="margin: 0"><br></p>
|
||||
<p style="margin: 0">김아라 · 인프라팀 · ARA SYSTEM</p>
|
||||
<p style="margin: 0">010-1234-5678</p>
|
||||
|
||||
<table aria-label="대용량 첨부 안내 — 서버가 넣은 덩이" style="margin: 16px 0 0; border-collapse: collapse; border: 1px solid #D0D5DD; background: #FFFFFF">
|
||||
<tbody>
|
||||
<tr><td colspan="2" style="padding: 12px 16px 2px; font-size: 14px; font-weight: 700; color: #171C26">대용량 첨부 2개 (합계 1.8 GB)</td></tr>
|
||||
<tr><td colspan="2" style="padding: 0 16px 8px; font-size: 13px; color: #344054">2026년 11월 29일(일)까지 내려받을 수 있습니다 (한국 시간)</td></tr>
|
||||
<tr><td style="padding: 0 0 0 16px; font-size: 13px; color: #171C26">설계도_v3.dwg</td><td style="padding: 0 16px 0 16px; font-size: 13px; color: #667085; text-align: right; white-space: nowrap">1.2 GB</td></tr>
|
||||
<tr><td style="padding: 0 0 0 16px; font-size: 13px; color: #171C26">현장영상_1029.mp4</td><td style="padding: 0 16px 0 16px; font-size: 13px; color: #667085; text-align: right; white-space: nowrap">612 MB</td></tr>
|
||||
<tr><td colspan="2" style="padding: 10px 16px 0; font-size: 13px; color: #171C26">내려받기 <a href="SharePage.dc.html" style="color: #0E7C86">https://files.arasystem.it.kr/s/Qx7mK2vR9pL4wT8nB3cF6hJ1dS5gA0eY2uI7oP9kZ3x</a></td></tr>
|
||||
<tr><td colspan="2" style="padding: 6px 16px 0; font-size: 12px; color: #667085">내려받을 때 로그인이나 비밀번호를 묻지 않습니다.</td></tr>
|
||||
<tr><td colspan="2" style="padding: 2px 16px 12px; font-size: 12px; color: #667085">Large files: download by Nov 29, 2026 (KST) — no login or password needed.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<blockquote style="margin: 24px 0 0; padding: 2px 0 2px 14px; border-left: 2px solid #D0D5DD; color: #4A5363">
|
||||
<div style="margin: 0 0 12px; font-size: 12.5px; line-height: 1.6">
|
||||
<p style="margin: 0; font-weight: 600">원본 메일</p>
|
||||
<table style="border-collapse: collapse; font-size: 12.5px; line-height: 1.6">
|
||||
<tbody>
|
||||
<tr><th scope="row" style="padding: 0 12px 0 0; text-align: left; vertical-align: top; font-weight: 400; color: #667085; white-space: nowrap">보낸 사람</th><td style="padding: 0">김민수 <minsu.kim@hanbit-partners.co.kr></td></tr>
|
||||
<tr><th scope="row" style="padding: 0 12px 0 0; text-align: left; vertical-align: top; font-weight: 400; color: #667085; white-space: nowrap">날짜</th><td style="padding: 0">2026. 10. 29. (목) 오후 5:02</td></tr>
|
||||
<tr><th scope="row" style="padding: 0 12px 0 0; text-align: left; vertical-align: top; font-weight: 400; color: #667085; white-space: nowrap">제목</th><td style="padding: 0">11월 현장 점검 자료 요청</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p style="margin: 0">김아라 매니저님, 11월 현장 점검 자료(설계도 · 현장 영상)를 보내 주실 수 있을까요?</p>
|
||||
<p style="margin: 0">용량이 크면 나눠서 보내 주셔도 됩니다.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">덩이에 들어가는 것 (위에서부터)</h2>
|
||||
<ol style="margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li><strong style="font-weight: 600">제목 줄</strong> — "대용량 첨부 2개 (합계 1.8 GB)" 14px 굵게</li>
|
||||
<li><strong style="font-weight: 600">기간 줄</strong> — "2026년 11월 29일(일)까지 내려받을 수 있습니다 (한국 시간)". 보낸 때(예약 발송은 보낼 시각)부터 30일째 날 23:59:59 까지, 받는 사람 모두 같은 날</li>
|
||||
<li><strong style="font-weight: 600">파일 줄</strong> — 이름 · 크기(회색), 파일마다 한 줄. 이름은 링크가 아닙니다 — 메일 한 통에 링크가 하나라 모두 같은 화면으로 갑니다</li>
|
||||
<li><strong style="font-weight: 600">주소 줄</strong> — "내려받기" + 주소를 글자 그대로 보이는 링크. 단축 주소 · 단추 모양은 쓰지 않습니다(받는 사람이 회사 도메인을 확인할 수 있게)</li>
|
||||
<li><strong style="font-weight: 600">안내 줄</strong> — "내려받을 때 로그인이나 비밀번호를 묻지 않습니다." 12px 회색</li>
|
||||
<li><strong style="font-weight: 600">영어 한 줄</strong> — 거래처가 외국 회사일 수 있어서</li>
|
||||
</ol>
|
||||
<h3 style="margin: 4px 0 0; font-size: 13px; font-weight: 700">모양</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>테두리 1px #D0D5DD 상자 + 글자. 안 여백 12 · 16. 뱃지 · 알약 · 그림 · 아이콘 · 단추 없음(그림은 받는 쪽에서 외부 이미지로 막힙니다)</li>
|
||||
<li>보내는 서식의 허용 목록 안에서만 — table · td(colspan) · a, style 은 테두리 · 여백 · 색 · 글자 크기 · 굵기 · 정렬 · 줄바꿈 막기. 둥근 모서리가 허용 목록에 없어 모서리는 곧습니다</li>
|
||||
<li>글꼴은 본문과 같은 맑은 고딕, 글자 14 · 13 · 12. 상자 폭은 내용에 맞춥니다 — 주소 줄(약 75자)이 가장 깁니다. 좁은 화면에서는 받는 프로그램이 줄을 끊습니다</li>
|
||||
</ul>
|
||||
<h3 style="margin: 4px 0 0; font-size: 13px; font-weight: 700">서버가 넣는다</h3>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>정화 · 서명 그림 · 중복 확인을 마친 뒤에 넣습니다 — 쓰기 화면의 편집기에는 보이지 않고, 쓰는 사람은 첨부 칸의 링크 파일로 봅니다</li>
|
||||
<li>자리는 쓰기 화면이 알려 준 내 글과 인용의 경계 — 내 글 · 서명 아래, 인용 위. 인용이 없으면 맨 끝</li>
|
||||
<li>보이지 않는 표시 <code style="font-family: Consolas, 'Courier New', monospace; font-size: 12px"><!--ara-large-files:v1--></code> … <code style="font-family: Consolas, 'Courier New', monospace; font-size: 12px"><!--/ara-large-files--></code> — 보내는 정화가 주석을 지우므로 사용자가 흉내 낼 수 없습니다</li>
|
||||
<li>보내기 취소로 되돌린 메일은 덩이를 떼고 쓰기 화면의 링크 파일로 돌려줍니다(다시 보내면 새 링크)</li>
|
||||
<li>나중에 링크를 끊어도 본문의 날짜 · 주소는 그대로입니다 — 누르면 내려받기 화면이 "공유 멈춤"을 보입니다</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">텍스트 대체 본문 — 같은 내용</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">글자로만 읽는 메일 프로그램 · 미리 보기 · 인쇄에 쓰인다</p>
|
||||
</div>
|
||||
<pre style="margin: 0; padding: 16px 18px; border: 1px solid #EEF0F3; border-radius: 8px; background: #FBFBFC; font-family: Consolas, 'D2Coding', 'Courier New', 'Malgun Gothic', monospace; font-size: 12.5px; line-height: 1.65; color: #1F2733; white-space: pre-wrap; word-break: break-all">김민수 과장님, 안녕하세요.
|
||||
|
||||
요청하신 설계도와 현장 영상 보내드립니다.
|
||||
파일이 커서 아래 주소로 내려받으실 수 있습니다.
|
||||
|
||||
김아라 · 인프라팀 · ARA SYSTEM
|
||||
010-1234-5678
|
||||
|
||||
----------------------------------------
|
||||
대용량 첨부 2개 (합계 1.8 GB)
|
||||
2026년 11월 29일(일)까지 내려받을 수 있습니다 (한국 시간)
|
||||
- 설계도_v3.dwg (1.2 GB)
|
||||
- 현장영상_1029.mp4 (612 MB)
|
||||
내려받기: https://files.arasystem.it.kr/s/Qx7mK2vR9pL4wT8nB3cF6hJ1dS5gA0eY2uI7oP9kZ3x
|
||||
내려받을 때 로그인이나 비밀번호를 묻지 않습니다.
|
||||
Large files: download by Nov 29, 2026 (KST) — no login or password needed.
|
||||
----------------------------------------
|
||||
|
||||
> 원본 메일
|
||||
> 보낸 사람 | 김민수 <minsu.kim@hanbit-partners.co.kr>
|
||||
> 날짜 | 2026. 10. 29. (목) 오후 5:02
|
||||
> 제목 | 11월 현장 점검 자료 요청
|
||||
> 김아라 매니저님, 11월 현장 점검 자료(설계도 · 현장 영상)를 보내 주실 수 있을까요?</pre>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>자리 · 내용은 HTML 덩이와 같습니다. 위아래를 대시 줄로 가르고, 파일은 "- 이름 (크기)", 주소는 글자 그대로(텍스트 프로그램이 알아서 링크로 만듭니다)</li>
|
||||
<li>되돌린 초안에서 뗄 때는 주소의 토큰으로 그 링크의 덩이인지 확인한 뒤 뗍니다 — 사용자가 같은 글을 쳐 넣었어도 지우지 않게</li>
|
||||
<li>덩이를 넣은 뒤 본문 한도(서식 2,000,000바이트 · 글자 100,000자)를 다시 봅니다 — 쓰기 화면은 덩이 몫(파일 10개면 수 KB)을 남겨 두고 맞춥니다</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 20px">
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">답장 · 전달할 때 — 인용 속에 남은 덩이</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">우리 웹메일의 답장 쓰기 화면 · 박서준이 김아라의 메일에 답장</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; border: 1px solid #EEF0F3; border-radius: 10px; overflow: hidden">
|
||||
<div style="padding: 12px 20px 16px; font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.75; color: #1F2733">
|
||||
<p style="margin: 0">아라님, 받았습니다. 금요일까지 검토하겠습니다.</p>
|
||||
<p style="margin: 0"><br></p>
|
||||
<p style="margin: 0">박서준 · 품질팀</p>
|
||||
<blockquote style="margin: 16px 0 0; padding: 2px 0 2px 14px; border-left: 2px solid #D0D5DD; color: #4A5363">
|
||||
<div style="margin: 0 0 10px; font-size: 12.5px; line-height: 1.6">
|
||||
<p style="margin: 0; font-weight: 600">원본 메일</p>
|
||||
<table style="border-collapse: collapse; font-size: 12.5px; line-height: 1.6">
|
||||
<tbody>
|
||||
<tr><th scope="row" style="padding: 0 12px 0 0; text-align: left; font-weight: 400; color: #667085; white-space: nowrap">보낸 사람</th><td style="padding: 0">김아라 <ara.kim@arasystem.it.kr></td></tr>
|
||||
<tr><th scope="row" style="padding: 0 12px 0 0; text-align: left; font-weight: 400; color: #667085; white-space: nowrap">제목</th><td style="padding: 0">11월 현장 점검 자료 보내드립니다</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p style="margin: 0">서준님, 현장 점검 자료입니다. 설계도와 영상은 링크로 보냅니다.</p>
|
||||
<table style="margin: 10px 0 0; border-collapse: collapse; border: 1px solid #D0D5DD; font-size: 12.5px">
|
||||
<tbody>
|
||||
<tr><td colspan="2" style="padding: 8px 12px 0; font-weight: 700; color: #171C26">대용량 첨부 2개 (합계 1.8 GB)</td></tr>
|
||||
<tr><td colspan="2" style="padding: 0 12px 4px; color: #344054">2026년 11월 29일(일)까지 내려받을 수 있습니다 (한국 시간)</td></tr>
|
||||
<tr><td style="padding: 0 0 0 12px; color: #171C26">설계도_v3.dwg</td><td style="padding: 0 12px 0 12px; color: #667085; text-align: right">1.2 GB</td></tr>
|
||||
<tr><td style="padding: 0 0 0 12px; color: #171C26">현장영상_1029.mp4</td><td style="padding: 0 12px 0 12px; color: #667085; text-align: right">612 MB</td></tr>
|
||||
<tr><td colspan="2" style="padding: 4px 12px 8px; color: #171C26">내려받기 <a href="SharePage.dc.html" style="color: #0E7C86">https://files.arasystem.it.kr/s/Qx7mK2…</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 20px 10px; border-top: 1px solid #EEF0F3">
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: #344054; font-weight: 500"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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="font-size: 12px; color: #667085">첨부 없음 — 답장은 링크 파일을 다시 싣지 않습니다</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>답장은 링크 파일을 다시 싣지 않습니다(일반 첨부와 같은 관례). 인용 속 덩이는 표째 글로 남고, 그 링크는 처음 기간까지 열립니다</li>
|
||||
<li>인용으로 옮길 때 보이지 않는 표시는 지워집니다 — 이 답장을 받는 쪽에서는 이 덩이가 그냥 인용된 글입니다(첨부 칸으로 올라오지 않음)</li>
|
||||
<li>전달도 같습니다 — 원래 링크는 인용 속 글로 함께 가고 첨부 칸에 다시 싣지 않습니다. 쓰기 화면은 칸 아래 한 줄로만 알립니다("원래 메일의 대용량 첨부 2개는 인용 속 링크로 함께 갑니다 — 11월 29일까지")</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">바깥 사람의 답장을 우리 웹메일에서 읽을 때</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">김민수의 메일 프로그램이 김아라의 메일을 통째로 인용했다</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border: 1px solid #EEF0F3; border-radius: 10px; font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.7; color: #1F2733">
|
||||
<p style="margin: 0">잘 받았습니다. 감사합니다.</p>
|
||||
<p style="margin: 6px 0 0; font-size: 12.5px; color: #667085">2026년 10월 30일 (금) 오후 2:15, 김아라 <ara.kim@arasystem.it.kr>님이 작성:</p>
|
||||
<div style="padding: 2px 0 2px 12px; border-left: 2px solid #C9CDD3; color: #4A5363; font-size: 13px">
|
||||
<p style="margin: 0">김민수 과장님, 안녕하세요. 요청하신 설계도와 …</p>
|
||||
<p style="margin: 6px 0 0; padding: 6px 10px; border: 1px solid #D0D5DD">대용량 첨부 2개 (합계 1.8 GB) · 2026년 11월 29일(일)까지 … 내려받기 <span style="color: #0E7C86">https://files.arasystem.it.kr/s/Qx7mK2…</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">인용 속 덩이는 본문 그대로 둡니다 — 첨부 칸으로 올리지 않고 접지도 않습니다. 첨부처럼 올리는 것은 링크 주인이 그 메일의 보낸 사람일 때뿐입니다(이 메일은 김민수가 보냈고 링크 주인은 김아라).</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2020}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,296 @@
|
||||
<!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}
|
||||
.primary{background:#0E7C86;color:#FFFFFF}
|
||||
.primary:hover{background:#0A5F67}
|
||||
.ghost{background:transparent;color:#4A5363}
|
||||
.ghost:hover{background:#F2F4F7;color:#171C26}
|
||||
.danger-solid{background:#B42318;color:#FFFFFF}
|
||||
.danger-solid:hover{background:#912018}
|
||||
.tool{background:transparent;color:#344054}
|
||||
.tool:hover{background:#F2F4F7;color:#171C26}
|
||||
.icon-btn{background:transparent;color:#344054}
|
||||
.icon-btn:hover{background:#F2F4F7;color:#171C26}
|
||||
.line-btn{background:#FFFFFF;color:#344054;border:1px solid #D0D5DD}
|
||||
.line-btn:hover{background:#F2F4F7}
|
||||
.line-danger{background:#FFFFFF;color:#B42318;border:1px solid #D0D5DD}
|
||||
.line-danger:hover{background:#FEF3F2}
|
||||
.fold{background:#F6F7F9;color:#4A5363}
|
||||
.fold:hover{background:#EEF0F3}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 1940px; box-sizing: border-box; padding: 48px; display: flex; flex-direction: column; gap: 28px; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; max-width: 1060px">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">읽기 화면 · 대용량 첨부</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">링크 주인이 그 메일의 보낸 사람이면 링크 파일을 첨부 칸에 첨부처럼 보이고, 본문의 덩이는 접어 둡니다. 바깥 사람 답장의 인용 속 링크 · 전달된 원래 링크 · 비슷하게 꾸민 덩이(서버에 없는 링크)는 그냥 본문입니다. 보낸 사람 자신에게는 받은 수와 [링크 복사] · [링크 끊기]가 더해집니다. 초안 — 사용자 확인 전.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 860px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="읽기 화면 — 사내 받는 사람" style="display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px; overflow: hidden">
|
||||
<div style="display: flex; align-items: center; gap: 2px; min-height: 52px; box-sizing: border-box; padding: 4px 24px; border-bottom: 1px solid #EEF0F3">
|
||||
<button type="button" class="tool" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"></polyline><path d="M20 18v-2a4 4 0 0 0-4-4H4"></path></svg><span>답장</span></button>
|
||||
<button type="button" class="tool" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer"><span>전체 답장</span></button>
|
||||
<button type="button" class="tool" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 17 20 12 15 7"></polyline><path d="M4 18v-2a4 4 0 0 1 4-4h12"></path></svg><span>전달</span></button>
|
||||
<span aria-hidden="true" style="width: 1px; height: 20px; margin: 0 8px; background: #E6E8EC"></span>
|
||||
<button type="button" class="tool" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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></button>
|
||||
<button type="button" class="tool" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; color: #B42318; font: inherit; font-weight: 500; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg><span>삭제</span></button>
|
||||
<button type="button" class="tool" aria-label="더 보기" style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button>
|
||||
</div>
|
||||
|
||||
<article aria-labelledby="rl-subject" style="display: flex; flex-direction: column; gap: 18px; max-width: 800px; box-sizing: border-box; padding: 20px 32px 32px">
|
||||
<h2 id="rl-subject" style="margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">11월 현장 점검 자료 보내드립니다</h2>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 600">김</span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
|
||||
<span style="font-size: 13.5px; font-weight: 600">김아라</span>
|
||||
<span style="font-size: 12.5px; color: #667085">ara.kim@arasystem.it.kr</span>
|
||||
<span style="margin-left: auto; font-size: 12.5px; color: #667085; white-space: nowrap; font-variant-numeric: tabular-nums">2026. 10. 30. (금) 오후 2:15</span>
|
||||
</div>
|
||||
<span style="font-size: 12.5px; color: #4A5363">받는 사람 박서준 <seojun.park@arasystem.it.kr></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; max-width: 680px; font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.75; color: #1F2733">
|
||||
<p style="margin: 0">서준님, 현장 점검 자료입니다.</p>
|
||||
<p style="margin: 0">견적서는 첨부했고, 설계도와 영상은 용량이 커서 링크로 보냅니다.</p>
|
||||
<p style="margin: 0"><br></p>
|
||||
<p style="margin: 0">김아라 · 인프라팀 · ARA SYSTEM</p>
|
||||
<button type="button" class="fold" aria-expanded="false" style="display: flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 40px; padding: 0 12px 0 10px; border: 0; border-radius: 6px; font-family: Pretendard, -apple-system, 'Malgun Gothic', sans-serif; font-size: 12.5px; text-align: left; cursor: pointer">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
||||
<span style="flex: 1 1 auto">본문의 대용량 첨부 안내 (접어 둠) — 파일은 아래 첨부 칸에 있습니다</span>
|
||||
<span style="flex: 0 0 auto; color: #0A5F67; font-weight: 600">펼치기</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby="rl-att-title" style="display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid #EEF0F3">
|
||||
<h3 id="rl-att-title" style="margin: 0; font-size: 12.5px; font-weight: 600; color: #4A5363">첨부 파일 3개</h3>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px">
|
||||
<li style="display: flex; align-items: center; gap: 10px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500">견적서_11월.xlsx</span><span style="font-size: 12px; color: #667085">52 KB</span></div>
|
||||
<button type="button" class="icon-btn" aria-label="견적서_11월.xlsx 다운로드" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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: 10px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500">설계도_v3.dwg</span><span style="font-size: 12px; color: #667085">1.2 GB · 11월 29일까지</span></div>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 다운로드 — 11월 29일까지" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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: 10px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500">현장영상_1029.mp4</span><span style="font-size: 12px; color: #667085">612 MB · 11월 29일까지</span></div>
|
||||
<button type="button" class="icon-btn" aria-label="현장영상_1029.mp4 다운로드 — 11월 29일까지" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 20px">
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">사내 받는 사람에게</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>링크 파일은 첨부 칸에 일반 첨부와 함께 — 이름 아래 "크기 · 11월 29일까지"(끝나는 날, 한국 시간). 아이콘 · 단추 모양은 일반 첨부와 같습니다</li>
|
||||
<li>[다운로드]는 내려받기 화면을 거치지 않고 바로 받습니다. 받은 수에 들어갑니다(보낸 사람 자신은 빼고)</li>
|
||||
<li>「첨부 파일 N개」는 메일에 담긴 첨부와 링크 파일을 합한 수입니다</li>
|
||||
<li>첨부처럼 올리는 조건 — 주소가 우리 내려받기 주소이고 서버에 있는 링크이며, <strong style="font-weight: 600">링크 주인이 그 메일의 보낸 사람일 때만</strong>. 바깥 사람 답장의 인용 속 링크 · 전달된 원래 링크는 본문 글로 둡니다</li>
|
||||
<li>목록의 클립 아이콘은 지금처럼 메일에 담긴 첨부만 봅니다 — 링크 파일만 있는 메일은 처음 판에 클립이 없습니다</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">덩이를 펼치면</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">본문 틀 안의 접기 줄 — 바깥 사람이 보는 그대로</p>
|
||||
</div>
|
||||
<button type="button" class="fold" aria-expanded="true" style="display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 10px; border: 0; border-radius: 6px; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
<span style="flex: 1 1 auto">본문의 대용량 첨부 안내</span>
|
||||
<span style="flex: 0 0 auto; color: #0A5F67; font-weight: 600">접기</span>
|
||||
</button>
|
||||
<table style="border-collapse: collapse; border: 1px solid #D0D5DD; font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; font-size: 12.5px; line-height: 1.6">
|
||||
<tbody>
|
||||
<tr><td colspan="2" style="padding: 8px 12px 0; font-weight: 700; color: #171C26">대용량 첨부 2개 (합계 1.8 GB)</td></tr>
|
||||
<tr><td colspan="2" style="padding: 0 12px 4px; color: #344054">2026년 11월 29일(일)까지 내려받을 수 있습니다 (한국 시간)</td></tr>
|
||||
<tr><td style="padding: 0 0 0 12px">설계도_v3.dwg</td><td style="padding: 0 12px; color: #667085; text-align: right">1.2 GB</td></tr>
|
||||
<tr><td style="padding: 0 0 0 12px">현장영상_1029.mp4</td><td style="padding: 0 12px; color: #667085; text-align: right">612 MB</td></tr>
|
||||
<tr><td colspan="2" style="padding: 4px 12px 8px">내려받기 <a href="SharePage.dc.html">https://files.arasystem.it.kr/s/Qx7mK2…</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">접기 줄은 본문 틀(격리된 iframe) 안에서 스크립트 없이 열고 닫힙니다. 높이 40, 글 12.5px. 메일을 다시 열면 다시 접혀 있습니다. 인쇄 화면은 펼친 채로 인쇄합니다(종이에는 주소가 있어야 하므로).</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 860px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="읽기 화면 — 보낸 사람 자신(보낸편지함)" style="display: flex; flex-direction: column; gap: 12px; padding: 20px 32px 24px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">보낸 사람 자신 — 보낸편지함에서 같은 메일</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">첨부 칸만 보입니다 · 위쪽(머리 · 본문 · 접기 줄)은 받는 사람과 같습니다</p>
|
||||
</div>
|
||||
<section aria-labelledby="rl-sent-att" style="display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid #EEF0F3">
|
||||
<h3 id="rl-sent-att" style="margin: 0; font-size: 12.5px; font-weight: 600; color: #4A5363">첨부 파일 3개</h3>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px">
|
||||
<li style="display: flex; align-items: center; gap: 10px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500">견적서_11월.xlsx</span><span style="font-size: 12px; color: #667085">52 KB</span></div>
|
||||
<button type="button" class="icon-btn" aria-label="견적서_11월.xlsx 다운로드" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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: 10px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500">설계도_v3.dwg</span><span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">1.2 GB · 3회 받음 · 11월 29일까지</span></div>
|
||||
<button type="button" class="icon-btn" aria-label="설계도_v3.dwg 다운로드" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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: 10px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500">현장영상_1029.mp4</span><span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">612 MB · 아직 받지 않음 · 11월 29일까지</span></div>
|
||||
<button type="button" class="icon-btn" aria-label="현장영상_1029.mp4 다운로드" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 0 0">
|
||||
<span id="rl-link-note" style="flex: 1 1 320px; font-size: 12.5px; color: #4A5363">링크로 보낸 파일 2개 — 받는 사람 모두 같은 링크로 받습니다. 끊으면 둘 다 받을 수 없습니다.</span>
|
||||
<span style="flex: 0 0 auto; display: inline-flex; gap: 6px">
|
||||
<button type="button" class="line-btn" style="min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">링크 복사</button>
|
||||
<button type="button" class="line-danger" aria-describedby="rl-link-note" style="min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">링크 끊기</button>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>받은 수는 실제로 받기 시작한 수입니다 — 화면 열기 · 이어 받기 · 내가 받은 것은 세지 않습니다. 누가 받았는지는 남기지 않습니다</li>
|
||||
<li>[링크 복사] · [링크 끊기]는 메일에 한 번(36 — 차단한 주소의 [차단 풀기]와 같은 밀도 예외, 새 토큰 없음). 링크가 메일 한 통에 하나라 파일마다 두지 않습니다</li>
|
||||
<li>[링크 복사]는 이 메일 본문의 덩이에서 주소를 읽어 복사합니다 — 알림 "링크를 복사했습니다."(못 하면 "링크를 복사하지 못했습니다."). 설정 › 대용량 첨부에는 없습니다(서버는 링크를 해시로만 압니다)</li>
|
||||
<li>사내 받는 사람에게는 이 줄과 받은 수가 없습니다. 보낸편지함이 아니어도(내가 나에게 보낸 메일 등) 링크 주인이면 보입니다</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; justify-content: center; padding: 24px 16px; border-radius: 12px; background: rgba(16, 24, 28, 0.08)">
|
||||
<div role="alertdialog" aria-modal="true" aria-labelledby="rl-cut-title" aria-describedby="rl-cut-message" style="width: 400px; box-sizing: border-box; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14); display: flex; flex-direction: column; gap: 10px">
|
||||
<h3 id="rl-cut-title" style="margin: 0; font-size: 15px; font-weight: 700">대용량 첨부 링크를 끊을까요?</h3>
|
||||
<p id="rl-cut-message" style="margin: 0; color: #4A5363">받는 사람 모두 이 메일의 파일 2개(설계도_v3.dwg · 현장영상_1029.mp4)를 더는 내려받을 수 없습니다. 이미 받은 파일은 되돌릴 수 없고, 끊은 링크는 다시 열 수 없습니다.</p>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="danger-solid" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">링크 끊기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; outline: 2px solid #0E7C86; outline-offset: 2px">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">되돌릴 수 없는 일이라 처음 초점은 「취소」(파란 고리) · Esc 도 취소입니다. 끊으면 알림 하나 — 되돌리기 단추는 없습니다:</p>
|
||||
<div role="status" style="display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; font-weight: 500">링크를 끊었습니다. 받는 사람은 더 이상 내려받을 수 없습니다.</span>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">끊은 뒤 첨부 칸은 아래 "공유 멈춤" 모양이 되고, 쓰던 보관 공간은 바로 비워집니다. 같은 확인 창을 설정 › 메일 › 대용량 첨부에서도 씁니다(창 글에 메일 제목).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">기간 지남 · 공유 멈춤</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">흐린 글자 + 까닭 · 내려받기 단추 없음</p>
|
||||
</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: 10px; min-height: 44px; padding: 4px 12px 4px 8px; border: 1px solid #EEF0F3; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F6F7F9; color: #98A2B3"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500; color: #667085">설계도_v3.dwg</span><span style="font-size: 12px; color: #667085">1.2 GB · 기간 지남 — 11월 29일까지였습니다</span></div>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 8px; border: 1px solid #EEF0F3; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F6F7F9; color: #98A2B3"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500; color: #667085">현장영상_1029.mp4</span><span style="font-size: 12px; color: #667085">612 MB · 공유 멈춤 — 보낸 사람이 링크를 끊었습니다</span></div>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 8px; border: 1px solid #EEF0F3; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F6F7F9; color: #98A2B3"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500; color: #667085">설계도_v3.dwg</span><span style="font-size: 12px; color: #667085">1.2 GB · 3회 받음 · 공유 멈춤 — 10월 31일에 끊었습니다</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">셋째 줄은 보낸 사람 자신이 본 모양입니다(받은 수는 남습니다). 흐리게는 투명도가 아니라 글자색 #667085 · 아이콘 #98A2B3(대비 4.5:1 이상). 본문의 접기 줄은 그대로 둡니다. 끝난 뒤 90일이 지나면 서버가 그 링크를 잊어 첨부 칸에서 빠지고 덩이는 그냥 본문이 됩니다.</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">보안 검사 — 받는 사람에게</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">파일마다 · 글자로만</p>
|
||||
</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: 10px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500">현장영상_1029.mp4</span><span id="rl-scan-note" style="font-size: 12px; color: #667085">612 MB · 보안 검사 중 — 끝나면 받을 수 있습니다</span></div>
|
||||
<button type="button" aria-disabled="true" aria-label="현장영상_1029.mp4 다운로드" aria-describedby="rl-scan-note" title="보안 검사가 끝나면 받을 수 있습니다" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #98A2B3; cursor: not-allowed"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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: 10px; min-height: 44px; padding: 4px 12px 4px 8px; border: 1px solid #FBD7D3; border-radius: 8px; background: #FEF3F2">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #FFFFFF; color: #B42318"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></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-weight: 500; color: #B42318">견적_요청서.zip</span><span style="font-size: 12px; color: #B42318">위험 — 보안 검사에서 막았습니다. 받을 수 없습니다</span></div>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; gap: 10px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<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-weight: 500">협력사_자료모음.7z</span><span style="font-size: 12px; color: #667085">860 MB · 11월 26일까지 · 검사하지 못함 — 암호가 걸린 압축 파일</span></div>
|
||||
<button type="button" class="icon-btn" aria-label="협력사_자료모음.7z 다운로드" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">검사 중이면 [다운로드]를 끄고(aria-disabled — 초점은 받고, 누르면 까닭을 읽어 줍니다) 끝나는 날 대신 까닭을 씁니다. 메일을 다시 열거나 새 메일 확인 때 상태를 다시 받습니다. 검사하지 못한 파일은 받을 수 있습니다 — 글로만 알립니다.</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">전달 쓰기 화면 — 원래 링크는 인용 속 글로</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">박서준이 이 메일을 바깥 협력사에 전달 · 첨부 칸에 다시 싣지 않는다</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; border: 1px solid #EEF0F3; border-radius: 10px">
|
||||
<div style="display: flex; align-items: center; gap: 6px; min-height: 36px; color: #344054; font-weight: 500"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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></div>
|
||||
<div style="display: flex; align-items: center; gap: 10px; padding: 2px 2px 2px 10px; border: 1px solid #E6E8EC; border-radius: 8px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">견적서_11월.xlsx</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; color: #667085">52 KB</span>
|
||||
<button type="button" class="icon-btn" aria-label="견적서_11월.xlsx 첨부 취소" style="flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</div>
|
||||
<p role="status" style="display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: #4A5363">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
||||
<span>원래 메일의 대용량 첨부 2개는 인용 속 링크로 함께 갑니다 — 11월 29일까지</span>
|
||||
</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; border: 1px dashed #D0D5DD; border-radius: 10px">
|
||||
<span style="font-size: 12px; color: #667085">공유가 멈췄거나 기간이 지난 링크를 인용한 전달이면</span>
|
||||
<p role="status" style="display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: #7A5200">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span>인용 속 ‘도면_초안.dwg’ 링크는 공유가 멈춰 받을 수 없습니다.</span>
|
||||
</p>
|
||||
<p role="status" style="display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: #7A5200">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span>인용 속 ‘행사사진_원본.zip’ 링크는 기간이 지나 받을 수 없습니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>원래 메일의 덩이는 인용 속 표 · 링크로 그대로 갑니다 — 첨부 칸에 다시 싣지 않고 칸 아래 한 줄로만 알립니다(링크 파일 수 · 끝나는 날). 파일이 여럿인 끝난 링크는 "‘설계도_v3.dwg’ 외 1개"</li>
|
||||
<li>끝난 링크도 보내기는 막지 않습니다 — 갈색 한 줄로만 알립니다</li>
|
||||
<li>전달하는 사람이 새 큰 파일을 더하면 그것은 이 메일의 새 링크입니다 — 첨부 칸의 「링크로 보내는 파일」(전달하는 사람의 보관 한도에 잡힘)</li>
|
||||
<li>받는 쪽에서 인용 속 원래 링크는 본문 글입니다(링크 주인이 보낸 메일이 아니라서 첨부 칸으로 올리지 않음). 내려받기 화면의 보낸 사람 · 끊을 수 있는 사람은 처음 보낸 사람(링크 주인)입니다. 답장도 같습니다</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1940}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -495,7 +495,7 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
|
||||
|
||||
### 보내기 취소 · 예약 발송 (`MailSendLater`)
|
||||
|
||||
- **[보내기 ▾]**: 쓰기 화면의 [보내기]를 둘로 나눈다 — 왼쪽은 지금의 [보내기], 오른쪽 ▾(44 — 보드는 40, 밀도 예외를 새로 만들지 않는다)는 메뉴 「예약 발송…」(시계 아이콘). Ctrl+Enter 는 그대로 [보내기].
|
||||
- **[보내기 ▾]**: 쓰기 화면의 [보내기]를 둘로 나눈다 — 왼쪽은 지금의 [보내기], 오른쪽 ▾(44 — 보드는 40, 밀도 예외를 새로 만들지 않는다)는 메뉴 「예약 발송…」(시계 아이콘). 보내기 단축키는 없다(쓰기 화면에 Ctrl+Enter 묶음이 없다 — 2026-10-30 확인).
|
||||
보내는 중 · 저장 중 · 첨부를 올리는 중에는 두 단추를 함께 끈다(지금의 [보내기]와 같은 규칙).
|
||||
- **예약 창**(모달 400): 제목 "예약 발송". 고르기 넷 — 「내일 오전」 9:00 · 「내일 오후」 1:00 · 「다음 주 월요일」 9:00 · 「직접 고르기」(날짜 칸 + 30분 단위 시각) — 줄마다 오른쪽에 날짜 · 요일 · 시각.
|
||||
오늘 오후가 남았으면 「오늘 오후」 6:00 이 첫 줄. 안내 "이 PC 의 시간(한국 표준시)으로 보냅니다 · 7일 안에서 고를 수 있습니다." [예약] [취소].
|
||||
@@ -523,6 +523,145 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
|
||||
- 목록: 줄마다 주소(굵게) + 아래 작은 글 "10월 29일 차단"(도메인은 "도메인 전체 · …") + [차단 풀기](36). 누르면 바로 풀고 알림 "‘주소’ 차단을 풀었습니다." + [되돌리기].
|
||||
이미 받은 메일은 옮기지 않는다. 비었으면 "차단한 주소가 없습니다. 메일의 ⋯ › 보낸 사람 차단으로도 막을 수 있습니다."
|
||||
|
||||
## 11단계 — 대용량 첨부 (2026-10-30 확정 — `ComposeLargeFiles` · `LargeFileBlock` · `MailReadLargeFiles` · `SharePage` · `SettingsLargeFiles`)
|
||||
|
||||
메일에 담지 못하는 큰 파일을 링크로 보낸다. 파일은 회사 서버에 조각으로 올리고(끊겨도 이어서), 보낼 때 서버가 본문에 내려받기 안내(덩이)를 넣는다.
|
||||
받는 사람은 로그인 없이 내려받기 화면 `files.arasystem.it.kr/s/{토큰}` 에서 받는다. 보관은 보낸 때(예약 발송은 보낼 시각)부터 30일째 날 23:59:59(한국 시간)까지 — 받는 사람 모두 같은 날이다.
|
||||
한도는 파일당 2GB · 메일 한 통에 링크 파일 10개 · 직원마다 동시 보관 10GB(올리는 중 · 임시 저장 포함) — 모두 운영 설정이다.
|
||||
제품 · 기술 결정은 2026-10-30 확정본과 같은 날 정한 보완([링크 복사]는 읽기 화면에서만 · 보내지 않은 파일 지우기 · 전달은 인용 속 링크로 · 첨부처럼 올리는 규칙 — 아래 각 절)을 따른다.
|
||||
데이터 · 규칙은 계약 4절(`docs/mail/api-contract.md` "대용량 첨부 — 11단계")이 정하고, 아래 문구가 새 에러 코드(`FILE_003`~`FILE_008` · `MAIL_016` — 계약 4절 "에러 코드")의 사전 문구 초안이다.
|
||||
새 아이콘: 멈춤(pause) · 이어 올리기(play) · 경고 삼각형(alert-triangle). 새 토큰은 없다 — 밀도 예외도 있는 값(40 · 36)을 다시 쓴다.
|
||||
|
||||
### 쓰기 화면 — 첨부 칸 (`ComposeLargeFiles`)
|
||||
|
||||
- **링크로 바뀌는 때**: 파일 하나가 20MB 를 넘을 때, 메일에 담은 파일의 합계를 25MB 넘게 만들 때(고른 차례대로 그 파일부터), 메일에 담지 못하는 형식(mp4 · mov · dwg · dxf · psd · ai · 7z)일 때 저절로 링크로 보낸다.
|
||||
묻는 창은 없다 — 합계 때문에 바뀌면 칸 아래 ⓘ 한 줄 "‘회의자료_전체.pptx’(9.4 MB)는 메일에 담으면 합계가 25MB 를 넘어 링크로 보냅니다."(role=status). 받는 사람이 사내뿐이어도 같은 규칙이다.
|
||||
메일에 담은 파일도 줄의 링크 단추(40 · 「링크로 보내기」 — 마우스를 올리면 같은 글)로 바꿀 수 있다 — **이 쓰기 화면에서 고른 파일에만** 있다(전달 원본 · 저장본에서 이어 온 첨부에는 없다 — 처음 판).
|
||||
링크 → 메일에 담기 단추는 없다(빼고 다시 고르면 한도 안에서 담긴다 — 아래 "처음 판에서 미룬 것").
|
||||
- **안내문**: "파일당 최대 20MB · 합계 25MB · 최대 20개 · 더 큰 파일은 링크로 보냅니다 (파일당 2GB · 10개까지)".
|
||||
- **두 묶음**: 링크 파일이 있으면 칸을 「메일에 담는 파일 N개」(+ "합계 18.1 MB / 25 MB") · 「링크로 보내는 파일 N개」(+ "받는 사람은 보낸 날부터 30일 동안 내려받습니다 — 오늘 보내면 11월 29일(일)까지")로 나눈다(12.5 굵게 + 12 회색).
|
||||
일반 첨부만 있으면 지금처럼 묶음 이름 없이 — 링크 파일만 있어도 「링크로 보내는 파일 N개」 머리는 둔다(기간 안내 · 보관 경고의 자리, 보드대로). 보관 사용량이 80%를 넘으면 링크 묶음 머리 오른쪽에 "보관 8.4 / 10 GB"(갈색 굵게).
|
||||
- **링크 파일 줄**: 아이콘이 링크(청록 #0A5F67), 두 줄 — 이름 · 단추(40) / 크기 · 상태(12px, 아이콘 선만큼 26px 들여), 올리는 동안 3px 막대. ✕ 는 「빼기」 — 올리던 것을 멈추고 서버의 조각도 지운다.
|
||||
|
||||
| 상태 | 둘째 줄 | 단추 · 모양 |
|
||||
| --- | --- | --- |
|
||||
| 올리는 중 | "올리는 중 · 420 MB / 1.2 GB" + 오른쪽 "약 3분 남음"(처음 몇 초는 "시간 계산 중") | [멈춤] ✕ · 청록 막대 |
|
||||
| 멈춤 | "멈춤 · 420 MB / 1.2 GB 올림" | [이어 올리기] ✕ · 회색 막대 — 그 파일만 멈춘다 |
|
||||
| 잠깐 끊김 | "연결이 끊겨 다시 잇는 중… · 420 MB / 1.2 GB 올림"(갈색) | 누를 것 없음 — 2 · 5 · 15 · 30초 간격으로 저절로, 받은 조각은 그대로 |
|
||||
| 오래 끊김 | "올리지 못하고 멈췄습니다 — 올린 420 MB 는 남아 있습니다."(빨강) | 빨간 줄 · [다시 시도](40) ✕ — 저절로 다시 잇기를 1분 넘게 못 했을 때 |
|
||||
| 다 올림 · 검사 중 | "612 MB · 보안 검사 중 — 끝나지 않아도 보낼 수 있습니다" | ✕ |
|
||||
| 검사 끝 | 깨끗하면 크기만 "1.2 GB" · 못 했으면 "860 MB · 검사하지 못함 — 암호가 걸린 압축 파일 등"(까닭은 응답에 없다 — 암호 압축 · 한도 밖 · 검사기 없음을 함께 쓴다) | ✕ |
|
||||
| 위험 | "위험한 내용이 발견되어 보낼 수 없습니다. 이 파일을 빼 주세요."(경고 삼각형) | 빨간 줄 · ✕ |
|
||||
|
||||
- **올리기 전 검사**(지금 첨부 사전 검사와 같은 결 — 넘으면 올리지 않고 빨간 줄, 그 파일만 빠지고 보내기는 막지 않는다):
|
||||
"파일 하나는 2GB 까지 보낼 수 있습니다." · "링크로 보내는 파일은 메일 한 통에 10개까지입니다." ·
|
||||
"대용량 보관 한도(10GB)를 넘어 올릴 수 없습니다. 보내지 않은 파일을 지우거나 링크를 끊으면 바로 공간이 생깁니다. [대용량 첨부 보기]" ·
|
||||
"지금은 서버에 공간이 모자라 올릴 수 없습니다. 잠시 후 다시 시도해 주세요." · 형식은 `FILE_001` 사전 문구.
|
||||
링크로 보낼 수 있는 형식 = 일반 첨부 목록 + mp4 · mov · dwg · dxf · psd · ai · 7z. 실행 파일(exe · msi · bat · cmd · js · vbs · scr 등)과 디스크 이미지(iso · img · vhd)는 막는다. 파일 고르기 창은 두 목록을 합친 형식만.
|
||||
- **다시 열 때**: 브라우저는 고른 파일을 스스로 다시 읽지 못한다. 새로고침 · 창을 닫은 뒤 저장본을 열면 노란 줄 "올리다 멈춘 파일 — 같은 파일을 다시 고르면 이어서 올립니다 · 420 MB / 1.2 GB 올림" + [파일 고르기](40) ✕.
|
||||
다른 파일을 고르면 그 줄 안에 "고른 파일이 멈춘 파일과 다릅니다(이름 · 크기). 같은 파일을 골라 주세요."(이름 · 크기 · 고친 시각으로 맞춘다 — 서버는 마지막 조각 뒤 24시간 기다린다).
|
||||
다 올린 파일은 저장본에 붙어 "1.2 GB · 이 임시 저장본에 11월 29일까지 남습니다"(올린 날부터 30일), 지나면 빨간 줄 "기간이 지나 지운 파일입니다 — 빼고 다시 올려 주세요."
|
||||
설정 › 대용량 첨부에서 지웠으면 같은 모양에 글만 "설정 › 대용량 첨부에서 지운 파일입니다 — 빼고 다시 올려 주세요."
|
||||
- **다 올릴 때까지 보내기를 막는다**: [보내기]와 ▾ 를 `disabled` 가 아니라 `aria-disabled` 로 끄고(초점은 받는다) [임시 저장] 오른쪽에 까닭 글(ⓘ 12.5 — 두 단추의 `aria-describedby`).
|
||||
누르면 보내지 않고 까닭을 읽어 준다(role=status — 보내기 단축키는 앱에 없다). 「예약 발송…」도 같다. 임시 저장은 그대로 된다. 까닭 글 —
|
||||
올리는 중 · 다시 잇는 중 "파일 2개를 올리는 중입니다 — 다 올리면 보낼 수 있습니다." ·
|
||||
멈춤 · 오래 끊김 · 다시 열어 멈춘 파일 "다 올리지 못한 파일이 있습니다 — 이어 올리거나 빼 주세요." ·
|
||||
위험 · 지운 파일(기간 지남 · 설정에서 지움) "보낼 수 없는 파일이 있습니다 — 빨간 줄의 파일을 빼 주세요."
|
||||
- **나가기 확인**: 올리는 중이면 "올리는 중인 파일이 있습니다" / "이 화면을 나가면 올리기가 멈춥니다. 임시보관함에서 이 메일을 다시 열고 같은 파일을 고르면 이어서 올립니다." [계속 쓰기](처음 초점 · Esc) [나가기].
|
||||
떠나기 전 임시 저장은 지금처럼 먼저 하고, 올리는 중인 파일은 저장본에 "올리다 멈춘 파일"로 남긴다. 다 올린 뒤에는 이 확인이 없다.
|
||||
|
||||
### 본문 덩이 — 바깥 메일 프로그램에서 (`LargeFileBlock`)
|
||||
|
||||
- **자리**: 내 글 · 서명 아래, 인용 위(쓰기 화면이 알려 준 경계). 인용이 없으면 맨 끝. 서버가 정화 · 서명 그림 · 중복 확인을 마친 뒤 넣는다 — 쓰기 화면의 편집기에는 보이지 않는다.
|
||||
- **내용**(위에서부터): "대용량 첨부 2개 (합계 1.8 GB)"(14 굵게) → "2026년 11월 29일(일)까지 내려받을 수 있습니다 (한국 시간)" → 파일마다 이름 · 크기(회색, 오른쪽) →
|
||||
"내려받기 https://files.arasystem.it.kr/s/…"(주소를 글자 그대로 보이는 링크 — 단축 주소 · 단추 모양 없음. 파일 이름은 링크가 아니다 — 메일 한 통에 링크 하나) →
|
||||
"내려받을 때 로그인이나 비밀번호를 묻지 않습니다."(12 회색) → "Large files: download by Nov 29, 2026 (KST) — no login or password needed."(12 회색).
|
||||
- **모양**: 테두리 1px #D0D5DD 표 + 글자, 안 여백 12 · 16, 맑은 고딕 14 · 13 · 12. 보내는 서식의 허용 목록 안에서만(table · td colspan · a, 테두리 · 여백 · 색 · 크기 · 굵기 · 정렬 · 줄바꿈 막기) —
|
||||
둥근 모서리 · 그림 · 아이콘 · 뱃지 없음. 폭은 내용에 맞춘다(주소 줄이 가장 길다 — 좁은 화면에서는 받는 프로그램이 줄을 끊는다).
|
||||
- **텍스트 대체 본문**: 같은 자리에 대시 줄로 가른 같은 내용 — 파일은 "- 이름 (크기)", 주소는 "내려받기: 주소".
|
||||
- 보이지 않는 표시 `<!--ara-large-files:v1-->` … `<!--/ara-large-files-->` — 보내는 정화가 주석을 지우므로 사용자가 흉내 낼 수 없다. 보내기 취소로 되돌린 메일은 덩이를 떼고 링크 파일로 돌려준다.
|
||||
나중에 링크를 끊어도 본문의 날짜 · 주소는 그대로다(누르면 내려받기 화면이 "공유 멈춤").
|
||||
- **답장 · 전달**: 링크 파일을 첨부 칸에 다시 싣지 않는다 — 인용 속 덩이는 표째 글(링크)로 그대로 가고 링크는 처음 기간까지 열린다. 인용으로 옮기면 표시가 지워진다.
|
||||
전달 쓰기 화면은 칸 아래 한 줄로만 알린다(아래 "읽기 화면 › 전달 쓰기 화면"). 바깥 사람의 답장에 인용된 덩이도 우리 웹메일에서 본문 그대로다 — 첨부 칸으로 올리지 않고 접지도 않는다.
|
||||
|
||||
### 읽기 화면 (`MailReadLargeFiles`)
|
||||
|
||||
- **첨부처럼 올리는 규칙**: 주소가 우리 내려받기 주소이고 서버에 있는 링크이며, **링크 주인이 그 메일의 보낸 사람과 같을 때만** 첨부 칸으로 올린다 —
|
||||
바깥 사람 답장의 인용 속 링크 · 전달된 원래 링크는 본문 글이다.
|
||||
- **사내 받는 사람**: 링크 파일을 첨부 칸에 일반 첨부와 함께 보인다 — 이름 아래 "1.2 GB · 11월 29일까지". 아이콘 · [다운로드](44)는 일반 첨부와 같고, 내려받기 화면을 거치지 않고 바로 받는다. 「첨부 파일 N개」는 둘을 합한 수.
|
||||
- **본문의 덩이는 접는다**: 그 자리에 접기 줄(높이 40 · 12.5 · 바탕 #F6F7F9) "본문의 대용량 첨부 안내 (접어 둠) — 파일은 아래 첨부 칸에 있습니다" + "펼치기".
|
||||
본문 틀 안에서 스크립트 없이 열고 닫는다. 메일을 다시 열면 접혀 있고, 인쇄 화면은 펼친 채 인쇄한다.
|
||||
- **보낸 사람 자신**: 파일마다 "1.2 GB · 3회 받음 · 11월 29일까지"(받지 않았으면 "아직 받지 않음"), 첨부 칸 아래 한 줄
|
||||
"링크로 보낸 파일 2개 — 받는 사람 모두 같은 링크로 받습니다. 끊으면 둘 다 받을 수 없습니다." + [링크 복사] [링크 끊기](36 — 차단한 주소의 [차단 풀기]와 같은 밀도 예외, [링크 끊기]는 빨간 글 테두리 단추).
|
||||
[링크 복사]는 이 메일 본문의 덩이에서 주소를 읽어 복사한다 — "링크를 복사했습니다."(못 하면 "링크를 복사하지 못했습니다."). 설정 목록에는 없다(서버는 링크를 해시로만 안다).
|
||||
받은 수는 처음부터 받기 시작한 수뿐(화면 열기 · 이어 받기 · 내가 받은 것은 빼고)이고, 누가 받았는지는 남기지 않는다.
|
||||
- **링크 끊기 확인**(alertdialog 400): "대용량 첨부 링크를 끊을까요?" / "받는 사람 모두 이 메일의 파일 2개(설계도_v3.dwg · 현장영상_1029.mp4)를 더는 내려받을 수 없습니다. 이미 받은 파일은 되돌릴 수 없고, 끊은 링크는 다시 열 수 없습니다."
|
||||
[링크 끊기](빨강) [취소](처음 초점 · Esc). 끊으면 "링크를 끊었습니다. 받는 사람은 더 이상 내려받을 수 없습니다." — 되돌리기는 없다. 쓰던 보관 공간은 바로 비워진다.
|
||||
- **기간 지남 · 공유 멈춤**: 흐리게(이름 #667085 · 아이콘 #98A2B3 — 투명도가 아니라 글자색) + "기간 지남 — 11월 29일까지였습니다" · "공유 멈춤 — 보낸 사람이 링크를 끊었습니다", 내려받기 단추 없음.
|
||||
보낸 사람 자신에게는 받은 수가 남고 끊은 날이 보인다 — "1.2 GB · 3회 받음 · 공유 멈춤 — 10월 31일에 끊었습니다"(한국 날짜 · 응답의 `revokedAt`, 없으면 "공유 멈춤 — 링크를 끊었습니다").
|
||||
끝난 뒤 90일이 지나면 첨부 칸에서 빠지고 덩이는 그냥 본문이 된다.
|
||||
- **보안 검사**: 검사 중이면 [다운로드]를 `aria-disabled`(title · 까닭 연결) + "보안 검사 중 — 끝나면 받을 수 있습니다". 위험은 빨간 줄 "위험 — 보안 검사에서 막았습니다. 받을 수 없습니다"(단추 없음). 검사하지 못한 파일은 받을 수 있고 글로만 알린다.
|
||||
- **전달 쓰기 화면**: 원래 메일의 덩이는 인용 속 글(링크)로 그대로 간다 — 첨부 칸에 다시 싣지 않고 칸 아래 ⓘ 한 줄로만 알린다 "원래 메일의 대용량 첨부 2개는 인용 속 링크로 함께 갑니다 — 11월 29일까지".
|
||||
공유가 멈췄거나 기간이 지난 링크면 갈색 한 줄 "인용 속 ‘도면_초안.dwg’ 링크는 공유가 멈춰 받을 수 없습니다."("… 기간이 지나 받을 수 없습니다.", 파일이 여럿이면 "‘설계도_v3.dwg’ 외 1개") — 보내기는 막지 않는다.
|
||||
전달하는 사람이 새 큰 파일을 더하면 그것은 이 메일의 새 링크다(첨부 칸의 「링크로 보내는 파일」 — 전달하는 사람의 보관 한도에 잡힌다).
|
||||
받는 쪽에서 인용 속 원래 링크는 본문 글이고, 내려받기 화면의 보낸 사람 · 끊을 수 있는 사람은 처음 보낸 사람(링크 주인)이다. 답장도 같다.
|
||||
- 목록의 클립 아이콘은 지금처럼 메일에 담긴 첨부만 본다 — 링크 파일만 있는 메일은 클립이 없다(아래 "처음 판에서 미룬 것").
|
||||
|
||||
### 내려받기 화면 (`SharePage`)
|
||||
|
||||
- **독립 화면**: 앱 레일 · 상단 바 · 로그인 메뉴가 없다. 머리 바(#0B3640, 60)에 흰 ARA SYSTEM 로고(88) + "파일 내려받기", 바탕 #F6F7F9 에 가운데 열 640. 탭 제목 "김아라 님이 보낸 파일 — ARA SYSTEM".
|
||||
- **정상**: "김아라 님이 보낸 파일 2개 (1.8 GB)"(20) → "보낸 사람 김아라 <ara.kim@arasystem.it.kr> · ARA SYSTEM"(로그인한 계정의 값 — 보낸 사람이 바꿀 수 없다) →
|
||||
"2026년 11월 29일(일)까지 내려받을 수 있습니다 (한국 시간) · 30일 남음" → 파일 목록(줄마다 아이콘 36 · 이름 · "1.2 GB · 보안 검사 · 이상 없음" · [내려받기](채운 단추 44)) →
|
||||
"내려받다 끊기면 브라우저의 다운로드 목록에서 다시 시도하세요 — 받은 곳부터 이어서 받습니다." →
|
||||
청록 상자 "이 화면은 로그인이나 비밀번호를 묻지 않습니다. 묻는 화면이 나오면 닫고 보낸 사람에게 확인해 주세요." →
|
||||
"받을 이유가 없는 파일이면 postmaster@arasystem.it.kr 로 알려 주세요."(운영 설정 — 처음 값 postmaster@메일 도메인) → 영어 한 줄.
|
||||
- 메일 제목 · 본문 · 받는 사람, 내려받은 수 · 남은 수는 보이지 않는다. [내려받기]는 형식과 상관없이 늘 저장이고, 누르기 직전에 상태를 한 번 더 묻는다. noindex · no-referrer.
|
||||
- **상태**(모든 상태에서 머리 · 영어 한 줄은 그대로. 신고 주소 줄은 링크 정보를 받은 상태에서만 — 없는 링크 · 요청이 너무 많음 · 오류 응답에는 그 값이 없다):
|
||||
- 검사 중 — 모두 검사 중이면 제목 "보안 검사 중입니다" / "파일을 검사하고 있습니다. 몇 분 뒤 이 화면을 다시 열어 주세요." + [다시 확인]. 일부면 그 줄만 "보안 검사 중" + [내려받기] `aria-disabled`.
|
||||
- 위험 — "내려받을 수 없는 파일입니다" / "보안 검사에서 위험한 내용이 발견되어 막았습니다. 보낸 사람에게 알렸습니다." 그 줄은 빨강 "위험 — 막았습니다", 단추 없음.
|
||||
- 검사하지 못함 — 제목은 그대로, 줄에 갈색 "검사하지 못함 — 암호가 걸린 압축 파일 등 안을 볼 수 없는 파일입니다. 보낸 사람을 아는 경우에만 여세요." + [내려받기](받을 수 있다).
|
||||
- 횟수 초과(파일마다 운영 설정 — 처음 값 500번, 넘은 파일만) — 그 줄에 "내려받을 수 있는 횟수를 넘었습니다. 보낸 사람에게 다시 보내 달라고 요청해 주세요."(숫자는 쓰지 않는다 — 한도는 운영 설정이고 응답에 없다)
|
||||
- 만료 — "내려받을 수 있는 기간이 지났습니다" / "2026년 11월 29일까지 받을 수 있었던 파일입니다. 파일은 지워져 다시 받을 수 없습니다. 필요하면 보낸 사람(김아라, ara.kim@arasystem.it.kr)에게 다시 보내 달라고 요청해 주세요."
|
||||
- 회수 — "보낸 사람이 공유를 멈췄습니다" / "필요하면 보낸 사람(김아라, ara.kim@arasystem.it.kr)에게 문의해 주세요." 파일 이름도 보이지 않는다.
|
||||
- 없는 링크(모르는 주소 · 끝난 지 90일이 지나 기록을 지운 링크) — "찾을 수 없는 링크입니다" / "메일의 주소가 끝까지 복사되었는지 확인해 주세요." 보낸 사람도 보이지 않는다.
|
||||
- 잠시 막힘(같은 IP 의 요청이 너무 많음) — "요청이 너무 많습니다" / "잠시 뒤 다시 시도해 주세요." + [다시 시도].
|
||||
- **좁은 폭(휴대폰 360)**: 머리 52 · 로고 76, 보낸 사람 주소는 이름 아래 줄로, 줄마다 [내려받기]가 이름 아래 전체 폭(44).
|
||||
|
||||
### 설정 › 메일 › 대용량 첨부 (`SettingsLargeFiles`)
|
||||
|
||||
- **메뉴**: 메일 묶음의 차단한 주소 아래 「대용량 첨부」 — 서명 · 부재중 자동 응답 · 필터 · 보내기 · 읽기 · 차단한 주소 · 대용량 첨부 · 알림.
|
||||
- 머리 "대용량 첨부" + "메일에 링크로 보낸 큰 파일입니다. 받는 사람은 보낸 날부터 30일 동안 내려받고, 링크를 끊으면 바로 받을 수 없습니다."
|
||||
- **사용량 상자**: "보관 사용량 6.2 / 10 GB"(메일함 사용량과 같은 표기) + 4px 막대(90% 를 넘으면 빨강 — 메일함 사용량과 같다) +
|
||||
"보낸 링크 4.3 GB · 보내지 않은 파일 1.9 GB(임시 저장 · 올리다 멈춤). 기간이 지나거나, 링크를 끊거나, 보내지 않은 파일을 지우면 바로 줄어듭니다."
|
||||
- **보내지 않은 파일**(사용량 상자 바로 아래 — 공간을 바로 비울 수 있는 곳이라 보낸 링크보다 위): 「보내지 않은 파일 3개」 + "1.9 GB · 임시 저장한 메일에 실렸거나 올리다 멈춘 파일 — 지우면 바로 공간이 생깁니다". 없으면 묶음째 보이지 않는다.
|
||||
- 줄(52): 아이콘 · 이름 / (올리다 멈춘 파일은 앞에 갈색 "올리다 멈춤") · 크기(멈춘 파일은 "1.2 GB" / "420 MB 올림") ·
|
||||
실린 저장본의 제목 · 링크는 보이지 않는다(2026-10-30 — 저장본 id 는 저장할 때마다 바뀌고 엔진 밖에서도 지워져 서버가 따라가기 무겁다, 계약 4절 `LargeFile` 에 없음) ·
|
||||
남는 기한 "11월 29일까지 남음" / "올린 뒤 30일"(올리다 멈춘 파일은 이어 올리기 규칙대로 "내일 오후 2:41까지 남음" / "마지막으로 올린 뒤 24시간") · [지우기](36, 빨간 글).
|
||||
- [지우기] → 확인 창(alertdialog 400) "보내지 않은 파일을 지울까요?" / "‘시공도면_v4.dwg’(620 MB) 파일을 지웁니다. 이 파일을 실은 임시 저장본이 있으면 열 때 첨부 칸에 ‘지운 파일’로 보입니다. 지운 파일은 되돌릴 수 없습니다."
|
||||
[지우기](빨강) [취소](처음 초점 · Esc) → "‘시공도면_v4.dwg’ 파일을 지웠습니다." — 줄이 사라지고 사용량이 바로 준다.
|
||||
그 저장본을 쓰기 화면에서 열면 첨부 칸에 빨간 줄 "설정 › 대용량 첨부에서 지운 파일입니다 — 빼고 다시 올려 주세요."(쓰기 화면의 "기간이 지나 지운 파일"과 같은 모양 · 다른 글).
|
||||
- **보낸 링크**: 「보낸 링크 6개」 + "메일마다 한 덩이 · 최근에 보낸 차례". 메일(링크)마다 한 덩이 — 링크가 메일 한 통에 하나라 [링크 끊기]는 덩이에 한 번이다(파일 줄마다 두면 같은 메일의 다른 파일까지 끊긴다).
|
||||
- 머리: 메일 제목(청록 링크 → 보낸편지함의 그 메일, 메일을 지웠으면 글자만) / "10월 30일 (금) 보냄 · 파일 2개 · 1.8 GB" · 오른쪽 "11월 29일까지" / "30일 남음"(3일 이하면 갈색 굵게) · [링크 끊기](36).
|
||||
- 파일 줄(44 · 바탕 #FBFBFC): 아이콘 · 이름 · 크기 · "3회 받음" / "마지막 오늘 오후 2:41"(받지 않았으면 "아직 받지 않음") · 상태.
|
||||
- 상태 글: 사용 중 · 검사 중(회색) · 위험(빨강 굵게 + "내려받기를 막음", 줄 바탕 #FEF3F2) · 기간 지남 · 공유 멈춤. 검사하지 못한 파일은 상태 아래 갈색 "검사하지 못함". 뱃지 없이 글자만.
|
||||
- 끝난 링크는 덩이째 흐리게 — 머리 오른쪽 "공유 멈춤 / 10월 22일에 끊음" · "기간 지남 / 10월 25일까지였습니다", 단추 없음. 90일 뒤 목록에서 빠진다.
|
||||
- 최근에 보낸 차례 · 20개씩 [더 보기].
|
||||
- **[링크 복사]는 두지 않는다** — 서버는 링크를 해시로만 알아 원래 주소를 모른다. 주소는 보낸 메일의 읽기 화면(보낸 사람 자신)에서 복사한다.
|
||||
- [링크 끊기] → 읽기 화면과 같은 확인 창 · 같은 알림(창 글에 메일 제목). 끊는 동안 그 덩이의 [링크 끊기]를 막고, 끝나면 초점을 덩이 머리로.
|
||||
- **빈 상태**: 사용량 "0 / 10 GB" + "링크로 보낸 파일이 없습니다" / "메일 쓰기에서 20MB 가 넘는 파일을 고르면 링크로 보냅니다. 받는 사람은 보낸 날부터 30일 동안 내려받을 수 있습니다."
|
||||
보내지 않은 파일이 있으면 그 묶음은 위에 그대로 있다. 목록을 받지 못하면 지금의 목록 오류와 같은 모양.
|
||||
- **위험이 나오면** 빨간 알림 "올린 대용량 파일 ‘견적_요청서.zip’에서 위험한 내용이 발견되어 막았습니다." + [대용량 첨부 보기] —
|
||||
웹메일을 열어 둔 동안 실시간 알림(`large-file`)으로 바로 띄운다. 그때 열려 있지 않았으면 알림은 없고 목록 · 첨부 칸의 상태(위험)로만 안다 —
|
||||
이벤트에 보냈는지가 없어 "보낸 파일 · 내려받기를 막았습니다"로 나누지 않는다(계약 4절 "악성 검사"의 문구). 같은 메일의 다른 파일은 그대로 받을 수 있다.
|
||||
|
||||
### 처음 판에서 미룬 것
|
||||
|
||||
- 링크 → 메일에 담기 되돌리기 단추(제품 조사 3.1) — 빼고 다시 고르면 한도 안에서 메일에 담긴다.
|
||||
- 링크 파일만 있는 메일의 목록 클립 아이콘 — 목록의 클립은 지금처럼 메일에 담긴 첨부만 본다.
|
||||
- 전달 원본 · 저장본에서 이어 온 첨부의 「링크로 보내기」 — 이 쓰기 화면에서 고른 파일에만.
|
||||
- 확정본이 미룬 것: 기간 고르기 · 연장, 다시 보내기, 받는 사람 확인 코드 · 비밀번호, 사내만, 받는 사람별 링크 · 기록, 처음 받음 · 만료 전 알림, 미리 보기, zip 모두 받기,
|
||||
폴더 올리기, 관리자 화면 · 퇴사자 처리, 보낸 메일을 지울 때 파일도, 모바일 앱, 파일 저장소 연동.
|
||||
|
||||
## 구현하며 정한 보완 (2026-10-26 — 캔버스에는 아직 없다)
|
||||
|
||||
- 찾지 못한 첨부(보관 시간이 지난 업로드·지워진 원본)는 실패로 표시하고, 전달 원본에는 "빼기"만 둔다(다시 올릴 수 없다).
|
||||
@@ -801,3 +940,25 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
|
||||
엔진 규칙이 꺼져 있으면(`isActive: false`) 머리 아래 노란 줄(단추 없음) "지금은 차단이 동작하지 않습니다. 메일 서버의 규칙이 다른 곳에서 바뀌었습니다 — 주소를 차단하거나 풀면 다시 켜집니다." —
|
||||
차단 · 풀기가 성공하면 켜진 것으로 본다(서버가 다시 켠다 — 계약 2절).
|
||||
- **새 토큰 · 아이콘**: `--color-on-brand-track` · `--color-on-brand-progress` · `--color-on-brand-divider` · `--color-warning-border`, 아이콘 printer · clock · block(원 + 빗금).
|
||||
|
||||
### 11단계 구현하며 정한 보완 (2026-10-30 — 캔버스에는 아직 없다)
|
||||
|
||||
데이터 · 값은 계약 4절 "올리기 › 클라이언트"의 "구현하며 정함"이 같은 내용이다.
|
||||
|
||||
- **올리기 차례**: 고르자마자 서버에 올리기를 모두 만든다(임시 저장본에 바로 실려 나가기 확인 글이 그대로 맞다). 조각은 파일 3개까지 함께 보내고, 나머지 줄은 오른쪽에 "차례를 기다리는 중"(처음 몇 초의 "시간 계산 중" 자리).
|
||||
- **끝내기**: 조각을 다 보냈으면 끝내기를 기다리는 동안 오른쪽 글은 "마무리하는 중"이다. 끝내기가 오래 진행 중이면 2 · 5 · 15 · 30초 간격으로 다시 묻고, 1분 넘게 그대로면 "오래 끊김"처럼 멈추고 [다시 시도].
|
||||
- **서버가 올리기를 잊었을 때(404)**: 멈춤 + "서버에서 올리던 파일을 찾을 수 없습니다 — 다시 시도하면 처음부터 올립니다." — [다시 시도]를 누를 때만 처음부터 올린다(사전 `RES_001` 문구로는 [다시 시도]의 뜻을 알 수 없어 화면 글로 둔다).
|
||||
고른 파일이 없는 줄(저장본에서 이어 온 것)이나 보내기의 `MAIL_016` 뒤 다시 물어 404 면 "서버에서 찾을 수 없는 파일입니다 — 빼고 다시 올려 주세요."
|
||||
- **서버 거절 문구**: 서버가 준 코드(`FILE_001` · `FILE_002` · `FILE_005` · `FILE_006` · `VAL_001` · `FILE_003`)는 사전 문구다. 위 "올리기 전 검사"의 화면 글은 서버에 묻기 전(크기 · 개수 · 보관량)에만 쓴다 —
|
||||
"지금은 서버에 공간이 모자라 …"는 쓰지 않고 `FILE_006` 사전 문구.
|
||||
- **「링크로 보내기」**: 대용량 사전 검사(개수 · 보관량)를 먼저 보고 통과할 때만 일반 첨부에서 뺀다. 걸리면 첨부는 그대로 두고 그 글을 오류 알림으로(보관량이면 + [대용량 첨부 보기]).
|
||||
- **다시 고르기**: 이름 · 크기 · 고친 시각이 다르면 줄 안에 알리고 기다린다(보드). 같은데 맨 앞 조각의 SHA-256 이 다르거나 서버가 맨 앞 조각을 아직 못 받았으면 앞 올리기를 지우고 새로 올린다(계약).
|
||||
`crypto.subtle` 이 없는 곳(https · localhost 밖)에서는 지문 없이 보내고 다시 고르기는 늘 새 올리기다 — 운영은 https 라 해당 없다.
|
||||
- **인용 경계**: 다시 연 답장 · 전달 저장본(보내기 취소로 되돌린 초안 포함)은 "맨 위 인용의 첫 자식이 ‘원본 메일’ 머리 문단 + 머리 표"로 원문 인용을 알아본다 —
|
||||
그래야 덩이가 인용 위에 들어가고, 저장본에서 돌지 않던 인용 줄이기도 함께 돈다(2026-10-30 리뷰).
|
||||
- **검사 상태 다시 묻기**: 쓰기 화면 · 읽기 화면은 검사 중인 파일이 있는 동안 15 · 30 · 60초 간격으로 최대 30번, 내려받기 화면은 20번. 읽기 화면은 막힌 [다운로드]를 누르면 한 번 바로 묻고,
|
||||
메일을 바꾸거나 닫거나 세션이 바뀌면 멈춘다.
|
||||
- **보내기 직전 인용 줄이기**: 서버가 넣을 덩이 몫(파일 수 · 이름 길이로 어림)을 더해 잰다.
|
||||
- **설정 › 대용량 첨부**: 보낸 링크 머리의 메일 제목이 없으면(지웠거나 읽지 못함 — `subject: null`) 글자만, 빈 제목은 메일이 있는 것이라 링크다.
|
||||
[지우기]가 `FILE_003`(그사이 보내져 링크에 실림)이면 목록 · 사용량을 다시 받고 사전 문구로 알린다.
|
||||
- **내려받기 화면**: 보낸 사람 이름이 비어 있으면 주소를 쓴다. 불러오는 동안은 `role="status"` "불러오는 중"(자리 막대는 `aria-hidden`).
|
||||
|
||||
@@ -0,0 +1,386 @@
|
||||
<!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}
|
||||
.primary{background:#0E7C86;color:#FFFFFF}
|
||||
.primary:hover{background:#0A5F67}
|
||||
.ghost{background:transparent;color:#4A5363}
|
||||
.ghost:hover{background:#F2F4F7;color:#171C26}
|
||||
.danger-solid{background:#B42318;color:#FFFFFF}
|
||||
.danger-solid:hover{background:#912018}
|
||||
.nav-item{color:#344054}
|
||||
.nav-item:hover{background:#F2F4F7}
|
||||
.line-btn{background:#FFFFFF;color:#344054;border:1px solid #D0D5DD}
|
||||
.line-btn:hover{background:#F2F4F7}
|
||||
.line-danger{background:#FFFFFF;color:#B42318;border:1px solid #D0D5DD}
|
||||
.line-danger:hover{background:#FEF3F2}
|
||||
.subject-link{color:#0A5F67;text-decoration:none}
|
||||
.subject-link:hover{text-decoration:underline}
|
||||
.toast-action{background:transparent;color:#9ED6DB}
|
||||
.toast-action:hover{background:rgba(255,255,255,0.1)}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 2200px; box-sizing: border-box; padding: 48px; display: flex; flex-direction: column; gap: 28px; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; max-width: 1060px">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">설정 · 대용량 첨부</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">링크로 보낸 큰 파일과 아직 보내지 않은 파일을 한곳에서 봅니다 — 보관 사용량, 끝나는 날, 받은 수를 보고 링크를 끊거나 보내지 않은 파일을 지웁니다. 메뉴는 메일 묶음의 「대용량 첨부」(차단한 주소 아래). 초안 — 사용자 확인 전.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 220px 800px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<nav aria-label="설정" style="display: flex; flex-direction: column; gap: 2px; padding: 12px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<span style="padding: 6px 10px 2px; font-size: 12px; font-weight: 600; color: #667085">계정</span>
|
||||
<a href="#" class="nav-item" style="display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; text-decoration: none">비밀번호</a>
|
||||
<span style="padding: 10px 10px 2px; font-size: 12px; font-weight: 600; color: #667085">메일</span>
|
||||
<a href="#" class="nav-item" style="display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; text-decoration: none">서명</a>
|
||||
<a href="#" class="nav-item" style="display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; text-decoration: none">부재중 자동 응답</a>
|
||||
<a href="#" class="nav-item" style="display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; text-decoration: none">필터</a>
|
||||
<a href="#" class="nav-item" style="display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; text-decoration: none">보내기 · 읽기</a>
|
||||
<a href="#" class="nav-item" style="display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; text-decoration: none">차단한 주소</a>
|
||||
<a href="#" aria-current="page" style="display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; background: #E3F2F3; color: #0A5F67; font-weight: 600; text-decoration: none">대용량 첨부</a>
|
||||
<a href="#" class="nav-item" style="display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; text-decoration: none">알림</a>
|
||||
</nav>
|
||||
|
||||
<section aria-labelledby="lf-title" style="display: flex; flex-direction: column; gap: 22px; box-sizing: border-box; padding: 20px 32px 36px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px">
|
||||
<h2 id="lf-title" style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">대용량 첨부</h2>
|
||||
<p style="margin: 0; color: #4A5363">메일에 링크로 보낸 큰 파일입니다. 받는 사람은 보낸 날부터 30일 동안 내려받고, 링크를 끊으면 바로 받을 수 없습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid #EEF0F3; border-radius: 8px">
|
||||
<div style="display: flex; align-items: baseline; justify-content: space-between; gap: 12px">
|
||||
<span id="lf-usage-label" style="font-weight: 600">보관 사용량</span>
|
||||
<span style="font-weight: 600; font-variant-numeric: tabular-nums">6.2 / 10 GB</span>
|
||||
</div>
|
||||
<div role="meter" aria-labelledby="lf-usage-label" aria-valuemin="0" aria-valuemax="10" aria-valuenow="6.2" aria-valuetext="62%" style="height: 4px; border-radius: 2px; background: #E4E7EC"><div style="width: 62%; height: 4px; border-radius: 2px; background: #0E7C86"></div></div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">보낸 링크 4.3 GB · 보내지 않은 파일 1.9 GB(임시 저장 · 올리다 멈춤). 기간이 지나거나, 링크를 끊거나, 보내지 않은 파일을 지우면 바로 줄어듭니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 700">보내지 않은 파일 3개</h3>
|
||||
<span style="font-size: 12.5px; color: #667085">1.9 GB · 임시 저장한 메일에 실렸거나 올리다 멈춘 파일 — 지우면 바로 공간이 생깁니다</span>
|
||||
</div>
|
||||
<ul aria-label="보내지 않은 파일" style="list-style: none; margin: 0; padding: 0; border: 1px solid #EEF0F3; border-radius: 8px">
|
||||
<li style="display: grid; grid-template-columns: 16px minmax(0, 1fr) 84px 176px auto; align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" 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 style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35"><span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">시공도면_v4.dwg</span><span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #667085">저장본 <a href="#" class="subject-link">12월 정기 점검 일정 안내</a></span></span>
|
||||
<span style="font-size: 12px; color: #667085; text-align: right; font-variant-numeric: tabular-nums">620 MB</span>
|
||||
<span style="display: flex; flex-direction: column; line-height: 1.35; font-variant-numeric: tabular-nums"><span>11월 29일까지 남음</span><span style="font-size: 12px; color: #667085">올린 뒤 30일</span></span>
|
||||
<button type="button" class="line-danger" style="min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
<li style="display: grid; grid-template-columns: 16px minmax(0, 1fr) 84px 176px auto; align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" 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 style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35"><span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">현장영상_1030.mp4</span><span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #7A5200">올리다 멈춤 · <span style="color: #667085">저장본 <a href="#" class="subject-link">11월 현장 점검 자료 2차</a></span></span></span>
|
||||
<span style="display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums"><span>1.2 GB</span><span>420 MB 올림</span></span>
|
||||
<span style="display: flex; flex-direction: column; line-height: 1.35; font-variant-numeric: tabular-nums"><span>내일 오후 2:41까지 남음</span><span style="font-size: 12px; color: #667085">마지막으로 올린 뒤 24시간</span></span>
|
||||
<button type="button" class="line-danger" style="min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
<li style="display: grid; grid-template-columns: 16px minmax(0, 1fr) 84px 176px auto; align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px 4px 14px">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" 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 style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35"><span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">발표자료_초안.pptx</span><span style="font-size: 12px; color: #667085">저장본 없음</span></span>
|
||||
<span style="font-size: 12px; color: #667085; text-align: right; font-variant-numeric: tabular-nums">64 MB</span>
|
||||
<span style="display: flex; flex-direction: column; line-height: 1.35; font-variant-numeric: tabular-nums"><span>11월 25일까지 남음</span><span style="font-size: 12px; color: #667085">올린 뒤 30일</span></span>
|
||||
<button type="button" class="line-danger" style="min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 700">보낸 링크 6개</h3>
|
||||
<span style="font-size: 12.5px; color: #667085">메일마다 한 덩이 · 최근에 보낸 차례</span>
|
||||
</div>
|
||||
<ul aria-label="링크로 보낸 메일" style="list-style: none; margin: 0; padding: 0; border: 1px solid #EEF0F3; border-radius: 8px">
|
||||
|
||||
<li style="display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 10px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<a href="#" class="subject-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">11월 현장 점검 자료 보내드립니다</a>
|
||||
<span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">10월 30일 (금) 보냄 · 파일 2개 · 1.8 GB</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; font-variant-numeric: tabular-nums">
|
||||
<span style="font-weight: 500">11월 29일까지</span>
|
||||
<span style="font-size: 12px; color: #667085">30일 남음</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; gap: 6px">
|
||||
<button type="button" class="line-danger" style="min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">링크 끊기</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px">
|
||||
<li style="display: grid; grid-template-columns: 16px minmax(0, 1fr) 64px 160px 112px; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 6px; background: #FBFBFC">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" 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 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">설계도_v3.dwg</span>
|
||||
<span style="font-size: 12px; color: #667085; text-align: right; font-variant-numeric: tabular-nums">1.2 GB</span>
|
||||
<span style="display: flex; flex-direction: column; line-height: 1.35; font-variant-numeric: tabular-nums"><span>3회 받음</span><span style="font-size: 12px; color: #667085">마지막 오늘 오후 2:41</span></span>
|
||||
<span style="color: #344054">사용 중</span>
|
||||
</li>
|
||||
<li style="display: grid; grid-template-columns: 16px minmax(0, 1fr) 64px 160px 112px; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 6px; background: #FBFBFC">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" 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 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">현장영상_1029.mp4</span>
|
||||
<span style="font-size: 12px; color: #667085; text-align: right; font-variant-numeric: tabular-nums">612 MB</span>
|
||||
<span style="color: #667085">아직 받지 않음</span>
|
||||
<span style="color: #667085">검사 중</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li style="display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 10px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<a href="#" class="subject-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">견적 요청서 회신드립니다</a>
|
||||
<span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">10월 28일 (수) 보냄 · 파일 1개 · 24 MB</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; font-variant-numeric: tabular-nums">
|
||||
<span style="font-weight: 500">11월 27일까지</span>
|
||||
<span style="font-size: 12px; color: #667085">28일 남음</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; gap: 6px">
|
||||
<button type="button" class="line-danger" style="min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">링크 끊기</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px">
|
||||
<li style="display: grid; grid-template-columns: 16px minmax(0, 1fr) 64px 160px 112px; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 6px; background: #FEF3F2">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">견적_요청서.zip</span>
|
||||
<span style="font-size: 12px; color: #667085; text-align: right; font-variant-numeric: tabular-nums">24 MB</span>
|
||||
<span style="color: #667085">아직 받지 않음</span>
|
||||
<span style="display: flex; flex-direction: column; line-height: 1.35"><span style="font-weight: 600; color: #B42318">위험</span><span style="font-size: 12px; color: #B42318">내려받기를 막음</span></span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li style="display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 10px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<a href="#" class="subject-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">협력사 자료 공유드립니다</a>
|
||||
<span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">10월 27일 (화) 보냄 · 파일 1개 · 860 MB</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; font-variant-numeric: tabular-nums">
|
||||
<span style="font-weight: 500">11월 26일까지</span>
|
||||
<span style="font-size: 12px; color: #667085">27일 남음</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; gap: 6px">
|
||||
<button type="button" class="line-danger" style="min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">링크 끊기</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px">
|
||||
<li style="display: grid; grid-template-columns: 16px minmax(0, 1fr) 64px 160px 112px; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 6px; background: #FBFBFC">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" 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 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">협력사_자료모음.7z</span>
|
||||
<span style="font-size: 12px; color: #667085; text-align: right; font-variant-numeric: tabular-nums">860 MB</span>
|
||||
<span style="display: flex; flex-direction: column; line-height: 1.35; font-variant-numeric: tabular-nums"><span>2회 받음</span><span style="font-size: 12px; color: #667085">마지막 10월 28일 오전 9:30</span></span>
|
||||
<span style="display: flex; flex-direction: column; line-height: 1.35"><span style="color: #344054">사용 중</span><span style="font-size: 12px; color: #7A5200">검사하지 못함</span></span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li style="display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 10px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<a href="#" class="subject-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">홍보 영상 최종본 전달드립니다</a>
|
||||
<span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">10월 2일 (금) 보냄 · 파일 1개 · 1.6 GB</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; font-variant-numeric: tabular-nums">
|
||||
<span style="font-weight: 500">11월 1일까지</span>
|
||||
<span style="font-size: 12px; font-weight: 600; color: #7A5200">2일 남음</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; gap: 6px">
|
||||
<button type="button" class="line-danger" style="min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">링크 끊기</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px">
|
||||
<li style="display: grid; grid-template-columns: 16px minmax(0, 1fr) 64px 160px 112px; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 6px; background: #FBFBFC">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" 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 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">홍보영상_최종.mov</span>
|
||||
<span style="font-size: 12px; color: #667085; text-align: right; font-variant-numeric: tabular-nums">1.6 GB</span>
|
||||
<span style="display: flex; flex-direction: column; line-height: 1.35; font-variant-numeric: tabular-nums"><span>12회 받음</span><span style="font-size: 12px; color: #667085">마지막 10월 29일 오전 11:05</span></span>
|
||||
<span style="color: #344054">사용 중</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li style="display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 10px 14px; border-bottom: 1px solid #EEF0F3; color: #667085">
|
||||
<div style="display: flex; align-items: center; gap: 12px; min-height: 36px">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<a href="#" class="subject-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #667085">도면 초안 검토 부탁드립니다</a>
|
||||
<span style="font-size: 12px; font-variant-numeric: tabular-nums">10월 20일 (화) 보냄 · 파일 1개 · 340 MB</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; font-variant-numeric: tabular-nums">
|
||||
<span style="font-weight: 600">공유 멈춤</span>
|
||||
<span style="font-size: 12px">10월 22일에 끊음</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px">
|
||||
<li style="display: grid; grid-template-columns: 16px minmax(0, 1fr) 64px 160px 112px; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 6px; background: #FBFBFC">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.75" 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 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">도면_초안.dwg</span>
|
||||
<span style="font-size: 12px; text-align: right; font-variant-numeric: tabular-nums">340 MB</span>
|
||||
<span style="display: flex; flex-direction: column; line-height: 1.35; font-variant-numeric: tabular-nums"><span>1회 받음</span><span style="font-size: 12px">마지막 10월 21일 오후 3:20</span></span>
|
||||
<span>공유 멈춤</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li style="display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 10px 14px; color: #667085">
|
||||
<div style="display: flex; align-items: center; gap: 12px; min-height: 36px">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<a href="#" class="subject-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #667085">행사 사진 원본입니다</a>
|
||||
<span style="font-size: 12px; font-variant-numeric: tabular-nums">9월 25일 (금) 보냄 · 파일 1개 · 1.1 GB</span>
|
||||
</div>
|
||||
<div style="flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; font-variant-numeric: tabular-nums">
|
||||
<span style="font-weight: 600">기간 지남</span>
|
||||
<span style="font-size: 12px">10월 25일까지였습니다</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px">
|
||||
<li style="display: grid; grid-template-columns: 16px minmax(0, 1fr) 64px 160px 112px; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 6px; background: #FBFBFC">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.75" 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 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">행사사진_원본.zip</span>
|
||||
<span style="font-size: 12px; text-align: right; font-variant-numeric: tabular-nums">1.1 GB</span>
|
||||
<span style="display: flex; flex-direction: column; line-height: 1.35; font-variant-numeric: tabular-nums"><span>7회 받음</span><span style="font-size: 12px">마지막 10월 19일 오전 10:12</span></span>
|
||||
<span>기간 지남</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px">
|
||||
<button type="button" class="line-btn" style="min-height: 44px; padding: 0 16px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">더 보기</button>
|
||||
<span style="font-size: 12.5px; color: #667085">최근에 보낸 차례 · 20개씩. 끝난 링크는 90일 뒤 목록에서 빠집니다.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 20px">
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">줄 만드는 법</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>위 「보내지 않은 파일」 — 임시 저장한 메일에 실렸거나 올리다 멈춘 파일. 줄마다 이름 · 실린 저장본(없으면 "저장본 없음") · 크기 · 남는 기한 · [지우기]. 없으면 묶음째 보이지 않습니다. 공간을 바로 비울 수 있는 곳이라 위에 둡니다</li>
|
||||
<li>아래 「보낸 링크」 — 메일(링크)마다 한 덩이. 머리에 메일 제목 · 보낸 날 · 끝나는 날 · [링크 끊기], 아래에 파일 줄(이름 · 크기 · 받은 수와 마지막으로 받은 때 · 상태). 링크가 메일 한 통에 하나라 단추는 덩이에 한 번입니다</li>
|
||||
<li>상태 글: 사용 중 · 검사 중 · 위험(빨강) · 기간 지남 · 공유 멈춤(흐리게). 검사하지 못한 파일은 상태 아래 갈색 한 줄. 뱃지 없이 글자만</li>
|
||||
<li>남은 날이 3일 이하면 "n일 남음"을 갈색 굵게</li>
|
||||
<li>[링크 끊기] · [지우기] 36 — 차단한 주소의 [차단 풀기]와 같은 밀도 예외(새 토큰 없음). 끝난 링크에는 단추가 없습니다</li>
|
||||
<li>[링크 복사]는 두지 않습니다 — 서버는 링크를 해시로만 알아 원래 주소를 모릅니다. 주소는 보낸 메일의 읽기 화면에서 복사합니다</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">누르면</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>메일 제목 → 보낸편지함의 그 메일. 메일을 지웠으면 제목은 글자만(링크 아님)</li>
|
||||
<li>저장본 제목 → 쓰기 화면에서 그 저장본을 이어 씁니다</li>
|
||||
<li>[링크 끊기] → 확인 창(아래) → 그 덩이는 "공유 멈춤"으로 바뀌고 사용량이 바로 줄어듭니다</li>
|
||||
<li>[지우기] → 확인 창(아래) → 줄이 사라지고 사용량이 바로 줄어듭니다. 그 파일을 싣고 있던 저장본을 열면 첨부 칸에 "지운 파일"</li>
|
||||
<li>받은 수는 처음부터 받기 시작한 수 — 화면 열기 · 이어 받기 · 내가 받은 것은 빼고. 누가 받았는지는 남기지 않습니다</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">링크 끊기 확인 창</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">모달 400 · 되돌릴 수 없는 일 — 처음 초점 「취소」</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 20px 12px; border-radius: 10px; background: rgba(16, 24, 28, 0.08)">
|
||||
<div role="alertdialog" aria-modal="true" aria-labelledby="lf-cut-title" aria-describedby="lf-cut-message" style="width: 100%; max-width: 400px; box-sizing: border-box; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14); display: flex; flex-direction: column; gap: 10px">
|
||||
<h3 id="lf-cut-title" style="margin: 0; font-size: 15px; font-weight: 700">대용량 첨부 링크를 끊을까요?</h3>
|
||||
<p id="lf-cut-message" style="margin: 0; color: #4A5363">‘11월 현장 점검 자료 보내드립니다’의 파일 2개를 받는 사람 모두 더는 내려받을 수 없습니다. 이미 받은 파일은 되돌릴 수 없고, 끊은 링크는 다시 열 수 없습니다.</p>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="danger-solid" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">링크 끊기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; outline: 2px solid #0E7C86; outline-offset: 2px">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="status" style="display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; font-weight: 500">링크를 끊었습니다. 받는 사람은 더 이상 내려받을 수 없습니다.</span>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">읽기 화면의 [링크 끊기]와 같은 창 · 같은 알림입니다(되돌리기 단추 없음). 끊는 동안 그 덩이의 [링크 끊기]를 막고, 끝나면 초점을 덩이 머리로 옮깁니다.</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">보내지 않은 파일 지우기 확인 창</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">모달 400 · 되돌릴 수 없는 일 — 처음 초점 「취소」</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 20px 12px; border-radius: 10px; background: rgba(16, 24, 28, 0.08)">
|
||||
<div role="alertdialog" aria-modal="true" aria-labelledby="lf-del-title" aria-describedby="lf-del-message" style="width: 100%; max-width: 400px; box-sizing: border-box; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14); display: flex; flex-direction: column; gap: 10px">
|
||||
<h3 id="lf-del-title" style="margin: 0; font-size: 15px; font-weight: 700">보내지 않은 파일을 지울까요?</h3>
|
||||
<p id="lf-del-message" style="margin: 0; color: #4A5363">‘시공도면_v4.dwg’(620 MB) 파일을 지웁니다. 이 파일을 실은 임시 저장본 「12월 정기 점검 일정 안내」를 열면 첨부 칸에 ‘지운 파일’로 보입니다. 지운 파일은 되돌릴 수 없습니다.</p>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="danger-solid" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; outline: 2px solid #0E7C86; outline-offset: 2px">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="status" style="display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; font-weight: 500">‘시공도면_v4.dwg’ 파일을 지웠습니다.</span>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">지우면 줄이 사라지고 사용량이 바로 줄어듭니다(되돌리기 없음). 그 저장본을 쓰기 화면에서 열면 첨부 칸에 빨간 줄 "설정 › 대용량 첨부에서 지운 파일입니다 — 빼고 다시 올려 주세요."(쓰기 보드의 "기간이 지나 지운 파일"과 같은 모양). 저장본이 없으면 둘째 문장을 뺍니다. 올리다 멈춘 파일도 같은 창입니다 — 지우면 이어 올릴 수 없습니다.</p>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 20px">
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">빈 상태</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">링크로 보낸 메일이 하나도 없을 때 · 사용량은 그대로, 보내지 않은 파일이 있으면 그 묶음도 위에 그대로</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid #EEF0F3; border-radius: 8px">
|
||||
<div style="display: flex; align-items: baseline; justify-content: space-between; gap: 12px">
|
||||
<span style="font-weight: 600">보관 사용량</span>
|
||||
<span style="font-weight: 600; font-variant-numeric: tabular-nums">0 / 10 GB</span>
|
||||
</div>
|
||||
<div aria-hidden="true" style="height: 4px; border-radius: 2px; background: #E4E7EC"></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #FBFBFC; text-align: center">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<p style="margin: 4px 0 0; font-weight: 600">링크로 보낸 파일이 없습니다</p>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">메일 쓰기에서 20MB 가 넘는 파일을 고르면 링크로 보냅니다. 받는 사람은 보낸 날부터 30일 동안 내려받을 수 있습니다.</p>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">목록을 받지 못하면 지금의 목록 오류와 같은 모양 — "메일 서버와 연결할 수 없습니다 …" + [다시 시도].</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">보낸 뒤 위험이 나왔을 때</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">오른쪽 아래 알림 — 목록의 빨간 줄은 그대로 남는다</p>
|
||||
</div>
|
||||
<div role="alert" style="display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 6px 6px 14px; border-radius: 10px; background: #912018; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FDA29B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
||||
<span style="flex: 1 1 auto; font-weight: 500">보낸 파일 ‘견적_요청서.zip’에서 위험한 내용이 발견되어 내려받기를 막았습니다.</span>
|
||||
<a href="#" class="toast-action" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 6px; color: #FFD8D3; font-weight: 600; text-decoration: none">대용량 첨부 보기</a>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>위험 알림은 웹메일을 열어 둔 동안이면 바로(실시간 알림의 길), 아니면 다음에 메일 화면에 들어올 때 한 번. 단추가 있으니 10초 — 마우스 · 초점이 있으면 멈춤(지금 알림 규칙)</li>
|
||||
<li>같은 메일의 다른 파일은 그대로 받을 수 있습니다 — 링크를 끊을지는 보낸 사람이 정합니다</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2200}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,287 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>내려받기 화면 — files.arasystem.it.kr</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}
|
||||
.primary{background:#0E7C86;color:#FFFFFF}
|
||||
.primary:hover{background:#0A5F67}
|
||||
.ghost{background:transparent;color:#4A5363}
|
||||
.ghost:hover{background:#F2F4F7;color:#171C26}
|
||||
.line-btn{background:#FFFFFF;color:#0A5F67;border:1px solid #D0D5DD}
|
||||
.line-btn:hover{background:#F2F4F7}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 2130px; box-sizing: border-box; padding: 48px; display: flex; flex-direction: column; gap: 28px; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; max-width: 1060px">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">내려받기 화면 — files.arasystem.it.kr/s/…</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">메일 속 링크는 파일이 아니라 이 화면으로 옵니다. 로그인 없이 링크가 있는 누구나 열고, 계정 비밀번호는 절대 묻지 않습니다. 앱 레일 · 로그인 메뉴가 없는 독립 화면이며, 메일 제목 · 본문 · 받는 사람은 보이지 않습니다. 초안 — 사용자 확인 전.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 900px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="내려받기 화면 — 정상" style="display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px; overflow: hidden">
|
||||
<div style="display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px; background: #EEF0F3; border-bottom: 1px solid #E6E8EC">
|
||||
<span aria-hidden="true" style="display: inline-flex; gap: 6px"><span style="width: 10px; height: 10px; border-radius: 50%; background: #D0D5DD"></span><span style="width: 10px; height: 10px; border-radius: 50%; background: #D0D5DD"></span><span style="width: 10px; height: 10px; border-radius: 50%; background: #D0D5DD"></span></span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 6px; background: #FFFFFF; color: #344054; font-size: 12.5px">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"><strong style="font-weight: 600; color: #171C26">files.arasystem.it.kr</strong>/s/Qx7mK2vR9pL4wT8nB3cF6hJ1dS5gA0eY2uI7oP9kZ3x</span>
|
||||
</div>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; color: #667085">탭 제목 "김아라 님이 보낸 파일 — ARA SYSTEM"</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; background: #F6F7F9">
|
||||
<header style="display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 28px; background: #0B3640">
|
||||
<img src="/_blob/3a2f4115a8f90207faa7d3a51cd9aec2" alt="ARA SYSTEM" width="88" height="42" style="display: block; width: 88px; height: auto">
|
||||
<span aria-hidden="true" style="width: 1px; height: 18px; background: rgba(255, 255, 255, 0.25)"></span>
|
||||
<span style="color: #E6EFF0; font-size: 13px; font-weight: 600">파일 내려받기</span>
|
||||
</header>
|
||||
|
||||
<main style="display: flex; justify-content: center; padding: 32px 24px 24px">
|
||||
<div style="width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<h2 style="margin: 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">김아라 님이 보낸 파일 2개 (1.8 GB)</h2>
|
||||
<p style="margin: 0; color: #344054">보낸 사람 <strong style="font-weight: 600">김아라</strong> <ara.kim@arasystem.it.kr> · ARA SYSTEM</p>
|
||||
<p style="margin: 0; color: #344054"><strong style="font-weight: 600">2026년 11월 29일(일)까지</strong> 내려받을 수 있습니다 (한국 시간) · 30일 남음</p>
|
||||
</div>
|
||||
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF">
|
||||
<li style="display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<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.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.4"><span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600">설계도_v3.dwg</span><span style="font-size: 12.5px; color: #667085">1.2 GB · 보안 검사 · 이상 없음</span></div>
|
||||
<a href="#" class="primary" aria-label="설계도_v3.dwg 내려받기 (1.2 GB)" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 8px; font-weight: 600; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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>내려받기</a>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px">
|
||||
<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.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.4"><span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600">현장영상_1029.mp4</span><span style="font-size: 12.5px; color: #667085">612 MB · 보안 검사 · 이상 없음</span></div>
|
||||
<a href="#" class="primary" aria-label="현장영상_1029.mp4 내려받기 (612 MB)" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 8px; font-weight: 600; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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>내려받기</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: -6px 0 0; font-size: 12.5px; color: #667085">내려받다 끊기면 브라우저의 다운로드 목록에서 다시 시도하세요 — 받은 곳부터 이어서 받습니다.</p>
|
||||
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 8px; background: #E3F2F3; color: #0A5F67">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
|
||||
<p style="margin: 0; font-weight: 500">이 화면은 로그인이나 비밀번호를 묻지 않습니다. 묻는 화면이 나오면 닫고 보낸 사람에게 확인해 주세요.</p>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">받을 이유가 없는 파일이면 <a href="mailto:postmaster@arasystem.it.kr">postmaster@arasystem.it.kr</a> 로 알려 주세요.</p>
|
||||
<p lang="en" style="margin: 0; font-size: 12px; color: #667085">Files from 김아라 (ara.kim@arasystem.it.kr) — download by Nov 29, 2026 (KST). This page never asks for a login or password.</p>
|
||||
</div>
|
||||
</main>
|
||||
<footer style="padding: 8px 24px 20px; text-align: center; font-size: 12px; color: #98A2B3">ARA SYSTEM · files.arasystem.it.kr</footer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 20px">
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">넣는 것</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>회사 로고 · 이름 — 모양을 늘 같게("평소와 다르면 의심"이 통하게)</li>
|
||||
<li>보낸 사람 이름 · 주소 — 로그인한 계정의 값이라 보낸 사람이 바꿀 수 없습니다. "someone" 같은 말은 쓰지 않습니다</li>
|
||||
<li>끝나는 날(한국 시간) · n일 남음</li>
|
||||
<li>파일마다 이름 · 크기 · 검사 상태 · [내려받기]. 묶음 크기는 제목에</li>
|
||||
<li>로그인 · 비밀번호를 묻지 않는다는 안내(청록 상자), 신고 · 문의 주소(운영 설정 — 처음 값 postmaster@메일 도메인), 영어 한 줄</li>
|
||||
</ul>
|
||||
<h2 style="margin: 6px 0 0; font-size: 14px; font-weight: 700">넣지 않는 것</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>메일 제목 · 본문 · 받는 사람 — 링크가 전달되면 그 사람도 보고, 숨은참조가 드러납니다</li>
|
||||
<li>내려받은 수 · 남은 수 — 상한(파일당 500회)은 넘었을 때만 알립니다</li>
|
||||
<li>로그인 칸 · 광고 · 다른 서비스 안내 · 앱 레일 · 상단 바</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">동작</h2>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>[내려받기]는 파일을 바로 받습니다 — 형식과 상관없이 늘 저장(브라우저가 열지 않음). 누르기 직전에 상태를 한 번 더 물어, 그사이 끝났으면 화면에서 알립니다</li>
|
||||
<li>세는 것은 처음부터 받기 시작한 수뿐 — 화면 열기 · 이어 받기 · 보안 장비가 링크를 미리 여는 것은 세지 않습니다</li>
|
||||
<li>검색 엔진에 걸리지 않고(noindex), 이 화면에서 나가는 요청에 주소가 실리지 않습니다(no-referrer)</li>
|
||||
<li>폭 640 의 가운데 열. 좁으면 줄마다 단추가 이름 아래로 내려갑니다(아래 휴대폰)</li>
|
||||
<li>모든 상태에서 머리(로고) · 신고 주소 · 영어 한 줄은 그대로입니다</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="좁은 폭 — 휴대폰 360px" style="display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="align-self: stretch; display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">좁은 폭 — 휴대폰 360px</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">메일 앱의 링크로 열었을 때 · 단추는 줄 아래 전체 폭</p>
|
||||
</div>
|
||||
<div style="width: 360px; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 20px; overflow: hidden; background: #F6F7F9">
|
||||
<header style="display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; background: #0B3640">
|
||||
<img src="/_blob/3a2f4115a8f90207faa7d3a51cd9aec2" alt="ARA SYSTEM" width="76" height="36" style="display: block; width: 76px; height: auto">
|
||||
<span aria-hidden="true" style="width: 1px; height: 14px; background: rgba(255, 255, 255, 0.25)"></span>
|
||||
<span style="color: #E6EFF0; font-size: 12.5px; font-weight: 600">파일 내려받기</span>
|
||||
</header>
|
||||
<div style="display: flex; flex-direction: column; gap: 14px; padding: 20px 16px 18px">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px">
|
||||
<h3 style="margin: 0; font-size: 18px; line-height: 1.4; font-weight: 650">김아라 님이 보낸 파일 2개 (1.8 GB)</h3>
|
||||
<p style="margin: 0; color: #344054">보낸 사람 <strong style="font-weight: 600">김아라</strong><br>ara.kim@arasystem.it.kr</p>
|
||||
<p style="margin: 0; color: #344054"><strong style="font-weight: 600">2026년 11월 29일(일)까지</strong> 내려받을 수 있습니다 (한국 시간) · 30일 남음</p>
|
||||
</div>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF">
|
||||
<li style="display: flex; flex-direction: column; gap: 10px; padding: 12px; border-bottom: 1px solid #EEF0F3">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.4"><span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">설계도_v3.dwg</span><span style="font-size: 12px; color: #667085">1.2 GB · 보안 검사 · 이상 없음</span></div>
|
||||
</div>
|
||||
<a href="#" class="primary" style="display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 8px; font-weight: 600; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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>내려받기</a>
|
||||
</li>
|
||||
<li style="display: flex; flex-direction: column; gap: 10px; padding: 12px">
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.4"><span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">현장영상_1029.mp4</span><span style="font-size: 12px; color: #667085">612 MB · 보안 검사 · 이상 없음</span></div>
|
||||
</div>
|
||||
<a href="#" class="primary" style="display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 8px; font-weight: 600; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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>내려받기</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: -4px 0 0; font-size: 12px; color: #667085">내려받다 끊기면 브라우저의 다운로드 목록에서 다시 시도하세요 — 이어서 받습니다.</p>
|
||||
<div style="display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #E3F2F3; color: #0A5F67; font-size: 12.5px">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
|
||||
<p style="margin: 0; font-weight: 500">이 화면은 로그인이나 비밀번호를 묻지 않습니다. 묻는 화면이 나오면 닫고 보낸 사람에게 확인해 주세요.</p>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12px; color: #4A5363">받을 이유가 없는 파일이면 <a href="mailto:postmaster@arasystem.it.kr">postmaster@arasystem.it.kr</a> 로 알려 주세요.</p>
|
||||
<p lang="en" style="margin: 0; font-size: 11.5px; color: #667085">Files from 김아라 (ara.kim@arasystem.it.kr) — download by Nov 29, 2026 (KST). This page never asks for a login or password.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">검사 중</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">모든 파일이 검사 중일 때의 제목 · 일부면 그 줄만</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #F6F7F9">
|
||||
<h3 style="margin: 0; font-size: 17px; font-weight: 650">보안 검사 중입니다</h3>
|
||||
<p style="margin: 0; color: #344054">파일을 검사하고 있습니다. 몇 분 뒤 이 화면을 다시 열어 주세요.</p>
|
||||
<div style="display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FFFFFF">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.4"><span style="font-weight: 600">현장영상_1029.mp4</span><span id="sp-scan-note" style="font-size: 12px; color: #667085">612 MB · 보안 검사 중</span></div>
|
||||
<a role="link" aria-disabled="true" aria-describedby="sp-scan-note" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; background: #D0D5DD; color: #FFFFFF; font-weight: 600; cursor: not-allowed">내려받기</a>
|
||||
</div>
|
||||
<button type="button" class="line-btn" style="align-self: flex-start; min-height: 44px; padding: 0 14px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">다시 확인</button>
|
||||
<p lang="en" style="margin: 0; font-size: 12px; color: #667085">Security scan in progress — please check again in a few minutes.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">위험 — 막음</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">보안 검사에서 위험이 나온 파일 · 보낸 사람에게 알림</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #F6F7F9">
|
||||
<h3 style="margin: 0; font-size: 17px; font-weight: 650">내려받을 수 없는 파일입니다</h3>
|
||||
<p style="margin: 0; color: #344054">보안 검사에서 위험한 내용이 발견되어 막았습니다. 보낸 사람에게 알렸습니다.</p>
|
||||
<div style="display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid #FBD7D3; border-radius: 8px; background: #FEF3F2">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.4"><span style="font-weight: 600; color: #B42318">견적_요청서.zip</span><span style="font-size: 12px; color: #B42318">24 MB · 위험 — 막았습니다</span></div>
|
||||
</div>
|
||||
<p lang="en" style="margin: 0; font-size: 12px; color: #667085">This file was blocked by a security scan.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">검사하지 못함 — 받을 수는 있음</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">암호 압축처럼 안을 볼 수 없는 파일 · 제목은 그대로</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #F6F7F9">
|
||||
<div style="display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FFFFFF">
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.4"><span style="font-weight: 600">협력사_자료모음.7z</span><span style="font-size: 12px; color: #7A5200">860 MB · 검사하지 못함 — 암호가 걸린 압축 파일입니다. 보낸 사람을 아는 경우에만 여세요.</span></div>
|
||||
<a href="#" class="primary" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; font-weight: 600; text-decoration: none">내려받기</a>
|
||||
</div>
|
||||
<p lang="en" style="margin: 0; font-size: 12px; color: #667085">Not scanned (password-protected archive) — open it only if you know the sender.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">횟수 초과</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">파일마다 500번 — 넘은 파일만, 그 줄에서 알립니다</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #F6F7F9">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FFFFFF">
|
||||
<span style="font-weight: 600; color: #667085">홍보영상_최종.mov</span>
|
||||
<span style="font-size: 12.5px; color: #344054">내려받을 수 있는 횟수를 넘었습니다 — 이 파일은 500번까지 받을 수 있습니다. 보낸 사람에게 다시 보내 달라고 요청해 주세요.</span>
|
||||
</div>
|
||||
<p lang="en" style="margin: 0; font-size: 12px; color: #667085">Download limit reached for this file — please ask the sender to share it again.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">만료</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">끝나는 날이 지났다 · 파일은 지웠다</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #F6F7F9">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
|
||||
<h3 style="margin: 0; font-size: 17px; font-weight: 650">내려받을 수 있는 기간이 지났습니다</h3>
|
||||
<p style="margin: 0; color: #344054">2026년 11월 29일까지 받을 수 있었던 파일입니다. 파일은 지워져 다시 받을 수 없습니다. 필요하면 보낸 사람(김아라, ara.kim@arasystem.it.kr)에게 다시 보내 달라고 요청해 주세요.</p>
|
||||
<p lang="en" style="margin: 0; font-size: 12px; color: #667085">This link expired on Nov 29, 2026 (KST).</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">회수 — 공유 멈춤</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">보낸 사람이 링크를 끊었다 · 파일 이름도 보이지 않는다</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #F6F7F9">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
|
||||
<h3 style="margin: 0; font-size: 17px; font-weight: 650">보낸 사람이 공유를 멈췄습니다</h3>
|
||||
<p style="margin: 0; color: #344054">필요하면 보낸 사람(김아라, ara.kim@arasystem.it.kr)에게 문의해 주세요.</p>
|
||||
<p lang="en" style="margin: 0; font-size: 12px; color: #667085">The sender stopped sharing these files.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">없는 링크</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">모르는 주소 · 끝난 지 90일이 지나 기록을 지운 링크 — 보낸 사람도 보이지 않는다</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #F6F7F9">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<h3 style="margin: 0; font-size: 17px; font-weight: 650">찾을 수 없는 링크입니다</h3>
|
||||
<p style="margin: 0; color: #344054">메일의 주소가 끝까지 복사되었는지 확인해 주세요.</p>
|
||||
<p lang="en" style="margin: 0; font-size: 12px; color: #667085">Link not found — check that the whole address was copied.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">잠시 막힘</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">같은 곳(IP)에서 요청이 너무 많을 때 · 화면 열기 · 내려받기 모두</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #F6F7F9">
|
||||
<h3 style="margin: 0; font-size: 17px; font-weight: 650">요청이 너무 많습니다</h3>
|
||||
<p style="margin: 0; color: #344054">잠시 뒤 다시 시도해 주세요.</p>
|
||||
<button type="button" class="line-btn" style="align-self: flex-start; min-height: 44px; padding: 0 14px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">다시 시도</button>
|
||||
<p lang="en" style="margin: 0; font-size: 12px; color: #667085">Too many requests — please try again shortly.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2130}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -33,9 +33,14 @@
|
||||
"MailReadTools.dc.html": { "x": 0, "y": 16820, "w": 1440, "h": 1220, "title": "읽기 화면 — 외부 이미지 · 인쇄 · 보낸 사람 차단" },
|
||||
"MailPrint.dc.html": { "x": 1520, "y": 16820, "w": 1440, "h": 1060, "title": "인쇄 화면" },
|
||||
"MailSendLater.dc.html": { "x": 3040, "y": 16820, "w": 1440, "h": 1500, "title": "보내기 취소 · 예약 발송" },
|
||||
"SettingsSendRead.dc.html": { "x": 4560, "y": 16820, "w": 1440, "h": 1000, "title": "설정 · 보내기 · 읽기 · 차단한 주소" }
|
||||
"SettingsSendRead.dc.html": { "x": 4560, "y": 16820, "w": 1440, "h": 1000, "title": "설정 · 보내기 · 읽기 · 차단한 주소" },
|
||||
"ComposeLargeFiles.dc.html": { "x": 0, "y": 18920, "w": 1440, "h": 2360, "title": "메일 쓰기 · 대용량 첨부" },
|
||||
"LargeFileBlock.dc.html": { "x": 1520, "y": 18920, "w": 1440, "h": 2020, "title": "본문 덩이 — 바깥 메일 프로그램에서" },
|
||||
"MailReadLargeFiles.dc.html": { "x": 3040, "y": 18920, "w": 1440, "h": 1940, "title": "읽기 화면 · 대용량 첨부" },
|
||||
"SharePage.dc.html": { "x": 4560, "y": 18920, "w": 1440, "h": 2130, "title": "내려받기 화면 (files.arasystem.it.kr)" },
|
||||
"SettingsLargeFiles.dc.html": { "x": 6080, "y": 18920, "w": 1440, "h": 2200, "title": "설정 · 대용량 첨부" }
|
||||
},
|
||||
"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"],
|
||||
"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"],
|
||||
"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 },
|
||||
@@ -45,7 +50,8 @@
|
||||
"phase6": { "x": 0, "y": 10380, "text": "6단계 화면 — 메일 필터 (설정 › 메일 › 필터 · 읽기 화면 ⋯ 「이런 메일로 필터 만들기」) — 2026-10-28 확정", "kind": "title1", "maxW": 2960 },
|
||||
"phase7": { "x": 0, "y": 12400, "text": "7단계 화면 — 이미 받은 메일에 필터 적용 · 필터 창 나가기 확인 · 부재중 안내 — 2026-10-29 확정", "kind": "title1", "maxW": 2960 },
|
||||
"phase8": { "x": 0, "y": 14280, "text": "8단계 화면 — 주소록 (내 연락처 · 그룹 · 사내 목록 · 메일에서 쓰기) — 2026-10-29 확정", "kind": "title1", "maxW": 4480 },
|
||||
"phase9": { "x": 0, "y": 16520, "text": "9단계 화면 — 보내기 취소 · 예약 발송 · 외부 이미지 보기 · 인쇄 · 보낸 사람 차단 — 2026-10-29 확정", "kind": "title1", "maxW": 6000 }
|
||||
"phase9": { "x": 0, "y": 16520, "text": "9단계 화면 — 보내기 취소 · 예약 발송 · 외부 이미지 보기 · 인쇄 · 보낸 사람 차단 — 2026-10-29 확정", "kind": "title1", "maxW": 6000 },
|
||||
"phase11": { "x": 0, "y": 18620, "text": "11단계 화면 — 대용량 첨부 (쓰기 · 본문 덩이 · 읽기 · 내려받기 화면 · 설정) — 초안, 사용자 확인 전", "kind": "title1", "maxW": 7520 }
|
||||
},
|
||||
"designSystems": []
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user