모바일 워크스페이스 액션 탐색 개선

docs/plans/2026-05-16-branding-mobile-action-workspace.md

@@ -0,0 +1,151 @@
+# Branding Mobile Action Workspace Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make the mobile inbox match the `frontend/branding/uiux` action-workspace direction by exposing inbox, search/context, AI execution, and schedule actions without hover-only controls.
+
+**Architecture:** Keep the desktop layout unchanged. Convert the mobile bottom navigation in `DashboardLayout` into hash-addressable workspace links that call `setMobileWorkspaceView()`, sync `#mobile-{view}`, and dispatch the typed `naruon:mobile-workspace` browser event. Then let `app/page.tsx` switch between the inbox, detail, AI execution graph, search/context placeholder, and schedule placeholder.
+
+**Tech Stack:** Next.js 16 app router, React 19 client components, Vitest/jsdom unit tests, Playwright acceptance tests, Tailwind utility classes.
+
+---
+
+## Source Gap
+
+- `frontend/branding/uiux/uiux2.png` and `frontend/branding/uiux/uiux8.png` define a mobile-first workspace with direct bottom affordances for inbox, context search, relationship/context, schedule, and more/actions.
+- `docs/plans/2026-05-11-frontend-brand-redesign-implementation.md` requires Playwright coverage for desktop/mobile shell, local brand assets, and dashboard flows.
+- Current `frontend/src/app/page.tsx` has `showMobileActions = false`, so the mobile AI execution section can never be reached.
+- Current `frontend/src/components/DashboardLayout.tsx` renders mobile bottom navigation from mail folders, while `frontend/tests/e2e/dashboard-branding.spec.ts` expects visible mobile workspace affordances for `받은편지함`, `맥락 검색`, `AI 실행`, and `일정`.
+
+## Files
+
+- Modify: `frontend/src/components/DashboardLayout.test.tsx`
+- Modify: `frontend/tests/e2e/dashboard-branding.spec.ts`
+- Modify: `frontend/src/components/DashboardLayout.tsx`
+- Modify: `frontend/src/app/page.tsx`
+
+## Task 1: Mobile action navigation exposes hash-addressable workspace links
+
+- [ ] **Step 1: Write failing unit test**
+
+Update `frontend/src/components/DashboardLayout.test.tsx` so the mobile nav assertion expects action links and verifies the custom event:
+
+```tsx
+const mobileNavLinks = Array.from(mobileNav?.querySelectorAll('a') ?? []).map(
+  (link) => link.textContent,
+);
+expect(mobileNavLinks).toEqual(["받은편지함", "맥락 검색", "AI 실행", "일정"]);
+expect(mobileNav?.querySelector('[data-mobile-view="actions"]')?.getAttribute('href')).toBe('#mobile-actions');
+
+const events: string[] = [];
+window.addEventListener("naruon:mobile-workspace", ((event: Event) => {
+  events.push((event as CustomEvent<{ view: string }>).detail.view);
+}) as EventListener);
+
+act(() => {
+  mobileNav?.querySelector<HTMLElement>('[data-mobile-view="actions"]')?.click();
+});
+
+expect(events).toContain("actions");
+```
+
+- [ ] **Step 2: Verify RED**
+
+Run:
+
+```bash
+npm test -- src/components/DashboardLayout.test.tsx
+```
+
+Expected: FAIL because the component still renders mail-folder links instead of action workspace links.
+
+- [ ] **Step 3: Implement minimal event-emitting nav**
+
+In `frontend/src/components/DashboardLayout.tsx`, replace the mobile bottom nav source with action items:
+
+```tsx
+const mobileWorkspaceItems = [
+  { label: '받은편지함', icon: Inbox, view: 'inbox' as const },
+  { label: '맥락 검색', icon: Search, view: 'search' as const },
+  { label: 'AI 실행', icon: Sparkles, view: 'actions' as const },
+  { label: '일정', icon: CalendarDays, view: 'calendar' as const },
+];
+```
+
+Render each item as `<a href="#mobile-${view}">` and call `setMobileWorkspaceView(view)`. `setMobileWorkspaceView()` is responsible for synchronizing the URL hash and dispatching:
+
+```tsx
+window.dispatchEvent(new CustomEvent('naruon:mobile-workspace', { detail: { view } }));
+```
+
+- [ ] **Step 4: Verify GREEN**
+
+Run:
+
+```bash
+npm test -- src/components/DashboardLayout.test.tsx
+```
+
+Expected: PASS.
+
+## Task 2: Mobile page exposes AI execution, search, and schedule panels
+
+- [ ] **Step 1: Write failing Playwright acceptance**
+
+Extend `frontend/tests/e2e/dashboard-branding.spec.ts`:
+
+```ts
+await page.getByRole('link', { name: 'AI 실행' }).click();
+await expect(page.getByRole('region', { name: '모바일 AI 실행' })).toBeVisible();
+await expect(page.getByText('관계 맥락')).toBeVisible();
+
+await page.getByRole('link', { name: '맥락 검색' }).click();
+await expect(page.getByRole('region', { name: '모바일 맥락 검색' })).toBeVisible();
+await expect(page.getByText('메일, 첨부, 일정, 사람을 한 번에 검색합니다.')).toBeVisible();
+
+await page.getByRole('link', { name: '일정' }).click();
+await expect(page.getByRole('region', { name: '모바일 일정 연결' })).toBeVisible();
+await expect(page.getByText('캘린더 반영 대기')).toBeVisible();
+```
+
+- [ ] **Step 2: Verify RED**
+
+Run:
+
+```bash
+npm run test:e2e -- dashboard-branding.spec.ts
+```
+
+Expected: FAIL because mobile action buttons are not wired to visible page sections yet.
+
+- [ ] **Step 3: Implement mobile panels**
+
+In `frontend/src/app/page.tsx`, replace `showMobileActions` with `mobileView` state. Listen for `naruon:mobile-workspace` events and render panels for `actions`, `search`, and `calendar`.
+
+- [ ] **Step 4: Verify GREEN**
+
+Run:
+
+```bash
+npm test -- src/components/DashboardLayout.test.tsx
+npm run test:e2e -- dashboard-branding.spec.ts
+```
+
+Expected: PASS.
+
+## Task 3: Final verification
+
+- [ ] Run:
+
+```bash
+npm run lint
+npm run typecheck
+npm test -- src/components/DashboardLayout.test.tsx
+```
+
+- [ ] Commit:
+
+```bash
+git add docs/plans/2026-05-16-branding-mobile-action-workspace.md frontend/src/components/DashboardLayout.tsx frontend/src/components/DashboardLayout.test.tsx frontend/src/app/page.tsx frontend/tests/e2e/dashboard-branding.spec.ts
+git commit -m "feat: expose mobile AI action workspace"
+```

