diff --git a/docs/brand/logo_arasystem_white.png b/docs/brand/logo_arasystem_white.png new file mode 100644 index 0000000..c34cca3 Binary files /dev/null and b/docs/brand/logo_arasystem_white.png differ diff --git a/docs/design/webmail/Compose.dc.html b/docs/design/webmail/Compose.dc.html new file mode 100644 index 0000000..afcbd38 --- /dev/null +++ b/docs/design/webmail/Compose.dc.html @@ -0,0 +1,283 @@ + + + + +메일 쓰기 + + + + + + + +
+ + + +
+ +
+ 메일 +
+ + +
+
+ +
+ 김아라 + ara.kim@arasystem.it.kr +
+ + + 로그아웃 + +
+
+ +
+ + + +
+
+ +
+

{{ title }}

+ + + +
+ +
+ +
+ + + {{ chip.label }} + + + + +
+ +
+ + +

+ + 받는 사람 주소를 다시 확인해 주세요. +

+ + + +
+ + +
+
+ + +
+ + +
+ + +
+ + + +
+
+ + 파일당 최대 20MB · 문서, 이미지, 압축 파일 +
+ +
    + +
  • + + {{ file.name }} + {{ file.size }} + +
    • +     +
+ +
+ +
+ + + 보내기 + + 취소 + 보내는 사람 김아라 <ara.kim@arasystem.it.kr> +
+
+
+
+
+
+ + + + diff --git a/docs/design/webmail/Login.dc.html b/docs/design/webmail/Login.dc.html new file mode 100644 index 0000000..fd33fe8 --- /dev/null +++ b/docs/design/webmail/Login.dc.html @@ -0,0 +1,72 @@ + + + + +로그인 + + + + + + + +
+ +
+ ARA SYSTEM +
+

사내 업무를
한 계정으로

+

메일부터 시작해 캘린더, 파일 저장소, ERP까지 같은 계정으로 이어집니다.

+
+
+ +
+
+
+

로그인

+

회사 메일 계정(@arasystem.it.kr)으로 로그인하세요.

+
+ + +

+ + 이메일 또는 비밀번호가 올바르지 않습니다. +

+ + +
+
+ + +
+
+ + +
+ 로그인 +
+ +

비밀번호를 잊으셨다면 시스템 관리자에게 문의해 주세요.

+

Outlook이나 휴대폰 기본 메일 앱에서도 같은 계정으로 메일을 쓸 수 있습니다. (IMAP · SMTP 설정)

+
+
+
+ + + + diff --git a/docs/design/webmail/Main.dc.html b/docs/design/webmail/Main.dc.html new file mode 100644 index 0000000..c99ac04 --- /dev/null +++ b/docs/design/webmail/Main.dc.html @@ -0,0 +1,475 @@ + + + + +메일함 + + + + + + + +
+ + + +
+ +
+

메일

+
+ + +
+
+ +
+ 김아라 + ara.kim@arasystem.it.kr +
+ + + 로그아웃 + +
+
+ +
+ + + +
+ +
+
+

{{ boxName }}

+ {{ countText }} +
+ + + + 목록 + +
+ +
+ + +
    + +
  • + + +
    • +     +
+
+ +
+ + + +
+ +

{{ emptyText }}

+

{{ emptyHint }}

+
+ +
+ +
+ +
+ +
+ + + 답장 + + + + 전체 답장 + + + + 전달 + + + +
+ +
+
+

{{ m.subject }}

+ +
+ +
+ +
+
+ {{ m.fromName }} + {{ m.fromEmail }} + {{ m.date }} +
+ 받는 사람 {{ m.to }} + 참조 {{ m.cc }} +
+
+ + +

+ + 외부 이미지를 차단했습니다. 개인정보 보호를 위해 보낸 사람 서버의 이미지는 불러오지 않습니다. +

+ + +
{{ m.body }}
+ + +
+

첨부 파일 {{ m.attCount }}개

+
    + +
  • + +
    + {{ att.name }} + {{ att.size }} +
    + +
    • +     +
+
+ +
+
+ + + +
+ +

메일을 선택하세요

+

목록에서 메일을 고르면 내용이 여기에 표시됩니다.

