diff --git a/.claude/skills/vue3/SKILL.md b/.claude/skills/vue3/SKILL.md index f21bf64..f95d652 100644 --- a/.claude/skills/vue3/SKILL.md +++ b/.claude/skills/vue3/SKILL.md @@ -31,7 +31,7 @@ description: Vue 3 프론트엔드(frontend/) 개발 규칙 — Composition API | 라우터 | `src/router/index.ts` · 라우트 표 `src/router/routes.ts`(라우터와 라우트 테스트가 함께 쓴다) | lazy import + 첫 네비게이션 전 세션 복원 + `requiresAuth` 가드(미인증 → `{ name: 'login', query: { redirect } }`) | | 전역 셸 | `src/components/shell/AppShell.vue` | 앱 레일 + 상단 바 + 모듈 영역. 레일 모듈 목록은 `src/shared/constants/app-modules.ts` 하나 | | 디자인 토큰·글꼴 | `src/styles/tokens.css` · `src/styles/base.css` | 색·간격·글자 크기 변수. 글꼴은 npm `pretendard` 자체 호스팅(`main.ts` 에서 import — CSP `font-src 'self'`) | -| 브랜드 자산 | `src/assets/brand/` · `src/shared/constants/brand.ts` | 흰 로고(전체·ARA 마크). 원본은 `docs/brand/` | +| 브랜드 자산 | `src/assets/brand/` · `src/shared/constants/brand.ts` | 흰 로고(전체·ARA 마크). 원본은 `docs/brand/`. 탭 · 홈 화면 아이콘(`favicon-16.png` · `favicon-32.png` · `apple-touch-icon.png`)은 `index.html` 이 `/src/assets/brand/…` 로 걸어 빌드가 `/assets/` 의 해시 파일로 바꾼다 — 배포 직후 새 아이콘이 보이고, 공개 내려받기 호스트도 `/assets/` 는 연다. `public/favicon.ico` 는 주소를 직접 묻는 클라이언트용. 모양 · 크기 규칙은 디자인 README 머리 | | 토스트 | `src/stores/toast.store.ts` · `src/components/feedback/ToastHost.vue` | 오류는 `useApi.ts` 의 `showErrorUI()`, 성공 안내는 `composables/useToast.ts`(API 가 아닌 화면 쪽 실패 — 예: 브라우저가 알림을 막음 · 보냈지만 받는 사람 일부가 받지 못함(+ [보낸편지함 보기], 문장은 `shared/utils/mail-send-result.ts`) — 는 `useToast().error()`). 알림 안의 단추는 `{ label, run }`(예: 임시 저장본 [되돌리기]), 이동 링크는 지금처럼. 단추가 있는 알림은 10초(`TOAST_ACTION_DURATION_MS`), 마우스 · 초점이 있는 동안은 `hold`·`release` 로 멈춘다. **단추는 띄운 세션에서만 움직인다** — `useToast` 가 `authStore.generation` 에 묶고, 로그아웃 · 세션 만료 · 다른 계정 로그인 때 단추가 있는 알림을 닫는다(메일 id 는 계정마다 겹칠 수 있다). 오래 걸리는 처리는 **진행 알림** `useToast().progress(글)` — 저절로 닫히지 않고(넘쳐도 다른 알림부터 닫는다) 글을 고치다가(`update`) 끝나면 그 자리에서 결과가 된다(`succeed` · `fail` — `toast.store` 의 `update`). 결과에도 단추를 붙일 수 있다(`succeed(글, action)` · `fail(글, action)` — 7단계 필터 적용의 [{메일함} 보기] · [다시 시도], 시간 · 세션 묶기는 다른 단추와 같다). 진행 알림도 세션이 바뀌면 닫는다 | | 모달 대화상자 | `src/components/feedback/ModalDialog.vue` | 네이티브 ``(초점·Esc·닫힘 처리)와 모양. 세션 만료(`SessionExpiredDialog`)·나가기 확인(공용 `components/feedback/LeaveConfirmDialog.vue` — 쓰기 화면 `ComposeLeaveDialog.vue`·서명 설정 · 부재중 설정 · 필터 고치기 창 위(7단계)가 쓴다) · 메일함 대화상자(`components/mail/Mailbox*Dialog.vue` — 기본 슬롯에 이름 칸) · 필터 고치기 창(`components/settings/MailFilterDialog.vue` — 칸이 많은 창은 `wide`: 폭 620) · 주소록의 연락처 · 그룹 창(`medium`: 폭 400 — 8단계)이 쓴다 — 새 대화상자도 이것으로 만든다. 되돌릴 수 없는 일의 확인은 처음 초점을 「취소」에 둔다. 초점을 지키려고 `aria-disabled` 로 막은 단추에는 마우스를 올린 모양이 걸리지 않는다. Esc 는 `cancel` 로 알리기만 한다 — 브라우저가 막지 못하고 스스로 닫았는데(Esc 를 거듭 누름) 쓰는 쪽이 닫지 않기로 했으면 `reshow()`(ref 로 부른다)로 다시 띄운다. 초점은 열린 동안 `focusin` 으로 기억한 창 안의 마지막 요소로 돌려준다(브라우저는 `close` 전에 초점을 창 밖으로 옮긴다) | | 외부 HTML 격리 렌더링 | `src/components/mail/MailBodyFrame.vue` · `src/shared/utils/mail-html.ts` | 메일 본문 등 외부 HTML 은 이 컴포넌트로만 그린다 (sandbox·내부 CSP 근거는 파일 머리말). 보여 줄 HTML 고르기는 `displayedHtmlBody()` 하나다 — null 이거나 공백뿐이면 textBody (읽기 화면·인용 공용, 서버의 `isBodyTruncated` 와 같은 규칙) | diff --git a/docs/design/webmail/README.md b/docs/design/webmail/README.md index ba61c07..4fe9b46 100644 --- a/docs/design/webmail/README.md +++ b/docs/design/webmail/README.md @@ -26,6 +26,13 @@ 로고 원본은 `docs/brand/logo_arasystem_white.png` 다. 흰 로고라 어두운 브랜드 바탕(`#0B3640`) 위에만 둔다. +탭 아이콘(favicon)과 홈 화면 아이콘은 바탕화면 알림 아이콘(5단계 `notification-icon.png`)과 같은 모양이다 — `#0B3640` 둥근 사각 가운데 흰 ARA 마크. +원본 로고의 위 덩이(ARA)를 크기마다 따로 줄였다(2026-11-04). +- `frontend/src/assets/brand/favicon-16.png` · `favicon-32.png`: 마크 폭 86% · 모서리 16%. 작은 크기에서 가는 획이 사라지지 않게 획을 조금 굵게 했다. +- `frontend/public/favicon.ico`: 16 · 32 · 48 세 장(48 은 굵게 하지 않았다) — `/favicon.ico` 를 직접 묻는 클라이언트용. +- `frontend/src/assets/brand/apple-touch-icon.png`: 180 불투명 정사각 · 마크 폭 77% — iOS 가 모서리를 깎는다. +- 모바일 브라우저 주소 표시줄 색(`theme-color`)은 `#0B3640`. + ## 디자인 원칙 (사용자 확정) - 안 읽음 점·개수 알약·코드 태그 같은 **뱃지를 쓰지 않는다** — 굵은 글자와 평범한 숫자로 구분한다. diff --git a/frontend/index.html b/frontend/index.html index ad388cb..9d2cf70 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,7 +2,11 @@ - + + + + + ARA SYSTEM diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico index df36fcf..57745be 100644 Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ diff --git a/frontend/src/assets/brand/apple-touch-icon.png b/frontend/src/assets/brand/apple-touch-icon.png new file mode 100644 index 0000000..02f39b0 Binary files /dev/null and b/frontend/src/assets/brand/apple-touch-icon.png differ diff --git a/frontend/src/assets/brand/favicon-16.png b/frontend/src/assets/brand/favicon-16.png new file mode 100644 index 0000000..48d84c7 Binary files /dev/null and b/frontend/src/assets/brand/favicon-16.png differ diff --git a/frontend/src/assets/brand/favicon-32.png b/frontend/src/assets/brand/favicon-32.png new file mode 100644 index 0000000..1403d03 Binary files /dev/null and b/frontend/src/assets/brand/favicon-32.png differ