docs: 탭 · 홈 화면 아이콘 규칙을 디자인 README · vue3 스킬에 적는다

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
feat(frontend): 탭 · 홈 화면 아이콘을 ARA 마크로 바꾼다
2026-11-04 22:41:05 +09:00 · 2026-11-04 22:41:05 +09:00
7 changed files with 13 additions and 2 deletions
@@ -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` | 네이티브 `<dialog>`(초점·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` 와 같은 규칙) |
@@ -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`.
+
 ## 디자인 원칙 (사용자 확정)

 - 안 읽음 점·개수 알약·코드 태그 같은 **뱃지를 쓰지 않는다** — 굵은 글자와 평범한 숫자로 구분한다.
@@ -2,7 +2,11 @@
 <html lang="ko">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <!-- 아이콘은 빌드가 /assets/ 의 해시 파일로 바꾼다(배포 직후 새 그림). public/favicon.ico 는 주소를 직접 묻는 클라이언트용 -->
+    <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/brand/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/src/assets/brand/favicon-16.png" />
+    <link rel="apple-touch-icon" href="/src/assets/brand/apple-touch-icon.png" />
+    <meta name="theme-color" content="#0B3640" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="ARA SYSTEM 사내 업무 시스템" />
    <title>ARA SYSTEM</title>
Author	SHA1	Message	Date
ttipo	7d0d5f34c0	docs: 탭 · 홈 화면 아이콘 규칙을 디자인 README · vue3 스킬에 적는다 CI / Backend (lint · type-check · test · e2e · build) (pull_request) Successful in 14m34s Details CI / Frontend (lint · type-check · test · build) (pull_request) Successful in 12m11s Details CI / Infra (compose · Dockerfile · nginx · 운영 스크립트) (pull_request) Successful in 1m40s Details CI / 에러 코드 SSOT 동기화 검사 (pull_request) Successful in 11m8s Details CI / Backend (lint · type-check · test · e2e · build) (push) Successful in 13m30s Details CI / Frontend (lint · type-check · test · build) (push) Successful in 13m4s Details CI / Infra (compose · Dockerfile · nginx · 운영 스크립트) (push) Successful in 2m0s Details CI / 에러 코드 SSOT 동기화 검사 (push) Successful in 11m15s Details Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-11-04 22:41:05 +09:00
ttipo	9c8728138e	feat(frontend): 탭 · 홈 화면 아이콘을 ARA 마크로 바꾼다 Vue 기본 favicon 이 남아 있었다. 5단계 알림 아이콘과 같은 모양(#0B3640 둥근 사각 + 흰 ARA 마크)을 원본 로고에서 크기마다 따로 줄였다 — 16 · 32 는 가는 획을 조금 굵게. index.html 은 아이콘을 /src 경로로 걸어 빌드가 /assets/ 의 해시 파일로 바꾼다 — 배포 직후 새 아이콘이 보이고, 공개 내려받기 호스트도 /assets/ 는 연다(nginx 그대로). public/favicon.ico(16 · 32 · 48)는 /favicon.ico 를 직접 묻는 클라이언트용으로 바꿔 둔다. apple-touch-icon(180 불투명 정사각)과 theme-color #0B3640 도 더한다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-11-04 22:41:05 +09:00