+
+ +
+
+
+
+
+ + + + diff --git a/docs/design/webmail/MainList.dc.html b/docs/design/webmail/MainList.dc.html new file mode 100644 index 0000000..0764db6 --- /dev/null +++ b/docs/design/webmail/MainList.dc.html @@ -0,0 +1,300 @@ + + + + +메일함 · 목록 보기 + + + + + + + +
+ + + +
+ +
+

메일

+
+ + +
+
+ +
+ 김아라 + ara.kim@arasystem.it.kr +
+ + + 로그아웃 + +
+
+ +
+ + + +
+
+
+

{{ boxName }}

+ {{ countText }} +
+ + + 분할 + + +
+ +
+ + +
+
+ +
    + +
  • + + + 안 읽음, + {{ whoHeader }} {{ item.who }} + + + {{ item.subject }} + + + 날짜 {{ item.date }} + 크기 {{ item.size }} +
    • +     +
+
+
+
+ +
+ + + +
+ +

{{ emptyText }}

+

{{ emptyHint }}

+
+ +
+
+
+
+
+ + + + diff --git a/docs/design/webmail/MainListRead.dc.html b/docs/design/webmail/MainListRead.dc.html new file mode 100644 index 0000000..f5070dc --- /dev/null +++ b/docs/design/webmail/MainListRead.dc.html @@ -0,0 +1,373 @@ + + + + +목록 보기 · 메일 읽기 + + + + + + + +
+ + + +
+ +
+ 메일 +
+ + +
+
+ +
+ 김아라 + ara.kim@arasystem.it.kr +
+ + + 로그아웃 + +
+
+ +
+ + + +
+
+
+

{{ m.subject }}

+ +
+ +
+ +
+
+ {{ m.fromName }} + {{ m.fromEmail }} + {{ m.date }} +
+ 받는 사람 {{ m.to }} + 참조 {{ m.cc }} +
+
+ + +

+ + 외부 이미지를 차단했습니다. 개인정보 보호를 위해 보낸 사람 서버의 이미지는 불러오지 않습니다. +

+ + +
{{ m.body }}
+ + +
+

첨부 파일 {{ m.attCount }}개

+
    + +
  • + +
    + {{ att.name }} + {{ att.size }} +
    + +
    • +     +
