From b24f97c81cf54ddb092bdf83146a4988d0a77a52 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 21:05:06 +0900
Subject: [PATCH] feat(fe): implement user age-tier font scale selector with
 localStorage persistence

---
 frontend/src/design-system/tokens.css  | 28 +++++++++
 frontend/src/shared/shell/KsHeader.vue | 78 +++++++++++++++++++++++++-
 2 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/frontend/src/design-system/tokens.css b/frontend/src/design-system/tokens.css
index c2c2e9ab..47967e7d 100644
--- a/frontend/src/design-system/tokens.css
+++ b/frontend/src/design-system/tokens.css
@@ -152,3 +152,31 @@
   --ks-grid-density: 2rem;
 }
 
+/* User Age-Tier Font Accessibility Scales (사용자 연령대별 폰트 크기 표준) */
+/* 1) 청년/청장년층 (20~40대): 고밀도 정보 습득용 초고밀도 미세 폰트 */
+[data-font-scale='compact'] {
+  --ks-font-page: 15px;
+  --ks-font-section: 13px;
+  --ks-font-body: 11px;
+  --ks-font-grid: 11px;
+  --ks-font-caption: 10px;
+}
+
+/* 2) 중장년층 (50대): 시인성 및 판독성이 확보된 표준 ERP 폰트 */
+[data-font-scale='standard'] {
+  --ks-font-page: 17px;
+  --ks-font-section: 15px;
+  --ks-font-body: 13px;
+  --ks-font-grid: 13px;
+  --ks-font-caption: 11.5px;
+}
+
+/* 3) 시니어/고령층 (60대 이상): 가독성 최우선 대형 폰트 */
+[data-font-scale='senior'] {
+  --ks-font-page: 20px;
+  --ks-font-section: 17px;
+  --ks-font-body: 15px;
+  --ks-font-grid: 15px;
+  --ks-font-caption: 13px;
+}
+
diff --git a/frontend/src/shared/shell/KsHeader.vue b/frontend/src/shared/shell/KsHeader.vue
index e527a69b..ceee6a91 100644
--- a/frontend/src/shared/shell/KsHeader.vue
+++ b/frontend/src/shared/shell/KsHeader.vue
@@ -37,6 +37,19 @@ const handleLogout = () => {
   showUserMenu.value = false
 }
 
+const currentFontScale = ref<string>(localStorage.getItem('font-scale') || 'compact')
+
+const setFontScale = (scale: string) => {
+  currentFontScale.value = scale
+  document.documentElement.setAttribute('data-font-scale', scale)
+  localStorage.setItem('font-scale', scale)
+}
+
+// Initial application
+if (typeof document !== 'undefined') {
+  document.documentElement.setAttribute('data-font-scale', currentFontScale.value)
+}
+
 const toggleTheme = () => {
   const root = document.documentElement
   const isDark = root.getAttribute('data-theme') === 'dark'
@@ -93,6 +106,34 @@ const toggleTheme = () => {
 
       <!-- Right side actions -->
       <div class="ks-header__end">
+        <!-- User Age-Tier Font Scale Selector -->
+        <div class="ks-header__font-scale-selector" title="연령별 / 가독성 폰트 크기 선택">
+          <button
+            type="button"
+            :class="['ks-header__font-btn', { 'ks-header__font-btn--active': currentFontScale === 'compact' }]"
+            title="청년/청장년층 (초고밀도 11px)"
+            @click="setFontScale('compact')"
+          >
+            청년 (소)
+          </button>
+          <button
+            type="button"
+            :class="['ks-header__font-btn', { 'ks-header__font-btn--active': currentFontScale === 'standard' }]"
+            title="중장년층 50대 (표준 13px)"
+            @click="setFontScale('standard')"
+          >
+            중장년 (중)
+          </button>
+          <button
+            type="button"
+            :class="['ks-header__font-btn', { 'ks-header__font-btn--active': currentFontScale === 'senior' }]"
+            title="시니어 60대 이상 (대형가독 15px)"
+            @click="setFontScale('senior')"
+          >
+            시니어 (대)
+          </button>
+        </div>
+
         <!-- Theme toggle -->
         <button
           type="button"
@@ -301,10 +342,45 @@ const toggleTheme = () => {
 .ks-header__end {
   display: flex;
   align-items: center;
-  gap: var(--spacing-3);
+  gap: var(--ks-space-2);
   flex-shrink: 0;
 }
 
+.ks-header__font-scale-selector {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background-color: var(--ks-color-canvas);
+  border: 1px solid var(--ks-color-border);
+  border-radius: var(--ks-radius-sm);
+  padding: 2px;
+}
+
+.ks-header__font-btn {
+  background: transparent;
+  border: none;
+  color: var(--ks-color-text-muted);
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 6px;
+  height: 22px;
+  border-radius: 2px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: var(--ks-transition-fast);
+}
+
+.ks-header__font-btn:hover {
+  color: var(--ks-color-text);
+  background-color: var(--ks-color-neutral-200);
+}
+
+.ks-header__font-btn--active {
+  background-color: var(--ks-color-action);
+  color: #ffffff !important;
+  font-weight: 600;
+}
+
 .ks-header__action-btn {
   background-color: var(--color-background-secondary);
   border: 1px solid var(--color-border-primary);