[Design] #414 - 앱 전체 Octo Code 전면 리디자인

.qa/issue-414/capture-after.cjs

@@ -0,0 +1,88 @@
+const fs = require('fs')
+const { chromium } = require('@playwright/test')
+
+const viewports = [
+  { name: 'mobile', width: 390, height: 844 },
+  { name: 'tablet', width: 768, height: 1024 },
+  { name: 'desktop', width: 1280, height: 900 },
+]
+
+const routes = [
+  { name: 'home', path: '/', token: 'mock-token-1' },
+  { name: 'chat', path: '/chat', token: 'mock-token-1' },
+  { name: 'calendar', path: '/calendar', token: 'mock-token-1' },
+  { name: 'attendance', path: '/attendance', token: 'mock-token-1' },
+  { name: 'work-schedules', path: '/work-schedules', token: 'mock-token-1' },
+  { name: 'drive', path: '/drive', token: 'mock-token-1' },
+  { name: 'ai', path: '/ai', token: 'mock-token-1' },
+  { name: 'members', path: '/members', token: 'mock-token-1' },
+  { name: 'my-page', path: '/my-page', token: 'mock-token-1' },
+  { name: 'team-management', path: '/team-management', token: 'mock-token-2' },
+  { name: 'admin', path: '/admin', token: 'mock-token-1' },
+  { name: 'login', path: '/login' },
+  { name: 'register', path: '/register' },
+  { name: 'verify-email', path: '/verify-email' },
+]
+
+const sourceCommit = '753febc17546ca4bdd7c3525f53e43fc719f7de1'
+
+async function capture() {
+  const browser = await chromium.launch({ headless: true })
+  const results = []
+
+  for (const viewport of viewports) {
+    for (const route of routes) {
+      const page = await browser.newPage({ viewport: { width: viewport.width, height: viewport.height } })
+      const setup = route.token
+        ? 'localStorage.setItem("accessToken", "' + route.token + '"); localStorage.setItem("refreshToken", "refresh-' + (route.token === 'mock-token-2' ? '2' : '1') + '");'
+        : 'localStorage.removeItem("accessToken"); localStorage.removeItem("refreshToken");'
+
+      await page.addInitScript({ content: setup + ' localStorage.setItem("yanus-theme", "dark");' })
+      const started = Date.now()
+      await page.goto('http://127.0.0.1:5173' + route.path, { waitUntil: 'networkidle' })
+      await page.waitForTimeout(500)
+
+      const metrics = await page.evaluate(() => ({
+        path: location.pathname,
+        scrollWidth: document.documentElement.scrollWidth,
+        scrollHeight: document.documentElement.scrollHeight,
+        bodyText: document.body.innerText.slice(0, 420),
+      }))
+
+      await page.screenshot({
+        path: '.qa/issue-414/after/' + route.name + '-' + viewport.name + '.png',
+        fullPage: true,
+      })
+
+      results.push({
+        name: route.name,
+        requestedPath: route.path,
+        role: route.token === 'mock-token-2' ? 'TEAM_LEAD' : route.token ? 'ADMIN' : 'PUBLIC',
+        viewport: viewport.name,
+        viewportWidth: viewport.width,
+        viewportHeight: viewport.height,
+        ...metrics,
+        durationMs: Date.now() - started,
+      })
+
+      console.log(route.name + '/' + viewport.name + ' ' + metrics.path + ' width=' + metrics.scrollWidth + ' height=' + metrics.scrollHeight)
+      await page.close()
+    }
+  }
+
+  fs.writeFileSync('.qa/issue-414/after/metadata.json', JSON.stringify({
+    capturedAt: new Date().toISOString(),
+    source: 'issue-414-after',
+    sourceCommit,
+    viewports,
+    routes,
+    results,
+  }, null, 2))
+
+  await browser.close()
+}
+
+capture().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})

DESIGN.md

@@ -63,6 +63,96 @@ Elevation is expressed through background color layering rather than shadows. Th
 - Don't animate transitions longer than 150ms — the interface should feel instant
 - Don't use the primary blue (#2F81F7) for large background fills — reserve it for interactive elements and links
 