+
+ +
+
+
+
+
+ + + + diff --git a/docs/design/webmail/README.md b/docs/design/webmail/README.md new file mode 100644 index 0000000..02ae354 --- /dev/null +++ b/docs/design/webmail/README.md @@ -0,0 +1,43 @@ +# 웹메일 디자인 원본 (1단계) + +확정된 디자인 캔버스의 원본이다. 화면 구현의 기준으로 쓴다. + +- 캔버스: https://claude.ai/artifact/WJvVsKvXepxn3p75CGJAr2 (확정본: 2026-10-26, 버전 11) +- 화면: `Login`(로그인) · `Main`(분할 보기: 메일함·목록·본문) · `MainList`(목록 보기: 게시판형 표) · `MainListRead`(목록 보기에서 연 메일) + · `Compose`(메일 쓰기) · `States`(오류·빈 상태·피드백 모음) +- 파일 형식은 캔버스 전용(`` 마크업 + `DCLogic` 클래스)이다. 그대로 쓰지 말고 **구조·간격·색·문구의 기준**으로만 본다. + +## 캔버스 안의 자산 주소 + +캔버스는 자산을 `/_blob/` 로 참조한다. 저장소에서는 아래 파일에 대응한다. + +| 캔버스 주소 | 저장소 파일 | 용도 | +| --- | --- | --- | +| `/_blob/16067b9aa5137abf808e3dbef30c42e0` | Pretendard Variable (npm `pretendard` 패키지로 자체 호스팅) | 전체 글꼴 | +| `/_blob/2b9ef4349333debc969432c859eaf1bf` | `frontend/src/assets/brand/logo-ara-white.png` | 왼쪽 앱 레일 로고(가로 48px) | +| `/_blob/3a2f4115a8f90207faa7d3a51cd9aec2` | `frontend/src/assets/brand/logo-arasystem-white.png` | 로그인 브랜드 패널 로고(가로 240px) | + +로고 원본은 `docs/brand/logo_arasystem_white.png` 다. 흰 로고라 어두운 브랜드 바탕(`#0B3640`) 위에만 둔다. + +## 디자인 원칙 (사용자 확정) + +- 안 읽음 점·개수 알약·코드 태그 같은 **뱃지를 쓰지 않는다** — 굵은 글자와 평범한 숫자로 구분한다. +- 왼쪽 **전역 앱 레일**(메일·캘린더·파일·ERP·주소록·설정)에 모듈을 계속 붙인다. 지금은 메일만 동작한다. +- 정보 밀도가 높은 데스크톱 화면 — 기본 13px. 목록에 본문 미리보기를 넣지 않는다. + - 분할 보기 행: 2줄(보낸 사람·시간 / 제목+첨부 클립), 약 50px + - 목록 보기 행: 1줄 표, 38px. 칸 = 별 32 · 보낸 사람 168 · 제목(나머지) · 날짜 84 · 크기 64 (px, 칸 사이 12). + 폭 1100px 미만에서 크기 칸 숨김, 600px 미만에서 보낸 사람·날짜 축소, 더 좁으면 가로 스크롤. + 캔버스는 파서 제약 때문에 grid 로 그렸지만 **구현은 실제 ``** 로 한다. + - 별 버튼·"분할 | 목록" 전환은 밀도를 위해 32~36px 로 둔다(클릭 영역 44px 기준의 의도된 예외 — 사용자 확정). +- 보기 방식: 목록 머리의 "분할 | 목록" 전환. 선택은 사용자별로 기억한다. +- **콘텐츠 열(읽기·쓰기 공통)**: 최대 폭 800px, 좌우 여백 32px, 위 20px·아래 36px, 본문 글줄 최대 680px, 영역 안 왼쪽 정렬. + 분할 보기 읽기·목록 보기 읽기·쓰기 세 곳이 같은 값을 쓰고, 툴바 첫 아이콘도 같은 32px 선에서 시작한다. +- 브랜드 컬러 "바다 청록": 바탕 `#0B3640`, 강조 `#0E7C86`. 파생 색은 각 화면 원본의 인라인 스타일을 따른다. + +## 구현하며 정한 보완 (2026-10-26 — 캔버스에는 아직 없다) + +- 쓰기 화면 첨부 안내문에 합계·개수 한도를 함께 적는다: "파일당 최대 20MB · 합계 25MB · 최대 20개 · 문서, 이미지, 압축 파일" (용량은 서버 값, 개수는 계약 상수). +- 답장·전달 초안이 한도(제목 255자·본문 100,000자)를 넘으면 인용을 줄이고 끝에 "(원문이 길어 이하 생략)"을 둔다. +- 찾지 못한 첨부(보관 시간이 지난 업로드·지워진 원본)는 실패로 표시하고, 전달 원본에는 "빼기"만 둔다(다시 올릴 수 없다). +- 없는 메일함·메일(주소창에 남은 옛 id 등)에는 "다시 시도" 대신 "받은편지함으로"·"목록으로"를 둔다. + "다시 시도"는 메일 서버 장애처럼 다시 해 보면 나아질 수 있는 오류에만 쓴다. diff --git a/docs/design/webmail/States.dc.html b/docs/design/webmail/States.dc.html new file mode 100644 index 0000000..ef8d862 --- /dev/null +++ b/docs/design/webmail/States.dc.html @@ -0,0 +1,180 @@ + + + + +오류 · 빈 상태 · 피드백 + + + + + + + +
+ +
+

오류 · 빈 상태 · 피드백

+

문구는 에러 코드 사전에서 가져오고, 화면은 코드로 분기합니다. 문제가 생기면 문의 코드(traceId)를 함께 보여 줍니다.

+
+ +
+ +
+
+

오류 알림

+

에러 코드 · MAIL_001

+
+

브라우저 alert 대신 화면 오른쪽 아래에 띄웁니다. 같은 코드는 3초 안에 한 번만 나옵니다.

+
+ +
+ 메일 서버와 연결할 수 없습니다. 잠시 후 다시 시도해 주세요. + 문의 코드 3f1c0a2e +
+ +
+
+ +
+
+

세션 만료

+

에러 코드 · AUTH_002

+
+

로그인 상태에서 401을 받으면 세션을 정리하고 이 안내를 띄웁니다.

+ +

다시 로그인해 주세요

+

안전을 위해 로그아웃 되었습니다. 다시 로그인해 주세요.