docs/plans/2026-05-16-branding-roadmap-next-gaps.md

@@ -0,0 +1,118 @@
+# Branding Roadmap Next Gaps Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Continue closing the `docs/plans/` + `frontend/branding/` gap by turning visible Naruon header primary actions into real accessible controls instead of inert status chips.
+
+**Architecture:** Preserve the branded shell and mobile workspace work already in progress. Keep the header action labels and visual treatment, but render them as typed buttons that dispatch a lightweight browser event for downstream page-level handlers. This makes the UI affordance truthful while keeping the delivery slice small and testable.
+
+**Tech Stack:** Next.js 16 app router, React 19 client components, Vitest/jsdom unit tests, Playwright acceptance tests, Tailwind utility classes.
+
+---
+
+## Source Gap
+
+- `docs/plans/2026-05-11-frontend-brand-redesign-design.md` requires a top header with global search and right-side primary actions.
+- `docs/plans/2026-05-11-frontend-brand-redesign-implementation.md` requires primary actions: `캘린더 반영`, `답장 초안`, and `할 일 만들기`.
+- `frontend/branding/uiux/uiux3.png`, `frontend/branding/uiux/uiux4.png`, and `frontend/branding/brand_assets/4.png`/`5.png` show a decision/action-oriented workspace, but the current header renders those primary actions as non-interactive chips.
+
+## Current Roadmap
+
+1. **P0 — Mobile action workspace:** mostly implemented in `docs/plans/2026-05-16-branding-mobile-action-workspace.md`; remaining semantic cleanup is tracked by tests and review feedback.
+2. **P0 — Header primary actions:** implement in this plan so visible action affordances are real buttons.
+3. **P1 — Dead sidebar route handling:** replace 404-prone future navigation with disabled/coming-soon states or add route stubs.
+4. **P1 — Tablet AI panel behavior:** add a 1024–1279px detail-tab/drawer layout for the right context panel.
+5. **P1 — API-backed mobile search/calendar:** replace placeholder panels with real loading/empty/error/success states.
+6. **P2 — InsightCard adoption:** refactor `EmailDetail` AI cards to use `InsightCard` consistently.
+
+## Files
+
+- Modify: `frontend/src/components/DashboardLayout.test.tsx`
+- Modify: `frontend/tests/e2e/dashboard-branding.spec.ts`
+- Modify: `frontend/src/components/DashboardLayout.tsx`
+
+## Task 1: Header primary actions are accessible buttons
+
+- [ ] **Step 1: Write failing unit test**
+
+Update `frontend/src/components/DashboardLayout.test.tsx` so the header actions are queried as buttons and clicking one emits `naruon:header-action`:
+
+```tsx
+const headerActionButtons = Array.from(
+  banner?.querySelectorAll<HTMLButtonElement>('button[data-header-action]') ?? [],
+).map((button) => button.textContent);
+expect(headerActionButtons).toEqual(["캘린더 반영", "답장 초안", "할 일 만들기"]);
+
+const headerEvents: string[] = [];
+window.addEventListener("naruon:header-action", ((event: Event) => {
+  headerEvents.push((event as CustomEvent<{ action: string }>).detail.action);
+}) as EventListener);
+
+act(() => {
+  banner?.querySelector<HTMLButtonElement>('button[data-header-action="reply-draft"]')?.click();
+});
+
+expect(headerEvents).toContain("reply-draft");
+```
+
+- [ ] **Step 2: Verify RED**
+
+Run:
+
+```bash
+npm test -- src/components/DashboardLayout.test.tsx
+```
+
+Expected: FAIL because the header currently uses spans, not buttons.
+
+- [ ] **Step 3: Implement minimal button behavior**
+
+In `frontend/src/components/DashboardLayout.tsx`, give each header action an `action` id and render a `<button type="button" data-header-action="...">` that dispatches:
+
+```tsx
+window.dispatchEvent(new CustomEvent('naruon:header-action', { detail: { action } }));
+```
+
+- [ ] **Step 4: Verify GREEN**
+
+Run:
+
+```bash
+npm test -- src/components/DashboardLayout.test.tsx
+npm run lint
+npm run typecheck
+```
+
+Expected: PASS.
+
+## Task 2: Branding E2E checks truthful header actions
+
+- [ ] **Step 1: Write failing Playwright assertion**
+
+Update `frontend/tests/e2e/dashboard-branding.spec.ts` to expect the three header actions as buttons instead of asserting they are not buttons:
+
+```ts
+await expect(header.getByRole('button', { name: '캘린더 반영' })).toBeVisible();
+await expect(header.getByRole('button', { name: '답장 초안' })).toBeVisible();
+await expect(header.getByRole('button', { name: '할 일 만들기' })).toBeVisible();
+```
+
+- [ ] **Step 2: Verify RED**
+
+Run:
+
+```bash
+npm run test:e2e -- dashboard-branding.spec.ts
+```
+
+Expected: FAIL until the header chip implementation is replaced by real buttons.
+
+- [ ] **Step 3: Verify GREEN after implementation**
+
+Run:
+
+```bash
+npm run test:e2e -- dashboard-branding.spec.ts
+```
+
+Expected: PASS.

frontend/src/app/globals.css

@@ -144,3 +144,17 @@
     @apply font-sans;
   }
 }
+
+@layer components {
+  body:has(#mobile-search:target) .mobile-workspace-panel,
+  body:has(#mobile-actions:target) .mobile-workspace-panel,
+  body:has(#mobile-calendar:target) .mobile-workspace-panel {
+    display: none !important;
+  }
+
+  body:has(#mobile-search:target) .mobile-workspace-panel-search,
+  body:has(#mobile-actions:target) .mobile-workspace-panel-actions,
+  body:has(#mobile-calendar:target) .mobile-workspace-panel-calendar {
+    display: flex !important;
+  }
+}