+## Issue #414 — App-wide redesign
+
+Issue #414 extends the Octo Code contract from the attendance surface to every route. The
+redesign is a visual and interaction-system refactor: existing API calls, permission guards,
+state ownership, route semantics, and user-visible data remain unchanged.
+
+### Route inventory
+
+Authenticated routes share one application shell:
+
+`/` dashboard, `/chat` chat, `/calendar` calendar and tasks, `/attendance` attendance,
+`/work-schedules` work schedules, `/drive` drive, `/ai` AI chat, `/members` members,
+`/my-page` profile/settings, `/team-management` team management, and `/admin` administration.
+
+Public routes use the same tokens without the authenticated shell:
+
+`/login`, `/register`, and `/verify-email`.
+
+### Shared surface contract
+
+- **App shell**: a 200px desktop sidebar, a 64px topbar, and a fixed bottom navigation at
+  narrow widths. The content region is capped at 1280px with `20–32px` gutters and always
+  reserves bottom-bar clearance on touch layouts.
+- **Page header**: one eyebrow, one Korean page title, one concise description, and a right-side
+  action group. Header actions never compete with the page title on mobile.
+- **Surface**: cards, tables, lists, forms, drawers, and modals use `#161B22`, a 1px
+  `#30363D` border, a maximum 6px radius, and layered backgrounds instead of blur or decorative
+  gradients.
+- **Controls**: primary actions use Mona Blue or Growth Green only when the action is a merge/
+  success operation. Secondary controls are bordered and transparent. Inputs are 36px high on
+  desktop and at least 44px high for touch-critical actions.
+- **Data display**: dense information uses border-separated rows, compact metadata, and explicit
+  empty/loading/error states in the same region as the data. Tables scroll inside their surface;
+  the page itself never gains horizontal overflow.
+- **Feedback**: every status includes text plus an icon, border, or layout cue. `#D29922` is
+  reserved for pending, draft, and caution feedback; it is never used to indicate navigation
+  selection. Errors use `#F85149`, success uses `#3FB950`, and informational selection uses
+  `#2F81F7`.
+- **Overlays**: popovers use `#1C2128`, modals use `#21262D`, and the backdrop uses the Octo
+  overlay token. Functional overlays keep the 6px radius and provide labelled close/focus paths.
+
+### Page family rules
+
+- **Dashboard** prioritizes the current attendance action, then schedule, chat, and tasks in a
+  compact grid. Empty cards explain what the user can do next.
+- **Chat, calendar, and work schedules** keep their existing interaction models, but use shared
+  toolbars, bordered panels, blue selection, and compact rows. FullCalendar's DOM remains a
+  vendor boundary and inherits the same tokens.
+- **Attendance, members, team management, and admin** use the same table, search, filter,
+  status-badge, modal, and responsive row language. Role guards and data scope are unchanged.
+- **Drive and AI chat** use repository-like lists and code-friendly message surfaces. Markdown
+  and code retain JetBrains Mono; conversational bubbles do not use purple gradients.
+- **My Page** uses a narrow readable form column with section dividers, explicit save feedback,
+  and a separate danger zone.
+- **Auth routes** use the base background, a bordered 6px form surface, restrained branding,
+  and one primary action. Decorative glass, blur, and full-page purple gradients are removed.
+
+### Responsive, theme, and accessibility rules
+
+- Reference widths are `390px`, `768px`, and `1280px`. At each width, `scrollWidth` must not
+  exceed the viewport width and all dense data must remain readable without clipped CJK text.
+- Mobile layouts collapse by priority, not by shrinking every control. Tables become scrollable
+  regions or labelled rows, and fixed navigation always has at least `56px` of content clearance.
+- Dark mode remains the default. The explicit `data-theme="light"` preference maps every surface,
+  border, text, state, and input token to a readable light alias; the system preference does not
+  silently override the user's stored theme.
+- Korean headings use `text-wrap: pretty` where supported, body copy uses a readable line-height,
+  and no page relies on color alone. Every interactive element keeps a visible `:focus-visible`
+  ring and a minimum 36px target (44px for primary touch actions).
+- Motion is limited to 120ms state transitions. `prefers-reduced-motion: reduce` disables
+  non-essential transitions and animated decoration.
+
+### Implementation boundary and accepted debt
+
+The app-wide layer owns tokens, shell geometry, shared surface language, state colors, responsive
+guards, and cross-route visual overrides. Existing page CSS owns only route-specific composition
+and vendor integration. API, Context, route guard, mock, and permission changes are out of scope.
+The remaining FullCalendar vendor markup and existing bundle chunk-size warning are recorded as
+accepted debt unless they block a route or accessibility condition.
+
+### Before / After evidence contract
+
+Before captures are taken from the same mock-authenticated route matrix before Issue #414 style
+changes. After captures use the same route, role, viewport, browser, theme, and scroll conditions.
+Each capture records the rendered commit SHA, viewport, `scrollWidth`, full-page `scrollHeight`,
+and the visible state. The evidence set covers all 14 routes at `390×844`, `768×1024`, and
+`1280×900`; protected `/team-management` is captured with a team-lead fixture and `/admin` with
+an admin fixture. Representative screenshots are inspected at every breakpoint, with focused
+interaction checks for auth, navigation, tables, filters, modals, forms, and feedback states.
+
 ## Issue #410 — 출석 운영 화면
 
 ### Information architecture