+ 로그인 화면으로 + +
+ +
+
+

메일 서버 장애 (목록 영역)

+

에러 코드 · MAIL_001

+
+

목록을 못 불러오면 빈 화면 대신 다시 시도할 수 있게 합니다.

+
+ +

메일 서버와 연결할 수 없습니다. 잠시 후 다시 시도해 주세요.

+ + 문의 코드 3f1c0a2e +
+
+ +
+
+

받는 사람 오류

+

에러 코드 · MAIL_002

+
+

형식이 틀린 주소는 입력 즉시 표시하고, 서버가 거부해도 같은 문구로 알립니다.

+
+
+ 받는 사람 + 박준호 <junho.park@arasystem.it.kr> + kim@arasystem +
+

+ + 받는 사람 주소를 다시 확인해 주세요. +

+
+
+ +
+
+

첨부 업로드

+

에러 코드 · FILE_001 · FILE_002

+
+

파일마다 진행률을 보여 주고, 실패한 파일만 다시 고르게 합니다.

+
    +
  • +
    + 회의록_1027.docx + 올리는 중 62% +
    +
    +
    +
    +
    • +
  • + 견적_비교표.xlsx + 52 KB · 완료 +
    • +
  • +
    + 현장사진_원본.zip + 38 MB +
    + 파일 크기가 허용 범위를 초과했습니다. +
    • +
+
+ +
+
+

외부 이미지 차단

+

보안

+
+

추적 픽셀을 막기 위해 외부 이미지는 불러오지 않습니다. 본문은 스크립트가 꺼진 격리 영역에 그립니다.

+

+ + 외부 이미지를 차단했습니다. 개인정보 보호를 위해 보낸 사람 서버의 이미지는 불러오지 않습니다. +

+
+ +
+
+

빈 메일함

+

메일함마다 이름과 안내를 바꿉니다

+
+
+ +

임시보관함이 비어 있습니다

+

임시 저장한 메일이 여기에 표시됩니다.

+
+
+ +
+
+

불러오는 중

+

목록 자리를 미리 잡아 화면이 튀지 않게 합니다

+
+
    +
    • +
    • +
    • +
+
+ +
+
+

보내기 완료

+

보던 메일함으로 돌아가며 짧게 알립니다

+
+
+ + 메일을 보냈습니다. + 보낸편지함 보기 +
+
+ +
+
+ + + + diff --git a/docs/design/webmail/canvas.json b/docs/design/webmail/canvas.json new file mode 100644 index 0000000..4adf2a0 --- /dev/null +++ b/docs/design/webmail/canvas.json @@ -0,0 +1,20 @@ +{ + "v": 3, + "createdOnFiles": { "v": 1, "at": "2026-10-26T04:25:00Z" }, + "title": "arasystem 웹메일 디자인", + "launch": { "view": "canvas" }, + "pages": [], + "boards": { + "Main.dc.html": { "x": 1520, "y": 0, "w": 1440, "h": 900, "title": "메일함 · 읽기", "expand": "fill", "is_interactive": true }, + "Login.dc.html": { "x": 0, "y": 0, "w": 1440, "h": 900, "title": "로그인", "expand": "fill", "is_interactive": true }, + "Compose.dc.html": { "x": 3040, "y": 0, "w": 1440, "h": 900, "title": "메일 쓰기", "expand": "fill", "is_interactive": true }, + "States.dc.html": { "x": 0, "y": 1020, "w": 1440, "h": 1040, "title": "오류 · 빈 상태 · 피드백" }, + "MainList.dc.html": { "x": 1520, "y": 1020, "w": 1440, "h": 900, "title": "메일함 · 목록 보기", "expand": "fill", "is_interactive": true }, + "MainListRead.dc.html": { "x": 3040, "y": 1020, "w": 1440, "h": 900, "title": "목록 보기 · 메일 읽기", "expand": "fill", "is_interactive": true } + }, + "order": ["Main.dc.html", "Login.dc.html", "Compose.dc.html", "States.dc.html", "MainList.dc.html", "MainListRead.dc.html"], + "notes": { + "flow": { "x": 0, "y": -300, "text": "arasystem 웹메일 — 1단계 화면 (로그인 → 메일함 → 쓰기)", "kind": "title1", "maxW": 4480 } + }, + "designSystems": [] +}