feat(layer): add 'd' shortcut to toggle color mode

[amondnet]

개요

발송 마법사(Step1~5Controller)를 선택 단계화·건너뛰기 가능한 플로우로 재구성합니다. (Epic #107, 작업분해 E2-2-1)

변경 요지

• SendStep enum 도입 — 정수 step 가드(1~5) 대체
• Step1~5Controller 호출 사이트 enum 으로 전환
• 신규 컨트롤러 3종 활성화 — Step2_5Controller(PDF), Step2_7Controller(등기자료), StepPhotoController(사진)
• 기존 step_2_5.html/step_2_7.html mock 의 라우팅 채움 (DESIGN ONLY → routed)
• 건너뛰기 동선(편지지·편지작성·사진) + 콘텐츠 0건 가드(주소 진입 시점)
• AES WebView 브릿지 변경 0건 — PR 체크리스트로 회귀 차단

핵심 수용 기준 (이슈 #112 본문)

• 편지지>편지작성>사진>PDF>등기자료>주소>결제 단계 구성
• 각 단계 건너뛰기 (편지지/편지작성/사진)
• WebView 에디터 브릿지 회귀 테스트 통과 (AES 메시지 프로토콜 웹/앱 동시 검증)
• 기존 Step1~5Controller 의 역할을 단계화된 플로우로 전환

Spec / Plan

• .please/docs/tracks/active/send-flow-stepwise-20260528/spec.md
• .please/docs/tracks/active/send-flow-stepwise-20260528/plan.md

영향 모듈

• mail-talk-web (SSR 컨트롤러·템플릿·서비스)
• mail-talk-app (Flutter WebView 브릿지 — 회귀 검증만)

주의사항

⚠️ Constants.AES_KEY / AES_IV / channel callHandler 변경 0건. 본 PR 의 모든 reviewer 는 git diff 로 확인 필수.

Refs

• Closes #112
• Epic #107

---

Summary by cubic

Added a keyboard shortcut to toggle between light and dark mode. Press 'd' to switch. Configure via docs.shortcuts.toggleColorMode in app.config.ts (set to empty string to disable).

• New Features
  • useDocsShortcuts composable using @vueuse/core onKeyStroke, installed via shortcuts.client.ts.
  • Default 'd' in app.config.ts and modules/config.ts; option schema in nuxt.schema.ts.
  • Ignores events when color mode is forced, a modifier key is held, or the target is editable (<input>, <textarea>, <select>, [contenteditable]).

^{Written for commit e8b70d2. Summary will update on new commits.}

---

Verification Checklist

• git diff origin/main -- mail-talk-app/lib/controller/letter/letter_step1_web_view_controller.dart — AES_KEY/AES_IV/channel/callHandler 변경 0건
• git diff origin/main -- mail-talk-app/lib/core/setting/constants.dart (또는 동등) — AES_KEY/AES_IV 상수 변경 0건
• 모든 신규/변경 파일이 500 LOC 이하
• Step5ControllerTest 기존 시나리오가 enum 전환 후에도 통과 (시그니처만 변경, 의미 보존)
• 신규 컨트롤러 3종(Step2_5Controller, Step2_7Controller, StepPhotoController) 각각 MockMvc 권한/소유/UHL 가드 케이스 보유 (NewStepControllersTest)
• Step4Controller 콘텐츠 0건 차단 케이스(AC-9) 포함 (NewStepControllersTest.Step4Tests)
• step_1.html / step_2.html / step_photo.html 에 "건너뛰기" 버튼 + 다음 단계 URL 정확
• 한국어 에러 메시지 노출 — "발송할 콘텐츠를 한 가지 이상 선택해 주세요."
• Happy-path forward chain 확인 — moveStep3WithSave 가 /editor/step_photo 로 redirect (편지작성 다음이 사진 단계)

Known Limitations / Follow-ups

• Step1Controller 가 defaultModelSetter 를 호출하지 않음 (pre-existing 설계, UHL 가드 미적용) — 별도 chore 권장
• Flutter widget 회귀 테스트 미추가 — Flutter 코드 0줄 변경으로 정적 검증, 프로덕션 이슈 관찰 시 추가
• moveStep3WithSave 함수명이 레거시 명명 잔재 — 후속 chore 에서 moveStepPhotoWithSave 등으로 rename 가능

[gemini-code-assist]

Code Review

This pull request introduces keyboard shortcuts configuration and implementation for the documentation layer, specifically adding a shortcut (defaulting to 'd') to toggle between light and dark color modes. The feedback suggests explicitly importing computed from vue to improve IDE support and unit testing compatibility, and refining the isEditableTarget utility to traverse up the DOM tree so that non-HTMLElement targets (like SVGs) inside editable containers do not unexpectedly trigger the shortcut.

[cubic-dev-ai]

No issues found across 5 files

Architecture diagram

sequenceDiagram
    participant User as End User
    participant Browser
    participant Nuxt as Nuxt App
    participant Vue as Vue Composition API
    participant ColorMode as @nuxtjs/color-mode
    participant DOM as DOM

    Note over User,DOM: Color Mode Toggle via 'd' Key

    User->>Browser: Presses 'd' key
    Browser->>DOM: keydown event

    DOM->>Vue: onKeyStroke listener (useDocsShortcuts.ts)
    Vue->>Vue: Check isEditableTarget(event.target)
    alt Editable element (input/textarea/contenteditable)
        Vue->>Vue: Bail out - ignore shortcut
    else Non-editable element
        Vue->>Vue: Check modifier keys (meta/ctrl/alt/shift)
        alt Modifier pressed
            Vue->>Vue: Bail out
        else No modifier
            Vue->>Vue: Check colorMode.forced
            alt forced === true
                Vue->>Vue: Bail out
            else not forced
                Vue->>Vue: Read toggleColorModeShortcut from appConfig
                alt Shortcut empty
                    Vue->>Vue: Bail out
                else Non-empty (default 'd')
                    Vue->>Vue: Read current colorMode.value
                    alt dark currently
                        Vue->>ColorMode: Set preference = 'light'
                    else light currently
                        Vue->>ColorMode: Set preference = 'dark'
                    end
                    ColorMode->>DOM: Apply CSS class change (light/dark)
                    ColorMode->>Browser: Persist preference (cookie/localStorage)
                    Browser-->>User: Visual theme toggled
                end
            end
        end
    end

    Note over Nuxt,Vue: Initialization (client-only)

    Nuxt->>Vue: Setup plugin (shortcuts.client.ts)
    Vue->>Vue: Call useDocsShortcuts()
    Vue->>Vue: Read appConfig.docs.shortcuts.toggleColorMode
    alt toggleColorMode defined
        Vue->>Vue: Register onKeyStroke listener
    else undefined
        Vue->>Vue: Use default 'd'
    end

Loading

_{Re-trigger cubic}

[cloudflare-workers-and-pages]

Deploying docs-please with    Cloudflare Pages

Latest commit:	e8b70d2
Status:	✅  Deploy successful!
Preview URL:	https://78768df7.docs-please.pages.dev
Branch Preview URL:	https://feat-layer-toggle-color-mode.docs-please.pages.dev

View logs

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud