feat: complete ANL lab homepage with light/dark theme, responsive layout, and 100% SSG E2E test suite

2026-07-30 20:15:40 +09:00
parent d833252217
commit 36a4cd851e
20 changed files with 1266 additions and 105 deletions
@@ -0,0 +1,47 @@
+# Project: ANL Homepage Development
+
+## Architecture
+- Framework: Next.js 14.2.35 (App Router, static SSG output)
+- Tech Stack: React 18.3.1, TypeScript 5.5.3, Tailwind CSS 3.4.6
+- Active Codebase Location: `/home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page`
+- Target Workspace Path: `/home/godopu16/PuKi/lab/canary_projects/landing_page/website` (symlink to `refer_landing_page`)
+- Verification Pipeline:
+  - ESLint: `npm run lint`
+  - TypeScript: `npx tsc --noEmit`
+  - Static SSG Build: `npm run build`
+  - Data Integrity Gate: `python3 scripts/extract/verify_counts.py`
+
+## Feature Inventory
+| # | Feature | Description | Milestone | Source |
+|---|---------|-------------|-----------|--------|
+| 1 | Target Directory Symlink / Alignment | Create symlink `website -> refer_landing_page` so target directory is fully populated and buildable | M1 | Prompt / Workspace |
+| 2 | Light & Dark Mode Support (System Sync + Toggle) | Implement Dark Mode theme variables, system preference detection (`prefers-color-scheme`), and manual toggle switch component in Header | M2 | R3 / AC-04 |
+| 3 | Core Research Pillars & Home Page (PR-03) | 3 home sections (Lab Overview, 4 Pillars, Location) + responsive design | M3 | PR-03 / AC-01~03 |
+| 4 | Members IA & Data Integrity (PR-01, PR-02) | Active (16) & Alumni (60) layout, filtering, card view | M3 | PR-01 / AC-07 |
+| 5 | Publications IA & Static SSG Routes (PR-04) | 4 category SSG routes (`intl-conf`, `intl-journal-conf`, `domestic-journal-conf`, `patent`) for 223 items | M3 | PR-04 / AC-08 |
+| 6 | Lectures & Standardization Pages | 45 semesters lectures + 44 standard docs across 6 bodies | M3 | AC-10 / AC-11 |
+| 7 | Full Quality Gate & Acceptance Verification | Pass 100% E2E test suite, linting, type-checking, SSG build, data integrity, responsive design, dark mode | M4 (Final) | All ACs |
+
+## Milestones
+| # | Name | Scope | Dependencies | Status |
+|---|------|-------|-------------|--------|
+| 1 | M1: Workspace Setup & Directory Alignment | Create symlink `website -> refer_landing_page`, verify build/test scripts work in both paths | none | DONE |
+| 2 | M2: Light & Dark Mode Implementation | Implement Dark/Light mode theme toggle in Header, system preference detection, and CSS theme variables | M1 | PLANNED |
+| 3 | M3: Responsive Layout & Feature Verification | Verify and refine mobile/tablet/desktop responsive design across Home, Members, Publications, Lectures, Standardization | M2 | PLANNED |
+| 4 | M4: Final Integration & Dual-Track E2E Hardening | Pass 100% E2E test suite (Tiers 1-4) + Tier 5 Adversarial Coverage Hardening (Challenger + Auditor) | M3 | PLANNED |
+
+## Interface Contracts
+### Header ↔ Theme Manager
+- Theme state: `'light' | 'dark' | 'system'`
+- Persistence: `localStorage` (`theme` key) + `document.documentElement` class/attribute (`dark`)
+- System sync: `window.matchMedia('(prefers-color-scheme: dark)')` listener
+- Default behavior: Respect system color scheme preference, allow user manual override via toggle button, persist setting.
+
+## Code Layout
+- Root: `/home/godopu16/PuKi/lab/canary_projects/landing_page/`
+- App Directory: `/home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page/` (and `website/` symlink)
+- Pages: `app/page.tsx`, `app/members/page.tsx`, `app/publications/page.tsx`, `app/publications/[category]/page.tsx`, `app/lectures/page.tsx`, `app/standardization/page.tsx`
+- Data Content: `content/members.ts`, `content/publications.ts`, `content/lectures.ts`, `content/standards.ts`, `content/categories.ts`, `content/types.ts`
+- Styles: `app/globals.css`
+- Components: `components/Header.tsx`, `components/Footer.tsx`, `components/ThemeToggle.tsx`, etc.
+- Scripts: `scripts/extract/verify_counts.py`