@@ -174,3 +264,42 @@ The post-merge navigation polish was captured against source commit `fbf6ee2` af
 | --- | --- | --- | --- |
 | Home sidebar | `1280×900` | Active `홈` uses primary blue rail/icon and `scrollWidth=1280`. | `.qa/issue-410/after/nav-active-blue-1280.png` |
 | Home bottom navigation | `390×844` | Active `홈` uses primary blue rail/icon and `scrollWidth=390`; no horizontal overflow. | `.qa/issue-410/after/nav-active-blue-390.png` |
+
+## Before / After evidence — #414
+
+The app-wide baseline was captured from `develop` at `f35affdb5a30a9c05b25e9b22d92742b13abc1ef`
+before Issue #414 style edits. The After set was captured on `2026-08-22` from rendered source
+`753febc17546ca4bdd7c3525f53e43fc719f7de1`. Both sets use Chromium, `VITE_USE_MOCK=true`,
+dark theme, full-page screenshots, and the same `390×844`, `768×1024`, and `1280×900` viewports.
+The After set uses the admin fixture for authenticated general routes, the team-lead fixture for
+`/team-management`, and no auth fixture for the public routes.
+
+### Before
+
+| Scope | Coverage | Objective evidence | File |
+| --- | --- | --- | --- |
+| Authenticated shell | 10 routes × 3 viewports | Existing shell and route CSS used mixed glass/gradient surfaces, large functional radii, and route-specific spacing. | `.qa/issue-414/before/metadata.json` |
+| Public auth | 3 routes × 3 viewports | Login, register, and email verification shared the legacy decorative auth treatment. | `.qa/issue-414/before/login-desktop.png`, `.qa/issue-414/before/register-desktop.png`, `.qa/issue-414/before/verify-email-desktop.png` |
+| Protected team management | 1 route × 3 viewports | Admin fixture redirected `/team-management` to `/`, so the team-lead surface had no valid baseline capture. | `.qa/issue-414/before/team-management-mobile.png` |
+| Whole matrix | 42 captures | `scrollWidth` matched the viewport in the recorded baseline, but the evidence exposed route redirect coverage and inconsistent surface language. | `.qa/issue-414/before/metadata.json` |
+
+### After
+
+| Scope | Coverage | Objective evidence | File |
+| --- | --- | --- | --- |
+| Authenticated shell | 10 routes × 3 viewports | Sidebar active state is blue, surfaces use token borders and 6px functional radii, and mobile uses the fixed bottom bar with content clearance. | `.qa/issue-414/after/home-desktop.png`, `.qa/issue-414/after/home-mobile.png` |
+| Chat, calendar, schedules | 3 routes × 3 viewports | Toolbars, selected rows, FullCalendar controls, message surfaces, and schedule legends use shared blue/info, warning, success, and error states. | `.qa/issue-414/after/chat-desktop.png`, `.qa/issue-414/after/calendar-desktop.png`, `.qa/issue-414/after/work-schedules-mobile.png` |
+| Operations and data pages | 4 routes × 3 viewports | Attendance, members, team management, and admin tables use compact bordered rows, readable empty states, and semantic status colors. | `.qa/issue-414/after/attendance-desktop.png`, `.qa/issue-414/after/members-desktop.png`, `.qa/issue-414/after/team-management-desktop.png`, `.qa/issue-414/after/admin-mobile.png` |
+| Drive and AI | 2 routes × 3 viewports | File lists, upload controls, AI messages, suggestions, and code-friendly surfaces no longer depend on purple gradients or blur. | `.qa/issue-414/after/drive-mobile.png`, `.qa/issue-414/after/ai-desktop.png` |
+| My Page and public auth | 4 routes × 3 viewports | Settings sections, form controls, login, register, and email verification use the same surface and focus language. | `.qa/issue-414/after/my-page-mobile.png`, `.qa/issue-414/after/login-desktop.png`, `.qa/issue-414/after/register-desktop.png`, `.qa/issue-414/after/verify-email-mobile.png` |
+| Whole matrix | 42 captures | All 14 requested routes rendered at the requested path; all 42 captures recorded `scrollWidth` equal to the viewport width. | `.qa/issue-414/after/metadata.json` |
+
+After verification checklist:
+
+- [x] All 14 routes render at `390px`, `768px`, and `1280px`.
+- [x] `scrollWidth` does not exceed the viewport in any of the 42 After captures.
+- [x] `/team-management` is captured with the team-lead fixture and no longer redirects to `/`.
+- [x] Navigation selection uses primary blue; warning yellow remains reserved for caution/status.
+- [x] Auth backgrounds, cards, fields, buttons, and public feedback states use the shared surface layer.
+- [x] Explicit light theme was checked on home, calendar, and login at `1280×900`; all kept the viewport width.
+- [x] Fresh PNG files, dimensions, route paths, roles, and scroll metrics are recorded in After metadata.