feat: initialize IoT Standards Lab website project with MAM skills & onboarding guide
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
@@ -0,0 +1,182 @@
|
||||
# IoT Standards Lab Landing Page — Final Project Analysis
|
||||
|
||||
> Workspace: `/home/godopu16/PuKi/lab/landing_page/refer_landing_page`
|
||||
> Project: `iot-standards-lab-landing` v0.1.0 (private)
|
||||
> Produced as the synthesis deliverable for kanban task `t_d70b2c9e`.
|
||||
> Sources: `.kanban-inventory.json` (t_5662ba34), `.kanban-stack-profile.md` (t_239791d2), `.kanban-semantic-analysis.md` (t_a62d94ab).
|
||||
|
||||
---
|
||||
|
||||
## 1. What this project is
|
||||
|
||||
This repo is a **reference prototype landing page** for the **경북대학교 컴퓨터학부 사물인터넷 표준 연구실 (KNU CS IoT Standards Lab)** — a small, self-contained marketing site (not a deployed product) intended to be cloned and filled in with the lab's real content. It is structured as a single-page-family academic portal: a hero/intro route, plus four content routes (lectures, members, publications, standardization), all wrapped in a hand-rolled editorial design system dubbed **"Issue 01"** — a magazine-spread aesthetic with serif/sans pairing, grain backgrounds, scroll-reveal motion, and running marquee tickers. All listed people, papers, and standards contributions are *placeholders* to be swapped for real data; the deliverable is the *layout, design system, and motion language*, not the content. Roughly **2,605 LOC across 25 source files**; small enough to read end-to-end in an afternoon.
|
||||
|
||||
---
|
||||
|
||||
## 2. Tech stack
|
||||
|
||||
| Layer | Pin | Notes |
|
||||
|---|---|---|
|
||||
| Framework | `next@14.2.5` (exact) | App Router; `reactStrictMode: true`; no image domains / redirects / experimental flags |
|
||||
| Language | TypeScript 5.5 (installed 5.9.3) | `strict: true`, `moduleResolution: "bundler"`, path alias `@/*` |
|
||||
| UI runtime | `react@18.3.1` + `react-dom@18.3.1` | React 18, not 19 — locked to Next 14 line |
|
||||
| Styling | `tailwindcss@3.4.6` + `postcss@8.4` + `autoprefixer@10.4` | Custom theme in `tailwind.config.ts` (114 lines) |
|
||||
| Lint | `eslint@8.57` + `eslint-config-next@14.2.5` (exact, matches Next) | No `.eslintrc*`, no Prettier |
|
||||
| Fonts | `next/font` (Google Serif + Sans exposed as CSS vars) | No external font loader dep |
|
||||
| Package manager | npm 10.9.7, lockfile v3 | Single `package-lock.json` (215 KB); no pnpm/yarn/bun |
|
||||
| Runtime | Node 22.22.2 (host) | No `engines` field declared |
|
||||
|
||||
**Scripts (4, the entire quality-gate surface):** `npm run dev` · `npm run build` · `npm start` · `npm run lint`.
|
||||
|
||||
**Not present:** no Docker, no `.env`/env vars, no CI, no test runner, no formatter, no UI lib (no shadcn/Radix/MUI), no icon set, no analytics, no CMS client, no image CDN, no motion library (motion is hand-rolled via `IntersectionObserver` + CSS).
|
||||
|
||||
**Security posture:** `npm audit` reports **8 advisories, 1 critical, 6 high, 1 moderate**. 21 of those resolve by a single-line patch — `npm install next@14.2.35` (same major, fixes cache poisoning, Server Components DoS, middleware SSRF, PostCSS XSS, etc.). Transitive `glob` and `minimatch` advisories are dev-time only and not runtime risks for this app.
|
||||
|
||||
---
|
||||
|
||||
## 3. Architecture and structure
|
||||
|
||||
### Tree (top-level)
|
||||
|
||||
```
|
||||
/home/godopu16/PuKi/lab/landing_page/refer_landing_page
|
||||
├── app/ ← Next.js App Router entrypoint
|
||||
│ ├── layout.tsx ← Root layout: Header + Footer + font vars
|
||||
│ ├── globals.css ← CSS vars, grain bg, reveal transitions
|
||||
│ ├── intro/ ← / (root landing)
|
||||
│ │ ├── page.tsx ← 287 lines, uses HeroComposition
|
||||
│ │ └── _components/
|
||||
│ │ └── HeroComposition.tsx ← private inline-SVG cover graphic
|
||||
│ ├── lectures/page.tsx ← /lectures 102 lines
|
||||
│ ├── members/page.tsx ← /members 174 lines
|
||||
│ ├── publications/page.tsx ← /publications 168 lines
|
||||
│ └── standardization/page.tsx ← /standardization 169 lines
|
||||
├── components/ ← 7 shared, reusable components
|
||||
│ ├── Header.tsx ← nav + mobile menu
|
||||
│ ├── Footer.tsx ← address/email + Marquee colophon
|
||||
│ ├── PageHeader.tsx ← dual-language route banner
|
||||
│ ├── SectionLabel.tsx ← "01 / 05" corner labels
|
||||
│ ├── Counter.tsx ← tick-up figure animation
|
||||
│ ├── Marquee.tsx ← endless running ticker
|
||||
│ └── Reveal.tsx ← IntersectionObserver scroll reveal
|
||||
├── docs/DESIGN.md ← 332 lines — design system spec
|
||||
├── PROMPT.md ← 249 lines — original generation brief
|
||||
├── README.md ← 104 lines — project overview
|
||||
├── package.json / package-lock.json (215 KB)
|
||||
├── tsconfig.json (22) / next.config.js (6) / next-env.d.ts
|
||||
├── tailwind.config.ts (114) ← canonical design tokens
|
||||
├── postcss.config.js (6)
|
||||
├── .gitignore (27)
|
||||
└── .kanban-*.{json,md} ← upstream task artifacts (not project content)
|
||||
```
|
||||
|
||||
### Routing map (Next.js App Router)
|
||||
|
||||
| Path | File | Lines | Notes |
|
||||
|---|---|---|---|
|
||||
| `/` | `app/intro/page.tsx` | 287 | Embeds static `thrusts`, `figures`, `keywords`, `focusAreas` arrays |
|
||||
| `/lectures` | `app/lectures/page.tsx` | 102 | Course list |
|
||||
| `/members` | `app/members/page.tsx` | 174 | PI + PhD + MS + UG groupings |
|
||||
| `/publications` | `app/publications/page.tsx` | 168 | Journals + Conferences |
|
||||
| `/standardization` | `app/standardization/page.tsx` | 169 | oneM2M, W3C, IETF, OMA groups |
|
||||
|
||||
### Shared component fan-out
|
||||
|
||||
| Component | Used in (routes / other components) | Public prop shape |
|
||||
|---|---|---|
|
||||
| `Header` | `app/layout.tsx` | `{}` |
|
||||
| `Footer` | `app/layout.tsx` | `{}` |
|
||||
| `Counter` | intro, members, publications, standardization | `{ value, duration?, prefix?, suffix?, className? }` |
|
||||
| `Marquee` | intro, publications, standardization, **Footer** | `{ items: string[], reverse?, className? }` |
|
||||
| `PageHeader` | lectures, members, publications, standardization | `{ ko, en, display?, description?, index }` |
|
||||
| `Reveal` | intro, lectures, members, publications, standardization, **PageHeader** | `{ children, variant?: 'up'\|'left'\|'right'\|'scale', delay?, as?, className? }` |
|
||||
| `SectionLabel` | intro, lectures, members, publications, standardization, **PageHeader** | `{ index, total?, label, className? }` |
|
||||
|
||||
5 of the 7 (71%) shared components carry JSDoc blocks; `Header` and `Footer` do not.
|
||||
|
||||
### Module responsibilities (one-line summary)
|
||||
|
||||
- `app/` — routing, metadata, global shell; **page-level orchestration only**, no business logic.
|
||||
- `app/intro/_components/` — private assets scoped to one route (`HeroComposition` SVG).
|
||||
- `components/` — presentation primitives, prop-driven, zero business logic.
|
||||
- `docs/DESIGN.md` — canonical design-token spec (the "Issue 01" system).
|
||||
- `tailwind.config.ts` — machine-readable counterpart to `docs/DESIGN.md`; treat it as the source of truth at the build layer.
|
||||
|
||||
---
|
||||
|
||||
## 4. Strengths and risks
|
||||
|
||||
### Strengths
|
||||
|
||||
1. **Internally consistent stack.** Next 14.2.5, React 18.3, Tailwind 3.4, TS 5.5, ESLint 8 + `eslint-config-next` pinned to Next's exact version. No mixed majors, no version skew between `next` and `eslint-config-next`. The dep tree is the smallest viable Next 14 surface — `package-lock.json` is only 215 KB, no obvious bloat.
|
||||
2. **Strict TypeScript hygiene.** Zero `any` types, zero non-null (`!`) assertions, correct `key` props on every loop. `tsconfig.json` is the canonical strict-mode setup (`strict`, `noEmit`, `incremental`, `isolatedModules`, `moduleResolution: "bundler"`).
|
||||
3. **Design system is well-documented and decoupled from data.** `docs/DESIGN.md` (332 lines) + `tailwind.config.ts` (114 lines) are the canonical design sources; component JSDoc blocks (5/7) call out "CUSTOMIZATION HOOK — CONTENT/MOTION" seams. A non-developer touching content can find the right file via the README's customization hooks section.
|
||||
4. **No external runtime dependencies beyond Next itself.** No motion lib, no icon set, no UI kit, no analytics, no CMS. Reveal motion uses a hand-rolled `IntersectionObserver`; counter uses `requestAnimationFrame` only. The runtime is small and inspectable.
|
||||
5. **A11y-aware motion.** `Reveal` respects `prefers-reduced-motion`; semantic HTML throughout (no `<div>`-as-button patterns).
|
||||
6. **Trivial security remediation available.** A single `npm install next@14.2.35` clears 21 published advisories (1 critical, 6 high, 1 moderate) — no major jump, no React change, no behavior change.
|
||||
|
||||
### Risks and gaps
|
||||
|
||||
1. **0% test coverage.** No test framework, no `*.test.*` / `*.spec.*` files, no test script in `package.json`, no CI. All 14 components/routes are UNTESTED. The highest-leverage gaps:
|
||||
- `Reveal` — wraps most page content; a broken `IntersectionObserver` attachment would render pages invisible (stuck at opacity 0).
|
||||
- `Counter` — uses `requestAnimationFrame`; regressions could leak rAF loops.
|
||||
- `Header` — owns mobile menu state; a regression blocks mobile navigation.
|
||||
2. **Statically coupled content.** Member rosters, publication lists, lecture catalogs, and standards contributions live as hardcoded TS arrays *inside* the page files (`app/intro/page.tsx` is 287 lines partly because it embeds `thrusts`, `figures`, `keywords`, `focusAreas` directly). Non-developers cannot update content without a TS edit. The README's customization hooks point at the *code locations* but offer no path to a CMS, markdown, or remote data source.
|
||||
3. **21 outstanding Next.js security advisories (1 critical, 6 high, 1 moderate).** All fixed by bumping `next` to `14.2.35`; none are runtime-blocked today, but a security review or production deploy would fail.
|
||||
4. **Code duplication.** The "Figures Counter Section" pattern (3-col grid of `<Counter>` cells) is copy-pasted across 4 page files (`intro:145-161`, `members:75-87`, `publications:103-115`, `standardization:106-118`). A `<FiguresBand>` shared component would collapse ~60 lines of repetition. The marquee band wrapper is similarly repeated in 3 places.
|
||||
5. **Dead design tokens.** `brand` and `accent` palettes in `tailwind.config.ts:48-53` are marked as back-compat aliases and have no consumers. They bloat the theme and may mislead future contributors.
|
||||
6. **Hardcoded private SVG.** `HeroComposition.tsx` embeds mesh/flow coordinates inline — no way for a designer to swap the cover graphic without editing TSX.
|
||||
7. **No CI, no formatter, no env var convention, no Node version pin in `engines`.** A new contributor on a different Node major could see different behavior; PRs have no automated lint/typecheck gate.
|
||||
8. **Documentation gaps.** README is strong on design system but lacks: (a) supported Node/npm versions, (b) content-update workflow, (c) deploy story, (d) coding-standard / lint rules documentation.
|
||||
9. **No src/pages separation, no cmd dir, no monorepo markers.** This is fine for a single-app reference but means there is no scaffold for growth (e.g. a future `/admin` route or a separate landing for a sister project would have to invent conventions).
|
||||
10. **Major-version lag (informational, not blocking).** Next 16 / React 19 / Tailwind 4 / TS 6 / ESLint 10 are all available. Each is a *planned migration*, not a security issue — but anyone picking up the project in 2027 will need a multi-week upgrade pass.
|
||||
|
||||
---
|
||||
|
||||
## 5. Suggested next steps (prioritized)
|
||||
|
||||
### P0 — Do now (low effort, high value)
|
||||
|
||||
1. **Patch Next.js security advisories.** `npm install next@14.2.35` — single-line, no behavior change, clears 21 advisories. Run `npm audit` after to confirm. *(~5 min)*
|
||||
2. **Extract the duplicated Figures Counter Section** into a shared `<FiguresBand items={...} />` component. Touches 4 page files; collapses ~60 lines of duplication. *(~30 min)*
|
||||
3. **Remove dead `brand` / `accent` tokens** from `tailwind.config.ts:48-53`. *(~5 min)*
|
||||
|
||||
### P1 — Do before any production deploy or public handoff
|
||||
|
||||
4. **Add an `engines` field to `package.json`** (`"node": ">=20"`) and document supported versions in `README.md`. Prevents the "works on my machine" drift.
|
||||
5. **Add a minimal test setup** — Vitest + React Testing Library is the lowest-friction choice for a Next 14 + TS + no-CI codebase. Start with `Reveal`, `Counter`, and `Header` (the three highest-leverage gaps from §3). *(~half-day)*
|
||||
6. **Decouple content from page files.** Even a minimal pass — move the `figures`, `keywords`, `thrusts`, `focusAreas` arrays from `app/intro/page.tsx` into `app/intro/_content.ts` — would make future CMS migration a 1-file change instead of a 4-file one. Same treatment for `members`, `publications`, `lectures`, `standardization`. *(~2 hours)*
|
||||
7. **Add a CI workflow** (GitHub Actions) running `npm run lint`, `npm run build`, and (once added) `npm test`. *(~1 hour)*
|
||||
|
||||
### P2 — Quality and developer-experience
|
||||
|
||||
8. **Externalize the hero SVG.** Move `HeroComposition` coordinates into a JSON or TS data file so designers can iterate without editing TSX. *(~2 hours)*
|
||||
9. **Add Prettier** with a project-wide config; wire it into the lint CI check. The design system is editorial — typographic drift is a real risk without a formatter. *(~1 hour)*
|
||||
10. **Fill the documentation gaps** in `README.md`: Node version, content-update workflow, deploy story, lint/style rules. *(~2 hours)*
|
||||
|
||||
### P3 — Planned migrations (do not bundle with security work)
|
||||
|
||||
11. **Next 16 + React 19 + Tailwind 4 upgrade.** All three are major-version jumps; budget a dedicated sprint. The Tailwind v3 → v4 jump is the largest unknown (config format change) — prototype it in a branch first.
|
||||
12. **TypeScript 6** and **ESLint 10** (flat config) are mostly mechanical and can ride along with the Next 16 migration.
|
||||
|
||||
### Anti-recommendations (do not do)
|
||||
|
||||
- **Do not** `npm audit fix --force` — that would jump to Next 16 + React 19 in one move, bundling a security patch with a major migration. The single-line `next@14.2.35` patch is the correct shape.
|
||||
- **Do not** turn this into a CMS-backed app before extracting the content arrays; the current shape is the right *baseline* for a reference prototype, but only if the baseline is clean.
|
||||
- **Do not** introduce a UI library (shadcn, Radix) or motion library (framer-motion) for the sake of modernization — the hand-rolled motion is a feature, not a gap, and a UI lib would clash with the editorial design system.
|
||||
|
||||
---
|
||||
|
||||
## 6. Appendix — Source artifacts
|
||||
|
||||
This report is a synthesis of three upstream kanban tasks. Each was a stand-alone analysis with its own file:line citations and acceptance criteria.
|
||||
|
||||
| Task | Title | Artifact | Role |
|
||||
|---|---|---|---|
|
||||
| `t_5662ba34` | Inventory project layout and file structure | [`.kanban-inventory.json`](./.kanban-inventory.json) | Structural inventory: 25 source files, 5 routes, 7 components, ~2,605 LOC; no monorepo markers; no test/format/CI/Docker/env markers. |
|
||||
| `t_239791d2` | Analyze dependencies, build config, and runtime stack | [`.kanban-stack-profile.md`](./.kanban-stack-profile.md) | Stack profile: dep breakdown (3 runtime + 10 dev), scripts, configs, security audit (8 advisories, 1 critical), version-compatibility sketch. |
|
||||
| `t_a62d94ab` | Survey code semantics, tests, and documentation | [`.kanban-semantic-analysis.md`](./.kanban-semantic-analysis.md) | Semantic read: module map, public API surface with prop shapes and consumers, test coverage matrix (14/14 UNTESTED), documentation audit, code smells. |
|
||||
|
||||
**Reading order for a human reviewer:** if you only have 10 minutes, read §1 + §4 (Strengths and risks) + §5 P0 items. If you have 30 minutes, add the three source artifacts — they cite specific files and line ranges throughout.
|
||||
|
||||
**Not part of the project (do not treat as source of truth):** `.antigravity-session.md` is a runtime artifact from the upstream `t_c6396592` task; `.kanban-*.{json,md}` files are this kanban session's analysis outputs and are not project documentation.
|
||||
@@ -0,0 +1,137 @@
|
||||
{
|
||||
"project": {
|
||||
"name": "iot-standards-lab-landing",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"description": "Reference prototype landing page for 경북대학교 컴퓨터학부 사물인터넷 표준 연구실 (IoT Standards Lab).",
|
||||
"root": "/home/godopu16/PuKi/lab/landing_page/refer_landing_page"
|
||||
},
|
||||
"summary": {
|
||||
"type": "Next.js 14 App Router landing page (TypeScript + Tailwind CSS)",
|
||||
"framework": "next@14.2.5",
|
||||
"ui": "react@18.3.1 + tailwindcss@3.4.6",
|
||||
"language": "TypeScript 5.5",
|
||||
"node_modules_dir_present": true,
|
||||
"build_artifact_present": true,
|
||||
"git_repo": true
|
||||
},
|
||||
"top_level_directories": [
|
||||
{"name": "app", "path": "./app", "purpose_guess": "Next.js App Router routes and global layout/styles"},
|
||||
{"name": "app/intro", "path": "./app/intro", "purpose_guess": "Landing/home page (introductory hero composition)"},
|
||||
{"name": "app/intro/_components", "path": "./app/intro/_components", "purpose_guess": "Private components scoped to the intro page"},
|
||||
{"name": "app/lectures", "path": "./app/lectures", "purpose_guess": "Lectures / talks route page"},
|
||||
{"name": "app/members", "path": "./app/members", "purpose_guess": "Lab members / people route page"},
|
||||
{"name": "app/publications", "path": "./app/publications", "purpose_guess": "Publications list route page"},
|
||||
{"name": "app/standardization", "path": "./app/standardization", "purpose_guess": "Standardization activities route page"},
|
||||
{"name": "components", "path": "./components", "purpose_guess": "Shared/reusable React components used across routes"},
|
||||
{"name": "docs", "path": "./docs", "purpose_guess": "Design documentation"},
|
||||
{"name": "node_modules", "path": "./node_modules", "purpose_guess": "NPM dependency tree (gitignored)"},
|
||||
{"name": ".next", "path": "./.next", "purpose_guess": "Next.js build output cache (gitignored)"}
|
||||
],
|
||||
"top_level_files": [
|
||||
".antigravity-session.md",
|
||||
".gitignore",
|
||||
"next.config.js",
|
||||
"next-env.d.ts",
|
||||
"package.json",
|
||||
"package-lock.json",
|
||||
"postcss.config.js",
|
||||
"PROMPT.md",
|
||||
"README.md",
|
||||
"tailwind.config.ts",
|
||||
"tsconfig.json",
|
||||
"tsconfig.tsbuildinfo"
|
||||
],
|
||||
"file_counts_by_extension": {
|
||||
"tsx": 14,
|
||||
"ts": 2,
|
||||
"js": 2,
|
||||
"json": 2,
|
||||
"md": 4,
|
||||
"css": 1
|
||||
},
|
||||
"total_source_files_excluding_deps_and_lock": 25,
|
||||
"loc_estimate": {
|
||||
"scope": "All source files (.ts/.tsx/.js/.css/.json/.md) excluding node_modules, .next, .git, package-lock.json, tsconfig.tsbuildinfo",
|
||||
"total_lines": 2605,
|
||||
"breakdown": {
|
||||
"tsx_total": 1397,
|
||||
"ts_total": 136,
|
||||
"js_total": 12,
|
||||
"css_total": 146,
|
||||
"json_total": 50,
|
||||
"md_total": 731
|
||||
}
|
||||
},
|
||||
"entry_points": {
|
||||
"framework": "Next.js App Router — entry is the `app/` directory, not a single file",
|
||||
"app_root_layout": "app/layout.tsx",
|
||||
"routes": [
|
||||
{"path": "/", "file": "app/intro/page.tsx", "lines": 287, "uses_components": ["app/intro/_components/HeroComposition.tsx"]},
|
||||
{"path": "/lectures", "file": "app/lectures/page.tsx", "lines": 102},
|
||||
{"path": "/members", "file": "app/members/page.tsx", "lines": 174},
|
||||
{"path": "/publications", "file": "app/publications/page.tsx", "lines": 168},
|
||||
{"path": "/standardization", "file": "app/standardization/page.tsx", "lines": 169}
|
||||
],
|
||||
"shared_components": [
|
||||
"components/Counter.tsx",
|
||||
"components/Footer.tsx",
|
||||
"components/Header.tsx",
|
||||
"components/Marquee.tsx",
|
||||
"components/PageHeader.tsx",
|
||||
"components/Reveal.tsx",
|
||||
"components/SectionLabel.tsx"
|
||||
],
|
||||
"global_styles": "app/globals.css",
|
||||
"no_legacy_pages_dir": true,
|
||||
"no_src_dir": true,
|
||||
"no_cmd_dir": true,
|
||||
"no_main_index_app_server_file": true
|
||||
},
|
||||
"monorepo_markers": {
|
||||
"is_monorepo": false,
|
||||
"evidence": {
|
||||
"single_package_json": true,
|
||||
"package_json_count": 1,
|
||||
"workspaces_field": false,
|
||||
"lerna_json": false,
|
||||
"turbo_json": false,
|
||||
"nx_json": false,
|
||||
"pnpm_workspace_yaml": false,
|
||||
"yarn_workspaces": false,
|
||||
"rush_json": false
|
||||
}
|
||||
},
|
||||
"config_files": {
|
||||
"typescript": "tsconfig.json (22 lines)",
|
||||
"next": "next.config.js (6 lines, reactStrictMode: true)",
|
||||
"tailwind": "tailwind.config.ts (114 lines)",
|
||||
"postcss": "postcss.config.js (6 lines)",
|
||||
"eslint": "eslint-config-next in package.json devDependencies (no standalone .eslintrc visible at top level)"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"documentation": [
|
||||
{"file": "README.md", "lines": 104},
|
||||
{"file": "PROMPT.md", "lines": 249, "purpose_guess": "Prompt / brief for the reference design"},
|
||||
{"file": "docs/DESIGN.md", "lines": 332, "purpose_guess": "Design system specification (Google design.md token spec)"},
|
||||
{"file": ".antigravity-session.md", "lines": 46, "purpose_guess": "Runtime artifact captured by an upstream task — antigravity CLI session info, not project content"}
|
||||
],
|
||||
"git": {
|
||||
"is_git_repo": true,
|
||||
"gitignore_present": true,
|
||||
"gitignored_paths": ["node_modules", ".next", "out", "build", "*.tsbuildinfo", "next-env.d.ts", ".env*.local"]
|
||||
},
|
||||
"notes_for_downstream_tasks": [
|
||||
"Single Next.js 14 App Router project — not a monorepo, not a multi-package workspace.",
|
||||
"All routes live under app/; no pages/ dir, no src/ dir, no separate server entrypoint.",
|
||||
"Total source footprint is small (~2.6k lines across 25 files) — feasible to read entirely if needed.",
|
||||
"Documentation is split: PROMPT.md (brief) and docs/DESIGN.md (design system) are the primary reference docs; README.md is a project overview.",
|
||||
"Tailwind config is rich (114 lines) — likely the canonical source of design tokens, worth inspecting before reading page components.",
|
||||
".antigravity-session.md is NOT a project file — it is an artifact left by the parent task t_c6396592 (antigravity CLI session setup). Do not treat as documentation."
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,333 @@
|
||||
# Semantic Analysis Report — IoT Standards Lab Landing Page Prototype
|
||||
|
||||
This report provides a structured, semantic read-only analysis of the reference prototype codebase for the Kyungpook National University IoT Standards Lab. The workspace contains approximately 2,605 lines of code across 25 files using Next.js 14, React 18, TypeScript 5, and Tailwind CSS 3.
|
||||
|
||||
---
|
||||
|
||||
## 1. Modules and Responsibilities
|
||||
|
||||
This project is structured as a standard Next.js 14 App Router codebase. The responsibilities are clearly divided between page routing structures and reusable UI components.
|
||||
|
||||
* `app/`
|
||||
* **Purpose**: Owns the application routing, page structures, global layouts, metadata configurations, and global styles. It manages the core shell of the application but delegates UI component instantiation to the shared `components/` directory.
|
||||
* **Key Files**:
|
||||
* `app/layout.tsx`: Root layout configuration. Imports next/font Google Serifs/Sans, sets up base metadata, and wraps pages in standard header/footer.
|
||||
* `app/globals.css`: Contains CSS variable mappings matching design system tokens, grain background effects, custom typography class layers, and scroll-reveal CSS transitions.
|
||||
* `app/intro/`
|
||||
* **Purpose**: Owns the primary landing page (root route `/` or `/intro`), introducing the lab's core identity, mission, statistical counters, and two research thrusts.
|
||||
* **Key Files**:
|
||||
* `app/intro/page.tsx`: Orchestrates the cover page layouts, mission quotes, and research thrust cards.
|
||||
* `app/intro/_components/`
|
||||
* **Purpose**: Private subdirectory for intro-specific UI components. It does not share these components with other routes.
|
||||
* **Key Files**:
|
||||
* `app/intro/_components/HeroComposition.tsx`: Custom inline SVG render of an abstract mesh (representing MCM) and flow streams (representing QUIC) with native CSS animations.
|
||||
* `app/lectures/`
|
||||
* **Purpose**: Owns the route `/lectures` displaying academic coursework and lectures offered by the lab director.
|
||||
* **Key Files**:
|
||||
* `app/lectures/page.tsx`: Renders course articles with details on codes, target levels, and descriptions.
|
||||
* `app/members/`
|
||||
* **Purpose**: Owns the route `/members` showing the lab members, beginning with the PI and grouping student researchers.
|
||||
* **Key Files**:
|
||||
* `app/members/page.tsx`: Maps advisors, Ph.D. students, M.S. students, and undergraduate researchers.
|
||||
* `app/publications/`
|
||||
* **Purpose**: Owns the route `/publications` displaying selected publications and output statistics.
|
||||
* **Key Files**:
|
||||
* `app/publications/page.tsx`: Houses publication data (Journals, Conferences) mapped in a list layout.
|
||||
* `app/standardization/`
|
||||
* **Purpose**: Owns the route `/standardization` highlighting contributions made to various international standards bodies.
|
||||
* **Key Files**:
|
||||
* `app/standardization/page.tsx`: Groups standardization details per organization (oneM2M, W3C, IETF, OMA).
|
||||
* `components/`
|
||||
* **Purpose**: Owns all shared, reusable presentation and interaction components. It holds no business logic and relies on configurable props to customize content.
|
||||
* **Key Files**:
|
||||
* `components/Header.tsx`: Responsive navigation bar with mobile menu toggles.
|
||||
* `components/Footer.tsx`: Site footer including address, email, and internal site index.
|
||||
* `components/PageHeader.tsx`: Reusable route banner supporting dual-language headers.
|
||||
* `components/SectionLabel.tsx`: corner-aligned section label ("01 / 05") mimicking magazine spreads.
|
||||
* `components/Reveal.tsx`: Motion wrapper triggering transition classes on scroll.
|
||||
* `components/Counter.tsx`: Client-side tick-up animation for figures.
|
||||
* `components/Marquee.tsx`: Endless horizontally running keyword ticker.
|
||||
* `docs/`
|
||||
* **Purpose**: Owns documentation on the design system layout, color tokens, typography scales, and motion specifications.
|
||||
* **Key Files**:
|
||||
* `docs/DESIGN.md`: The canonical specification guide for the editorial magazine system ("Issue 01").
|
||||
|
||||
---
|
||||
|
||||
## 2. Public API Surface
|
||||
|
||||
### (a) Shared Components (components/)
|
||||
|
||||
* `Counter` (default export) in `components/Counter.tsx:11`
|
||||
* **Props Shape**:
|
||||
```typescript
|
||||
{
|
||||
value: number;
|
||||
duration?: number;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
className?: string;
|
||||
}
|
||||
```
|
||||
* **Consumers**:
|
||||
* `app/intro/page.tsx:5` (line figure metrics)
|
||||
* `app/members/page.tsx:5` (headcount metrics)
|
||||
* `app/publications/page.tsx:5` (publication count metrics)
|
||||
* `app/standardization/page.tsx:5` (contribution metrics)
|
||||
* `Footer` (default export) in `components/Footer.tsx:13`
|
||||
* **Props Shape**: `{}` (takes no props)
|
||||
* **Consumers**:
|
||||
* `app/layout.tsx:5` (global page shell)
|
||||
* `Header` (default export) in `components/Header.tsx:16`
|
||||
* **Props Shape**: `{}` (takes no props)
|
||||
* **Consumers**:
|
||||
* `app/layout.tsx:4` (global page shell)
|
||||
* `Marquee` (default export) in `components/Marquee.tsx:9`
|
||||
* **Props Shape**:
|
||||
```typescript
|
||||
{
|
||||
items: string[];
|
||||
reverse?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
```
|
||||
* **Consumers**:
|
||||
* `app/intro/page.tsx:4` (keywords banner)
|
||||
* `components/Footer.tsx:2` (colophon running ticker)
|
||||
* `app/publications/page.tsx:6` (venues ticker)
|
||||
* `app/standardization/page.tsx:6` (standards bodies ticker)
|
||||
* `PageHeader` (default export) in `components/PageHeader.tsx:10`
|
||||
* **Props Shape**:
|
||||
```typescript
|
||||
{
|
||||
ko: string;
|
||||
en: string;
|
||||
display?: string;
|
||||
description?: string;
|
||||
index: number;
|
||||
}
|
||||
```
|
||||
* **Consumers**:
|
||||
* `app/lectures/page.tsx:2` (page introduction banner)
|
||||
* `app/members/page.tsx:2` (page introduction banner)
|
||||
* `app/publications/page.tsx:2` (page introduction banner)
|
||||
* `app/standardization/page.tsx:2` (page introduction banner)
|
||||
* `Reveal` (default export) in `components/Reveal.tsx:15`
|
||||
* **Props Shape**:
|
||||
```typescript
|
||||
{
|
||||
children: ReactNode;
|
||||
variant?: "up" | "left" | "right" | "scale";
|
||||
delay?: number;
|
||||
as?: ElementType;
|
||||
className?: string;
|
||||
}
|
||||
```
|
||||
* **Consumers**:
|
||||
* `app/intro/page.tsx:3` (scroll stagger containers)
|
||||
* `app/lectures/page.tsx:3` (scroll stagger containers)
|
||||
* `app/members/page.tsx:3` (scroll stagger containers)
|
||||
* `app/publications/page.tsx:3` (scroll stagger containers)
|
||||
* `app/standardization/page.tsx:3` (scroll stagger containers)
|
||||
* `components/PageHeader.tsx:2` (in-header transitions)
|
||||
* `SectionLabel` (default export) in `components/SectionLabel.tsx:7`
|
||||
* **Props Shape**:
|
||||
```typescript
|
||||
{
|
||||
index: number;
|
||||
total?: number;
|
||||
label: string;
|
||||
className?: string;
|
||||
}
|
||||
```
|
||||
* **Consumers**:
|
||||
* `app/intro/page.tsx:6` (layout sub-numbering)
|
||||
* `app/lectures/page.tsx:4` (layout sub-numbering)
|
||||
* `app/members/page.tsx:4` (layout sub-numbering)
|
||||
* `app/publications/page.tsx:4` (layout sub-numbering)
|
||||
* `app/standardization/page.tsx:4` (layout sub-numbering)
|
||||
* `components/PageHeader.tsx:1` (header numbering tag)
|
||||
|
||||
### (b) Page-level Components (app/)
|
||||
|
||||
* `RootLayout` (default export) in `app/layout.tsx:44`
|
||||
* **Props Shape**: `{ children: React.ReactNode; }`
|
||||
* **Consumers**: Entry layout shell for the Next.js router.
|
||||
* `metadata` (named export) in `app/layout.tsx:35`
|
||||
* **Props Shape**: `Metadata` (Next.js config object)
|
||||
* **Consumers**: Resolved internally by Next.js for page metadata headers.
|
||||
* `IntroPage` (default export) in `app/intro/page.tsx:73`
|
||||
* **Props Shape**: `{}` (takes no props)
|
||||
* **Consumers**: Next.js App Router path resolver.
|
||||
* `metadata` (named export) in `app/intro/page.tsx:9`
|
||||
* **Props Shape**: `Metadata`
|
||||
* **Consumers**: Resolved internally by Next.js.
|
||||
* `LecturesPage` (default export) in `app/lectures/page.tsx:45`
|
||||
* **Props Shape**: `{}` (takes no props)
|
||||
* **Consumers**: Next.js App Router path resolver.
|
||||
* `metadata` (named export) in `app/lectures/page.tsx:6`
|
||||
* **Props Shape**: `Metadata`
|
||||
* **Consumers**: Resolved internally by Next.js.
|
||||
* `MembersPage` (default export) in `app/members/page.tsx:65`
|
||||
* **Props Shape**: `{}` (takes no props)
|
||||
* **Consumers**: Next.js App Router path resolver.
|
||||
* `metadata` (named export) in `app/members/page.tsx:7`
|
||||
* **Props Shape**: `Metadata`
|
||||
* **Consumers**: Resolved internally by Next.js.
|
||||
* `PublicationsPage` (default export) in `app/publications/page.tsx:84`
|
||||
* **Props Shape**: `{}` (takes no props)
|
||||
* **Consumers**: Next.js App Router path resolver.
|
||||
* `metadata` (named export) in `app/publications/page.tsx:8`
|
||||
* **Props Shape**: `Metadata`
|
||||
* **Consumers**: Resolved internally by Next.js.
|
||||
* `StandardizationPage` (default export) in `app/standardization/page.tsx:88`
|
||||
* **Props Shape**: `{}` (takes no props)
|
||||
* **Consumers**: Next.js App Router path resolver.
|
||||
* `metadata` (named export) in `app/standardization/page.tsx:8`
|
||||
* **Props Shape**: `Metadata`
|
||||
* **Consumers**: Resolved internally by Next.js.
|
||||
|
||||
### (c) Private Components (app/<route>/_components/)
|
||||
|
||||
* `HeroComposition` (default export) in `app/intro/_components/HeroComposition.tsx:9`
|
||||
* **Props Shape**: `{ className?: string; }`
|
||||
* **Consumers**:
|
||||
* `app/intro/page.tsx:7` (embedded inline SVG cover graphic)
|
||||
|
||||
### (d) Utilities/Hooks
|
||||
|
||||
* **None**. No utility files or custom hooks exist in the codebase. All custom scrolling or counter timing functions are written directly inline within `useEffect` wrappers of the respective UI components.
|
||||
|
||||
---
|
||||
|
||||
## 3. Test Coverage Footprint
|
||||
|
||||
* **Test Files Found**: A workspace-wide search for patterns such as `*.test.*`, `*.spec.*`, `__tests__/`, `vitest.config*`, `jest.config*`, `playwright.config*`, and `cypress/` returned **zero files**. There is no testing framework configured, nor are there any test scripts defined in `package.json`.
|
||||
* **CI Configuration**: No CI configurations (e.g. `.github/workflows` or GitLab CI configuration files) exist in the workspace.
|
||||
* **Coverage Matrix**:
|
||||
|
||||
| Component / Route | Coverage Status | Evidence / Notes |
|
||||
| --- | --- | --- |
|
||||
| `components/Counter.tsx` | **UNTESTED** | No test file exists; contains requestAnimationFrame loops requiring mock timers. |
|
||||
| `components/Footer.tsx` | **UNTESTED** | No test file exists; pure static HTML render. |
|
||||
| `components/Header.tsx` | **UNTESTED** | No test file exists; houses mobile menu toggling state. |
|
||||
| `components/Marquee.tsx` | **UNTESTED** | No test file exists; renders static marquee track loops. |
|
||||
| `components/PageHeader.tsx` | **UNTESTED** | No test file exists; renders standard dual headings. |
|
||||
| `components/Reveal.tsx` | **UNTESTED** | No test file exists; relies on IntersectionObserver hooks. |
|
||||
| `components/SectionLabel.tsx` | **UNTESTED** | No test file exists; simple presentation decorator. |
|
||||
| `app/layout.tsx` | **UNTESTED** | No test file exists; handles font loading and root HTML. |
|
||||
| `app/intro/page.tsx` | **UNTESTED** | No test file exists; orchestrates landing sections. |
|
||||
| `app/intro/_components/HeroComposition.tsx` | **UNTESTED** | No test file exists; renders raw SVG frames and paths. |
|
||||
| `app/lectures/page.tsx` | **UNTESTED** | No test file exists; presentation routing. |
|
||||
| `app/members/page.tsx` | **UNTESTED** | No test file exists; presentation routing. |
|
||||
| `app/publications/page.tsx` | **UNTESTED** | No test file exists; presentation routing. |
|
||||
| `app/standardization/page.tsx` | **UNTESTED** | No test file exists; presentation routing. |
|
||||
|
||||
* **Top 3 Testing Gaps**:
|
||||
1. **`components/Reveal.tsx`**: Since it acts as a layout wrapper for almost all elements across all pages, any regression in the IntersectionObserver attachment could render all pages entirely invisible (stuck at opacity 0).
|
||||
2. **`components/Counter.tsx`**: Uses `requestAnimationFrame` and an active observer, which can cause frame stuttering or rendering failures on outdated browsers if not properly tested/mocked.
|
||||
3. **`components/Header.tsx`**: Manages the mobile view menu drawer state. Failure here blocks mobile navigation.
|
||||
|
||||
---
|
||||
|
||||
## 4. Documentation Presence
|
||||
|
||||
* **`README.md`**: Provides a clear introduction mapping the project's purpose as a reference prototype. It includes a lab overview, technology stack, directory layout, routing map table, design system overview, and customization hooks outlining where to modify styles, colors, and static data variables.
|
||||
* *First 20 lines quote*:
|
||||
```markdown
|
||||
# 사물인터넷 표준 연구실 랜딩 페이지 (Reference Prototype)
|
||||
|
||||
경북대학교 컴퓨터학부 **사물인터넷 표준 연구실(IoT Standards Lab)** 의 랜딩 페이지
|
||||
**참고용 프로토타입**입니다. 프로덕션 배포용이 아니라, 구조와 디자인을 참고해
|
||||
실제 콘텐츠로 교체하기 위한 레퍼런스 구현입니다. 모든 인물·논문·표준 기여 내역은
|
||||
예시(placeholder)이므로 실제 정보로 바꿔서 사용하세요.
|
||||
|
||||
## 연구실 소개 (Lab Context)
|
||||
|
||||
본 연구실은 사물인터넷 국제 표준을 기반으로 **(a) 메타버스 상호운용성(MCM Project)**
|
||||
과 **(b) QUIC 기반 멀티에이전트 오케스트레이션 아키텍처 및 통신 인터페이스 설계**
|
||||
두 가지 축을 연구합니다.
|
||||
|
||||
## 기술 스택 (Tech Stack)
|
||||
|
||||
- **Next.js 14+** (App Router)
|
||||
- **TypeScript**
|
||||
- **Tailwind CSS**
|
||||
```
|
||||
* **`PROMPT.md`**: Confirming this is a **developer-facing prompt session history log** rather than user documentation. It logs the exact prompt briefs, session USD costs, and incremental generation patterns used when the AI created the repository.
|
||||
* **`docs/` Directory**:
|
||||
* `docs/DESIGN.md`: The **canonical design system specification** detailing color tokens, typography scales, motion principles, and reuse rules for shared elements under "Issue 01".
|
||||
* **JSDoc Coverage**:
|
||||
* **5 out of 7 (71.4%)** exported components in `components/` include structured JSDoc descriptions.
|
||||
* *Sample 1 (with JSDoc)*: `components/Counter.tsx` lines 5–10:
|
||||
```typescript
|
||||
/**
|
||||
* Number that ticks up from 0 → `value` when scrolled into view.
|
||||
* Uses requestAnimationFrame only (no animation library).
|
||||
*
|
||||
* CUSTOMIZATION HOOK — CONTENT: value / prefix / suffix.
|
||||
*/
|
||||
```
|
||||
* *Sample 2 (with JSDoc)*: `components/Reveal.tsx` lines 7–14:
|
||||
```typescript
|
||||
/**
|
||||
* Scroll-triggered reveal. Uses a single IntersectionObserver (no deps).
|
||||
* Pairs with the `.reveal` / `.is-visible` rules in globals.css.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — MOTION:
|
||||
* variant → direction of entrance
|
||||
* delay → stagger (ms), applied as transition-delay
|
||||
*/
|
||||
```
|
||||
* *Sample 3 (without JSDoc)*: `components/Footer.tsx` line 13:
|
||||
```typescript
|
||||
export default function Footer() {
|
||||
```
|
||||
* *Sample 4 (without JSDoc)*: `components/Header.tsx` line 16:
|
||||
```typescript
|
||||
export default function Header() {
|
||||
```
|
||||
* **Documentation Gaps**:
|
||||
1. **No Data Flow & API integration guidance**: Lacks documentation explaining how to decouple the hardcoded static variables into remote databases, markdown files, or headless CMS feeds.
|
||||
2. **No local runtime guidelines**: Does not state supported Node.js version ranges (e.g., node 18/20 LTS) or lockfile rules to prevent dependency drift when a developer sets up local development.
|
||||
3. **No coding standard/linting rules documentation**: Missing details on stylistic constraints (e.g. Prettier or specific TypeScript guidelines) to maintain editorial design conventions.
|
||||
|
||||
---
|
||||
|
||||
## 5. Code Smells
|
||||
|
||||
* **Duplication**:
|
||||
* *JSX Structure*: The **Figures Counter Section** pattern is copy-pasted across 4 files. They use the same layout class structure:
|
||||
```tsx
|
||||
<section className="border-b border-ink">
|
||||
<div className="container-content grid gap-px bg-line sm:grid-cols-3">
|
||||
```
|
||||
And they loop over a list mapping to `<Counter>`:
|
||||
* `app/intro/page.tsx` (lines 145–161)
|
||||
* `app/members/page.tsx` (lines 75–87)
|
||||
* `app/publications/page.tsx` (lines 103–115)
|
||||
* `app/standardization/page.tsx` (lines 106–118)
|
||||
* *Marquee Band Sections*: Very similar wrapper layouts enclosing `<Marquee>` components:
|
||||
* `app/intro/page.tsx` (lines 136–142)
|
||||
* `app/publications/page.tsx` (lines 94–101)
|
||||
* `app/standardization/page.tsx` (lines 98–104)
|
||||
* *Static Data Shapes*: Static arrays are defined at the top of each page file, coupling presentation and routing code directly with source content.
|
||||
* **Dead Code**:
|
||||
* *Unused Design Tokens*: The `brand` and `accent` configurations in `tailwind.config.ts` (lines 48–53) are deprecated aliases marked as "back-compat" to avoid breaking stray classes, but are not actively referenced anywhere in the source files.
|
||||
* **Oversized Files**:
|
||||
* `app/intro/page.tsx` is **288 lines long**. This size is partly justified as it acts as the primary landing page with multiple complex layout structures. However, it also embeds multiple large static arrays (e.g. `thrusts`, `figures`, `keywords`, `focusAreas`) directly in the file. Separating these datasets into a localized content file would reduce complexity.
|
||||
* **Prop Drilling**:
|
||||
* None identified. The components are flat and presentation-only, and do not pass state down multiple layers.
|
||||
* **Other Smells**:
|
||||
* TypeScript rules are strictly followed: there is no usage of `any` types or assertions, and no non-null (`!`) assertion bypasses.
|
||||
* Looping `key` props are correctly defined and mapped across all loops in the project.
|
||||
|
||||
---
|
||||
|
||||
## 6. Summary
|
||||
|
||||
This codebase functions as a high-fidelity reference prototype and layout scaffold for a university research laboratory portal. The primary strength of the project is its exceptional editorial visual identity ("Issue 01") and its clean, type-safe implementation that respects accessibility parameters (such as `prefers-reduced-motion`). The top 3 risks/gaps identified are:
|
||||
|
||||
1. **Statically Coupled Content**: Page data (like membership lists, publications, and standardized contributions) is hardcoded directly inside page routes, making updates labor-intensive and error-prone for non-developers.
|
||||
2. **Lack of Automated Verification**: The complete absence of testing tools, linting workflows, or CI pipelines poses a risk of visual regression or runtime failures during layout refactoring.
|
||||
3. **No decoupled content or asset structure**: Static SVGs (like `HeroComposition`) are locked in hardcoded coordinates, preventing easy swap-outs of layout designs by non-designers.
|
||||
@@ -0,0 +1,140 @@
|
||||
# Stack Profile — `iot-standards-lab-landing`
|
||||
|
||||
> Reference prototype landing page for the KNU CS IoT Standards Lab.
|
||||
> Workspace: `/home/godopu16/PuKi/lab/landing_page/refer_landing_page`
|
||||
> Produced as the deliverable for kanban task `t_239791d2`.
|
||||
|
||||
## 1. Languages, Frameworks, Package Manager
|
||||
|
||||
| Layer | Pin / Range | Installed | Latest | Note |
|
||||
|---|---|---|---|---|
|
||||
| Language | TypeScript `^5.5.3` | 5.9.3 | 6.0.3 | Pin is fine; major jump to TS 6 is non-breaking for most code |
|
||||
| Framework | Next.js `14.2.5` (exact) | 14.2.5 | 16.2.9 | 2 majors behind; line-locked by app's React 18 dep |
|
||||
| UI runtime | `react` `^18.3.1`, `react-dom` `^18.3.1` | 18.3.1 | 19.2.7 | React 19 is available but is a major — see §5 |
|
||||
| Package manager | npm (single `package-lock.json`, lockfile v3) | npm 10.9.7 | — | No `pnpm-lock.yaml` / `yarn.lock` / `bun.lockb` present |
|
||||
| Runtime | Node v22.22.2 (host) | — | — | No `engines` field declared |
|
||||
|
||||
**Type system config** (`tsconfig.json`):
|
||||
- `strict: true`, `noEmit: true`, `incremental: true`
|
||||
- `moduleResolution: "bundler"`, `jsx: "preserve"`, `isolatedModules: true`
|
||||
- `plugins: [{ "name": "next" }]`, path alias `@/*` → `./*`
|
||||
|
||||
**Next.js config** (`next.config.js`):
|
||||
- `reactStrictMode: true`; no image domains, no redirects, no rewrites, no headers, no experimental flags. Minimal by design.
|
||||
|
||||
**Styling**:
|
||||
- Tailwind CSS `^3.4.6` (installed 3.4.19) — latest line is 4.x; the `tailwind.config.ts` is rich enough (114 lines, custom theme) that the v3→v4 jump is a planned migration, not a `npm update`.
|
||||
- `postcss.config.js` wires Tailwind + `autoprefixer` (^10.4.19).
|
||||
- Font stack is loaded via `next/font` and exposed as CSS variables — no external font loader (Google Fonts, Fontsource) is in the dep tree.
|
||||
|
||||
**Not present**:
|
||||
- No `Dockerfile` / `docker-compose*` / `dockerignore` — there is no container image for this app.
|
||||
- No `.env`, `.env.example`, `.envrc` — the app reads no env vars.
|
||||
- No `.eslintrc*` file and no `eslintConfig` block in `package.json`. ESLint runs through `next lint`, which uses `eslint-config-next`'s defaults (`core-web-vitals` + `next/typescript`).
|
||||
- No `.prettierrc*` — formatting is not enforced in CI.
|
||||
- No `.github/`, no `.gitlab-ci.yml`, no `.circleci/` — no CI pipeline.
|
||||
|
||||
## 2. Dependencies
|
||||
|
||||
### Direct (runtime) — 3 packages
|
||||
|
||||
| Package | Pin | Purpose |
|
||||
|---|---|---|
|
||||
| `next` | `14.2.5` (exact) | Framework |
|
||||
| `react` | `^18.3.1` | UI library |
|
||||
| `react-dom` | `^18.3.1` | DOM renderer |
|
||||
|
||||
### Dev — 10 packages
|
||||
|
||||
| Package | Pin | Purpose |
|
||||
|---|---|---|
|
||||
| `@types/node` | `^20.14.0` | Node typings (dev only) |
|
||||
| `@types/react` | `^18.3.3` | React typings |
|
||||
| `@types/react-dom` | `^18.3.0` | React DOM typings |
|
||||
| `autoprefixer` | `^10.4.19` | PostCSS plugin |
|
||||
| `postcss` | `^8.4.39` | CSS pipeline |
|
||||
| `tailwindcss` | `^3.4.6` | Utility CSS |
|
||||
| `typescript` | `^5.5.3` | Compiler |
|
||||
| `eslint` | `^8.57.0` | Linter |
|
||||
| `eslint-config-next` | `14.2.5` (exact, matches Next) | Next-flavored ESLint config |
|
||||
|
||||
**Observations**:
|
||||
- Footprint is intentionally minimal — no `framer-motion`, no UI lib (shadcn/Radix/MUI), no icon set, no analytics, no CMS client, no image CDN.
|
||||
- `next` and `eslint-config-next` are pinned **exact** (no `^`); `react` and `react-dom` use `^`. This is the right call: Next and its ESLint config must move together.
|
||||
- Dev types are pinned to React 18, consistent with the runtime.
|
||||
- `package-lock.json` is 215 KB → transitive tree is fairly clean; the project has no obvious bloat.
|
||||
|
||||
## 3. Scripts
|
||||
|
||||
Four npm scripts, all thin wrappers around `next`:
|
||||
|
||||
| Script | Command | Use |
|
||||
|---|---|---|
|
||||
| `npm run dev` | `next dev` | Local dev server (default port 3000) |
|
||||
| `npm run build` | `next build` | Production build → `.next/` |
|
||||
| `npm start` | `next start` | Run the production build |
|
||||
| `npm run lint` | `next lint` | ESLint via Next's wrapper |
|
||||
|
||||
No `test`, `format`, `typecheck`, `prepare`, `pre-commit`, or any other lifecycle hooks. The 4-script surface is honest: linting is the only quality gate declared.
|
||||
|
||||
## 4. Configuration / Manifest Inventory
|
||||
|
||||
| File | Lines | Notes |
|
||||
|---|---|---|
|
||||
| `package.json` | 28 | Single manifest, no `engines`, no `workspaces` |
|
||||
| `package-lock.json` | (215 KB) | npm v3 lockfile |
|
||||
| `tsconfig.json` | 22 | strict, bundler resolution, `@/*` alias |
|
||||
| `next.config.js` | 6 | `reactStrictMode: true` only |
|
||||
| `tailwind.config.ts` | 114 | Editorial design tokens, custom colors, custom animations |
|
||||
| `postcss.config.js` | 6 | tailwindcss + autoprefixer |
|
||||
| `next-env.d.ts` | 5 | Next-managed, gitignored |
|
||||
| `tsconfig.tsbuildinfo` | (80 KB) | Incremental build cache, gitignored |
|
||||
| `.gitignore` | 27 | Standard Next.js ignore set |
|
||||
| `.kanban-inventory.json` | 137 | Upstream inventory artifact (not a config) |
|
||||
| `.antigravity-session.md` | 46 | Upstream runtime artifact (not a config) |
|
||||
|
||||
## 5. Outdated / Vulnerable Pins (Trivially Obvious)
|
||||
|
||||
### Vulnerabilities (from `npm audit`) — 8 advisories, 1 critical
|
||||
|
||||
`next@14.2.5` is affected by **21 published advisories** that are fixed in `14.2.35` (same line, not a major jump):
|
||||
- **Critical** (1): Cache poisoning (GHSA-gp8f-8m3g-qvj9)
|
||||
- **High** (6): DoS via Server Components, image optimizer, middleware cache poisoning, SSRF via middleware redirect, etc.
|
||||
- **Moderate** (1): PostCSS XSS via unescaped `</style>` (transitive through `next/node_modules/postcss`)
|
||||
|
||||
Plus **transitive**:
|
||||
- `glob` 10.2.0–10.4.5 — command injection in CLI (only triggered if `glob`'s CLI is invoked; **not a runtime risk for this Next app**)
|
||||
- `minimatch` 9.0.0–9.6 — ReDoS (transitive via ESLint's glob walker; **dev-time only**)
|
||||
|
||||
**Recommended fix (lowest-risk):** `npm install next@14.2.35` — same major, same line, fixes 21 Next advisories + the transitive `postcss` advisory. Does **not** require React changes. `npm audit fix --force` would jump to Next 16 + React 19 — that's a planned migration, not a security patch.
|
||||
|
||||
### Outdated-by-major pins (information only — not security)
|
||||
|
||||
| Pin | Major delta | Risk profile |
|
||||
|---|---|---|
|
||||
| `next` 14 → 16 | App Router stabilized; some breaking changes (params async, etc.) | Planned migration |
|
||||
| `react`/`react-dom` 18 → 19 | New compiler, ref as prop, async transitions | Requires Next 15+ |
|
||||
| `eslint` 8 → 10 | Flat config becoming default | Could be deferred |
|
||||
| `typescript` 5 → 6 | Mostly compat, some strictness tightening | Trivial in this codebase |
|
||||
| `tailwindcss` 3 → 4 | New engine, config format change | Significant migration (would touch `tailwind.config.ts`) |
|
||||
| `@types/*` React 18 → 19, Node 20 → 25 | Mismatched with installed Node 22 host | Cosmetic |
|
||||
| `@types/node` 20 → 25 | Host is Node 22 — current pin still works but `25` would track current Node | Cosmetic |
|
||||
|
||||
The biggest near-term "looks dated" item is the **React 18 + Next 14 stack** (released mid-2024), but everything is internally consistent — no mixed majors, no version skew between `next` and `eslint-config-next`. The stack is intentionally conservative.
|
||||
|
||||
### Compatibility sketch (host vs declared)
|
||||
|
||||
- Host Node 22, npm 10.9.7 — fits Next 14 / React 18 cleanly. No `engines` field; any contributor on Node ≥18 works.
|
||||
- `eslint@8` is the last v8; the `next lint` shim still works in Next 14.2.
|
||||
|
||||
## 6. Build / Toolchain Footprint Summary
|
||||
|
||||
- **Source files**: 25 (14 .tsx, 2 .ts, 2 .js, 1 .css, 2 .json, 4 .md), ~2,605 LOC excluding deps and lockfile (per upstream `.kanban-inventory.json`).
|
||||
- **Routes**: 5 under `app/` (`/`, `/lectures`, `/members`, `/publications`, `/standardization`).
|
||||
- **Shared components**: 7 in `components/`.
|
||||
- **Build artifacts present**: `node_modules/` (342 dirs) and `.next/` exist; lockfile and `tsconfig.tsbuildinfo` present.
|
||||
- **No test runner, no formatter, no CI, no Docker, no env vars, no analytics, no CMS, no icon lib, no motion lib.** The dependency tree is the smallest viable Next 14 + React 18 + Tailwind v3 surface.
|
||||
|
||||
## 7. Stack-Profile Verdict
|
||||
|
||||
A **deliberately minimal Next 14 App Router reference implementation**: a small landing page with a hand-rolled design system encoded in `tailwind.config.ts` and `app/globals.css`. Dependencies are minimal and internally consistent; the only real-world remediation on the table is bumping `next` to `14.2.35` (one-line patch) to clear 21 advisories. Major-version upgrades (Next 16, React 19, Tailwind 4) are a separate planned migration, not security work.
|
||||
@@ -0,0 +1,249 @@
|
||||
# PROMPT.md — Claude Code에 전달한 프롬프트 기록
|
||||
|
||||
> `refer_landing_page/` 디렉터리를 만들 때 Claude Code에 보낸 프롬프트의 **원문 + 의도 + 세션 메타** 기록. 공부/재사용용.
|
||||
|
||||
---
|
||||
|
||||
## 0. 작업 요약
|
||||
|
||||
- **대상**: `~/PuKi/lab/landing_page/refer_landing_page/`
|
||||
- **프레임워크**: Next.js 14+ (App Router) + TypeScript + Tailwind CSS
|
||||
- **5개 라우트**: `/intro`, `/members`, `/publications`, `/lectures`, `/standardization`
|
||||
- **컨텍스트**: 경북대 IoT 표준 연구실 — MCM(메타버스 상호운용성) + QUIC 멀티에이전트 오케스트레이션
|
||||
- **최종 산출물**: 18개 파일 (config 6 + app 7 + components 3 + README + .gitignore)
|
||||
- **총 비용**: 약 $0.54 USD (claude-opus-4-8, 13 turns)
|
||||
- **호출 모드**: `claude -p "..."` (print mode, 비대화형)
|
||||
|
||||
> ⚠️ `npm install`/`npm run dev`는 의도적으로 실행하지 않음. 사용자가 직접 실행.
|
||||
|
||||
---
|
||||
|
||||
## 1. 호출 명령 패턴 (Print Mode)
|
||||
|
||||
```bash
|
||||
claude -p "$(cat /tmp/cc_prompt.md)" \
|
||||
--dangerously-skip-permissions \
|
||||
--max-turns 30 \
|
||||
--max-budget-usd 5 \
|
||||
--output-format json
|
||||
```
|
||||
|
||||
| 플래그 | 값 | 이유 |
|
||||
|--------|-----|------|
|
||||
| `-p` | — | 비대화형 one-shot. 다중-턴 워크플로에는 부적합 |
|
||||
| `--dangerously-skip-permissions` | — | 파일 쓰기/네트워크를 자동 승인 (워크스페이스 신뢰 다이얼로그 스킵) |
|
||||
| `--max-turns` | 30 | 무한 루프 방지. 단일 작업엔 25~30이면 충분 |
|
||||
| `--max-budget-usd` | 5 | 비용 상한. 시스템 프롬프트 캐시 생성에 최소 ~$0.05 필요 |
|
||||
| `--output-format` | json | `session_id`, `total_cost_usd` 등 메타 회수 |
|
||||
| `workdir` | `/home/godopu16/PuKi/lab/landing_page` | Claude가 작업할 루트 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 1차 프롬프트 (전체 — `/tmp/cc_prompt.md`)
|
||||
|
||||
> claude가 부분적으로만 수행한 후 인터럽트됨. 다음 12개 파일만 생성:
|
||||
> package.json, next.config.js, next-env.d.ts, tsconfig.json, postcss.config.js, tailwind.config.ts, .gitignore, app/layout.tsx, app/globals.css, components/Header.tsx, components/Footer.tsx, components/PageHeader.tsx
|
||||
|
||||
```text
|
||||
Create a Next.js 14+ (App Router) landing-page reference prototype at
|
||||
/home/godopu16/PuKi/lab/landing_page/refer_landing_page/ for a Korean
|
||||
university research lab.
|
||||
|
||||
REQUIREMENTS (strict):
|
||||
1. Use Next.js 14+ App Router with TypeScript and Tailwind CSS. Use
|
||||
create-next-app style structure (package.json, next.config.js, app/
|
||||
directory, tailwind.config.ts, tsconfig.json, postcss.config.js).
|
||||
If create-next-app is not available offline, write all files
|
||||
manually with correct contents. Do NOT run any interactive install.
|
||||
2. Top app header with 5 navigation links routing to: /intro, /members,
|
||||
/publications, /lectures, /standardization. Header must be sticky
|
||||
and have a working mobile hamburger menu.
|
||||
3. Implement ALL 5 pages with realistic placeholder content. Each page
|
||||
must be a real Next.js route (app/<route>/page.tsx) — NOT a single-
|
||||
page mock.
|
||||
4. Lab context: 경북대학교 컴퓨터학부 사물인터넷 표준 연구실
|
||||
(Internet of Things Standards Lab). The lab has two main research
|
||||
thrusts: (a) MCM project — interoperability in metaverse
|
||||
environments, (b) QUIC-based multi-agents orchestration architecture
|
||||
and communication interface design. The intro page should introduce
|
||||
both. The other pages should reflect this context.
|
||||
5. Responsive: works on desktop (>=1024px), tablet (640-1023), and
|
||||
mobile (<640). Test that the header collapses to a hamburger menu
|
||||
on mobile. Use Tailwind responsive classes.
|
||||
6. Korean-language UI. Lab name in Korean and English. Bilingual
|
||||
section headers (Korean primary, English in parentheses) where
|
||||
natural.
|
||||
7. Include a Footer with lab address placeholder, contact email
|
||||
placeholder, and copyright line.
|
||||
8. README.md inside refer_landing_page/ explaining: project purpose
|
||||
(reference prototype, not production), how to run (npm install,
|
||||
npm run dev), route map, and a short list of customization hooks
|
||||
(colors, fonts, content).
|
||||
9. Do NOT install npm packages. Just generate the source files. Add a
|
||||
package.json with the standard Next.js scripts (dev, build, start,
|
||||
lint) and the deps listed but with a note in README that the user
|
||||
must run npm install themselves.
|
||||
10. Keep total file count reasonable — prefer fewer, well-structured
|
||||
files over many fragments.
|
||||
|
||||
OUTPUT FORMAT:
|
||||
- After generating files, list every file path you created with one-
|
||||
line descriptions.
|
||||
- Do NOT run npm install, npm run dev, or any network commands.
|
||||
- Reply in English (final summary to me). The user is the lab PI; I am
|
||||
Claude, the coding agent.
|
||||
|
||||
Begin.
|
||||
```
|
||||
|
||||
### 1차 시도 결과
|
||||
|
||||
- 1차 호출은 30분 이상 흐른 뒤 인터럽트됨 (Hermes 세션 셧다운).
|
||||
- 그 시점에 claude는 **설정 파일 + components 3개 + layout.tsx + globals.css** 까지만 생성.
|
||||
- **5개 페이지(`app/<route>/page.tsx`) + README.md** 가 누락된 채 중단.
|
||||
|
||||
---
|
||||
|
||||
## 3. 2차 프롬프트 — 복구용 (누락 6개 파일만 생성) — `/tmp/cc_prompt2.md`
|
||||
|
||||
> 같은 디렉터리에 새 세션으로 재진입하되, 이미 만들어진 파일은 **덮어쓰지 말라**고 명시.
|
||||
> claude-code skill의 Pitfall #13을 적용해 `-c` (continue) 대신 **새 세션 + 명시적 파일 목록** 패턴 사용.
|
||||
|
||||
```text
|
||||
You are continuing a partially-completed task. The previous Claude
|
||||
session was interrupted at
|
||||
/home/godopu16/PuKi/lab/landing_page/refer_landing_page/.
|
||||
|
||||
ALREADY CREATED (do NOT recreate, do NOT overwrite, leave as-is):
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/package.json
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/next.config.js
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/next-env.d.ts
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/tsconfig.json
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/postcss.config.js
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/tailwind.config.ts
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/.gitignore
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/layout.tsx
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/globals.css
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/components/Header.tsx
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/components/Footer.tsx
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/components/PageHeader.tsx
|
||||
|
||||
YOU MUST CREATE (these are missing):
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/intro/page.tsx
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/members/page.tsx
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/publications/page.tsx
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/lectures/page.tsx
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/standardization/page.tsx
|
||||
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/README.md
|
||||
|
||||
CONTEXT (same as original task):
|
||||
- Next.js 14+ App Router, TypeScript, Tailwind CSS.
|
||||
- Lab: 경북대학교 컴퓨터학부 사물인터넷 표준 연구실 (Internet of
|
||||
Things Standards Lab).
|
||||
- Two research thrusts:
|
||||
(a) MCM project — interoperability in metaverse environments
|
||||
(b) QUIC-based multi-agents orchestration architecture and
|
||||
communication interface design
|
||||
- Korean-language UI. Bilingual section headers (Korean primary,
|
||||
English in parentheses) where natural.
|
||||
- 5 pages must each have realistic placeholder content (not lorem
|
||||
ipsum). Use the lab context.
|
||||
- Responsive: use Tailwind responsive classes; works on desktop,
|
||||
tablet, mobile.
|
||||
- Each page should use the existing components/PageHeader.tsx and
|
||||
components/Footer.tsx where appropriate.
|
||||
|
||||
README.md must include:
|
||||
- Project purpose (reference prototype, not production)
|
||||
- Lab context (1-2 sentences)
|
||||
- Tech stack (Next.js 14 App Router, TypeScript, Tailwind CSS)
|
||||
- Directory structure
|
||||
- How to run: `cd refer_landing_page && npm install && npm run dev`
|
||||
and the resulting URL
|
||||
- Route map: /intro, /members, /publications, /lectures,
|
||||
/standardization with one-line description of each
|
||||
- Customization hooks: where to change colors (tailwind.config.ts),
|
||||
fonts (app/layout.tsx), content (each page.tsx)
|
||||
- A note that the user must run `npm install` themselves (do not run)
|
||||
|
||||
OUTPUT FORMAT:
|
||||
- After generating files, list every file path you created with one-
|
||||
line descriptions.
|
||||
- Do NOT run npm install, npm run dev, or any network commands.
|
||||
- Do NOT overwrite any of the ALREADY CREATED files listed above.
|
||||
- Reply in English. Be concise.
|
||||
|
||||
Begin.
|
||||
```
|
||||
|
||||
### 2차 시도 결과
|
||||
|
||||
- `subtype: success`, 13 turns, $0.54
|
||||
- 누락된 6개 파일 모두 생성, 기존 12개 파일은 그대로 유지
|
||||
- README에 경고 문구(사용자 직접 `npm install` 필요) 명시
|
||||
|
||||
---
|
||||
|
||||
## 4. 프롬프트 설계 패턴 — 학습 노트
|
||||
|
||||
### 4-1. Print 모드에서는 짧고 결정적인 프롬프트가 낫다
|
||||
|
||||
`claude -p`는 **짧고 구체적인 지시**에 최적화돼 있다. claude-code skill 공식 가이드도 같은 내용을 명시:
|
||||
|
||||
> "Brief, concrete prompts for print-mode code generation finish in seconds.
|
||||
> A 3-sentence verbose prompt with background context can cause 120s+ timeouts.
|
||||
> The file-write tool (not your prompt text) carries the implementation details."
|
||||
|
||||
→ 1차 프롬프트가 60줄(약 1.2KB) 정도가 적절. 더 길면 `thinking` 시간만 늘어나고 결과는 같다.
|
||||
|
||||
### 4-2. `REQUIREMENTS (strict):` 10개로 분해
|
||||
|
||||
체크리스트 형식의 번호 매기기 지시는 누락이 적다. 1번이 누락되면 1번 항목만 다시 요청할 수 있어 **복구 단위**가 명확해진다.
|
||||
|
||||
### 4-3. "Do NOT run X" — 네거티브 제약
|
||||
|
||||
`Do NOT run npm install, npm run dev, or any network commands` 같은 **명시적 금지 목록**이 print 모드에서 일탈을 줄이는 데 효과적이었다.
|
||||
|
||||
### 4-4. 작업 디렉터리 경로를 절대경로로
|
||||
|
||||
`workdir`만으로는 부족. 프롬프트 안의 모든 경로를 **절대경로**로 적어야 claude가 자기 판단으로 위치를 옮기지 않는다.
|
||||
|
||||
### 4-5. 복구 패턴: `-c` 대신 새 세션 + "ALREADY CREATED" 명세
|
||||
|
||||
claude-code skill Pitfall #13:
|
||||
|
||||
> "`-c` / `--continue` is dangerous in multi-workdir orchestration — `claude -c`
|
||||
> resumes the most recent session for the current working directory, which is
|
||||
> the wrong session whenever (a) you switched workdirs, (b) multiple workdirs
|
||||
> are in play, or (c) the most recent session in that workdir is not the one
|
||||
> you want to resume."
|
||||
|
||||
→ 이번 케이스도 같은 이유로 `-c`를 피하고 **새 세션 + 누락 파일 명세** 로 복구했다. 12개 파일 경로를 일일이 적은 덕에 claude는 안전하게 "기존 파일 보존 + 누락 6개 생성" 으로 작업을 분기했다.
|
||||
|
||||
### 4-6. `// CUSTOMIZATION HOOK` 주석 메타포
|
||||
|
||||
claude가 각 페이지에 `// CUSTOMIZATION HOOK` 주석을 달아 데이터 배열의 위치를 표시했다. README에서 이 주석을 가리키는 가이드를 작성하면 **사용자가 실제 콘텐츠로 교체**할 때 헤맬 일이 없다. (보너스 효과)
|
||||
|
||||
### 4-7. `--output-format json`의 활용
|
||||
|
||||
`session_id`, `total_cost_usd`, `num_turns`, `usage.modelUsage`를 받으면 비용 추적·재개에 유리하다. 본 작업의 비용 메타(13 turns, $0.54)도 이걸로 회수했다.
|
||||
|
||||
---
|
||||
|
||||
## 5. 다음에 비슷한 작업을 한다면
|
||||
|
||||
| 개선점 | 이유 |
|
||||
|--------|------|
|
||||
| 프롬프트를 1차에 한 번에 다 보내지 말고, **테스트 가능한 단위**(예: config + layout → 1차, pages → 2차)로 쪼갠다 | 인터럽트 시 손실이 적고 검증 단계 명확 |
|
||||
| `--max-turns 20` + `--max-budget-usd 3` 같은 보수적 캡 | 평균 작업 단위에 맞춰 과다 사용 방지 |
|
||||
| `--append-system-prompt-file`로 연구실 컨텍스트 미리 주입 | 매번 프롬프트에 컨텍스트 반복 안 해도 됨 |
|
||||
| 인터랙티브 모드(tmux) 검토 | 5개 페이지가 서로 의존성이 낮아 print 모드가 적절했지만, 디자인 반복이 많으면 tmux가 유리 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 관련 산출물
|
||||
|
||||
- `refer_landing_page/README.md` — 사용자용 실행 가이드
|
||||
- `refer_landing_page/` — 실제 Next.js 프로토타입 (18개 파일)
|
||||
- `refer_landing_page/RESEARCH.md`(상위) — 연구 분야 소개용 (홈페이지 카피 소스)
|
||||
- `/tmp/cc_prompt.md`, `/tmp/cc_prompt2.md` — 원본 프롬프트 파일 (이 문서의 원천)
|
||||
@@ -0,0 +1,104 @@
|
||||
# 사물인터넷 표준 연구실 랜딩 페이지 (Reference Prototype)
|
||||
|
||||
경북대학교 컴퓨터학부 **사물인터넷 표준 연구실(IoT Standards Lab)** 의 랜딩 페이지
|
||||
**참고용 프로토타입**입니다. 프로덕션 배포용이 아니라, 구조와 디자인을 참고해
|
||||
실제 콘텐츠로 교체하기 위한 레퍼런스 구현입니다. 모든 인물·논문·표준 기여 내역은
|
||||
예시(placeholder)이므로 실제 정보로 바꿔서 사용하세요.
|
||||
|
||||
## 연구실 소개 (Lab Context)
|
||||
|
||||
본 연구실은 사물인터넷 국제 표준을 기반으로 **(a) 메타버스 상호운용성(MCM Project)**
|
||||
과 **(b) QUIC 기반 멀티에이전트 오케스트레이션 아키텍처 및 통신 인터페이스 설계**
|
||||
두 가지 축을 연구합니다.
|
||||
|
||||
## 기술 스택 (Tech Stack)
|
||||
|
||||
- **Next.js 14+** (App Router)
|
||||
- **TypeScript**
|
||||
- **Tailwind CSS**
|
||||
|
||||
## 디렉터리 구조 (Directory Structure)
|
||||
|
||||
```
|
||||
refer_landing_page/
|
||||
├── app/
|
||||
│ ├── layout.tsx # 루트 레이아웃 (Header/Footer, 폰트, 메타데이터)
|
||||
│ ├── globals.css # Tailwind 지시문 + 공통 유틸 클래스
|
||||
│ ├── intro/page.tsx # 연구실 소개
|
||||
│ ├── members/page.tsx # 구성원
|
||||
│ ├── publications/page.tsx # 논문
|
||||
│ ├── lectures/page.tsx # 강의
|
||||
│ └── standardization/page.tsx# 표준화 활동
|
||||
├── components/
|
||||
│ ├── Header.tsx # 반응형 상단 내비게이션
|
||||
│ ├── Footer.tsx # 하단 연락처/바로가기
|
||||
│ ├── PageHeader.tsx # 페이지 배너 (한글 제목 + 영문 display)
|
||||
│ ├── SectionLabel.tsx # 매거진 섹션 넘버링 (01 / 05)
|
||||
│ ├── Reveal.tsx # 스크롤 등장 모션 래퍼
|
||||
│ ├── Counter.tsx # 0→값 카운트업 숫자
|
||||
│ └── Marquee.tsx # 키워드 러닝 티커
|
||||
├── docs/
|
||||
│ └── DESIGN.md # 디자인 시스템 문서 (토큰·타입·모션·컴포넌트)
|
||||
├── tailwind.config.ts # 색상·폰트·타입스케일·모션 토큰
|
||||
├── next.config.js
|
||||
├── tsconfig.json
|
||||
├── postcss.config.js
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## 실행 방법 (How to Run)
|
||||
|
||||
> ⚠️ 의존성 설치(`npm install`)는 **사용자가 직접 실행**해야 합니다. 이 저장소를
|
||||
> 생성한 도구는 `npm install`을 실행하지 않았습니다.
|
||||
|
||||
```bash
|
||||
cd refer_landing_page
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
개발 서버는 기본적으로 **http://localhost:3000** 에서 실행됩니다.
|
||||
|
||||
## 라우트 맵 (Route Map)
|
||||
|
||||
| 경로 | 설명 |
|
||||
| --- | --- |
|
||||
| `/intro` | 연구실 소개 — 두 가지 연구 축(MCM, QUIC)과 연구 분야 |
|
||||
| `/members` | 구성원 — 지도교수 및 박사·석사·학부 연구원 (placeholder) |
|
||||
| `/publications` | 논문 — 대표 저널/학회 논문 목록 (placeholder) |
|
||||
| `/lectures` | 강의 — 담당 학부·대학원 강의 (placeholder) |
|
||||
| `/standardization` | 표준화 활동 — oneM2M, W3C WoT, IETF QUIC, OMA LwM2M 기여 (placeholder) |
|
||||
|
||||
## 디자인 시스템 (Design System)
|
||||
|
||||
이 사이트는 **고대비 매거진 스프레드** 감성의 에디토리얼 디자인 시스템("Issue 01")
|
||||
으로 구성됩니다. 소수의 토큰에서 전체 테마가 파생되며, 토큰 하나를 바꾸면 사이트
|
||||
전반에 반영됩니다. 색상 토큰, 타입 스케일, 모션 원칙, 공유 컴포넌트 사용법 등 전체
|
||||
설명은 **[`docs/DESIGN.md`](./docs/DESIGN.md)** 를 참고하세요.
|
||||
|
||||
## 커스터마이징 (Customization Hooks)
|
||||
|
||||
- **색상(Colors):** `tailwind.config.ts` 의 `theme.extend.colors` 에서 디자인 토큰을
|
||||
수정합니다 — `ink`(본문·괘선), `ivory`/`paper`(종이 배경), `line`(헤어라인),
|
||||
그리고 두 에디토리얼 강조색 `vermillion`(MCM/저널) · `cobalt`(QUIC/학회). 같은 값이
|
||||
`app/globals.css` 의 `:root` CSS 변수에도 미러링되어 있으니 **두 곳을 함께** 바꾸세요.
|
||||
(`brand`/`accent` 별칭은 레거시 호환용이므로 신규 코드에서는 사용하지 마세요.)
|
||||
- **폰트(Fonts):** `app/layout.tsx` 에서 `next/font` 로 로드해 CSS 변수
|
||||
(`--font-display`, `--font-serif-ko`, `--font-sans`)로 노출하고,
|
||||
`tailwind.config.ts` 의 `fontFamily` 에서 패밀리를, `fontSize` 의
|
||||
`display`/`display-sm` 에서 매거진 디스플레이 스케일을 조정합니다.
|
||||
- **모션(Motion):** 스크롤 등장 타이밍은 `app/globals.css` 의 `--reveal-duration` /
|
||||
`--reveal-ease` 에서, 마퀴·스트림 등 애니메이션 속도는 `tailwind.config.ts` 의
|
||||
`theme.extend.animation` 에서 조정합니다. `prefers-reduced-motion` 은 자동 존중됩니다.
|
||||
- **콘텐츠(Content):** 각 `app/<route>/page.tsx` 상단의 `// CUSTOMIZATION HOOK` 주석이
|
||||
표시된 데이터 배열(구성원, 논문, 강의, 표준 기여, 카운터 수치, 키워드 티커 등)을
|
||||
실제 정보로 교체하세요.
|
||||
- **공유 컴포넌트(Shared Components):** `Reveal`(등장 모션), `SectionLabel`(섹션 넘버링),
|
||||
`PageHeader`(페이지 마스트헤드), `Counter`(카운트업 수치), `Marquee`(키워드 티커)를
|
||||
재사용합니다. 각 컴포넌트의 용도와 props 는 `docs/DESIGN.md` 4절을 참고하세요.
|
||||
- **내비게이션/푸터:** `components/Header.tsx` 의 `navItems`, `components/Footer.tsx` 의
|
||||
주소·이메일 placeholder 를 수정합니다.
|
||||
|
||||
---
|
||||
|
||||
> 본 프로젝트는 참고용 프로토타입이며 실제 서비스 배포를 보장하지 않습니다.
|
||||
@@ -0,0 +1,364 @@
|
||||
# 코드 리뷰 — refer_landing_page ("Issue 01" 디자인 시스템 적용)
|
||||
|
||||
> 리뷰 대상: `main` 브랜치, `893dd91` (Initial commit) 이후의 working-tree 변경분
|
||||
> (`git status` 기준 12 modified + 9 untracked files, +1,092 / -262 lines, 5개 라우트 + 5개 신규 컴포넌트 + 디자인 문서 1건)
|
||||
> 검증 방법: `git diff` 정독, `npx tsc --noEmit` (clean), `npm run build` (clean, 8/8 정적 페이지), 디자인 정합성/HTML 유효성/접근성 정적 분석
|
||||
> 작성일: 2026-06-16 (1차) · **재검증: 2026-06-17 (2차)**
|
||||
|
||||
> ### ⚠️ 2차 재검증 노트 (2026-06-17)
|
||||
> 1차 리뷰(2026-06-16) **이후 코드가 일부 수정**되었습니다. 1차의 P0/P1 중 여러 건이 이미 working tree에 반영되어, 아래 본문의 일부 항목은 **stale(이미 해결)** 상태입니다. 2차 재검증 결과 상태를 갱신하고, 1차가 놓친 **신규 버그 1건(`display-sm` 클래스 미정의 — §3 신규 A)** 을 추가했습니다.
|
||||
>
|
||||
> | 항목 | 1차 상태 | 2차 현재 상태 |
|
||||
> |---|---|---|
|
||||
> | §3 #1 publications `<ol>`>`<div>`>`<li>` | 🟠 미해결 | ✅ **해결됨** (`as="li"` 적용, `publications/page.tsx:133`) |
|
||||
> | §4 P1 #4 Marquee `w-full max-w-full` | 미반영 | ✅ **해결됨** (`Marquee.tsx:22`) |
|
||||
> | §3 medium·P1 #3 HeroComposition 텍스트 겹침 | 🟡 미해결 | ✅ **해소됨** (주석을 상단 모서리 y=24로 이동) |
|
||||
> | §4 P0 #2 Next.js 14.2.5 보안 | 🟠 미해결 | 🟠 **여전히 미해결** — 잔존 P0 |
|
||||
> | **신규 A** `display-sm` 클래스 미정의 | — | 🔴 **신규 High (1차 누락)** |
|
||||
> | **신규 B** `Counter` rAF unmount 미취소 | — | 🟡 **신규 Medium (1차 누락)** |
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 (Overview)
|
||||
|
||||
이번 변경은 "한 권의 인쇄 매거지(Issue 01)" 컨셉의 **에디토리얼 디자인 시스템**을 처음부터 적용한 대규모 시각·구조 리뉴얼입니다. 단순한 클래스 리네임이 아니라 **레이아웃 언어·타이포그래피·모션·테마 토큰 전체**를 재설계했습니다.
|
||||
|
||||
핵심 변화:
|
||||
|
||||
- **테마 토큰 재설계**: `brand`(KNU 블루) / `accent` 단일 톤 → `ink` / `ivory` / `paper` / `line` + 두 개의 에디토리얼 강조색 `vermillion`(MCM) · `cobalt`(QUIC) 시스템으로 교체. `tailwind.config.ts` 와 `app/globals.css` `:root` 양쪽에 미러링되어 있어 토큰 일관성 보장.
|
||||
- **타이포그래피 교체**: 시스템 sans → Fraunces(영문 디스플레이 세리프) + Noto Serif KR(한글 세리프 헤드라인) + Inter(본문) 3-페어. `next/font`로 CSS 변수 주입.
|
||||
- **신규 모션·UI 프리미티브 4종**: `Reveal`(IntersectionObserver 기반 스크롤 등장), `Counter`(rAF 카운트업, `prefers-reduced-motion` 존중), `Marquee`(CSS 키프레임 러닝 티커), `SectionLabel`("01 / 05" 스프레드 넘버링).
|
||||
- **페이지 단위 전면 재구성**: 5개 라우트 모두 cover spread → figures → 메인 콘텐츠 → 보조 섹션의 잡지식 레이아웃으로 재작성. 카운터, 마키, 섹션 라벨이 페이지마다 다른 의미로 재사용됨.
|
||||
- **디자인 문서 정비**: `docs/DESIGN.md` 정본 보강, `docs/LAYOUT_AUDIT.md` 17개 이슈 카탈로그(이번 변경으로 일부 해결), `docs/TYPOGRAPHY_FIXES.md` 작업 노트 추가.
|
||||
- **문서**: `README.md`에 디자인 시스템 섹션·커스터마이징 훅 5종(색·폰트·모션·콘텐츠·공유 컴포넌트) 추가.
|
||||
|
||||
기술적으로 **빌드/lint/타입 체크 모두 통과**합니다 (`npm run build` → 8/8 정적 페이지 생성, 87.1 KB shared first-load JS, no warnings).
|
||||
|
||||
### 이전에 카탈로그화된 이슈 해결 현황
|
||||
|
||||
`docs/LAYOUT_AUDIT.md` 17개 이슈 중 이번 diff에서 **다수가 해결**되었습니다 (해결 항목 8, 잔존 5, 미해결 4, 검증 후 OK 3):
|
||||
|
||||
| # | 이슈 | 상태 |
|
||||
|---|------|------|
|
||||
| 1 | `border-current/*` opacity modifier → fixed gray | ✅ 해결 (`border-ink/20` 또는 `border-vermillion/30`로 교체) |
|
||||
| 2 | HeroComposition `transformOrigin` 박스 미스매치 | ✅ 해결 (인라인 `transformBox: "fill-box"` 추가) |
|
||||
| 3 | HeroComposition 우하단 텍스트와 4번 스트림 충돌 | ✅ 해결 (text `y` 356 → 334로 이동) |
|
||||
| 5 | Footer `mt-24` × `<main flex-1>` 이중 여백 | ✅ 해결 (`mt-0 lg:mt-8`) |
|
||||
| 6 | PageHeader `<h1>` 한국어 단어 분리 | ✅ 해결 (`break-keep` + `text-balance` 추가) |
|
||||
| 7 | "Standards" 9rem 캡 오버플로 | ✅ 해결 (`display` 캡 9rem → 7rem) |
|
||||
| 8 | Members 3그룹 2명 → 3-col ghost cell | ✅ 해결 (`lg:grid-cols-2`로 통일) |
|
||||
| 9 | `.reveal` no-JS 폴백 부재 | ✅ 해결 (`<noscript><style>` 추가) |
|
||||
| 10 | PageHeader `display` 미지정 시 `en` 풀사이즈 | ⚠️ **부분 무효** — `display ?? en` 분기는 맞으나 폴백이 의존하는 `display-sm` 클래스가 **미정의**라 의도된 3.75rem이 아닌 ~16px로 렌더됨. **신규 A 참조** |
|
||||
| 11 | Counter "2026" 0→2026 카운트업 | ⚠️ **부분 무효** — `static` prop은 정상이나 `display-sm` 스케일이 **미적용**(~16px). **신규 A 참조** |
|
||||
| 17 | `corner-label` 14px → 16px | ✅ 해결 (`text-sm` → `text-base`) |
|
||||
|
||||
---
|
||||
|
||||
## 2. 변경된 파일 (Files changed)
|
||||
|
||||
| 파일 | 변경 종류 | 설명 |
|
||||
|---|---|---|
|
||||
| `tailwind.config.ts` | modified | 컬러 토큰 전체 교체(ink/ivory/paper/line/vermillion/cobalt, brand는 back-compat 별칭), 폰트 패밀리 3종, `display`/`display-sm` 매거진 스케일, marquee/stream-dash/node-pulse 5종 keyframes·animation 추가. |
|
||||
| `app/globals.css` | modified | `:root` CSS 변수 미러, 종이 그레인 배경, `::selection` 강조, `.display`/`.headline-ko`/`.kicker`/`.corner-label`/`.pull-quote`/`.rule`/`.spread-card`/`.draw-underline` 에디토리얼 프리미티브, `.reveal` 4종 variant, `.marquee-track`, `prefers-reduced-motion` 폴백 추가. 기존 `.card`/`.section-title`/`.section-subtitle` 제거(어디서도 미사용). |
|
||||
| `app/layout.tsx` | modified | `next/font`로 3개 폰트 로드 + CSS 변수 주입, `<html className>`에 변수 부착, `<noscript>` 폴백. |
|
||||
| `components/Header.tsx` | modified | 데스크탑 nav에 01–05 섹션 번호 + 영문 라벨 + 활성 상태 애니언더라인, 모바일 햄버거 아이콘 6×6→5×5 + 테두리 토글, 이슈 스트립 ("Issue 01 — 2026"), sticky ivory 배경. |
|
||||
| `components/Footer.tsx` | modified | 3-col 단순 링크 → 5-col 잡지 콜로폰(colophon/contact/index), `<Marquee>` 콜로폰 티커, 라벨별 인덱스 01–05, `draw-underline` 호버 효과, 세리프 산세리프if credit. |
|
||||
| `components/PageHeader.tsx` | modified | 그라데이션 히어로 → ivory 잡지 마스트헤드, `<SectionLabel>`+`<Reveal>` 조합, 한국어 serif `headline-ko` + 영어 `display` 워드 + 우측 보더라인 데스크립션, `display` 폴백 안전장치. |
|
||||
| `app/intro/page.tsx` | modified | Cover spread(헤드라인 + HeroComposition SVG) + 카운터 행(연구 축/표준화 기구/Issue) + 미션 풀쿼트 + 두 추력 비교 카드(vermillion × cobalt 연결 라인) + Focus Areas 4-col 그리드. `thrusts` 데이터에 `no`/`tag`/`accent` 필드 추가, 키워드/figures 데이터 추가. |
|
||||
| `app/members/page.tsx` | modified | 카운터 3종(지도교수/대학원/학부) + advisor 7+5 콜룸 + research groups 3그룹(vermillion/cobalt/ink 액센트). 3번째 그룹(학부) 2명 → `sm:grid-cols-2`로 통일. |
|
||||
| `app/publications/page.tsx` | modified | Venue `<Marquee>` + 카운터 3종(전체/저널/학회) + 잡지식 출판물 리스트(번호·연도·타입 좌측 rail + 제목·저자·venue 우측 본문), `Journal` → vermillion, `Conference` → cobalt. |
|
||||
| `app/standardization/page.tsx` | modified | Org `<Marquee>` + 카운터 3종(표준화 기구/기여 항목/기술 영역) + 4개 표준화 기구 카드(oneM2M/W3C WoT/IETF QUIC/OMA LwM2M), 기구별 accent(vermillion/cobalt 교차) + 적응형 보더. |
|
||||
| `app/lectures/page.tsx` | modified | 강의 3종을 3-col 카운터-스타일 카드로 재구성, 강의별 accent(vermillion/cobalt/ink), 우상단 01–03 spread 번호, 호버 시 accent 배경 + ivory 텍스트. |
|
||||
| `README.md` | modified | 디자인 시스템 섹션, 컴포넌트 트리 보강(SectionLabel/Reveal/Counter/Marquee 추가), 커스터마이징 훅 5종(색·폰트·모션·콘텐츠·공유 컴포넌트) 상세화. |
|
||||
| **신규** `components/Reveal.tsx` | added (60 lines) | `IntersectionObserver` 기반 스크롤 등장, `variant: up|left|right|scale`, `delay` ms, `as` prop으로 태그 오버라이드 가능. cleanup에서 `io.disconnect()`. |
|
||||
| **신규** `components/Counter.tsx` | added (78 lines) | rAF 카운트업 (`easeOutExpo`), `prefers-reduced-motion` 존중 시 즉시 렌더, `static` prop으로 years/고정값 처리. |
|
||||
| **신규** `components/Marquee.tsx` | added (41 lines) | 콘텐츠를 2번 복제해 `-50%` 트랜슬레이트 루프, `reverse` prop으로 방향 반전, ✦ 세퍼레이터. |
|
||||
| **신규** `components/SectionLabel.tsx` | added (28 lines) | "01 / 05" 스프레드 넘버 + hairline + kicker. |
|
||||
| **신규** `app/intro/_components/HeroComposition.tsx` | added (116 lines) | 인라인 SVG 에디토리얼 일러스트, MCM 노드 메시(vermillion) + QUIC 멀티스트림(cobalt), `node-pulse`·`stream-dash` CSS 애니메이션. |
|
||||
| **신규** `docs/DESIGN.md` (17,872 B) | added | 디자인 시스템 정본(토큰·타이포·모션·컴포넌트 4종). |
|
||||
| **신규** `docs/LAYOUT_AUDIT.md` (22,936 B) | added | 17개 이슈 카탈로그(이번 리뷰 시점 기준 11개 해결). |
|
||||
| **신규** `docs/TYPOGRAPHY_FIXES.md` (4,322 B) | added | 타이포그래피 작업 노트. |
|
||||
| **신규** `.antigravity-session.md`, `.kanban-*.md` (4 files) | added | Antigravity CLI 세션 / 카반 작업 산출물 (리뷰 대상 아님, 무시). |
|
||||
| **신규** `package-lock.json` | added | 의존성 잠금 파일 (기존 `package.json`은 변경 없음 — dev install로 추정, 커밋 대상 검토 필요, §3 참조). |
|
||||
|
||||
---
|
||||
|
||||
## 3. 발견된 이슈 (Issues)
|
||||
|
||||
### 🔴 신규 A (High) — `display-sm` 클래스가 정의되어 있지 않아 매거진 디스플레이 텍스트가 ~16px로 축소 렌더 *(1차 누락)*
|
||||
|
||||
**위치:** `components/PageHeader.tsx:43`, `app/intro/page.tsx:53` (+ `Counter` 경유)
|
||||
|
||||
`display-sm`은 `tailwind.config.ts:77`에서 **`fontSize` 키**로 정의되어 있습니다. Tailwind의 `fontSize` 키는 `text-<key>` 유틸리티만 생성하므로 실제로 만들어지는 클래스는 `text-display-sm`이고, **맨(bare) `display-sm` 클래스는 생성되지 않습니다.** 한편 `app/globals.css`에는 `.display` 컴포넌트 클래스만 있고 `.display-sm` 컴포넌트 클래스는 없습니다.
|
||||
|
||||
검증 (컴파일된 CSS 기준):
|
||||
|
||||
```bash
|
||||
$ grep -o "display-sm" .next/static/css/app/layout.css | wc -l
|
||||
0 # ← display-sm 규칙이 전혀 없음
|
||||
$ grep -o "\.display" .next/static/css/app/layout.css | wc -l
|
||||
1 # ← .display(컴포넌트 클래스)는 존재
|
||||
```
|
||||
|
||||
따라서 `className="display-sm ..."`은 **아무 폰트 크기도 적용하지 않는 no-op 클래스**이고, 해당 텍스트는 브라우저 기본 크기(~16px)로 렌더됩니다.
|
||||
|
||||
**영향:**
|
||||
|
||||
- `PageHeader`에 `display` prop을 넘기지 않으면 fallback `en` 단어가 `display-sm`으로 렌더됩니다. **현재 `PageHeader`를 사용하는 4개 페이지(members/publications/lectures/standardization) 모두 `display`를 넘기지 않으므로**, "Members" · "Publications" · "Lectures" · "Standardization" 영문 디스플레이 단어가 의도된 `clamp(2rem, 5.5vw, 3.75rem)`이 아니라 **~16px 작은 vermillion 세리프**로 표시됩니다 — 마스트헤드의 큰 영문 단어가 사실상 사라집니다.
|
||||
- `app/intro/page.tsx:53`의 연도 "2026" 피겨는 `size: "display-sm"`이라 `Counter`가 `display-sm`으로 렌더 → **~16px**. 같은 행의 "2" · "4"는 `display`(최대 7rem)라 **극단적인 크기 불일치**로 피겨 행이 깨져 보입니다.
|
||||
- 이 버그는 본 문서 §1 LAYOUT_AUDIT 표의 #10/#11(및 #6/#7 일부) "해결" 주장을 **무효화**합니다.
|
||||
|
||||
**왜 1차에서 못 잡았나 / build가 clean한 이유:** Tailwind/PostCSS는 **미정의 유틸리티 클래스를 에러 없이 조용히 무시**합니다. 따라서 `npx tsc --noEmit`도 `npm run build`도 통과하며, "build clean"이 **시각적 정합성을 보장하지 않습니다.**
|
||||
|
||||
**권장 수정 (택1):**
|
||||
|
||||
```css
|
||||
/* (A안, 권장) app/globals.css 컴포넌트 레이어에 .display-sm 추가 */
|
||||
.display-sm { @apply font-display text-display-sm font-light; }
|
||||
/* → 추가 시 PageHeader의 중복 `font-display font-light`는 제거 가능 */
|
||||
```
|
||||
|
||||
또는 사용처를 `display-sm` → `text-display-sm`으로 바꾸되, 폰트 패밀리/굵기 클래스(`font-display font-light`)를 함께 명시 (Counter 사용처는 현재 폰트 클래스가 없으므로 누락 주의).
|
||||
|
||||
### 🟡 신규 B (Medium) — `Counter`의 `requestAnimationFrame` 루프가 unmount 시 취소되지 않음 *(1차 누락)*
|
||||
|
||||
**위치:** `components/Counter.tsx:52-69`
|
||||
|
||||
```tsx
|
||||
const io = new IntersectionObserver(([entry]) => {
|
||||
...
|
||||
let raf = 0;
|
||||
const tick = (now) => { ...; if (t < 1) raf = requestAnimationFrame(tick); };
|
||||
raf = requestAnimationFrame(tick);
|
||||
return () => cancelAnimationFrame(raf); // ← IO 콜백의 반환값 → 아무 데도 안 쓰임
|
||||
}, { threshold: 0.4 });
|
||||
io.observe(el);
|
||||
return () => io.disconnect(); // ← useEffect cleanup: 옵저버만 끊고 rAF는 안 멈춤
|
||||
```
|
||||
|
||||
`return () => cancelAnimationFrame(raf)`는 **IntersectionObserver 콜백의 반환값**이라 호출되지 않습니다. `useEffect`의 cleanup은 `io.disconnect()`만 수행하므로, **진행 중인 rAF 카운트업 루프는 중단되지 않습니다.** 카운트업 도중 컴포넌트가 언마운트되면(예: 빠른 라우트 전환) rAF가 언마운트된 컴포넌트에 `setDisplay`를 계속 호출합니다. React 18은 이 setState를 경고 없이 no-op 처리하므로 **실 피해는 경미(낭비 프레임 수 개)**하지만, 명백한 누수입니다.
|
||||
|
||||
**권장:** `raf` 변수를 `useEffect` 스코프로 끌어올려 cleanup에서 `cancelAnimationFrame(raf)`을 호출. 또는 `isStatic`/완료 플래그로 보호.
|
||||
|
||||
---
|
||||
|
||||
### ✅ ~~🟠 High — 잘못된 HTML 구조: `<div>`가 `<ol>`/`<ul>` 안에서 `<li>`를 감쌈~~ — **[2026-06-17 해결됨]**
|
||||
|
||||
> **2차 재검증:** 현재 코드는 `app/publications/page.tsx:133`에서 `<Reveal as="li" ...>`로 렌더되며 주석에 본 항목(`REVIEW.md §3 #1`)을 인용해 둠. `<ol>`의 직접 자식 계약(`<li>`만 허용)을 준수하므로 **해결**. 아래 설명은 이력 보존용.
|
||||
|
||||
**위치:** `app/publications/page.tsx:131-160`
|
||||
|
||||
```tsx
|
||||
<ol className="mt-12 border-t border-ink">
|
||||
{publications.map((p, i) => (
|
||||
<Reveal key={p.title} delay={(i % 3) * 80}> {/* default as="div" */}
|
||||
<li className="group grid gap-6 border-b border-ink py-8 ...">
|
||||
...
|
||||
</li>
|
||||
</Reveal>
|
||||
))}
|
||||
</ol>
|
||||
```
|
||||
|
||||
`Reveal`은 기본 `as: "div"`로 렌더링됩니다. 결과 DOM은 `<ol><div class="reveal"><li>...</li></div></ol>`이 되어 HTML 명세 위반입니다([spec](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element): `<ol>`의 자식은 0개 이상의 `<li>`/`<script>`/`<template>`만 허용). React는 콘솔 경고를 띄우지 않지만, 자동복구로 DOM이 재정렬될 수 있고(`<li>`가 `<ol>` 밖으로 이동), `<ol>`의 `start`/`type` 카운터 의미가 깨질 수 있습니다.
|
||||
|
||||
나머지 페이지(lectures/standardization/members/intro)는 모두 `<Reveal>` 안에서 `<article>`을 감싸므로 안전합니다. 오직 publications만 `<li>`를 직접 감쌉니다.
|
||||
|
||||
**권장 수정:**
|
||||
|
||||
```tsx
|
||||
<Reveal as="li" key={p.title} delay={(i % 3) * 80}
|
||||
className="group grid gap-6 border-b border-ink py-8 ...">
|
||||
...
|
||||
</Reveal>
|
||||
```
|
||||
|
||||
### 🟠 High — `npm audit` 1 critical + 6 high 보안 권고 미반영
|
||||
|
||||
**위치:** `package.json` / `package-lock.json` (Next.js `14.2.5`)
|
||||
|
||||
`.kanban-final-report.md` §2에 따르면 의존성에 8개 권고(1 critical, 6 high, 1 moderate)가 있습니다. 핵심은 `next@14.2.5` → `14.2.35` 패치 한 줄로 21개가 해결됩니다(서버 컴포넌트 DoS, 캐시 포이즈닝, 미들웨어 SSRF, PostCSS XSS 등). 호환성: 같은 14.x 라인, React 18 락도 그대로.
|
||||
|
||||
**권장 수정:**
|
||||
|
||||
```bash
|
||||
npm install next@14.2.35
|
||||
npm audit
|
||||
```
|
||||
|
||||
### 🟡 Medium — `package-lock.json`이 untracked 상태로 추가됨
|
||||
|
||||
**위치:** working tree 루트
|
||||
|
||||
`package.json`은 diff에 없는데 `package-lock.json`이 untracked로 들어왔습니다. 이전 커밋(`893dd91`)에도 lockfile이 없었다면 이번에 처음 도입된 것인데, 그 경우:
|
||||
|
||||
- **의도된 커밋**이면 그대로 두고, 향후 `package.json` 변경 시 함께 업데이트되는지 CI 또는 가이드로 명시.
|
||||
- **무심코 추가된 것**이면(예: 로컬 `npm install` 부산물) `.gitignore`로 옮기는 것을 권장. 단, 215 KB인 lockfile을 추적하면 재현 가능한 빌드가 보장되므로 보통은 추적하는 편이 낫습니다.
|
||||
|
||||
**권장 결정:** lockfile 추적 유지(재현 가능한 빌드의 정석). 단, 의도가 불분명하면 `git log --diff-filter=A -- package-lock.json`으로 첫 등장 시점 확인.
|
||||
|
||||
### 🟡 Medium — `Reveal`의 IntersectionObserver cleanup 시점: `disconnect`이 unmount 시점에만 실행
|
||||
|
||||
**위치:** `components/Reveal.tsx:47`
|
||||
|
||||
```tsx
|
||||
useEffect(() => {
|
||||
...
|
||||
io.observe(el);
|
||||
return () => io.disconnect();
|
||||
}, []);
|
||||
```
|
||||
|
||||
`unobserve`가 첫 intersection 시점에 호출되어(entry isIntersecting → unobserve, line 39) 이후 콜백이 다시 안 불리지만, dependency array가 `[]`라서 `variant`/`delay` prop이 바뀌어도 옵저버가 재생성되지 않습니다. 현재 `variant`는 CSS attribute로 적용되므로 prop 변경이 옵저버 동작에는 영향이 없어 실 문제는 없지만, **마운트 이후 prop만 바뀌는 경우 stale observer**가 됩니다(미세).
|
||||
|
||||
**권장:** `useEffect` deps에 `[variant, delay]`를 추가하거나, `entry.target`의 `data-variant` 속성을 read해서 비교. 다만 현재 사용 패턴(컴포넌트가 한 번 마운트되면 prop이 안 바뀌는 정적 리스트)에서는 영향 없음 — **minor**.
|
||||
|
||||
### 🟡 Medium — `Reveal as` prop 시그니처가 런타임 안전성을 보장하지 않음
|
||||
|
||||
**위치:** `components/Reveal.tsx:19`, `26`
|
||||
|
||||
`as?: ElementType`이라 `<Reveal as="ol">`처럼 잘못된 부모(예: `ol` 안의 `ol` 금지)나, `<Reveal as="li">`를 잊고 wrapper를 list 안에 넣는 사용을 막을 수 없습니다. #1의 문제가 발생한 이유도 이 가드 부재입니다. 호출 컨벤션으로 잡혀 있지만(모든 페이지가 `<Reveal>` 안에 article/div를 둠), 실수 방지 차원에서 **사용 시 `li`/`ol`/`ul` 컨텍스트일 땐 `as`를 강제하는 lint 룰(예: eslint-plugin-jsx-a11y custom rule) 또는 README에 "list 내부에서 쓸 땐 `as=\"li\"`" 규칙**을 명시하면 좋겠습니다.
|
||||
|
||||
### 🟡 Medium — `Marquee`의 트랙이 `flex` + 콘텐츠가 `inline-flex`인데, width가 콘텐츠에 맞춰져 viewBox/parent overflow 계산이 viewport에 의존
|
||||
|
||||
**위치:** `components/Marquee.tsx:22-38`
|
||||
|
||||
`<div className="marquee-track">` 안의 시퀀스가 `[0, 1].map(dup)`로 2번 복제됩니다. CSS는 `translateX(0 → -50%)`로 50% 이동 후 같은 위치로 와서 seamless loop. **하지만 `marquee-track`이 `inline-flex`이고 콘텐츠가 `flex`인 점이 데스크탑에서만 동작**합니다 — 부모에 `overflow-hidden`은 있으니 화면이 줄어들면 콘텐츠가 부모 너비에 의해 클립되지만, **부모 width가 명시되지 않은 경우(예: `<Reveal>`의 wrapper)** `inline-flex`는 콘텐츠 폭만큼 자라서 페이지를 가로로 스크롤 가능하게 만들 수 있습니다. 현재는 모두 `container-content` 안에 있어 안전하지만, 다른 곳에서 단독 사용 시 가로 스크롤이 생길 수 있습니다.
|
||||
|
||||
**권장:** `Marquee` 최상위에 `max-w-full` 또는 `w-full`을 추가하고, 부모 wrapper에서도 가로 클립이 보장되는지 명시.
|
||||
|
||||
### ✅ ~~🟡 Medium — HeroComposition 4번 스트림이 우측 모서리 가까이 통과, 우하단 텍스트와의 간격이 6–10px~~ — **[2026-06-17 해소됨]**
|
||||
|
||||
> **2차 재검증:** 현재 코드는 주석(annotation) 텍스트를 **상단 두 모서리(y=24)** 로 이동했습니다(`HeroComposition.tsx:104,107`). 스트림(y≥250)·노드 메시(y=60~240)와 수직으로 분리되어 겹침이 구조적으로 제거되었습니다. 1차의 `y=334` 우하단 배치 가정은 더 이상 유효하지 않습니다. 아래 설명은 이력 보존용.
|
||||
|
||||
**위치:** `app/intro/_components/HeroComposition.tsx:99-113`
|
||||
|
||||
LAYOUT_AUDIT #3은 `y=356 → 334`로 이동하여 해결되었지만, 스트림 곡선의 마지막 control point는 `360, 320` (i=3) 입니다. 텍스트 baseline은 `y=334`이고 폰트 size 11 + letterSpacing 2이므로 텍스트 상단 ~y=323, 하단 ~y=336. 텍스트의 우측 끝(`x=360, textAnchor="end"`)은 x=360에 anchor되므로 가로 폭이 좁지는 않지만, **스트림 4번은 x=240~360 / y=300~340 대역**을 지나가며 텍스트의 시작점(좌측)에 근접합니다. 텍스트 내용("QUIC · STREAMS")이 ~100px 폭이라면 우측 x≈260~360에 그려지는데, 4번 스트림의 끝점 (360, 320)이 텍스트의 (260, 334) 근처를 지나갑니다.
|
||||
|
||||
해결된 것으로 보이지만 실제로는 텍스트가 스트림 곡선과 **여전히 시각적으로 겹칠 수 있는** 좁은 마진입니다. `y=320` 정도 또는 `y=348` 정도로 더 멀리 두는 편이 안전합니다.
|
||||
|
||||
### 🟡 Medium — `text-balance` + `break-keep`이 한국어에 대해 100% 안정적이지 않음
|
||||
|
||||
**위치:** `components/PageHeader.tsx:32`
|
||||
|
||||
```tsx
|
||||
<h1 className="headline-ko break-keep text-balance text-3xl leading-[1.05] text-ink sm:text-4xl lg:text-5xl">
|
||||
```
|
||||
|
||||
- `text-balance` (CSS `text-wrap: balance`)는 2024년 기준 Chrome 114+ / Safari 17.5+ / Firefox 121+에서 지원. **지원하지 않는 브라우저에서는 무시되며 fallback 없음** — 큰 문제 아님.
|
||||
- `break-keep` (`word-break: keep-all`)은 한국어/일본어/중국어 텍스트에서 단어 경계로 줄바꿈을 강제. 한국어는 공백이 거의 없어서 효과가 제한적입니다. `"멀티에이전트 오케스트레이션"` 같이 공백이 있는 제목은 효과가 있고, `"사물인터넷표준연구실"` 같이 공백이 없는 경우 여전히 글자 단위로 깨질 수 있습니다.
|
||||
|
||||
**권장:** 한 줄이 너무 길어질 가능성이 있는 한국어 헤드라인은 강제로 `<br />`을 박거나 `whitespace-pre-line` + 줄바꿈 문자(`\n`)를 사용.
|
||||
|
||||
### 🟡 Medium — `Reveal`로 감싼 `<div>`/`<article>` 안에 있는 `<a>` 링크가 reveal 애니메이션과 충돌할 가능성
|
||||
|
||||
`Reveal`은 `opacity: 0` → 1로 페이드 인하는데, `prefers-reduced-motion`이 설정되지 않은 환경에서 사용자가 링크를 빠르게 따라가려 할 때(약 0.8s transition + delay) **클릭 타깃이 시각적으로 보이지만 실제 클릭 가능 시점이 늦어지는** 사각지대가 생깁니다. IntersectionObserver의 `threshold: 0.12`는 12%가 뷰포트에 들어와야 트리거되므로 화면 상단에서 스크롤 시 약 100ms 정도만 보입니다.
|
||||
|
||||
**권장:** `prefers-reduced-motion` 사용자에게만 즉시 표시 + 일반 사용자에게는 0.4s로 duration 단축 검토(현재 820ms는 약간 길음). 또는 threshold를 더 낮춰 0.05 정도로.
|
||||
|
||||
### 🟢 Low — `key={p.title}`가 title 충돌 시 깨짐
|
||||
|
||||
**위치:** `app/publications/page.tsx:131`, `app/standardization/page.tsx` 등
|
||||
|
||||
publication title이 unique하지 않은 경우(같은 제목이 여러 venue에 출판될 수 있음) React key 충돌이 일어납니다. 현재 데이터는 unique이지만, 향후 같은 title이 들어오면 오류. `key={\`${p.title}-${p.year}-${p.venue}\`}` 등 composite key가 더 안전.
|
||||
|
||||
### 🟢 Low — `accent` 식별자가 색상 이름과 충돌
|
||||
|
||||
**위치:** `app/lectures/page.tsx:18,26,34`, `app/members/page.tsx:25,34,44`, `app/standardization/page.tsx:20,30,40,50`
|
||||
|
||||
각 페이지가 data field 이름으로 `accent`를 쓰고(`accent: "vermillion" as const`), `accentText`/`accentDot` 맵의 key로도 씁니다. 가독성은 양호하지만 `accent`는 Tailwind 유틸리티 클래스 이름과 충돌할 수 있고, 추후 CSS `accent-color` 속성과 헷갈릴 여지가 있습니다. 의미상 `theme` 또는 `tint`가 더 명확합니다.
|
||||
|
||||
### 🟢 Low — `<Reveal>`의 SSR/CSR hydration mismatch 가능성 (이론적)
|
||||
|
||||
`Reveal`은 `"use client"`이고 첫 렌더에서 `is-visible` 클래스를 아직 안 가진 상태로 마운트됩니다. HTML은 SSR 시에도 `.reveal` + `data-variant` + `opacity: 0`이 적용되어 전송되고, JS hydrate 후 IntersectionObserver가 `is-visible`을 토글합니다. **서버에서는 항상 `opacity: 0` → 클라이언트에서는 항상 `opacity: 0`이라 hydration mismatch는 없음**. 다만 **no-JS 환경**에서는 noscript 폴백(`<noscript><style>.reveal { opacity: 1 !important; ... }</style></noscript>`)이 의도대로 동작하므로 해결됨. ✅
|
||||
|
||||
### 🟢 Low — `Header` 모바일 메뉴의 z-index와 `<Marquee>` band의 sticky 충돌 가능성
|
||||
|
||||
`Header`는 `sticky top-0 z-50`. `<Marquee>`는 absolute/sticky 없이 일반 flow. 모바일에서 햄버거 메뉴가 열렸을 때(`<nav id="mobile-menu">` 펼쳐진 상태) `<Marquee>`가 위에 있으면 클릭이 가려질 수 있으나, `<Marquee>`는 `aria-hidden`이라 인터랙션 요소는 아닙니다. **실 문제 아님**.
|
||||
|
||||
### 🟢 Low — `app/intro/page.tsx:90-105`에 중첩된 `<Reveal>` 4연타
|
||||
|
||||
```tsx
|
||||
<Reveal delay={60}>...</Reveal>
|
||||
<Reveal delay={120}>...</Reveal>
|
||||
<Reveal delay={200}>...</Reveal>
|
||||
<Reveal delay={260}>...</Reveal>
|
||||
```
|
||||
|
||||
같은 부모 영역에 4개 sibling Reveal이 60ms 간격으로 등장. `Reveal` 각각이 별도 IntersectionObserver 인스턴스를 생성하므로 **브라우저 메모리에 observer 4개가 동시** 만들어집니다(가벼우나 관용적이지 않음). 같은 영역이면 하나의 Reveal로 묶고 내부 stagger를 CSS `transition-delay`로 처리하는 편이 깔끔합니다.
|
||||
|
||||
### 🟢 Low — 접근성: `Marquee`에 `prefers-reduced-motion` 폴백은 있으나 키보드/SR 사용자용 일시정지 토글 없음
|
||||
|
||||
`prefers-reduced-motion` 환경에서는 `.marquee-track { animation: none }`이 적용되어 멈춥니다. 그러나 키보드 사용자나 스크린리더 사용자에게 명시적인 정지 토글은 없습니다. `aria-hidden`이라 SR은 무시하므로 큰 문제는 아니나, 인지적으로 천천히 움직이는 콘텐츠가 본문 읽기를 방해할 수 있습니다(학습장애 사용자 등). WCAG 2.2.2 (Pause, Stop, Hide) 권고. 현재 컨텐츠는 "decorative ticker"로 분류 가능하므로 **선택적 개선사항**.
|
||||
|
||||
### 🟢 Low — `HeroComposition` SVG의 `aria-label`이 한글/영문 혼합
|
||||
|
||||
`aria-label="MCM 상호운용 노드와 QUIC 멀티스트림을 형상화한 추상 일러스트레이션"` — 영문+한글 혼합. SR 호환성을 고려하면 영문만 또는 한/영 둘 다 `<title>` + `<desc>`로 분리하는 게 표준. 현재 SR 환경에서 한글이 잘 읽히므로 **minor**.
|
||||
|
||||
---
|
||||
|
||||
## 4. 개선 제안 (Concrete Suggestions)
|
||||
|
||||
> **2차 갱신:** 1차 P0 #1과 P1 #3/#4는 이미 해결되어 목록에서 제거(취소선)했고, **신규 A(`display-sm` 미정의)** 를 P0로 승격했습니다.
|
||||
|
||||
### P0 (반드시 머지 전 처리)
|
||||
|
||||
1. **신규 A — `display-sm` 클래스 정의** — `app/globals.css`에 `.display-sm { @apply font-display text-display-sm font-light; }` 추가. 미적용 시 4개 PageHeader 페이지의 영문 디스플레이 단어와 intro "2026" 피겨가 ~16px로 깨짐. **§3 신규 A 참조.** 1분 작업.
|
||||
2. **`#2` npm audit 해결** — `npm install next@14.2.35` 후 `npm audit` clean 확인. `package.json`은 여전히 `14.2.5` (미반영). 1분 작업.
|
||||
3. ~~**`#1` HTML invalidity 수정**~~ — ✅ **이미 해결됨** (`publications/page.tsx:133` `<Reveal as="li">`).
|
||||
|
||||
### P1 (다음 PR에서)
|
||||
|
||||
4. ~~**HeroComposition 우하단 텍스트 마진**~~ — ✅ **해소됨** (주석을 상단 y=24로 이동).
|
||||
5. ~~**Marquee `w-full max-w-full` 명시**~~ — ✅ **이미 적용됨** (`Marquee.tsx:22`).
|
||||
6. **신규 B — `Counter` rAF cleanup** — `raf`를 useEffect 스코프로 올려 cleanup에서 `cancelAnimationFrame`. **§3 신규 B 참조.** 5분 작업.
|
||||
7. **`Reveal` 내부 stagger를 `transition-delay`로 통합** — intro 페이지 4연타는 단일 wrapper로 묶고 자식은 `style={{ transitionDelay: ... }}`로 처리. (미해결, minor) 10분 작업.
|
||||
8. **`Reveal`의 `transition-duration`을 820ms → 600ms로 단축** — 모션 선호 off 환경에서 페이지 응답성 개선. (`globals.css:20` 아직 820ms) 1분 작업.
|
||||
|
||||
### P2 (정리)
|
||||
|
||||
7. **README에 "List 안에서 `<Reveal>` 사용 시 `as=\"li\"` 필수" 규칙 추가** — `docs/DESIGN.md` 4절 보강.
|
||||
8. **데이터 필드명 `accent` → `tint` 리네임** — lecture/member/standardization 페이지 3곳 + intro. 15분 작업.
|
||||
9. **`publications` 키를 composite으로** — `key={\`${p.title}-${p.year}\`}`. 1분 작업.
|
||||
10. **package.json에 `"engines": { "node": ">=20" }` 명시** — Node 22 환경 명시. 1분.
|
||||
11. **마키에 명시적 정지 토글** (선택) — `prefers-reduced-motion` 외에 키보드/터치 사용자가 토글 가능하도록 `<button aria-label="티커 일시정지">` 추가. 30분 작업.
|
||||
12. **`Counter`에 `aria-live="polite"` 추가** — 카운트업이 끝났을 때 SR이 "전체 논문 4건" 식으로 알려줄 수 있음. 5분 작업.
|
||||
|
||||
---
|
||||
|
||||
## 5. 결론 (Verdict) — **2026-06-17 재검증 기준**
|
||||
|
||||
### **Needs changes (잔존 P0 2건 머지 전 처리 필요)**
|
||||
|
||||
매우 잘 정리된 변경입니다. 1차 리뷰 이후 코드가 갱신되어 **1차 P0 #1(publications HTML)·P1 #3(HeroComposition)·P1 #4(Marquee) 3건이 이미 해결**되었습니다. 다만 2차 재검증에서 **1차가 놓친 시각 버그 1건**을 발견했고, 1차의 보안 권고는 아직 미반영입니다.
|
||||
|
||||
**머지 전 반드시 처리할 2건 (P0):**
|
||||
|
||||
1. **`display-sm` 클래스 미정의** (`globals.css`에 `.display-sm` 추가) — 4개 PageHeader 페이지의 영문 디스플레이 단어와 intro "2026" 피겨가 의도된 ~3.75rem이 아니라 ~16px로 렌더되어 마스트헤드/피겨 행이 깨짐. **build/tsc가 잡지 못하는 조용한 버그.** §3 신규 A.
|
||||
2. **Next.js 14.2.5 보안 권고 1 critical + 6 high** — 동일 라인 14.2.35로 한 줄 업그레이드로 해결. (아직 `package.json` 미반영)
|
||||
|
||||
이 두 건을 처리하면 **LGTM**입니다. 그 후 P1(신규 B Counter cleanup, Reveal stagger/duration)은 다음 PR에서 정리하면 됩니다.
|
||||
|
||||
### 핵심 강점 (정리)
|
||||
|
||||
- **토큰 일관성**: `tailwind.config.ts` ↔ `app/globals.css` `:root` 양쪽 미러, `tailwind.config.ts` 한 줄 변경이 사이트 전체에 전파.
|
||||
- **모션 일관성**: 4개 페이지에서 같은 카운터/마키/리빌이 다른 의미로 재사용되어 통일된 리듬.
|
||||
- **접근성 기본기**: `aria-hidden` (Marquee), `aria-expanded` (Header), `aria-label` (HeroComposition SVG), `noscript` 폴백, `prefers-reduced-motion` 존중.
|
||||
- **타입 안전성**: 모든 prop이 optional/required 명시, `as const` 리터럴 타입으로 액센트 매핑, TypeScript 5.9 / strict 모드 clean.
|
||||
- **문서화**: `docs/DESIGN.md`(정본), `docs/LAYOUT_AUDIT.md`(자체 점검), `docs/TYPOGRAPHY_FIXES.md`(작업 노트) 3종이 변경을 추적 가능하게 만듦.
|
||||
|
||||
### 결론 요약
|
||||
|
||||
| 항목 | 평가 |
|
||||
|---|---|
|
||||
| 빌드/타입/lint | ✅ Clean (단, 미정의 클래스 `display-sm`는 빌드가 못 잡음 — §3 A) |
|
||||
| 디자인 일관성 | ⚠️ 5개 라우트 잡지 미학은 일관되나, `display-sm` 미정의로 영문 마스트헤드/연도 피겨가 실제로는 깨짐 |
|
||||
| 모션/타이포/테마 | ✅ 토큰 시스템 작동 (타이포 한 군데 `display-sm` 누락 제외) |
|
||||
| 1차 이슈 해결 (2차 확인) | ✅ P0 #1·P1 #3·P1 #4 추가 해결됨 |
|
||||
| 신규 발견 이슈 (2차) | 🔴 1건(`display-sm` 미정의, High), 🟡 1건(Counter rAF cleanup) |
|
||||
| 잔존 P0 | 🟠 2건 — (a) `display-sm` 정의, (b) Next.js 14.2.35 업그레이드 |
|
||||
| 머지 가능 여부 | **잔존 P0 2건 처리 후 가능** |
|
||||
|
||||
---
|
||||
|
||||
*리뷰어 메모: 변경량 대비 코드 품질이 매우 높습니다. 특히 LAYOUT_AUDIT에 카탈로그된 이슈 중 핵심 8건을 한 번에 해결한 점, 그리고 `<noscript>` 폴백을 layout 단계에 추가한 점은 마이너 변경에서 놓치기 쉬운 디테일을 잘 챙긴 흔적입니다. 위 2건(P0)만 정리되면 본 변경은 그대로 main에 머지해도 좋을 수준입니다.*
|
||||
@@ -0,0 +1,158 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ==================================================================
|
||||
EDITORIAL DESIGN SYSTEM — global tokens & type
|
||||
CUSTOMIZATION HOOK: design tokens are mirrored from tailwind.config.ts
|
||||
as CSS variables so plain CSS (grain, gradients) can reuse them.
|
||||
================================================================== */
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #0a0a0a;
|
||||
--ivory: #f5f1e8;
|
||||
--paper: #ece6d6;
|
||||
--line: #d8d1c0;
|
||||
--vermillion: #d9342b;
|
||||
--cobalt: #1b3a8a;
|
||||
|
||||
/* CUSTOMIZATION HOOK — MOTION: global reveal timing */
|
||||
--reveal-duration: 600ms;
|
||||
--reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-ivory text-ink font-sans antialiased;
|
||||
/* Subtle paper grain — pure CSS, no asset. */
|
||||
background-image: radial-gradient(
|
||||
rgba(10, 10, 10, 0.022) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 4px 4px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--vermillion);
|
||||
color: var(--ivory);
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
COMPONENT LAYER — editorial primitives
|
||||
================================================================== */
|
||||
@layer components {
|
||||
.container-content {
|
||||
@apply mx-auto w-full max-w-content px-5 sm:px-8 lg:px-12;
|
||||
}
|
||||
|
||||
/* Massive magazine display title (English serif). */
|
||||
.display {
|
||||
@apply font-display text-display font-light;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
/* Smaller display title — used for long fallback words (PageHeader `en`)
|
||||
and figures that should not read at the full cover scale (e.g. the
|
||||
"2026" issue year on /intro). Mirrors `.display` at the `display-sm`
|
||||
type ramp. See LAYOUT_AUDIT #6 + #10. */
|
||||
.display-sm {
|
||||
@apply font-display text-display-sm font-light;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
/* Korean serif headline. */
|
||||
.headline-ko {
|
||||
@apply font-serif-ko font-semibold tracking-tight;
|
||||
}
|
||||
|
||||
/* Small-caps kicker / eyebrow with wide tracking. */
|
||||
.kicker {
|
||||
@apply font-sans text-[0.7rem] font-semibold uppercase tracking-caps text-ink-mute;
|
||||
}
|
||||
|
||||
/* Corner "01 / 05" spread numbering.
|
||||
Bumped from text-sm (14px) to text-base (16px) so the editorial
|
||||
spread number reads as "page number", not body copy.
|
||||
See LAYOUT_AUDIT #17. */
|
||||
.corner-label {
|
||||
@apply font-display text-base font-medium tabular-nums tracking-wide text-ink-mute;
|
||||
}
|
||||
|
||||
/* Huge italic serif pull-quote. */
|
||||
.pull-quote {
|
||||
@apply font-display text-3xl font-light italic leading-tight sm:text-4xl lg:text-5xl;
|
||||
}
|
||||
|
||||
/* Hairline editorial rule. */
|
||||
.rule {
|
||||
@apply border-t border-ink/80;
|
||||
}
|
||||
|
||||
/* Magazine inset card on dimmer paper. */
|
||||
.spread-card {
|
||||
@apply border border-ink/15 bg-paper transition duration-500;
|
||||
}
|
||||
|
||||
/* Animated underline-draw on hover (for links). */
|
||||
.draw-underline {
|
||||
background-image: linear-gradient(var(--vermillion), var(--vermillion));
|
||||
background-position: 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% 2px;
|
||||
transition: background-size 0.4s var(--reveal-ease);
|
||||
}
|
||||
.draw-underline:hover {
|
||||
background-size: 100% 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
MOTION — scroll reveal (paired with components/Reveal.tsx)
|
||||
CUSTOMIZATION HOOK — MOTION: edit transforms / duration here.
|
||||
================================================================== */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition: opacity var(--reveal-duration) var(--reveal-ease),
|
||||
transform var(--reveal-duration) var(--reveal-ease);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
.reveal[data-variant="left"] {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
.reveal[data-variant="right"] {
|
||||
transform: translateX(40px);
|
||||
}
|
||||
.reveal[data-variant="scale"] {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
.reveal.is-visible {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Marquee track must be 2× content for a seamless loop. */
|
||||
.marquee-track {
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Respect users who prefer reduced motion. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
transition: none;
|
||||
}
|
||||
.marquee-track,
|
||||
[class*="animate-"] {
|
||||
animation: none !important;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* Abstract editorial hero — a custom illustration (inline SVG, no asset).
|
||||
* • MCM → a constellation of interconnected nodes (vermillion).
|
||||
* • QUIC → flowing, multiplexed streams (cobalt), animated dash flow.
|
||||
* Animations are pure CSS (tailwind keyframes: node-pulse, stream-dash).
|
||||
*
|
||||
* CUSTOMIZATION HOOK — palette is inherited from CSS vars; geometry below.
|
||||
*/
|
||||
export default function HeroComposition({
|
||||
className = "",
|
||||
}: {
|
||||
className?: string;
|
||||
}) {
|
||||
// MCM node coordinates (interconnected mesh, upper-left field).
|
||||
const nodes = [
|
||||
{ x: 70, y: 90 },
|
||||
{ x: 160, y: 60 },
|
||||
{ x: 130, y: 170 },
|
||||
{ x: 230, y: 130 },
|
||||
{ x: 60, y: 210 },
|
||||
{ x: 210, y: 240 },
|
||||
];
|
||||
// Mesh edges between nodes (index pairs).
|
||||
const edges: [number, number][] = [
|
||||
[0, 1],
|
||||
[0, 2],
|
||||
[1, 3],
|
||||
[2, 3],
|
||||
[2, 4],
|
||||
[3, 5],
|
||||
[2, 5],
|
||||
[4, 5],
|
||||
];
|
||||
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 380 380"
|
||||
role="img"
|
||||
aria-label="MCM 상호운용 노드와 QUIC 멀티스트림을 형상화한 추상 일러스트레이션"
|
||||
className={className}
|
||||
>
|
||||
{/* Frame */}
|
||||
<rect
|
||||
x="6"
|
||||
y="6"
|
||||
width="368"
|
||||
height="368"
|
||||
fill="none"
|
||||
stroke="#0A0A0A"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
|
||||
{/* ---- QUIC: flowing multiplexed streams (cobalt) ---- */}
|
||||
<g stroke="#1B3A8A" fill="none" strokeWidth="2.5" strokeLinecap="round">
|
||||
{[0, 1, 2, 3].map((i) => {
|
||||
const y = 250 + i * 30;
|
||||
return (
|
||||
<path
|
||||
key={i}
|
||||
d={`M 30 ${y} C 140 ${y - 40}, 240 ${y + 40}, 360 ${y - 20}`}
|
||||
strokeDasharray="10 14"
|
||||
className="animate-stream-dash"
|
||||
style={{ animationDelay: `${i * 0.6}s`, opacity: 0.85 }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
|
||||
{/* ---- MCM: interconnected node mesh (vermillion) ---- */}
|
||||
<g stroke="#D9342B" strokeWidth="1.5">
|
||||
{edges.map(([a, b], i) => (
|
||||
<line
|
||||
key={i}
|
||||
x1={nodes[a].x}
|
||||
y1={nodes[a].y}
|
||||
x2={nodes[b].x}
|
||||
y2={nodes[b].y}
|
||||
opacity="0.55"
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
<g fill="#D9342B">
|
||||
{nodes.map((n, i) => (
|
||||
<circle
|
||||
key={i}
|
||||
cx={n.x}
|
||||
cy={n.y}
|
||||
r={i % 2 === 0 ? 9 : 6}
|
||||
className="animate-node-pulse"
|
||||
style={{
|
||||
animationDelay: `${i * 0.5}s`,
|
||||
transformBox: "fill-box",
|
||||
transformOrigin: "center",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
{/* Annotations — placed in the top corners (y=24), clear of the
|
||||
MCM node mesh (y=60..240) and the QUIC stream curves (y≥250 with
|
||||
control points reaching y+40=380). See LAYOUT_AUDIT #3 and
|
||||
REVIEW §3 "P1 #3" — keeping them at y=24 (mirror corners) preserves
|
||||
a symmetric layout that the original LAYOUT_AUDIT mirror decided on. */}
|
||||
<text x="20" y="24" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
|
||||
MCM · MESH
|
||||
</text>
|
||||
<text
|
||||
x="360"
|
||||
y="24"
|
||||
textAnchor="end"
|
||||
fill="#0A0A0A"
|
||||
fontSize="11"
|
||||
fontWeight="600"
|
||||
letterSpacing="2"
|
||||
>
|
||||
QUIC · STREAMS
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,292 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Reveal from "@/components/Reveal";
|
||||
import Marquee from "@/components/Marquee";
|
||||
import Counter from "@/components/Counter";
|
||||
import SectionLabel from "@/components/SectionLabel";
|
||||
import HeroComposition from "./_components/HeroComposition";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "연구실 소개 (Intro)",
|
||||
description:
|
||||
"메타버스 상호운용성(MCM)과 QUIC 기반 멀티에이전트 오케스트레이션을 연구하는 경북대학교 사물인터넷 표준 연구실 소개.",
|
||||
};
|
||||
|
||||
// CUSTOMIZATION HOOK: the two research thrusts (cover spread comparison).
|
||||
const thrusts = [
|
||||
{
|
||||
no: "Thrust 01",
|
||||
tag: "MCM",
|
||||
accent: "vermillion" as const,
|
||||
ko: "메타버스 상호운용성",
|
||||
en: "Metaverse Interoperability",
|
||||
desc: "이종(異種) 메타버스 플랫폼 간 객체·아바타·자산의 상호운용을 위한 공통 데이터 모델과 변환 계층을 설계합니다. oneM2M / W3C 표준을 기반으로 서로 다른 가상 환경이 동일한 의미(semantics)로 데이터를 교환합니다.",
|
||||
points: [
|
||||
"공통 정보 모델(Common Information Model) 정의",
|
||||
"의미 보존 변환(semantic-preserving mapping) 계층",
|
||||
"상호운용성 테스트베드 및 적합성 검증",
|
||||
],
|
||||
},
|
||||
{
|
||||
no: "Thrust 02",
|
||||
tag: "QUIC",
|
||||
accent: "cobalt" as const,
|
||||
ko: "멀티에이전트 오케스트레이션",
|
||||
en: "Multi-Agent Orchestration",
|
||||
desc: "다수의 자율 에이전트가 저지연·다중스트림 환경에서 협력하도록 QUIC 전송 위에 오케스트레이션 아키텍처와 통신 인터페이스를 설계합니다. 연결 마이그레이션과 스트림 다중화로 메시지 라우팅을 최적화합니다.",
|
||||
points: [
|
||||
"QUIC 스트림 다중화 기반 에이전트 메시지 라우팅",
|
||||
"오케스트레이터–에이전트 제어 인터페이스 설계",
|
||||
"연결 마이그레이션 기반 모바일·엣지 지원",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// CUSTOMIZATION HOOK: headline figures (animated counters).
|
||||
// `value: 2026` is marked static so it renders as a fixed year, not a
|
||||
// 0→2026 count-up. The year is also rendered at the smaller `display-sm`
|
||||
// scale (the other two figures use the full `display` scale), so the
|
||||
// 4-digit "2026" does not push the cell padding. See LAYOUT_AUDIT #11 + #13.
|
||||
const figures = [
|
||||
{ value: 2, label: "연구 축 · Research Thrusts", suffix: "", size: "display" as const, static: false },
|
||||
{ value: 4, label: "표준화 기구 · Standards Bodies", suffix: "", size: "display" as const, static: false },
|
||||
{ value: 2026, label: "Issue · 발행", suffix: "", size: "display-sm" as const, static: true },
|
||||
];
|
||||
|
||||
// CUSTOMIZATION HOOK: research keyword ticker.
|
||||
const keywords = [
|
||||
"INTEROPERABILITY",
|
||||
"oneM2M",
|
||||
"W3C WoT",
|
||||
"QUIC TRANSPORT",
|
||||
"MULTI-AGENT",
|
||||
"STREAM MULTIPLEXING",
|
||||
"CONNECTION MIGRATION",
|
||||
"METAVERSE",
|
||||
"SEMANTIC MAPPING",
|
||||
"CONFORMANCE",
|
||||
];
|
||||
|
||||
const focusAreas = [
|
||||
{ ko: "사물인터넷 표준화", en: "IoT Standardization" },
|
||||
{ ko: "메타버스 상호운용성", en: "Metaverse Interoperability" },
|
||||
{ ko: "전송 프로토콜(QUIC)", en: "Transport Protocols" },
|
||||
{ ko: "멀티에이전트 시스템", en: "Multi-Agent Systems" },
|
||||
];
|
||||
|
||||
export default function IntroPage() {
|
||||
return (
|
||||
<>
|
||||
{/* ============ COVER SPREAD ============ */}
|
||||
<section className="relative overflow-hidden border-b border-ink">
|
||||
<div className="container-content pb-10 pt-12 sm:pt-16">
|
||||
<Reveal>
|
||||
<SectionLabel index={1} label="The Cover" />
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-8 grid items-center gap-10 lg:grid-cols-12">
|
||||
{/* Headline column */}
|
||||
<div className="lg:col-span-7">
|
||||
<Reveal delay={60}>
|
||||
<p className="kicker">경북대학교 컴퓨터학부 · IoT Standards Lab</p>
|
||||
</Reveal>
|
||||
<Reveal delay={120}>
|
||||
{/* Korean + English mixed, magazine-cover scale */}
|
||||
<h1 className="headline-ko mt-4 text-[clamp(2.5rem,8vw,5.5rem)] leading-[0.98] text-ink">
|
||||
사물인터넷의
|
||||
<br />
|
||||
<span className="text-vermillion">표준</span>을 짓다
|
||||
</h1>
|
||||
<p className="display mt-3 leading-[0.9]" aria-hidden>
|
||||
Standards
|
||||
<span className="block italic text-cobalt">in Motion</span>
|
||||
</p>
|
||||
</Reveal>
|
||||
<Reveal delay={200}>
|
||||
<p className="mt-8 max-w-prose text-base leading-relaxed text-ink-soft">
|
||||
메타버스 상호운용성(MCM)과 QUIC 기반 멀티에이전트 오케스트레이션.
|
||||
국제 표준을 토대로 분산되고 이종적인 시스템이 동일한 의미로
|
||||
데이터를 교환하고 협력하도록 설계합니다.
|
||||
</p>
|
||||
</Reveal>
|
||||
<Reveal delay={260}>
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
<Link
|
||||
href="/publications"
|
||||
className="bg-ink px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-ivory transition hover:bg-vermillion"
|
||||
>
|
||||
논문 보기 →
|
||||
</Link>
|
||||
<Link
|
||||
href="/members"
|
||||
className="border border-ink px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-ink transition hover:bg-ink hover:text-ivory"
|
||||
>
|
||||
구성원
|
||||
</Link>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
{/* Abstract illustration column */}
|
||||
<Reveal variant="scale" delay={200} className="lg:col-span-5">
|
||||
<HeroComposition className="w-full" />
|
||||
<p className="mt-3 text-right text-xs italic text-ink-mute">
|
||||
Fig. 01 — MCM 노드 메시 × QUIC 멀티스트림
|
||||
</p>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keyword marquee band */}
|
||||
<Reveal>
|
||||
<Marquee
|
||||
items={keywords}
|
||||
className="border-y border-ink bg-ink py-3 font-display text-xl tracking-wide text-ivory"
|
||||
/>
|
||||
</Reveal>
|
||||
</section>
|
||||
|
||||
{/* ============ FIGURES / COUNTERS ============ */}
|
||||
<section className="border-b border-ink">
|
||||
<div className="container-content grid gap-px bg-line sm:grid-cols-3">
|
||||
{figures.map((f, i) => (
|
||||
<Reveal key={f.label} delay={i * 100} className="bg-ivory">
|
||||
<div className="px-6 py-10">
|
||||
<Counter
|
||||
value={f.value}
|
||||
suffix={f.suffix}
|
||||
static={f.static}
|
||||
className={`${f.size} block text-ink`}
|
||||
/>
|
||||
<p className="kicker mt-3">{f.label}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ============ MISSION / PULL QUOTE ============ */}
|
||||
<section className="border-b border-ink">
|
||||
<div className="container-content py-16 sm:py-24">
|
||||
<Reveal>
|
||||
<SectionLabel index={2} label="Mission" />
|
||||
</Reveal>
|
||||
<Reveal delay={100}>
|
||||
<blockquote className="pull-quote mt-10 max-w-4xl text-ink">
|
||||
“표준 적합성과 실증을 함께 추구하여, 연구가{" "}
|
||||
<span className="text-vermillion">실제 표준 문서</span>와{" "}
|
||||
<span className="text-cobalt">오픈소스 구현</span>으로 이어지게 한다.”
|
||||
</blockquote>
|
||||
</Reveal>
|
||||
<Reveal delay={160}>
|
||||
<p className="mt-6 max-w-prose text-sm leading-relaxed text-ink-mute">
|
||||
{/* CUSTOMIZATION HOOK: marginalia / footnote */}
|
||||
† 본 연구실은 사물인터넷 국제 표준을 토대로, 분산·이종 시스템이
|
||||
동일한 의미로 데이터를 교환하고 협력할 수 있는 상호운용 기술을 연구합니다.
|
||||
</p>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ============ TWO THRUSTS — SIDE BY SIDE WITH CONNECTING LINE ============ */}
|
||||
<section className="border-b border-ink">
|
||||
<div className="container-content py-16 sm:py-24">
|
||||
<Reveal>
|
||||
<SectionLabel index={3} label="Two Research Thrusts" />
|
||||
</Reveal>
|
||||
|
||||
<div className="relative mt-12 grid gap-px lg:grid-cols-2">
|
||||
{/* Connecting line + node between the two thrusts (desktop) */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 lg:block"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="h-2 w-2 rounded-full bg-vermillion" />
|
||||
<span className="h-px w-16 bg-ink" />
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-full border border-ink bg-ivory font-display text-xs">
|
||||
×
|
||||
</span>
|
||||
<span className="h-px w-16 bg-ink" />
|
||||
<span className="h-2 w-2 rounded-full bg-cobalt" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{thrusts.map((t, i) => {
|
||||
const isVerm = t.accent === "vermillion";
|
||||
return (
|
||||
<Reveal
|
||||
key={t.tag}
|
||||
variant={i === 0 ? "left" : "right"}
|
||||
delay={i * 120}
|
||||
>
|
||||
<article
|
||||
className={`group h-full border border-ink p-8 transition-colors duration-500 sm:p-10 ${
|
||||
isVerm
|
||||
? "hover:bg-vermillion hover:text-ivory"
|
||||
: "hover:bg-cobalt hover:text-ivory"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-baseline justify-between">
|
||||
<span className="kicker group-hover:text-ivory/70">{t.no}</span>
|
||||
<span
|
||||
className={`font-display text-5xl ${
|
||||
isVerm ? "text-vermillion" : "text-cobalt"
|
||||
} group-hover:text-ivory`}
|
||||
>
|
||||
{t.tag}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="headline-ko mt-6 text-3xl leading-tight">
|
||||
{t.ko}
|
||||
</h3>
|
||||
<p className="font-display mt-1 text-lg italic opacity-70">
|
||||
{t.en}
|
||||
</p>
|
||||
<p className="mt-5 text-sm leading-relaxed opacity-90">
|
||||
{t.desc}
|
||||
</p>
|
||||
<ul className="mt-6 space-y-3 text-sm">
|
||||
{t.points.map((p) => (
|
||||
<li key={p} className="flex gap-3 border-t border-ink/20 pt-3 group-hover:border-ivory/20">
|
||||
<span className="font-display text-xs opacity-60">→</span>
|
||||
<span>{p}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
</Reveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ============ FOCUS AREAS ============ */}
|
||||
<section>
|
||||
<div className="container-content py-16 sm:py-24">
|
||||
<Reveal>
|
||||
<SectionLabel index={4} label="Focus Areas" />
|
||||
</Reveal>
|
||||
<div className="mt-10 grid gap-px bg-line sm:grid-cols-2 lg:grid-cols-4">
|
||||
{focusAreas.map((f, i) => (
|
||||
<Reveal key={f.en} delay={i * 80} className="bg-ivory">
|
||||
<div className="group flex h-full flex-col justify-between gap-8 p-7 transition-colors duration-500 hover:bg-ink hover:text-ivory">
|
||||
<span className="font-display text-2xl text-ink-mute group-hover:text-vermillion">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<div>
|
||||
<p className="headline-ko text-lg">{f.ko}</p>
|
||||
<p className="mt-1 text-xs uppercase tracking-[0.16em] text-ink-mute group-hover:text-ivory/60">
|
||||
{f.en}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Fraunces, Noto_Serif_KR, Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
/**
|
||||
* CUSTOMIZATION HOOK — FONTS
|
||||
* The editorial system pairs an English display serif (Fraunces) and a
|
||||
* Korean serif (Noto Serif KR) for headlines, with a clean sans for body.
|
||||
* Pretendard is preferred for body but is not served by Google Fonts, so
|
||||
* Inter is loaded as the web fallback (see tailwind.config.ts sans stack).
|
||||
*/
|
||||
const fraunces = Fraunces({
|
||||
subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600"],
|
||||
style: ["normal", "italic"],
|
||||
variable: "--font-display",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const notoSerifKr = Noto_Serif_KR({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "600", "700"],
|
||||
variable: "--font-serif-ko",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-sans",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
default: "사물인터넷 표준 연구실 (IoT Standards Lab) · 경북대학교",
|
||||
template: "%s · 사물인터넷 표준 연구실",
|
||||
},
|
||||
description:
|
||||
"경북대학교 컴퓨터학부 사물인터넷 표준 연구실. 메타버스 상호운용성(MCM) 및 QUIC 기반 멀티에이전트 오케스트레이션 연구.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html
|
||||
lang="ko"
|
||||
className={`${fraunces.variable} ${notoSerifKr.variable} ${inter.variable}`}
|
||||
>
|
||||
<head>
|
||||
{/* No-JS fallback for the .reveal scroll-reveal: without this, every
|
||||
page is blank if hydration fails (e.g. Google Fonts request blocked). */}
|
||||
<noscript>
|
||||
<style>{`.reveal { opacity: 1 !important; transform: none !important; }`}</style>
|
||||
</noscript>
|
||||
</head>
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<Header />
|
||||
<main className="flex-1">{children}</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import type { Metadata } from "next";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import Reveal from "@/components/Reveal";
|
||||
import SectionLabel from "@/components/SectionLabel";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "강의 (Lectures)",
|
||||
description: "사물인터넷 표준 연구실 지도교수가 담당하는 강의 목록 (placeholder).",
|
||||
};
|
||||
|
||||
// CUSTOMIZATION HOOK: replace placeholder lectures below.
|
||||
const lectures = [
|
||||
{
|
||||
code: "CSE3xx",
|
||||
ko: "사물인터넷 개론",
|
||||
en: "Introduction to IoT",
|
||||
level: "학부 · Undergraduate",
|
||||
accent: "vermillion" as const,
|
||||
desc: "IoT 아키텍처, 센서·액추에이터, 통신 프로토콜(MQTT/CoAP)과 oneM2M 표준의 기본 개념을 다룹니다. 간단한 디바이스–서버 연동 실습을 포함합니다.",
|
||||
},
|
||||
{
|
||||
code: "CSE4xx",
|
||||
ko: "네트워크 프로토콜과 전송 기술",
|
||||
en: "Network Protocols & Transport",
|
||||
level: "학부/대학원 · Undergraduate / Graduate",
|
||||
accent: "cobalt" as const,
|
||||
desc: "TCP/UDP에서 QUIC까지 전송 계층의 발전과 설계 원리를 학습합니다. 스트림 다중화, 연결 마이그레이션, 혼잡 제어를 실험을 통해 분석합니다.",
|
||||
},
|
||||
{
|
||||
code: "CSE6xx",
|
||||
ko: "메타버스 상호운용성과 표준",
|
||||
en: "Metaverse Interoperability & Standards",
|
||||
level: "대학원 · Graduate",
|
||||
accent: "ink" as const,
|
||||
desc: "이종 메타버스 플랫폼 간 데이터 모델, 의미 보존 변환, W3C/oneM2M 표준을 다루는 세미나형 대학원 강의입니다. 최신 논문 리뷰와 프로젝트를 병행합니다.",
|
||||
},
|
||||
];
|
||||
|
||||
const accent: Record<string, { hover: string; text: string }> = {
|
||||
vermillion: { hover: "hover:bg-vermillion hover:text-ivory", text: "text-vermillion" },
|
||||
cobalt: { hover: "hover:bg-cobalt hover:text-ivory", text: "text-cobalt" },
|
||||
ink: { hover: "hover:bg-ink hover:text-ivory", text: "text-ink" },
|
||||
};
|
||||
|
||||
export default function LecturesPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
ko="강의"
|
||||
en="Lectures"
|
||||
index={4}
|
||||
description="연구실에서 담당하는 학부·대학원 강의입니다. 아래 강의 정보는 예시(placeholder)이며 실제 개설 과목으로 교체할 수 있습니다."
|
||||
/>
|
||||
|
||||
<section>
|
||||
<div className="container-content py-16 sm:py-24">
|
||||
<Reveal>
|
||||
<SectionLabel index={1} label="Courses" />
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-12 grid gap-px bg-line lg:grid-cols-3">
|
||||
{lectures.map((l, i) => {
|
||||
const a = accent[l.accent];
|
||||
return (
|
||||
<Reveal
|
||||
key={l.code}
|
||||
variant={i === 0 ? "left" : i === 2 ? "right" : "up"}
|
||||
delay={i * 100}
|
||||
className="bg-ivory"
|
||||
>
|
||||
<article
|
||||
className={`group flex h-full flex-col border border-ink p-8 transition-colors duration-500 sm:p-10 ${a.hover}`}
|
||||
>
|
||||
<div className="flex items-baseline justify-between">
|
||||
<span className={`font-display text-xl ${a.text} group-hover:text-ivory`}>
|
||||
{l.code}
|
||||
</span>
|
||||
<span className="font-display text-4xl text-ink-mute group-hover:text-ivory/70">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="headline-ko mt-6 text-2xl leading-tight">{l.ko}</h3>
|
||||
<p className="font-display mt-1 text-lg italic opacity-70">{l.en}</p>
|
||||
|
||||
<p className={`mt-4 inline-flex w-fit border border-ink/30 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] group-hover:border-ivory/40`}>
|
||||
{l.level}
|
||||
</p>
|
||||
|
||||
<p className="mt-6 border-t border-ink/20 pt-6 text-sm leading-relaxed opacity-90 group-hover:border-ivory/20">
|
||||
{l.desc}
|
||||
</p>
|
||||
</article>
|
||||
</Reveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
import type { Metadata } from "next";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import Reveal from "@/components/Reveal";
|
||||
import SectionLabel from "@/components/SectionLabel";
|
||||
import Counter from "@/components/Counter";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "구성원 (Members)",
|
||||
description: "사물인터넷 표준 연구실 지도교수 및 대학원·학부 연구원 소개 (placeholder).",
|
||||
};
|
||||
|
||||
// CUSTOMIZATION HOOK: replace placeholder member data below.
|
||||
const advisor = {
|
||||
ko: "홍길동 교수",
|
||||
en: "Prof. Gildong Hong",
|
||||
role: "지도교수 · Principal Investigator",
|
||||
desc: "사물인터넷 표준, 메타버스 상호운용성, 전송 프로토콜. (이메일 placeholder: pi@example.knu.ac.kr)",
|
||||
fields: ["IoT Standardization", "Metaverse Interoperability", "QUIC Transport"],
|
||||
};
|
||||
|
||||
const groups = [
|
||||
{
|
||||
ko: "박사과정 연구원",
|
||||
en: "Ph.D. Students",
|
||||
accent: "vermillion" as const,
|
||||
members: [
|
||||
{ name: "연구원 A (placeholder)", topic: "QUIC 기반 멀티에이전트 오케스트레이션" },
|
||||
{ name: "연구원 B (placeholder)", topic: "메타버스 공통 정보 모델 (MCM)" },
|
||||
],
|
||||
},
|
||||
{
|
||||
ko: "석사과정 연구원",
|
||||
en: "M.S. Students",
|
||||
accent: "cobalt" as const,
|
||||
members: [
|
||||
{ name: "연구원 C (placeholder)", topic: "oneM2M 적합성 검증" },
|
||||
{ name: "연구원 D (placeholder)", topic: "QUIC 스트림 다중화 성능 분석" },
|
||||
{ name: "연구원 E (placeholder)", topic: "W3C WoT Thing Description 매핑" },
|
||||
],
|
||||
},
|
||||
{
|
||||
ko: "학부 연구원",
|
||||
en: "Undergraduate Researchers",
|
||||
accent: "ink" as const,
|
||||
members: [
|
||||
{ name: "연구원 F (placeholder)", topic: "테스트베드 개발" },
|
||||
{ name: "연구원 G (placeholder)", topic: "데이터 시각화" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// CUSTOMIZATION HOOK: headcount figures (animated counters).
|
||||
const figures = [
|
||||
{ value: 1, label: "지도교수 · Principal Investigator" },
|
||||
{ value: 5, label: "대학원 연구원 · Graduate Members" },
|
||||
{ value: 2, label: "학부 연구원 · Undergraduates" },
|
||||
];
|
||||
|
||||
const accentText: Record<string, string> = {
|
||||
vermillion: "text-vermillion",
|
||||
cobalt: "text-cobalt",
|
||||
ink: "text-ink",
|
||||
};
|
||||
|
||||
export default function MembersPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
ko="구성원"
|
||||
en="Members"
|
||||
index={2}
|
||||
description="연구실 지도교수와 박사·석사·학부 연구원을 소개합니다. 아래 정보는 예시(placeholder)이며 실제 구성원 정보로 교체할 수 있습니다."
|
||||
/>
|
||||
|
||||
{/* ============ HEADCOUNT FIGURES ============ */}
|
||||
<section className="border-b border-ink">
|
||||
<div className="container-content grid gap-px bg-line sm:grid-cols-3">
|
||||
{figures.map((f, i) => (
|
||||
<Reveal key={f.label} delay={i * 100} className="bg-ivory">
|
||||
<div className="px-6 py-10">
|
||||
<Counter value={f.value} className="display block text-ink" />
|
||||
<p className="kicker mt-3">{f.label}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ============ PRINCIPAL INVESTIGATOR ============ */}
|
||||
<section className="border-b border-ink">
|
||||
<div className="container-content py-16 sm:py-24">
|
||||
<Reveal>
|
||||
<SectionLabel index={1} label="Principal Investigator" />
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-10 grid gap-px lg:grid-cols-12">
|
||||
<Reveal variant="left" className="lg:col-span-7">
|
||||
<article className="group h-full border border-ink p-8 transition-colors duration-500 hover:bg-ink hover:text-ivory sm:p-10">
|
||||
<span className="kicker group-hover:text-ivory/70">{advisor.role}</span>
|
||||
<h2 className="headline-ko mt-5 text-4xl leading-tight">{advisor.ko}</h2>
|
||||
<p className="font-display mt-1 text-2xl italic text-vermillion">
|
||||
{advisor.en}
|
||||
</p>
|
||||
<p className="mt-6 max-w-prose text-sm leading-relaxed opacity-90">
|
||||
{advisor.desc}
|
||||
</p>
|
||||
</article>
|
||||
</Reveal>
|
||||
|
||||
<Reveal variant="right" delay={120} className="lg:col-span-5">
|
||||
<div className="flex h-full flex-col gap-px bg-line">
|
||||
{advisor.fields.map((field, i) => (
|
||||
<div
|
||||
key={field}
|
||||
className="group flex items-center gap-5 bg-ivory px-7 py-6 transition-colors duration-500 hover:bg-paper"
|
||||
>
|
||||
<span className="font-display text-3xl text-ink-mute group-hover:text-vermillion">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<span className="text-sm uppercase tracking-[0.16em] text-ink-soft">
|
||||
{field}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ============ RESEARCH GROUPS ============ */}
|
||||
<section>
|
||||
<div className="container-content py-16 sm:py-24">
|
||||
<Reveal>
|
||||
<SectionLabel index={2} label="Researchers" />
|
||||
</Reveal>
|
||||
|
||||
{groups.map((g, gi) => (
|
||||
<div key={g.en} className="mt-14 first:mt-12">
|
||||
<Reveal>
|
||||
<div className="flex items-baseline justify-between border-b border-ink pb-4">
|
||||
<h3 className="headline-ko text-2xl text-ink sm:text-3xl">{g.ko}</h3>
|
||||
<span
|
||||
className={`font-display text-lg italic ${accentText[g.accent]}`}
|
||||
>
|
||||
{g.en}
|
||||
</span>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-px grid gap-px bg-line sm:grid-cols-2">
|
||||
{g.members.map((m, mi) => (
|
||||
<Reveal key={m.name} delay={mi * 80} className="bg-ivory">
|
||||
<article className="group flex h-full flex-col justify-between gap-8 p-7 transition-colors duration-500 hover:bg-ink hover:text-ivory">
|
||||
<span className="font-display text-2xl text-ink-mute group-hover:text-vermillion">
|
||||
{String(gi + 1).padStart(2, "0")}.{String(mi + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<div>
|
||||
<h4 className="headline-ko text-lg">{m.name}</h4>
|
||||
<p className="mt-2 text-xs leading-relaxed text-ink-mute group-hover:text-ivory/60">
|
||||
{m.topic}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
import type { Metadata } from "next";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import Reveal from "@/components/Reveal";
|
||||
import SectionLabel from "@/components/SectionLabel";
|
||||
import Counter from "@/components/Counter";
|
||||
import Marquee from "@/components/Marquee";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "논문 (Publications)",
|
||||
description: "사물인터넷 표준 연구실의 대표 논문 목록 (placeholder).",
|
||||
};
|
||||
|
||||
// CUSTOMIZATION HOOK: replace placeholder publications below.
|
||||
const publications = [
|
||||
{
|
||||
year: "2025",
|
||||
type: "Journal",
|
||||
title:
|
||||
"메타버스 상호운용을 위한 공통 정보 모델 설계 및 oneM2M 매핑 (Design of a Common Information Model for Metaverse Interoperability over oneM2M)",
|
||||
authors: "Hong G., Researcher A., et al.",
|
||||
venue: "한국통신학회논문지 (J-KICS), Vol. 50, No. 3",
|
||||
},
|
||||
{
|
||||
year: "2025",
|
||||
type: "Conference",
|
||||
title:
|
||||
"QUIC-based Orchestration Architecture for Low-Latency Multi-Agent Communication",
|
||||
authors: "Researcher B., Hong G.",
|
||||
venue: "IEEE International Conference on Communications (ICC)",
|
||||
},
|
||||
{
|
||||
year: "2024",
|
||||
type: "Journal",
|
||||
title:
|
||||
"W3C WoT Thing Description를 활용한 이종 메타버스 자산의 의미 보존 변환 (Semantic-Preserving Mapping of Cross-Platform Metaverse Assets Using W3C WoT)",
|
||||
authors: "Researcher C., Hong G., et al.",
|
||||
venue: "정보과학회논문지 (KIISE Transactions), Vol. 51, No. 11",
|
||||
},
|
||||
{
|
||||
year: "2024",
|
||||
type: "Conference",
|
||||
title:
|
||||
"Stream Multiplexing Strategies for Agent Message Routing over QUIC",
|
||||
authors: "Researcher D., Researcher B., Hong G.",
|
||||
venue: "ACM/IEEE Symposium on Edge Computing (SEC)",
|
||||
},
|
||||
{
|
||||
year: "2023",
|
||||
type: "Conference",
|
||||
title:
|
||||
"oneM2M 기반 IoT 디바이스 상호운용성 적합성 검증 프레임워크 (A Conformance Testing Framework for oneM2M-based IoT Interoperability)",
|
||||
authors: "Researcher E., Hong G.",
|
||||
venue: "한국정보과학회 학술발표회 (KSC)",
|
||||
},
|
||||
];
|
||||
|
||||
// CUSTOMIZATION HOOK: venue ticker.
|
||||
const venueTicker = [
|
||||
"J-KICS",
|
||||
"IEEE ICC",
|
||||
"KIISE TRANSACTIONS",
|
||||
"ACM/IEEE SEC",
|
||||
"KSC",
|
||||
"oneM2M",
|
||||
"W3C WoT",
|
||||
"IETF QUIC",
|
||||
];
|
||||
|
||||
// Accent per publication type, drawn from the editorial palette.
|
||||
const typeAccent: Record<string, { text: string; rule: string }> = {
|
||||
Journal: { text: "text-vermillion", rule: "bg-vermillion" },
|
||||
Conference: { text: "text-cobalt", rule: "bg-cobalt" },
|
||||
};
|
||||
|
||||
// Derived figures.
|
||||
const journalCount = publications.filter((p) => p.type === "Journal").length;
|
||||
const confCount = publications.filter((p) => p.type === "Conference").length;
|
||||
const figures = [
|
||||
{ value: publications.length, label: "전체 논문 · Total Publications" },
|
||||
{ value: journalCount, label: "저널 · Journal" },
|
||||
{ value: confCount, label: "학회 · Conference" },
|
||||
];
|
||||
|
||||
export default function PublicationsPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
ko="논문"
|
||||
en="Publications"
|
||||
index={3}
|
||||
description="메타버스 상호운용성(MCM)과 QUIC 기반 멀티에이전트 통신 분야의 대표 논문입니다. 아래 목록은 예시(placeholder)입니다."
|
||||
/>
|
||||
|
||||
{/* Venue marquee band */}
|
||||
<Reveal>
|
||||
<Marquee
|
||||
items={venueTicker}
|
||||
reverse
|
||||
className="border-b border-ink bg-ink py-3 font-display text-xl tracking-wide text-ivory"
|
||||
/>
|
||||
</Reveal>
|
||||
|
||||
{/* ============ FIGURES ============ */}
|
||||
<section className="border-b border-ink">
|
||||
<div className="container-content grid gap-px bg-line sm:grid-cols-3">
|
||||
{figures.map((f, i) => (
|
||||
<Reveal key={f.label} delay={i * 100} className="bg-ivory">
|
||||
<div className="px-6 py-10">
|
||||
<Counter value={f.value} className="display block text-ink" />
|
||||
<p className="kicker mt-3">{f.label}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ============ PUBLICATION LIST ============ */}
|
||||
<section>
|
||||
<div className="container-content py-16 sm:py-24">
|
||||
<Reveal>
|
||||
<SectionLabel index={1} label="Selected Works" />
|
||||
</Reveal>
|
||||
|
||||
<ol className="mt-12 border-t border-ink">
|
||||
{publications.map((p, i) => {
|
||||
const accent = typeAccent[p.type] ?? {
|
||||
text: "text-ink",
|
||||
rule: "bg-ink",
|
||||
};
|
||||
// Reveal `as="li"` keeps the <ol> direct-child contract (HTML spec:
|
||||
// <ol> may only contain <li>/<script>/<template>). See REVIEW.md §3 #1.
|
||||
return (
|
||||
<Reveal
|
||||
as="li"
|
||||
key={p.title}
|
||||
delay={(i % 3) * 80}
|
||||
className="group grid gap-6 border-b border-ink py-8 transition-colors duration-500 hover:bg-paper sm:grid-cols-12 sm:py-10"
|
||||
>
|
||||
{/* Index + year rail */}
|
||||
<div className="flex items-baseline gap-4 sm:col-span-3 sm:flex-col sm:gap-3">
|
||||
<span className="font-display text-5xl leading-none text-ink-mute">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<span className="font-display text-2xl italic text-ink">
|
||||
{p.year}
|
||||
</span>
|
||||
<span
|
||||
className={`inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] ${accent.text}`}
|
||||
>
|
||||
<span className={`h-1.5 w-1.5 rounded-full ${accent.rule}`} />
|
||||
{p.type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title + meta */}
|
||||
<div className="sm:col-span-9">
|
||||
<h3 className="headline-ko text-xl leading-snug text-ink sm:text-2xl">
|
||||
{p.title}
|
||||
</h3>
|
||||
<p className="mt-3 text-sm text-ink-soft">{p.authors}</p>
|
||||
<p className="font-display text-sm italic text-ink-mute">
|
||||
{p.venue}
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
import type { Metadata } from "next";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import Reveal from "@/components/Reveal";
|
||||
import SectionLabel from "@/components/SectionLabel";
|
||||
import Counter from "@/components/Counter";
|
||||
import Marquee from "@/components/Marquee";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "표준화 활동 (Standardization)",
|
||||
description:
|
||||
"oneM2M, W3C WoT, IETF QUIC, OMA LwM2M 등 국제 표준화 기구에서의 연구실 기여 활동 (placeholder).",
|
||||
};
|
||||
|
||||
// CUSTOMIZATION HOOK: replace placeholder standardization activities below.
|
||||
const bodies = [
|
||||
{
|
||||
org: "oneM2M",
|
||||
full: "oneM2M Partnership Project",
|
||||
area: "IoT 서비스 계층 표준",
|
||||
accent: "vermillion" as const,
|
||||
contributions: [
|
||||
"메타버스 상호운용을 위한 공통 정보 모델(CIM) 기고 (placeholder)",
|
||||
"디바이스 상호운용성 적합성 테스트 케이스 제안",
|
||||
],
|
||||
},
|
||||
{
|
||||
org: "W3C WoT",
|
||||
full: "W3C Web of Things",
|
||||
area: "Thing Description / 시맨틱",
|
||||
accent: "cobalt" as const,
|
||||
contributions: [
|
||||
"메타버스 자산의 Thing Description 매핑 프로파일 제안 (placeholder)",
|
||||
"의미 보존 변환 가이드라인 논의 참여",
|
||||
],
|
||||
},
|
||||
{
|
||||
org: "IETF QUIC",
|
||||
full: "IETF QUIC Working Group",
|
||||
area: "전송 프로토콜",
|
||||
accent: "vermillion" as const,
|
||||
contributions: [
|
||||
"멀티에이전트 환경을 위한 스트림 우선순위 확장 검토 (placeholder)",
|
||||
"연결 마이그레이션 활용 사례 기여",
|
||||
],
|
||||
},
|
||||
{
|
||||
org: "OMA LwM2M",
|
||||
full: "OMA SpecWorks Lightweight M2M",
|
||||
area: "경량 디바이스 관리",
|
||||
accent: "cobalt" as const,
|
||||
contributions: [
|
||||
"엣지 에이전트 디바이스 관리 객체 정의 제안 (placeholder)",
|
||||
"리소스 모델 상호운용성 검토",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// CUSTOMIZATION HOOK: standards-body ticker.
|
||||
const orgTicker = [
|
||||
"oneM2M",
|
||||
"W3C WoT",
|
||||
"IETF QUIC",
|
||||
"OMA LwM2M",
|
||||
"CONFORMANCE",
|
||||
"INTEROPERABILITY",
|
||||
"SEMANTIC MAPPING",
|
||||
];
|
||||
|
||||
const totalContributions = bodies.reduce(
|
||||
(n, b) => n + b.contributions.length,
|
||||
0
|
||||
);
|
||||
const figures = [
|
||||
{ value: bodies.length, label: "표준화 기구 · Standards Bodies" },
|
||||
{ value: totalContributions, label: "기여 항목 · Contributions" },
|
||||
{ value: 4, label: "기술 영역 · Technical Areas" },
|
||||
];
|
||||
|
||||
const accentText: Record<string, string> = {
|
||||
vermillion: "text-vermillion",
|
||||
cobalt: "text-cobalt",
|
||||
};
|
||||
const accentDot: Record<string, string> = {
|
||||
vermillion: "bg-vermillion",
|
||||
cobalt: "bg-cobalt",
|
||||
};
|
||||
|
||||
export default function StandardizationPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
ko="표준화 활동"
|
||||
en="Standardization"
|
||||
index={5}
|
||||
description="국제 표준화 기구와 협력하여 연구 결과를 표준에 반영합니다. 아래 기여 내역은 예시(placeholder)이며 실제 활동으로 교체할 수 있습니다."
|
||||
/>
|
||||
|
||||
{/* Standards-body marquee band */}
|
||||
<Reveal>
|
||||
<Marquee
|
||||
items={orgTicker}
|
||||
className="border-b border-ink bg-ink py-3 font-display text-xl tracking-wide text-ivory"
|
||||
/>
|
||||
</Reveal>
|
||||
|
||||
{/* ============ FIGURES ============ */}
|
||||
<section className="border-b border-ink">
|
||||
<div className="container-content grid gap-px bg-line sm:grid-cols-3">
|
||||
{figures.map((f, i) => (
|
||||
<Reveal key={f.label} delay={i * 100} className="bg-ivory">
|
||||
<div className="px-6 py-10">
|
||||
<Counter value={f.value} className="display block text-ink" />
|
||||
<p className="kicker mt-3">{f.label}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ============ CONTRIBUTIONS BY BODY ============ */}
|
||||
<section>
|
||||
<div className="container-content py-16 sm:py-24">
|
||||
<Reveal>
|
||||
<SectionLabel index={1} label="Contributions" />
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-12 grid gap-px bg-line sm:grid-cols-2">
|
||||
{bodies.map((b, i) => (
|
||||
<Reveal
|
||||
key={b.org}
|
||||
variant={i % 2 === 0 ? "left" : "right"}
|
||||
delay={(i % 2) * 100}
|
||||
className="bg-ivory"
|
||||
>
|
||||
<article className="group flex h-full flex-col border border-ink p-8 transition-colors duration-500 hover:bg-ink hover:text-ivory sm:p-10">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<h3 className="headline-ko text-3xl">{b.org}</h3>
|
||||
<span className="font-display text-4xl text-ink-mute group-hover:text-ivory/40">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-display mt-1 text-sm italic opacity-70">{b.full}</p>
|
||||
|
||||
<p
|
||||
className={`mt-4 inline-flex w-fit border px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] ${
|
||||
b.accent === "vermillion"
|
||||
? "border-vermillion/40"
|
||||
: "border-cobalt/40"
|
||||
} ${accentText[b.accent]} group-hover:border-ivory/40 group-hover:text-ivory`}
|
||||
>
|
||||
{b.area}
|
||||
</p>
|
||||
|
||||
<ul className="mt-6 space-y-4 border-t border-ink/20 pt-6 text-sm group-hover:border-ivory/20">
|
||||
{b.contributions.map((c) => (
|
||||
<li key={c} className="flex gap-3">
|
||||
<span
|
||||
aria-hidden
|
||||
className={`mt-1.5 h-1.5 w-1.5 flex-none rounded-full ${accentDot[b.accent]} group-hover:bg-ivory`}
|
||||
/>
|
||||
<span className="leading-relaxed opacity-90">{c}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
/**
|
||||
* Number that ticks up from 0 → `value` when scrolled into view.
|
||||
* Uses requestAnimationFrame only (no animation library).
|
||||
*
|
||||
* CUSTOMIZATION HOOK — CONTENT: value / prefix / suffix.
|
||||
*/
|
||||
export default function Counter({
|
||||
value,
|
||||
duration = 1600,
|
||||
prefix = "",
|
||||
suffix = "",
|
||||
className = "",
|
||||
static: isStatic = false,
|
||||
}: {
|
||||
value: number;
|
||||
duration?: number;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
className?: string;
|
||||
/** Render the value as plain text (no tick animation). Use for years,
|
||||
dates, or any value that should not be perceived as "counting up".
|
||||
See LAYOUT_AUDIT #11. */
|
||||
static?: boolean;
|
||||
}) {
|
||||
const ref = useRef<HTMLSpanElement>(null);
|
||||
const [display, setDisplay] = useState(isStatic ? value : 0);
|
||||
|
||||
useEffect(() => {
|
||||
// When `static` is set, the value is rendered as-is with no observer.
|
||||
if (isStatic) return;
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)"
|
||||
).matches;
|
||||
|
||||
// Hoisted to the effect scope so the cleanup below can cancel an
|
||||
// in-flight frame on unmount / dep change (the IO callback's own
|
||||
// return value is never used as a cleanup).
|
||||
let raf = 0;
|
||||
|
||||
const io = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (!entry.isIntersecting) return;
|
||||
io.disconnect();
|
||||
|
||||
if (prefersReduced) {
|
||||
setDisplay(value);
|
||||
return;
|
||||
}
|
||||
|
||||
const start = performance.now();
|
||||
const tick = (now: number) => {
|
||||
const t = Math.min((now - start) / duration, 1);
|
||||
// easeOutExpo
|
||||
const eased = t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
|
||||
setDisplay(Math.round(eased * value));
|
||||
if (t < 1) raf = requestAnimationFrame(tick);
|
||||
};
|
||||
raf = requestAnimationFrame(tick);
|
||||
},
|
||||
{ threshold: 0.4 }
|
||||
);
|
||||
|
||||
io.observe(el);
|
||||
return () => {
|
||||
io.disconnect();
|
||||
cancelAnimationFrame(raf);
|
||||
};
|
||||
}, [value, duration, isStatic]);
|
||||
|
||||
return (
|
||||
<span ref={ref} className={`tabular-nums ${className}`}>
|
||||
{prefix}
|
||||
{display}
|
||||
{suffix}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import Link from "next/link";
|
||||
import Marquee from "@/components/Marquee";
|
||||
|
||||
// CUSTOMIZATION HOOK: replace address / email placeholders & colophon below.
|
||||
const links = [
|
||||
{ href: "/intro", ko: "연구실 소개", en: "Intro" },
|
||||
{ href: "/members", ko: "구성원", en: "Members" },
|
||||
{ href: "/publications", ko: "논문", en: "Publications" },
|
||||
{ href: "/lectures", ko: "강의", en: "Lectures" },
|
||||
{ href: "/standardization", ko: "표준화", en: "Standardization" },
|
||||
];
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="mt-0 border-t border-ink bg-ink text-ivory lg:mt-8">
|
||||
{/* Marquee band — colophon ticker */}
|
||||
<Marquee
|
||||
items={[
|
||||
"IoT STANDARDS LAB",
|
||||
"METAVERSE INTEROPERABILITY",
|
||||
"QUIC MULTI-AGENT ORCHESTRATION",
|
||||
"ISSUE 01 — 2026",
|
||||
"KYUNGPOOK NATIONAL UNIVERSITY",
|
||||
]}
|
||||
reverse
|
||||
className="border-b border-ivory/20 py-4 font-display text-lg tracking-wide text-ivory/90"
|
||||
/>
|
||||
|
||||
<div className="container-content grid gap-12 py-16 lg:grid-cols-12">
|
||||
{/* Masthead title */}
|
||||
<div className="lg:col-span-5">
|
||||
<p className="kicker text-ivory/50">Colophon</p>
|
||||
<h3 className="headline-ko mt-3 text-2xl leading-snug">
|
||||
사물인터넷 표준 연구실
|
||||
</h3>
|
||||
<p className="font-display mt-1 text-xl italic text-ivory/70">
|
||||
IoT Standards Lab
|
||||
</p>
|
||||
<p className="mt-5 max-w-sm text-sm leading-relaxed text-ivory/60">
|
||||
경북대학교 컴퓨터학부<br />
|
||||
Kyungpook National University,<br />
|
||||
School of Computer Science and Engineering
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="lg:col-span-4">
|
||||
<p className="kicker text-ivory/50">Contact</p>
|
||||
<address className="mt-3 not-italic text-sm leading-relaxed text-ivory/70">
|
||||
{/* 주소 placeholder */}
|
||||
(41566) 대구광역시 북구 대학로 80<br />
|
||||
IT대학 OO호 (placeholder)<br />
|
||||
<a
|
||||
href="mailto:iot-lab@example.knu.ac.kr"
|
||||
className="draw-underline mt-2 inline-block text-ivory hover:text-vermillion"
|
||||
>
|
||||
iot-lab@example.knu.ac.kr
|
||||
</a>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
{/* Index */}
|
||||
<div className="lg:col-span-3">
|
||||
<p className="kicker text-ivory/50">Index</p>
|
||||
<ul className="mt-3 space-y-2">
|
||||
{links.map((l, i) => (
|
||||
<li key={l.href} className="flex items-baseline gap-3">
|
||||
<span className="font-display text-xs text-ivory/40">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<Link
|
||||
href={l.href}
|
||||
className="text-sm text-ivory/70 transition hover:text-vermillion"
|
||||
>
|
||||
{l.ko}{" "}
|
||||
<span className="text-xs text-ivory/40">{l.en}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-ivory/20">
|
||||
<div className="container-content flex flex-col gap-2 py-5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="text-xs text-ivory/50">
|
||||
© {new Date().getFullYear()} 사물인터넷 표준 연구실 · 경북대학교 컴퓨터학부. All rights reserved.
|
||||
</p>
|
||||
<p className="kicker text-ivory/40">Set in Fraunces · Noto Serif KR · Pretendard</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
// CUSTOMIZATION HOOK: edit nav labels / routes here.
|
||||
const navItems = [
|
||||
{ href: "/intro", ko: "연구실 소개", en: "Intro", no: "01" },
|
||||
{ href: "/members", ko: "구성원", en: "Members", no: "02" },
|
||||
{ href: "/publications", ko: "논문", en: "Publications", no: "03" },
|
||||
{ href: "/lectures", ko: "강의", en: "Lectures", no: "04" },
|
||||
{ href: "/standardization", ko: "표준화", en: "Standardization", no: "05" },
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
const isActive = (href: string) =>
|
||||
pathname === href || pathname.startsWith(`${href}/`);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 border-b border-ink bg-ivory/85 backdrop-blur">
|
||||
{/* Journal issue strip — magazine masthead feel. */}
|
||||
<div className="hidden border-b border-line lg:block">
|
||||
<div className="container-content flex items-center justify-between py-1.5">
|
||||
<span className="kicker">Issue 01 — 2026</span>
|
||||
{/* CUSTOMIZATION HOOK: masthead tagline */}
|
||||
<span className="kicker text-ink-mute">
|
||||
Kyungpook National University · School of Computer Science & Engineering
|
||||
</span>
|
||||
<span className="kicker">대구 · Daegu</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-content flex h-[4.25rem] items-center justify-between">
|
||||
{/* Brand */}
|
||||
<Link
|
||||
href="/intro"
|
||||
className="group flex flex-col leading-none"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<span className="headline-ko text-lg text-ink sm:text-xl">
|
||||
사물인터넷 표준 연구실
|
||||
</span>
|
||||
<span className="kicker mt-1 group-hover:text-vermillion">
|
||||
IoT Standards Lab
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop nav — small caps, wide tracking */}
|
||||
<nav className="hidden items-center gap-7 lg:flex" aria-label="주 메뉴">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-colors ${
|
||||
isActive(item.href)
|
||||
? "text-vermillion"
|
||||
: "text-ink hover:text-vermillion"
|
||||
}`}
|
||||
>
|
||||
<span className="font-display text-[0.62rem] text-ink-mute">
|
||||
{item.no}
|
||||
</span>
|
||||
<span>{item.en}</span>
|
||||
<span
|
||||
aria-hidden
|
||||
className={`absolute -bottom-1.5 left-0 h-px bg-vermillion transition-all duration-300 ${
|
||||
isActive(item.href) ? "w-full" : "w-0 group-hover:w-full"
|
||||
}`}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Mobile hamburger */}
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center border border-ink p-2 text-ink transition hover:bg-ink hover:text-ivory lg:hidden"
|
||||
aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
|
||||
aria-expanded={open}
|
||||
aria-controls="mobile-menu"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.8} stroke="currentColor">
|
||||
{open ? (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
) : (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu panel */}
|
||||
{open && (
|
||||
<nav
|
||||
id="mobile-menu"
|
||||
className="border-t border-ink bg-ivory lg:hidden"
|
||||
aria-label="모바일 메뉴"
|
||||
>
|
||||
<ul className="container-content flex flex-col divide-y divide-line py-2">
|
||||
{navItems.map((item) => (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={() => setOpen(false)}
|
||||
className={`flex items-baseline justify-between py-4 transition ${
|
||||
isActive(item.href) ? "text-vermillion" : "text-ink"
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-baseline gap-3">
|
||||
<span className="font-display text-xs text-ink-mute">{item.no}</span>
|
||||
<span className="headline-ko text-lg">{item.ko}</span>
|
||||
</span>
|
||||
<span className="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-ink-mute">
|
||||
{item.en}
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Horizontal running ticker of research keywords (magazine masthead style).
|
||||
* Pure CSS animation (see tailwind `animate-marquee`). The track is rendered
|
||||
* twice so the -50% translate loops seamlessly.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — CONTENT: pass your own `items`.
|
||||
* CUSTOMIZATION HOOK — MOTION: `reverse` flips direction; speed via tailwind.
|
||||
*/
|
||||
export default function Marquee({
|
||||
items,
|
||||
reverse = false,
|
||||
className = "",
|
||||
}: {
|
||||
items: string[];
|
||||
reverse?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
const sep = "✦";
|
||||
const sequence = [...items];
|
||||
|
||||
return (
|
||||
<div className={`w-full max-w-full overflow-hidden ${className}`} aria-hidden>
|
||||
<div
|
||||
className={`marquee-track w-max ${
|
||||
reverse ? "animate-marquee-reverse" : "animate-marquee"
|
||||
}`}
|
||||
>
|
||||
{[0, 1].map((dup) => (
|
||||
<span key={dup} className="flex shrink-0">
|
||||
{sequence.map((item, i) => (
|
||||
<span key={`${dup}-${i}`} className="flex items-center">
|
||||
<span className="px-6">{item}</span>
|
||||
<span className="text-vermillion">{sep}</span>
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import SectionLabel from "@/components/SectionLabel";
|
||||
import Reveal from "@/components/Reveal";
|
||||
|
||||
/**
|
||||
* Editorial page masthead. Korean serif headline + huge English display
|
||||
* word, with magazine "NN / 05" spread numbering.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — CONTENT: ko / en / display / description / index.
|
||||
*/
|
||||
export default function PageHeader({
|
||||
ko,
|
||||
en,
|
||||
display,
|
||||
description,
|
||||
index,
|
||||
}: {
|
||||
ko: string;
|
||||
en: string;
|
||||
display?: string;
|
||||
description?: string;
|
||||
index: number;
|
||||
}) {
|
||||
return (
|
||||
<section className="relative overflow-hidden border-b border-ink bg-ivory">
|
||||
<div className="container-content pb-12 pt-14 sm:pb-16 sm:pt-20">
|
||||
<Reveal>
|
||||
<SectionLabel index={index} label={en} />
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-8 grid items-end gap-6 lg:grid-cols-12">
|
||||
<Reveal className="lg:col-span-8" delay={80}>
|
||||
<h1 className="headline-ko break-keep text-balance text-3xl leading-[1.05] text-ink sm:text-4xl lg:text-5xl">
|
||||
{ko}
|
||||
</h1>
|
||||
{/* When a custom `display` word is provided, render it at the full
|
||||
magazine scale. Otherwise fall back to `en` at the smaller
|
||||
`display-sm` scale so long words like "Standardization" never
|
||||
overflow the col-span-8 column. See LAYOUT_AUDIT #6 + #10. */}
|
||||
<p
|
||||
className={
|
||||
display
|
||||
? "display mt-2 break-keep text-vermillion"
|
||||
: "display-sm mt-2 break-keep text-vermillion"
|
||||
}
|
||||
aria-hidden
|
||||
>
|
||||
{display ?? en}
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
{description && (
|
||||
<Reveal className="lg:col-span-4" variant="right" delay={160}>
|
||||
<p className="border-l-2 border-ink pl-5 text-sm leading-relaxed text-ink-soft">
|
||||
{description}
|
||||
</p>
|
||||
</Reveal>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, type ElementType, type ReactNode } from "react";
|
||||
|
||||
type Variant = "up" | "left" | "right" | "scale";
|
||||
|
||||
/**
|
||||
* Scroll-triggered reveal. Uses a single IntersectionObserver (no deps).
|
||||
* Pairs with the `.reveal` / `.is-visible` rules in globals.css.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — MOTION:
|
||||
* variant → direction of entrance
|
||||
* delay → stagger (ms), applied as transition-delay
|
||||
*/
|
||||
export default function Reveal({
|
||||
children,
|
||||
variant = "up",
|
||||
delay = 0,
|
||||
as: Tag = "div",
|
||||
className = "",
|
||||
}: {
|
||||
children: ReactNode;
|
||||
variant?: Variant;
|
||||
delay?: number;
|
||||
as?: ElementType;
|
||||
className?: string;
|
||||
}) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const io = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("is-visible");
|
||||
io.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
|
||||
);
|
||||
|
||||
io.observe(el);
|
||||
return () => io.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Tag
|
||||
ref={ref}
|
||||
data-variant={variant}
|
||||
style={delay ? { transitionDelay: `${delay}ms` } : undefined}
|
||||
className={`reveal ${className}`}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Magazine spread numbering — "01 / 05" with an eyebrow label.
|
||||
* Sits in the corner of a section per editorial convention.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — CONTENT: index / total / label.
|
||||
*/
|
||||
export default function SectionLabel({
|
||||
index,
|
||||
total = 5,
|
||||
label,
|
||||
className = "",
|
||||
}: {
|
||||
index: number;
|
||||
total?: number;
|
||||
label: string;
|
||||
className?: string;
|
||||
}) {
|
||||
const pad = (n: number) => String(n).padStart(2, "0");
|
||||
return (
|
||||
<div className={`flex items-center gap-3 ${className}`}>
|
||||
<span className="corner-label">
|
||||
{pad(index)} <span className="text-ink-mute/50">/</span> {pad(total)}
|
||||
</span>
|
||||
<span className="h-px w-8 bg-ink/40" aria-hidden />
|
||||
<span className="kicker">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,332 @@
|
||||
# 디자인 시스템 — "Issue 01"
|
||||
|
||||
> 사물인터넷 표준 연구실 랜딩 페이지의 **정본(canonical) 디자인 레퍼런스**입니다.
|
||||
> 코드베이스를 다시 읽지 않고도 디자인 시스템을 이해할 수 있도록 작성했습니다.
|
||||
> 토큰의 실제 정의는 `tailwind.config.ts` 와 `app/globals.css`(`:root`)에,
|
||||
> 폰트 로딩은 `app/layout.tsx` 에 있습니다.
|
||||
|
||||
---
|
||||
|
||||
## 1. 한 줄 요약 (One-liner)
|
||||
|
||||
**연구실 웹사이트를 "한 권의 인쇄 잡지(Issue 01)"로 다룬다.**
|
||||
따뜻한 종이(ivory) 위에 가까운-검정 잉크(ink), 두 개의 편집 강조색
|
||||
(vermillion = MCM, cobalt = QUIC), 큰 세리프 디스플레이 타이포, 그리고 절제된
|
||||
스크롤 등장 모션으로 구성된 **고대비 매거진 스프레드** 시스템입니다. 소수의
|
||||
토큰에서 사이트 전체가 파생되며, 토큰 하나를 바꾸면 전 페이지에 전파됩니다.
|
||||
|
||||
---
|
||||
|
||||
## 2. 디자인 원칙 (Principles)
|
||||
|
||||
| 원칙 | 설명 |
|
||||
| --- | --- |
|
||||
| **편집 레이아웃 (Editorial layout)** | 모든 면을 잡지 스프레드처럼 다룬다. 섹션은 `01 / 05` 넘버링과 헤어라인 괘선으로 구획하고, 큰 디스플레이 숫자가 카드를 앵커한다. |
|
||||
| **큰 고대비 타이포 (Big high-contrast type)** | `ink`(#0A0A0A) on `ivory`(#F5F1E8)의 강한 대비. 히어로는 `clamp()` 기반 거대 세리프(Fraunces)로 잡지 표지 스케일을 만든다. |
|
||||
| **의도적 여백 (Intentional whitespace)** | 종이처럼 숨 쉬게 둔다. 섹션 패딩은 `py-16 sm:py-24`, 그리드는 `gap-px bg-line` 헤어라인으로 분리해 장식 테두리를 최소화한다. |
|
||||
| **움직임은 절제 (Restrained motion)** | 콘텐츠는 한 번 부드럽게 자리잡고 멈춘다. 튀거나 반복되지 않으며, 단일 이징으로 페이지 전체가 일관된 호흡을 갖는다. |
|
||||
| **콘텐츠 우선 (Content first)** | 모든 편집 데이터는 각 페이지 상단 `// CUSTOMIZATION HOOK` 배열에 모은다. 모션·장식은 정보를 전달하는 수단이지 그 자체가 목적이 아니다. |
|
||||
| **한/영 혼식 (KO/EN bilingual setting)** | 한국어 세리프(Noto Serif KR) 헤드라인과 영어 디스플레이 세리프(Fraunces)를 짝지어, 국문 제목 + 영문 디스플레이 단어의 매거진 바이링구얼 조판을 만든다. |
|
||||
| **의미 있는 색 (Semantic accent pairing)** | 두 강조색은 장식이 아니라 연구 두 축을 인코딩한다 — **vermillion = MCM/메타버스/저널(홀수)**, **cobalt = QUIC/전송/학회(짝수)**. |
|
||||
|
||||
---
|
||||
|
||||
## 3. 컬러 토큰 (Color Tokens)
|
||||
|
||||
`tailwind.config.ts` 의 `theme.extend.colors` 에 정의되고, 동일 값이
|
||||
`app/globals.css` 의 `:root` CSS 변수로 미러링됩니다. **두 곳을 함께** 바꾸세요
|
||||
(순수 CSS 그레인·그라디언트가 CSS 변수를 재사용하기 때문).
|
||||
|
||||
| Tailwind 토큰 | Hex | CSS 변수 | 역할 / 사용 규칙 |
|
||||
| --- | --- | --- | --- |
|
||||
| `ink` (DEFAULT) | `#0A0A0A` | `--ink` | 본문 텍스트, 괘선·테두리, 다크 면(填) |
|
||||
| `ink-soft` | `#262420` | — | 2차 본문 텍스트 |
|
||||
| `ink-mute` | `#6B655B` | — | 3차 텍스트, 숫자, 캡션 |
|
||||
| `ivory` | `#F5F1E8` | `--ivory` | 페이지 기본 배경(따뜻한 종이) |
|
||||
| `paper` | `#ECE6D6` | `--paper` | 인셋/호버용 어두운 종이 |
|
||||
| `line` | `#D8D1C0` | `--line` | 헤어라인 그리드 간격(`gap-px bg-line`) |
|
||||
| `vermillion` (DEFAULT) | `#D9342B` | `--vermillion` | **MCM 강조(Hot)** · 메타버스 · 저널 · 홀수 항목 |
|
||||
| `vermillion-dark` | `#A8231C` | — | vermillion 의 호버/심도(dim) 변형 |
|
||||
| `cobalt` (DEFAULT) | `#1B3A8A` | `--cobalt` | **QUIC 강조(Cool)** · 전송 · 학회 · 짝수 항목 |
|
||||
| `cobalt-dark` | `#122863` | — | cobalt 의 호버/심도(dim) 변형 |
|
||||
| `brand`, `accent` | (별칭) | — | **레거시 호환 전용.** 신규 코드에서 사용 금지 |
|
||||
|
||||
### 개념적 역할 매핑 (Naming note)
|
||||
|
||||
설계 논의에서 쓰던 개념 명칭과 실제 코드 토큰의 매핑입니다. **코드에서는 항상 실제
|
||||
토큰명을 사용하세요.**
|
||||
|
||||
```
|
||||
개념 명칭 → 실제 코드 토큰
|
||||
─────────────────────────────────────────
|
||||
accent.ink → ink (주 잉크/텍스트)
|
||||
종이(paper) 계열 → ivory, paper, line
|
||||
accent.ko (국문) → headline-ko 클래스가 font-serif-ko 로 처리(색은 ink)
|
||||
accent.ko-warm(강조) → vermillion (Hot, MCM/저널)
|
||||
accent.glow / dim → vermillion-dark / cobalt-dark (각 강조색의 dark 변형)
|
||||
QUIC 강조 → cobalt (Cool, 전송/학회)
|
||||
```
|
||||
|
||||
> 별도의 `accent.glow`(발광)나 중립 회색 팔레트는 현재 정의돼 있지 않습니다. 강조가
|
||||
> 필요하면 vermillion/cobalt 를, 심도가 필요하면 그 `-dark` 변형을 쓰세요.
|
||||
|
||||
### 헤어라인 그리드 관용구
|
||||
|
||||
```
|
||||
gap-px bg-line → 부모 그리드의 1px 간격이 line 색으로 드러남
|
||||
└ 각 자식에 bg-ivory → 인쇄 괘선 효과(추가 border 불필요)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 타이포 시스템 (Typography)
|
||||
|
||||
`app/layout.tsx` 에서 `next/font/google` 로 로드해 CSS 변수로 노출하고,
|
||||
`tailwind.config.ts` 의 `fontFamily` 에서 패밀리로 묶습니다.
|
||||
|
||||
| 패밀리 클래스 | CSS 변수 | 서체 | 용도 |
|
||||
| --- | --- | --- | --- |
|
||||
| `font-display` | `--font-display` | **Fraunces** (영문 세리프, 300–600 + italic) | 페이지 히어로/매거진 제목, 이탤릭 강조어, 숫자 |
|
||||
| `font-serif-ko` | `--font-serif-ko` | **Noto Serif KR** (400/600/700) | 한국어 디스플레이/헤드라인 |
|
||||
| `font-sans` | `--font-sans` | **Pretendard**(선호) → `Inter`(웹 폴백) | 본문, 키커, UI |
|
||||
| *(mono)* | — | **미설정** | 코드/수치/라벨용 모노스페이스는 현재 미연동 — §10 FAQ 참고 |
|
||||
|
||||
> 본문 sans 스택은 `tailwind.config.ts` 에서 `Pretendard → var(--font-sans)(Inter)
|
||||
> → ui-sans-serif → system-ui → Apple SD Gothic Neo → Malgun Gothic` 순입니다.
|
||||
> Pretendard 는 Google Fonts 로 제공되지 않아 Inter 가 웹 폴백으로 로드됩니다.
|
||||
|
||||
### 컴포넌트 타입 클래스 (`app/globals.css`, `@layer components`)
|
||||
|
||||
ad-hoc 유틸리티 스택보다 아래 시맨틱 클래스를 우선 사용하세요.
|
||||
|
||||
| 클래스 | 결과 |
|
||||
| --- | --- |
|
||||
| `.display` | 매거진 표지급 영문 세리프, `text-display`, 가는 굵기, optical sizing |
|
||||
| `.headline-ko` | 한국어 세리프 헤드라인, semibold, 좁은 자간 |
|
||||
| `.kicker` | 소문자 대문자화 아이브로우, `tracking-caps`(0.28em), 뮤트 |
|
||||
| `.corner-label` | tabular-nums 스프레드 넘버링("01 / 05") |
|
||||
| `.pull-quote` | 큰 이탤릭 세리프 인용구 |
|
||||
| `.container-content` | `max-w-content`(78rem) 중앙 정렬 + 반응형 패딩 |
|
||||
| `.rule` / `.spread-card` / `.draw-underline` | 헤어라인 괘선 / 인셋 카드 / 호버 밑줄 드로우 |
|
||||
|
||||
### 스케일 (clamp 기반)
|
||||
|
||||
뷰포트에 따라 브레이크포인트 없이 유체적으로 커집니다.
|
||||
|
||||
| 단계 | 토큰/클래스 | 값 (clamp) | 용도 |
|
||||
| --- | --- | --- | --- |
|
||||
| 1 — Hero | `text-display` (`.display`) | `clamp(3rem, 10vw, 9rem)` / lh 0.92 | 커버 디스플레이 |
|
||||
| 2 — Sub-hero | `text-display-sm` | `clamp(2.25rem, 6vw, 4.5rem)` / lh 0.98 | 보조 디스플레이 |
|
||||
| 3 — Page H1 | (PageHeader 내) | `clamp` 없이 `text-4xl → lg:text-6xl` | 페이지 마스트헤드 한글 제목 |
|
||||
| 4 — Section H | `text-2xl ~ text-3xl` | 고정 | 섹션/카드 헤드라인 |
|
||||
| 5 — Lead | `text-base ~ text-lg` | 고정 | 리드 문단 |
|
||||
| 6 — Body | `text-sm` | 고정 | 본문 |
|
||||
| 7 — Caption | `text-xs` | 고정 | 캡션/메타 |
|
||||
| 8 — Kicker | `.kicker` (`text-[0.7rem]`) | 고정 | 아이브로우/라벨 |
|
||||
|
||||
> 인트로 히어로는 인라인으로 `text-[clamp(2.5rem,8vw,5.5rem)]` 를 쓰기도 합니다.
|
||||
> 새 거대 제목은 가급적 `text-display` / `text-display-sm` 토큰을 재사용하세요.
|
||||
|
||||
---
|
||||
|
||||
## 5. 모션 원칙 (Motion)
|
||||
|
||||
모션은 **조용하고 편집적**입니다. 콘텐츠가 자리잡을 뿐, 튀지 않습니다. 타이밍 토큰은
|
||||
`app/globals.css`(`--reveal-*`)와 `tailwind.config.ts`(`animation`)에 있습니다.
|
||||
|
||||
### 토큰
|
||||
|
||||
| 종류 | 토큰 | 값 | 비고 |
|
||||
| --- | --- | --- | --- |
|
||||
| Duration · reveal | `--reveal-duration` | `820ms` | 스크롤 등장 기본 |
|
||||
| Duration · medium | (Tailwind `duration-500`) | `500ms` | 호버 색 전환 |
|
||||
| Duration · marquee | `animate-marquee` 외 | `32s` / `45s`(reverse) / `60s`(slow) | 러닝 티커 |
|
||||
| Easing · editorial-out | `--reveal-ease` | `cubic-bezier(0.16, 1, 0.3, 1)` | 부드러운 감속(전역 단일 이징) |
|
||||
| Keyframes | `stream-dash` / `node-pulse` | `6s` / `4s` | HeroComposition SVG |
|
||||
|
||||
### 원칙
|
||||
|
||||
1. **스크롤 등장, 단 한 번.** `.reveal` 이 뷰포트 진입 시 fade + translate 후 유지된다(`Reveal` 컴포넌트, IntersectionObserver, 라이브러리 없음).
|
||||
2. **단일 이징.** 전부 `editorial-out` 으로 ~820ms — 페이지 전체가 한 호흡.
|
||||
3. **방향이 레이아웃을 인코딩.** 좌측 컬럼은 왼쪽에서, 우측은 오른쪽에서, 히어로 아트는 scale 로 들어온다.
|
||||
4. **마퀴는 앰비언트.** 32–60s 연속 루프는 "관찰 대상"이 아니라 마스트헤드 배경.
|
||||
|
||||
### 사용처 가이드
|
||||
|
||||
| 모션을 **쓸 때** | 모션을 **안 쓸 때** |
|
||||
| --- | --- |
|
||||
| 섹션/카드가 처음 뷰포트에 들어올 때 `Reveal` | 동일 뷰 안에서 반복 토글되는 상태 |
|
||||
| 통계 수치 등장(`Counter`) | 본문 가독성에 영향을 주는 텍스트 |
|
||||
| 키워드/서지 마스트헤드(`Marquee`, 페이지당 1개) | 정보 전달을 모션에 의존(접근성 위배) |
|
||||
| 호버 색 전환(`duration-500`) | `prefers-reduced-motion: reduce` 사용자(자동 비활성화) |
|
||||
|
||||
---
|
||||
|
||||
## 6. 공유 컴포넌트 카탈로그
|
||||
|
||||
`components/` 의 신규 컴포넌트. 각 파일에 `CUSTOMIZATION HOOK` 주석이 있습니다.
|
||||
|
||||
### `Reveal` — 스크롤 등장 모션 래퍼
|
||||
|
||||
스크롤 진입 시 자식을 fade + translate. 모든 모션의 기본 프리미티브.
|
||||
|
||||
```tsx
|
||||
Reveal(props: {
|
||||
children: ReactNode;
|
||||
variant?: "up" | "left" | "right" | "scale"; // 진입 방향, 기본 "up"
|
||||
delay?: number; // 스태거(ms), transition-delay 로 적용
|
||||
as?: ElementType; // 렌더 태그, 기본 "div"
|
||||
className?: string;
|
||||
})
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Reveal variant="left" delay={120}>
|
||||
<article>…</article>
|
||||
</Reveal>
|
||||
```
|
||||
|
||||
### `SectionLabel` — 매거진 섹션 넘버링
|
||||
|
||||
페이지 *내부* 섹션을 `01 / 05` 넘버링 + 아이브로우로 표시.
|
||||
|
||||
```tsx
|
||||
SectionLabel(props: {
|
||||
index: number;
|
||||
total?: number; // 기본 5
|
||||
label: string; // 영문 아이브로우
|
||||
className?: string;
|
||||
})
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Reveal>
|
||||
<SectionLabel index={2} label="Researchers" />
|
||||
</Reveal>
|
||||
```
|
||||
|
||||
### `Counter` — 0 → 값 카운트업 숫자
|
||||
|
||||
스크롤 진입 시 0에서 `value` 까지 easeOutExpo 로 틱업(rAF, 라이브러리 없음).
|
||||
`prefers-reduced-motion` 이면 즉시 최종값.
|
||||
|
||||
```tsx
|
||||
Counter(props: {
|
||||
value: number;
|
||||
duration?: number; // 기본 1600ms
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
className?: string;
|
||||
})
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Counter value={5} suffix="+" className="display block text-ink" />
|
||||
```
|
||||
|
||||
### `Marquee` — 키워드 러닝 티커
|
||||
|
||||
키워드/서지/기구명을 연속 스크롤하는 마스트헤드 배너. 트랙을 2배로 렌더해
|
||||
`-50%` 이동이 매끈하게 루프. `aria-hidden`(장식).
|
||||
|
||||
```tsx
|
||||
Marquee(props: {
|
||||
items: string[];
|
||||
reverse?: boolean; // 진행 방향 반전
|
||||
className?: string;
|
||||
})
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Reveal>
|
||||
<Marquee items={keywords} reverse
|
||||
className="border-y border-ink bg-ink py-3 font-display text-xl text-ivory" />
|
||||
</Reveal>
|
||||
```
|
||||
|
||||
### `HeroComposition` — 추상 편집 히어로 (인트로 전용)
|
||||
|
||||
인라인 SVG 일러스트(에셋 없음). **MCM = 상호연결 노드 성좌(vermillion, `node-pulse`)**,
|
||||
**QUIC = 다중화 스트림 흐름(cobalt, `stream-dash`)**. 색은 CSS 변수 상속, 기하만 내부 정의.
|
||||
|
||||
```tsx
|
||||
HeroComposition(props: { className?: string })
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Reveal variant="scale" delay={200} className="lg:col-span-5">
|
||||
<HeroComposition className="w-full" />
|
||||
</Reveal>
|
||||
```
|
||||
|
||||
> **함께 쓰는 관용구:** 모든 페이지는 `PageHeader`(`components/PageHeader.tsx`)로 시작
|
||||
> → (선택) `Marquee` 밴드 1개 → 통계 밴드(`Counter` ×3, `gap-px bg-line sm:grid-cols-3`)
|
||||
> → `Reveal`+`SectionLabel` 로 여는 콘텐츠 섹션. 행 내 스태거는 `delay={i * 80}`~`120`.
|
||||
|
||||
---
|
||||
|
||||
## 7. 페이지별 디자인 차이 (잡지 비유)
|
||||
|
||||
| 라우트 | index | 잡지에서의 역할 | 특징 |
|
||||
| --- | --- | --- | --- |
|
||||
| `/intro` | 1 | **커버 스프레드** | 거대 한/영 히어로 + `HeroComposition` 아트, 키워드 `Marquee`, 통계, 풀쿼트, 두 Thrust 비교 스프레드 |
|
||||
| `/members` | 2 | **기고자 페이지(Contributors)** | 인원 통계 카운터, PI 피처 스프레드, 박/석/학부 그룹을 헤어라인 그리드 + 교차 강조색으로 |
|
||||
| `/publications` | 3 | **목차/서지(Index & Bibliography)** | 서지 `Marquee`, 파생 통계, 번호 매긴 편집 목록(저널=vermillion, 학회=cobalt) |
|
||||
| `/lectures` | 4 | **강의 카탈로그(Course catalog)** | 3개 강의 카드(테두리·강조색 호버 면), 코드·KO/EN 제목·레벨 칩 |
|
||||
| `/standardization` | 5 | **표준화 바이라인(Standards byline)** | 기구 `Marquee`, 통계, 기관별 2열 기여 그리드, 기관마다 강조색 배정 |
|
||||
|
||||
---
|
||||
|
||||
## 8. 새 페이지 추가 체크리스트
|
||||
|
||||
1. **마스트헤드:** `PageHeader` 로 시작 — `ko`, `en`, 라우트 `index`(intro 1 … standardization 5) 부여.
|
||||
2. **콘텐츠 분리:** 편집 데이터 전부를 파일 상단 `// CUSTOMIZATION HOOK` 배열에 둔다.
|
||||
3. **레이아웃:** 헤어라인 그리드 관용구(`gap-px bg-line` + 자식 `bg-ivory`)로 구성, 섹션은 `border-b border-ink` 로 구획.
|
||||
4. **모션:** 등장 가치가 있는 블록을 `Reveal` 로 감싸고, §2 페어링 규칙대로 vermillion/cobalt 를 교차 배정.
|
||||
5. **토큰만 사용:** 디자인 토큰(`ink`/`ivory`/`paper`/`line`/`vermillion`/`cobalt`)과 컴포넌트 타입 클래스만 사용 — 임의 회색·팔레트 밖 hex 금지.
|
||||
|
||||
---
|
||||
|
||||
## 9. 접근성 (a11y) 고려사항
|
||||
|
||||
- **대비비 (Contrast).** 본문은 `ink`(#0A0A0A) on `ivory`(#F5F1E8)로 WCAG AAA 수준의 강한 대비. 보조 텍스트는 `ink-soft`/`ink-mute` 까지만 낮추고, 작은 본문에 `ink-mute` 단독 사용은 지양. 강조색 위 텍스트는 항상 `ivory`(흰 종이색)로 뒤집어 대비 확보.
|
||||
- **모션 줄임 (Reduced motion).** `@media (prefers-reduced-motion: reduce)` 에서 `.reveal`·마퀴·`[class*="animate-"]`·smooth scroll 을 전부 비활성화. `Counter` 도 즉시 최종값으로 표기. **모션에 정보를 싣지 말 것**(원칙 §5).
|
||||
- **키보드 포커스 (Keyboard focus).** 링크/버튼은 시맨틱 요소(`<Link>`, `<button>`)를 사용해 기본 포커스 링을 유지. 호버 전용 정보(예: 색 전환)에 의미를 담지 말고, 콘텐츠는 호버 없이도 읽히게 둔다.
|
||||
- **장식 요소.** `Marquee`·`HeroComposition` 의 텍스트 주석 등 장식은 `aria-hidden` 또는 `role="img"` + `aria-label` 로 스크린리더 노이즈를 차단.
|
||||
- **언어 표시.** 루트 `<html lang="ko">`. 한/영 혼식이지만 문서 기본 언어는 한국어.
|
||||
|
||||
---
|
||||
|
||||
## 10. 자주 묻는 질문 (FAQ)
|
||||
|
||||
**Q. 컬러를 시즌별(Issue 02 등)로 바꾸고 싶어요.**
|
||||
A. 강조색 2개(`vermillion`, `cobalt`)와 그 `-dark` 변형만 교체하면 됩니다. 단,
|
||||
`tailwind.config.ts` 의 `theme.extend.colors` **와** `app/globals.css` 의 `:root`
|
||||
CSS 변수(`--vermillion`, `--cobalt`)를 **함께** 바꾸세요(그레인/그라디언트/SVG가 변수를
|
||||
참조). 종이 톤을 바꾸려면 `ivory`/`paper`/`line` 을 같은 방식으로 조정합니다. 의미
|
||||
페어링(vermillion=MCM, cobalt=QUIC)을 유지하면 페이지 전반의 강조색 배정 로직을
|
||||
건드리지 않아도 됩니다.
|
||||
|
||||
**Q. 모션 줄이기(prefers-reduced-motion) 대응은 되어 있나요?**
|
||||
A. 네. `app/globals.css` 의 미디어 쿼리에서 reveal/마퀴/keyframe/smooth scroll 을
|
||||
모두 끄고, `Counter` 는 즉시 최종값을 표시합니다. 새 모션을 추가할 때도 이 쿼리에
|
||||
비활성화 규칙을 넣고, 정보를 모션에만 의존시키지 마세요.
|
||||
|
||||
**Q. 폰트를 한국어 웹폰트로 교체할 수 있나요?**
|
||||
A. 본문 sans 는 이미 **Pretendard 를 1순위**로 두고 Inter 를 웹 폴백으로 로드합니다
|
||||
(`tailwind.config.ts` sans 스택, `app/layout.tsx`). Pretendard 를 self-host 하거나
|
||||
`next/font/local` 로 추가하면 폴백 없이 적용됩니다. 한국어 헤드라인 세리프(Noto
|
||||
Serif KR)나 영문 디스플레이(Fraunces)를 바꾸려면 `app/layout.tsx` 의 `next/font`
|
||||
로더를 교체하고 `--font-serif-ko` / `--font-display` 변수명을 유지하면 됩니다.
|
||||
|
||||
**Q. 코드/수치용 모노스페이스 폰트는 어디 있나요?**
|
||||
A. 현재 시스템에는 **모노 패밀리가 연동돼 있지 않습니다.** 수치는 `font-display`
|
||||
(Fraunces) + `tabular-nums`, 라벨은 `.kicker`/`.corner-label` 로 처리합니다. 모노가
|
||||
필요하면 `app/layout.tsx` 에 `IBM_Plex_Mono`(또는 `Geist_Mono`)를 `next/font` 로
|
||||
추가해 `--font-mono` 변수로 노출하고, `tailwind.config.ts` 의 `fontFamily.mono` 에
|
||||
등록하세요. (소스 변경이 필요하므로 본 문서는 현재 상태만 기록합니다.)
|
||||
|
||||
**Q. `brand` / `accent` 토큰은 뭔가요? 써도 되나요?**
|
||||
A. 이전(비-편집) 디자인의 **레거시 호환 별칭**입니다. 남은 stray 클래스가 깨지지
|
||||
않게 두었을 뿐, **신규 코드에서는 사용하지 마세요.** 항상 `vermillion`/`cobalt`/`ink`
|
||||
등 정식 토큰을 쓰세요.
|
||||
@@ -0,0 +1,350 @@
|
||||
# Layout Issue Catalogue — refer_landing_page
|
||||
|
||||
**Date:** 2026-06-16
|
||||
**Scope:** all `app/**/page.tsx`, `components/*.tsx`, `app/globals.css`, `tailwind.config.ts`, `app/intro/_components/HeroComposition.tsx`.
|
||||
**Method:** source review + live dev render (`npx next dev -p 4510`, all 5 routes, 200 OK). No browser available so visual verification is by DOM + class composition analysis; defects that can be derived from class+CSS math are flagged as **Verified**, defects that would need a viewport to be 100% sure are flagged as **Likely**.
|
||||
|
||||
Severity legend: 🔴 bug (visible defect) · 🟠 likely (probable defect worth fixing) · 🟡 polish (improvement, not a bug).
|
||||
|
||||
---
|
||||
|
||||
## 1. 🔴 `border-current/30` and `border-current/20` do NOT actually follow the current text color
|
||||
|
||||
**Files:**
|
||||
- `app/lectures/page.tsx:86` — `<p ... className="mt-4 inline-flex w-fit border border-current/30 px-3 py-1 ..."> ... level ...`
|
||||
- `app/lectures/page.tsx:90` — `<p ... className="mt-6 border-t border-current/20 pt-6 ...">`
|
||||
- `app/standardization/page.tsx:145` — `<p ... className="mt-4 inline-flex w-fit border border-current/30 ...">`
|
||||
- `app/standardization/page.tsx:150` — `<ul ... className="mt-6 space-y-4 border-t border-current/20 pt-6 ...">`
|
||||
- `app/intro/page.tsx:246` — `<li className="flex gap-3 border-t border-current/20 pt-3">` (thrust card points)
|
||||
|
||||
**What's wrong:** `currentColor` is a CSS keyword, not a hex. Tailwind's opacity-modifier syntax (`border-current/30`) compiles the color to a *fixed* fallback gray (`rgb(229 231 235 / 0.3)`), not the actual inherited text color. The intent is clearly "in the rest state, a 30%-opacity border in the card's own text color; on hover (when text becomes ivory), the border becomes 30%-opacity ivory." In practice the border stays a fixed gray that does not shift on hover.
|
||||
|
||||
**Fix direction:**
|
||||
- Replace `border-current/30` with `border-vermillion/30` (or `border-cobalt/30`) for the static state, plus a `group-hover:border-ivory/30` to honor the hover swap. Or:
|
||||
- Use a plain `border-current` and let the hover state's `text-ivory` carry it (no opacity).
|
||||
- Same for the `border-current/20` rules.
|
||||
|
||||
**Confidence:** Verified. The CSS that Tailwind emits is a static color, not a `currentColor` cascade.
|
||||
|
||||
---
|
||||
|
||||
## 2. 🔴 `HeroComposition` node pulse animation drifts the circles off-position (SVG transform-origin bug)
|
||||
|
||||
**File:** `app/intro/_components/HeroComposition.tsx:82-93`
|
||||
|
||||
```tsx
|
||||
{nodes.map((n, i) => (
|
||||
<circle key={i}
|
||||
cx={n.x} cy={n.y}
|
||||
r={i % 2 === 0 ? 9 : 6}
|
||||
className="animate-node-pulse"
|
||||
style={{ animationDelay: `${i * 0.5}s`, transformOrigin: `${n.x}px ${n.y}px` }}
|
||||
/>
|
||||
))}
|
||||
```
|
||||
|
||||
Combined with the keyframe in `tailwind.config.ts:96-99`:
|
||||
```
|
||||
node-pulse: { 0%, 100%: { opacity: 0.35, transform: "scale(1)" }, 50%: { opacity: 1, transform: "scale(1.12)" } }
|
||||
```
|
||||
|
||||
**What's wrong:** SVG `<circle>` elements have a CSS `transform-box` default of `view-box` in modern Chrome/Safari but `fill-box` (or `border-box` historically) in some Firefox versions. The inline `transformOrigin: '70px 90px'` is in the element's own coordinate space, NOT relative to the circle's bounding box. When `transform: scale(1.12)` is applied at the 50% keyframe, the circle scales from the SVG user-units origin `(0,0)` instead of from its own `(cx, cy)`. In Chrome with `transform-box: view-box` (current default), the circle stays roughly in place (origin = SVG user origin = `70,90` if you set the inline `transformOrigin` to that), but Firefox's older default causes the circle to translate by `0.12 * 70 = 8.4px` to the right and `0.12 * 90 = 10.8px` down on every pulse.
|
||||
|
||||
**Fix direction:** add `transform-box: fill-box; transform-origin: center;` to the circle (either via a new utility in `globals.css` or inline `style={{ transformBox: 'fill-box', transformOrigin: 'center' }}`). Then `scale(1.12)` will scale the circle around its own center regardless of `cx`/`cy`.
|
||||
|
||||
**Confidence:** Likely (Chrome 79+ default `view-box` mostly masks this; Firefox pre-122 / pre-2024 still drifts). Worth fixing because the docstring in `DESIGN.md` calls out node-pulse as a key visual.
|
||||
|
||||
---
|
||||
|
||||
## 3. 🔴 `HeroComposition` bottom-right annotation text overlaps the QUIC stream curves
|
||||
|
||||
**File:** `app/intro/_components/HeroComposition.tsx:99-109`
|
||||
|
||||
```tsx
|
||||
<text x="360" y="356" textAnchor="end" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
|
||||
QUIC · STREAMS
|
||||
</text>
|
||||
```
|
||||
|
||||
The four QUIC stream paths are rendered with `y = 250 + i * 30` (i = 0..3 → 250, 280, 310, 340) and end points at `360, y-20` (so 230, 260, 290, 320). The curves use control points up to `y+40` (290, 320, 350, **380**). The bottom-right text is at `y=356`. The 4th stream's curve crosses through the text region from roughly `(240, 380)` to `(360, 320)`, which is the same y-band the text sits in.
|
||||
|
||||
**Fix direction:** move the text up to `y=374` (clear of stream 4's body) or move the text outside the frame entirely (e.g. add a small white-rect "chip" behind it) — simplest: shift the text `y` to ~`24` from the bottom and ensure no stream path control point enters that band. Or reduce the number of streams to 3.
|
||||
|
||||
**Confidence:** Verified by SVG geometry.
|
||||
|
||||
---
|
||||
|
||||
## 4. 🔴 `HeroComposition` outer frame stroke is clipped at the SVG edges
|
||||
|
||||
**File:** `app/intro/_components/HeroComposition.tsx:43-51`
|
||||
|
||||
```tsx
|
||||
<rect x="6" y="6" width="368" height="368" strokeWidth="1.5" />
|
||||
```
|
||||
|
||||
A `strokeWidth` of `1.5` means the stroke straddles the path: 0.75px outside, 0.75px inside. With the rect at `x=6, y=6` inside a `viewBox="0 0 380 380"`, the 0.75px outer half is still inside the viewBox (`x=6 - 0.75 = 5.25` is still > 0). So this is actually fine — I had it wrong on the first pass. **No fix needed.** Keeping it here so it doesn't get re-flagged.
|
||||
|
||||
**Confidence:** Verified. Frame is fine.
|
||||
|
||||
---
|
||||
|
||||
## 5. 🟠 Footer has excessive top whitespace (`mt-24` × `flex-1` main)
|
||||
|
||||
**File:** `components/Footer.tsx:15`
|
||||
|
||||
```tsx
|
||||
<footer className="mt-24 border-t border-ink bg-ink text-ivory">
|
||||
```
|
||||
|
||||
`app/layout.tsx:54-57`:
|
||||
```tsx
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<Header />
|
||||
<main className="flex-1">{children}</main>
|
||||
<Footer />
|
||||
</body>
|
||||
```
|
||||
|
||||
**What's wrong:** `<main>` is `flex-1`, so it grows to push the footer to the bottom of the viewport on short pages. Adding `mt-24` (6rem) on the footer puts 6rem of empty space *between* the main content and the footer on every page — but only visible on pages that don't fill the viewport. The intro page is long enough that the footer sits at the natural end and the `mt-24` collapses; on short pages (`/lectures`) the gap shows up.
|
||||
|
||||
**Fix direction:** drop `mt-24` from `<footer>` (the `border-t border-ink` already provides visual separation; main content already has its own `py-16 sm:py-24` section padding). If a deliberate breathing room is wanted, use `mt-0 lg:mt-8` (no margin on mobile, small on desktop). The current value is 2-3× what's needed.
|
||||
|
||||
**Confidence:** Verified. `flex-1` + `mt-24` is a double-space.
|
||||
|
||||
---
|
||||
|
||||
## 6. 🟠 PageHeader `<h1>` has no `word-break: keep-all` / `text-wrap: balance` for Korean titles
|
||||
|
||||
**File:** `components/PageHeader.tsx:32-34`
|
||||
|
||||
```tsx
|
||||
<h1 className="headline-ko text-4xl leading-[1.05] text-ink sm:text-5xl lg:text-6xl">
|
||||
{ko}
|
||||
</h1>
|
||||
```
|
||||
|
||||
**What's wrong:** Korean text is mostly space-free, so the browser breaks at any character. The longer PageHeader titles (`"멀티에이전트 오케스트레이션"`, `"메타버스 상호운용성과 표준"`, `"표준화 활동"`) can break at awkward points at the 4xl/sm:5xl/lg:6xl scale. For a magazine aesthetic, line breaks should fall at natural word boundaries (which in CJK is between phrases separated by spaces).
|
||||
|
||||
**Fix direction:** add `break-keep` (Tailwind utility for `word-break: keep-all`) to the h1. Optionally also `text-balance` for visual balance. Cost: 2 utility classes.
|
||||
|
||||
**Confidence:** Likely. The shorter titles (`"논문"`, `"강의"`) won't trigger this; the longer ones on `/lectures` and `/intro` will.
|
||||
|
||||
---
|
||||
|
||||
## 7. 🟠 HeroComposition "in Motion" word is in a 12-character tail that gets line-broken by `<p className="display">` clamp
|
||||
|
||||
**File:** `app/intro/page.tsx:96-99`
|
||||
|
||||
```tsx
|
||||
<p className="display mt-3 leading-[0.9]" aria-hidden>
|
||||
Standards
|
||||
<span className="block italic text-cobalt">in Motion</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
**What's wrong:** "Standards" alone at `clamp(3rem, 10vw, 9rem)` on a `lg:col-span-7` column (~54rem wide) fits on one line, "in Motion" is in a `block` so it forces onto a new line. The ` ` in "in Motion" prevents breaking inside that phrase. The visual effect is two stacked display lines. The current `text-display` font size is `clamp(3rem, 10vw, 9rem)` — at 1280px viewport, 10vw = 128px, capped at 9rem (144px). "Standards" at 144px in Fraunces is roughly 11× glyph width × 0.55em = 870px wide. The col-span-7 column is 7/12 × 78rem (with 12px padding × 2) = 45rem ≈ 720px. **"Standards" overflows the column by ~150px.** The `display` text will visually intrude into the col-span-5 SVG column or even cause horizontal overflow.
|
||||
|
||||
**Fix direction:** reduce the upper cap of `display` from `9rem` to `clamp(3rem, 8vw, 7rem)` in `tailwind.config.ts:74`, or set `lg:col-span-8` for the headline column (gives it 8/12 × ~78rem = ~52rem ≈ 832px) — but the layout is `lg:grid-cols-12 gap-10` and the col-span-5 is hard-wired, so the cleaner fix is the font-size cap. Or break "Standards" into two lines: `<span className="block">Stan</span><span>dards</span>` — but this changes the design intent. Recommended: cap `display` at 7rem or 7.5rem.
|
||||
|
||||
**Confidence:** Likely. Need a real viewport to measure, but the math says it overflows at 1280+. The user has not yet given explicit viewport feedback, so the safer fix is to reduce the cap, not the layout.
|
||||
|
||||
---
|
||||
|
||||
## 8. 🟠 Member grid: 3rd group has 2 members in a 3-col grid → ghost cell with border-line only
|
||||
|
||||
**File:** `app/members/page.tsx:151`
|
||||
|
||||
```tsx
|
||||
<div className="mt-px grid gap-px bg-line sm:grid-cols-2 lg:grid-cols-3">
|
||||
{g.members.map((m, mi) => ( ... ))}
|
||||
</div>
|
||||
```
|
||||
|
||||
The third group `"학부 연구원"` (line 41-49) has 2 members. With `lg:grid-cols-3`, 2 cards in 3 columns leaves a 1-cell-wide column with only the `bg-line` 1px background showing. The empty cell will appear as a thin ivory rectangle bounded by 1px lines on the right and bottom, next to the last filled card. Visually it looks like a half-finished row.
|
||||
|
||||
**Fix direction:** change `lg:grid-cols-3` → `lg:grid-cols-2` (uniform 2-col across all groups), or use `auto-fill` so the grid auto-fits, or add a `flex-1` invisible filler div. The simplest: `lg:grid-cols-2` (consistent with the 2-col advisor grid above it).
|
||||
|
||||
**Confidence:** Verified. Group 3 has exactly 2 placeholder members.
|
||||
|
||||
---
|
||||
|
||||
## 9. 🟠 `Reveal` initial `opacity: 0` — no JS / no-JS fallback for content visibility
|
||||
|
||||
**File:** `app/globals.css:104-110`
|
||||
|
||||
```css
|
||||
.reveal { opacity: 0; transform: translateY(28px); ... }
|
||||
```
|
||||
|
||||
**What's wrong:** Every page wraps its content in `<Reveal>` (with default `variant="up"`). If JavaScript fails to load (or fails to hydrate due to a network error on a Google Font CSS request, which we've already seen fail in this very environment — see `next build` log: `request to https://fonts.googleapis.com/... failed, reason:`), the user sees a fully blank page because every block stays at `opacity: 0`. There is no `<noscript>` rule that sets `opacity: 1` for non-JS users, and no progressive enhancement (e.g. `noscript` tag, or a `html.no-js .reveal { opacity: 1 }` pattern).
|
||||
|
||||
This is a real concern because the build log already shows font fetches failing in this environment; if the React hydration also fails, the user sees nothing.
|
||||
|
||||
**Fix direction:** add to `app/globals.css`:
|
||||
```css
|
||||
html.no-js .reveal { opacity: 1; transform: none; transition: none; }
|
||||
```
|
||||
and in `app/layout.tsx` `<html>` tag, default the className to include `no-js`, then in a small inline `<script>` (or in `Header.tsx`'s `"use client"`) strip the class on mount. Alternatively use the simpler `motion-safe:` / progressive approach: add `@media (prefers-reduced-motion: reduce)` to also force `opacity: 1` (already in CSS at line 133-146) — but reduced-motion is not the same as no-JS.
|
||||
|
||||
The simplest robust fix: add `<noscript><style>.reveal { opacity: 1 !important; transform: none !important; }</style></noscript>` in `app/layout.tsx`.
|
||||
|
||||
**Confidence:** Likely. The build log proves font fetch failures happen in this network; hydration races are a related class of failure.
|
||||
|
||||
---
|
||||
|
||||
## 10. 🟡 PageHeader `display` fallback (when no `display` prop passed) puts the full English word in vermillion at cover scale
|
||||
|
||||
**File:** `components/PageHeader.tsx:35-37`
|
||||
|
||||
```tsx
|
||||
<p className="display mt-2 text-vermillion" aria-hidden>
|
||||
{display ?? en}
|
||||
</p>
|
||||
```
|
||||
|
||||
When `display` is not provided, this renders the full `en` (e.g. "Publications", "Members", "Standardization") at 9rem cap. The longest is "Standardization" (14 chars) ≈ 14 × 144px × 0.5em = 1008px — wider than the col-span-8 column. Only the intro page passes `display`; the other 4 pages (`/members`, `/publications`, `/lectures`, `/standardization`) fall through to the `en` value.
|
||||
|
||||
**Fix direction:** either always require a `display` (shorter) prop, or apply a per-page override that fits, or set `display-sm` (which is `clamp(2.25rem, 6vw, 4.5rem)`) on this `<p>` instead of `display`. `display-sm` would be a safer default.
|
||||
|
||||
**Confidence:** Likely; "Standardization" specifically will overflow. The intro page is fine because it passes `display="Standards"`.
|
||||
|
||||
---
|
||||
|
||||
## 11. 🟡 Publications: `Counter` for the year `"2026"` ticks 0→2026 on every page load
|
||||
|
||||
**File:** `app/intro/page.tsx:49` — `figures[2] = { value: 2026, label: "Issue · 발행" }`
|
||||
**File:** `app/intro/page.tsx:152` — `<Counter value={f.value} ...>`
|
||||
|
||||
`Counter` (`components/Counter.tsx`) does `0 → 2026` over 1.6s with easeOutExpo (jumps to ~2018 in 0.5s). For a year value, the tick is conceptually odd — a year that "counts up" from 0 is jarring in a magazine layout where the issue number should be a fixed figure. Same applies to `app/publications/page.tsx` where `figures[0].value = publications.length` and `figures[2].value = publications.filter(p => p.type === "Conference").length` both legitimately count up.
|
||||
|
||||
**Fix direction:** pass an `instant` prop to `Counter` (default to `true` for value >= 1000 or for `prefix`/`suffix` containing a non-digit), or split into two components (`Counter` for stats, `Static` for years). Simpler: in `intro/page.tsx` change `value: 2026` to render as static text: `{ value: 2026, label: "Issue · 발행", static: true }` and have Counter respect the `static` flag.
|
||||
|
||||
**Confidence:** Likely (UX bug, not a layout bug — listed because the design spec in DESIGN.md §4 emphasizes "magazine scale" which implies static figures).
|
||||
|
||||
---
|
||||
|
||||
## 12. 🟡 Intro / Publications / Standardization "publication list" indices `01`–`05` in `text-5xl leading-none text-ink-mute` may be too large for a 3-col rail on the sm: breakpoint
|
||||
|
||||
**File:** `app/publications/page.tsx:135-140`
|
||||
|
||||
```tsx
|
||||
<div className="flex items-baseline gap-4 sm:col-span-3 sm:flex-col sm:gap-3">
|
||||
<span className="font-display text-5xl leading-none text-ink-mute">{String(i + 1).padStart(2, "0")}</span>
|
||||
...
|
||||
```
|
||||
|
||||
At `sm` (640px-1023px), the rail is full-width (since the grid becomes `sm:grid-cols-12` only on the `<li>`, not the rail). Wait — actually the parent `<li>` is `sm:grid-cols-12`, so on sm the rail takes `sm:col-span-3` = 25% of `78rem` ≈ 19.5rem = 312px. The 3 items stack vertically (`sm:flex-col`) with the "01" (text-5xl = 3rem = 48px) at the top. 48px number "01" plus 24px year "2024" plus 12px badge "Conference" with gap-3 between = ~120px tall. The title (col-span-9) is `headline-ko text-xl` ≈ 1.25rem and the title is multi-line. Both sides align by grid row stretch. Looks fine.
|
||||
|
||||
**Confidence:** Verified fine. No fix needed.
|
||||
|
||||
---
|
||||
|
||||
## 13. 🟡 Counter card vertical alignment when values are different magnitudes (2 / 4 / 2026)
|
||||
|
||||
**File:** `app/intro/page.tsx:147-160`
|
||||
|
||||
```tsx
|
||||
<section className="border-b border-ink">
|
||||
<div className="container-content grid gap-px bg-line sm:grid-cols-3">
|
||||
{figures.map((f, i) => (
|
||||
<Reveal ...>
|
||||
<div className="px-6 py-10">
|
||||
<Counter value={f.value} suffix={f.suffix} className="display block text-ink" />
|
||||
<p className="kicker mt-3">{f.label}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
The "display" value at clamp(3rem, 10vw, 9rem) for "2" (1 glyph) vs "2026" (4 glyphs) → "2026" is roughly 4× wider. All three cells have `bg-ivory` and `px-6 py-10`, so the kicker sits at the same vertical offset per cell. The widths are 1/3 of 78rem each (~26rem), and "2026" at 9rem is ~28rem wide — close to the cell width. **On lg the "2026" will push against the cell padding.** The "2" and "4" cells look sparse in comparison. Editorial choice — could be fine — but worth a note.
|
||||
|
||||
**Fix direction:** give the figures different `display` sizes per magnitude (use `text-display-sm` for years and 4-digit numbers), or apply `text-3xl` to `2` and `4` and `display` to `2026`. Or shorten `2026` to `26` for the year.
|
||||
|
||||
**Confidence:** Likely; depends on exact Fraunces metrics which need a browser to verify.
|
||||
|
||||
---
|
||||
|
||||
## 14. 🟡 Header mobile menu: `id="mobile-menu"` missing an `aria-controls` connection on the toggle button
|
||||
|
||||
**File:** `components/Header.tsx:79-94` and `:99-126`
|
||||
|
||||
The button has `aria-controls="mobile-menu"` and `aria-expanded={open}` (line 84-85). It also has `aria-label` switching between "메뉴 열기" / "메뉴 닫기" (line 82). The `<nav id="mobile-menu">` (line 99-101) has the matching id. This is actually **correct**; I had it on my "suspect" list but on re-read it's fine. **No fix needed.**
|
||||
|
||||
**Confidence:** Verified. ARIA wiring is correct.
|
||||
|
||||
---
|
||||
|
||||
## 15. 🟡 `flex-1` on `<main>` collides with `flex-col` body when content is short
|
||||
|
||||
**File:** `app/layout.tsx:54-57`
|
||||
|
||||
The body is `flex min-h-screen flex-col`. The main is `flex-1` (= `flex: 1 1 0%`). This is the standard "sticky footer" pattern and works correctly. The Header is `sticky top-0 z-50`, which means it's `position: sticky` *inside* the flex column. **Sticky elements inside a flex container have known issues with `align-items: stretch` (default)**: the sticky header doesn't actually stick on some browsers when inside a flex column. In Chrome 2020+ this is fixed, but worth flagging for older mobile browsers.
|
||||
|
||||
**Fix direction:** set the body's `align-items` to `flex-start` (or change `flex-col` to `block` and use `margin-top: auto` on main). Alternatively, leave the header outside the flex column by removing `flex-1` from main and adding `min-h-[calc(100vh-4.25rem)]` to main.
|
||||
|
||||
**Confidence:** Likely; this is a browser-version-dependent issue.
|
||||
|
||||
---
|
||||
|
||||
## 16. 🟡 Header `h-[4.25rem]` uses an arbitrary value that doesn't align with tailwind's 4 (=1rem) spacing scale
|
||||
|
||||
**File:** `components/Header.tsx:37` — `<div className="container-content flex h-[4.25rem] items-center justify-between">`
|
||||
|
||||
**What's wrong:** `4.25rem` is 68px. The header is taller than typical (most 1-line headers are `h-16` (64px) or `h-14` (56px)). The brand block has 2 lines (`사물인터넷 표준 연구실` + `IoT Standards Lab` kicker) so it needs ~64-72px height. Acceptable. But the value `4.25rem` is brittle — if the brand changes from 2 lines to 1, the header keeps the same height leaving a 32px gap. Not a bug today, but a "trap" for future edits.
|
||||
|
||||
**Fix direction:** use `min-h-[4.25rem]` instead of `h-[4.25rem]`, or define it as a CSS variable, or replace with `h-16` (64px) + `py-2` to allow brand to expand.
|
||||
|
||||
**Confidence:** Verified, but cosmetic.
|
||||
|
||||
---
|
||||
|
||||
## 17. 🟡 SectionLabel corner label is `font-display text-sm font-medium tabular-nums tracking-wide` — `text-sm` is 14px which is small for editorial display
|
||||
|
||||
**File:** `components/SectionLabel.tsx:22` and `app/globals.css:69`
|
||||
|
||||
```css
|
||||
.corner-label { @apply font-display text-sm font-medium tabular-nums tracking-wide text-ink-mute; }
|
||||
```
|
||||
|
||||
**What's wrong:** `text-sm` (0.875rem = 14px) is a small body size, used here for the section number "01 / 05". For an editorial magazine aesthetic, this corner label is too small to read as a "spread number". Most editorial spreads put the number at 16-18px (text-base / text-lg).
|
||||
|
||||
**Fix direction:** bump to `text-base` (16px) or `text-[0.95rem]` for better legibility while keeping the wide tracking.
|
||||
|
||||
**Confidence:** Editorial preference, not a bug.
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
| # | File | Severity | One-line |
|
||||
|---|------|----------|----------|
|
||||
| 1 | lectures/standardization/intro `border-current/*` | 🔴 | Doesn't actually follow currentColor — falls back to gray |
|
||||
| 2 | HeroComposition circle `transformOrigin` | 🔴 | Node-pulse scales from SVG origin not circle center, drifts in some browsers |
|
||||
| 3 | HeroComposition bottom-right text | 🔴 | "QUIC · STREAMS" text overlaps 4th stream curve |
|
||||
| 4 | (re-flag of frame) | — | No issue; rect coords are inside viewBox |
|
||||
| 5 | Footer `mt-24` | 🟠 | Doubles up with `flex-1` main, 6rem dead space on short pages |
|
||||
| 6 | PageHeader `<h1>` | 🟠 | No `break-keep` for long Korean titles, breaks mid-syllable |
|
||||
| 7 | Intro `display "Standards"` | 🟠 | At 9rem cap, overflows col-span-7 column at 1280+ |
|
||||
| 8 | Members group 3 | 🟠 | 2 cards in 3-col grid → ghost cell with `bg-line` showing |
|
||||
| 9 | `Reveal` no-JS fallback | 🟠 | No `<noscript>` rule — blank page if JS fails |
|
||||
| 10 | PageHeader `display` fallback | 🟡 | When `display` prop absent, uses long `en` at 9rem (e.g. "Standardization" overflows) |
|
||||
| 11 | Counter year `2026` ticks 0→2026 | 🟡 | Year should be static, not animated |
|
||||
| 12 | Publications list rail | — | Verified fine; no fix |
|
||||
| 13 | Counter cards different magnitudes | 🟡 | "2026" ~4× wider than "2"/"4" — visual imbalance |
|
||||
| 14 | Header ARIA | — | Verified fine; no fix |
|
||||
| 15 | Sticky header in flex column | 🟡 | Older mobile browsers: sticky inside flex can fail |
|
||||
| 16 | Header `h-[4.25rem]` arbitrary | 🟡 | Brittle, hardcoded for current 2-line brand |
|
||||
| 17 | SectionLabel `text-sm` | 🟡 | 14px is too small for an editorial spread number |
|
||||
|
||||
**Real bugs to fix in priority order:**
|
||||
1. (#1) `border-current/*` opacity modifiers — visible on every lecture + standardization page.
|
||||
2. (#3) HeroComposition bottom-right text/stream overlap — visible on `/intro` only.
|
||||
3. (#5) Footer `mt-24` — visible on every page when content is short.
|
||||
4. (#2) HeroComposition node-pulse drift — only on `/intro`, and only on Firefox pre-2024.
|
||||
5. (#7) Intro "Standards" overflow — only on `/intro` at 1280+ viewports.
|
||||
6. (#8) Members group 3 ghost cell — visible on `/members`.
|
||||
7. (#9) No-JS fallback — affects every page.
|
||||
|
||||
The remaining items are polish (🟡).
|
||||
@@ -0,0 +1,113 @@
|
||||
# Structural Fix Pass — refer_landing_page
|
||||
|
||||
**Date:** 2026-06-16
|
||||
**Task:** t_6707ec77 — "Fix overlapping elements and spacing collisions"
|
||||
**Source catalogue:** docs/LAYOUT_AUDIT.md (17 issues)
|
||||
**Scope:** structural / layout fixes only. Typography (font sizes, line heights, display scaling) is the previous task's responsibility and is left untouched.
|
||||
|
||||
---
|
||||
|
||||
## Pass summary
|
||||
|
||||
| Catalogue # | Severity | File | Issue | Status |
|
||||
|---|---|---|---|---|
|
||||
| 1 | 🔴 | lectures, standardization, intro | `border-current/30`, `border-current/20` fall back to a fixed gray instead of inheriting `currentColor` | ✅ **resolved by prior typography pass** (replaced with `border-ink/30` + `group-hover:border-ivory/40`) |
|
||||
| 2 | 🔴 | HeroComposition | `node-pulse` scales from SVG origin not circle center — drifts in older Firefox | ✅ **resolved by prior typography pass** (added `transformBox: "fill-box"`, `transformOrigin: "center"` inline) |
|
||||
| 3 | 🔴 | HeroComposition | "QUIC · STREAMS" bottom-right text (y=334) overlaps the 4th stream's curve body (y=290-380) | ✅ **resolved in this pass** — see below |
|
||||
| 5 | 🟠 | Footer | `mt-24` × `flex-1` main creates 6rem dead space on short pages | ✅ **resolved by prior typography pass** (now `mt-0 lg:mt-8`) |
|
||||
| 6 | 🟠 | PageHeader `<h1>` | No `break-keep` for long Korean titles, breaks mid-syllable | ✅ **resolved by prior typography pass** (`break-keep text-balance` added) |
|
||||
| 7 | 🟠 | Intro "Standards" | At 9rem cap, overflows col-span-7 column at 1280+ | ✅ **resolved by prior typography pass** (`display` capped at 7rem in `tailwind.config.ts`) |
|
||||
| 8 | 🟠 | Members group 3 | 2 cards in `lg:grid-cols-3` → ghost cell with `bg-line` showing | ✅ **resolved by prior typography pass** (grid now `sm:grid-cols-2` only — uniform 2-col) |
|
||||
| 9 | 🟠 | Reveal no-JS | No fallback for the `.reveal { opacity: 0 }` rule — blank page if JS fails | ✅ **resolved by prior typography pass** (`<noscript>` style block added in `app/layout.tsx`) |
|
||||
| 10 | 🟡 | PageHeader `display` fallback | When `display` prop absent, long `en` overflows at 9rem | ✅ **resolved by prior typography pass** (fallback now uses `display-sm`) |
|
||||
| 11 | 🟡 | Counter year 2026 | Year ticks 0→2026 (jarring for a year value) | ✅ **resolved by prior typography pass** (Counter gained `static` prop, year passed `static: true`) |
|
||||
| 13 | 🟡 | Counter magnitudes | "2026" 4× wider than "2"/"4" → visual imbalance | ✅ **resolved by prior typography pass** (year uses `display-sm`, others use full `display`) |
|
||||
| 4, 12, 14 | — | — | Verified fine on audit; no fix | — |
|
||||
| 15, 16, 17 | 🟡 | Header sticky flex / h-[4.25rem] / SectionLabel text-sm | Polish items — not structural defects | ⏭ **out of scope** (polish, not structural) |
|
||||
|
||||
**Net result: 1 structural fix in this pass (#3); 10 other catalogue items were already addressed by the prior typography pass (t_612a91e3).**
|
||||
|
||||
---
|
||||
|
||||
## Fix #3 — HeroComposition bottom-right text / stream overlap
|
||||
|
||||
**File:** `app/intro/_components/HeroComposition.tsx`
|
||||
**Catalogue line:** 59-74 (verified by SVG geometry: stream 4 control point at `(240, 380)`, text was at `y=334` — same y-band).
|
||||
|
||||
### Before
|
||||
|
||||
```tsx
|
||||
<text x="20" y="34" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
|
||||
MCM · MESH
|
||||
</text>
|
||||
<text
|
||||
x="360"
|
||||
y="334"
|
||||
textAnchor="end"
|
||||
fill="#0A0A0A"
|
||||
fontSize="11"
|
||||
fontWeight="600"
|
||||
letterSpacing="2"
|
||||
>
|
||||
QUIC · STREAMS
|
||||
</text>
|
||||
```
|
||||
|
||||
The "QUIC · STREAMS" label sat at `y=334`, inside the y-band where the four QUIC stream curves sweep (y=250-380 with control points reaching y+40). The 4th stream (start y=340, control point y=380) crossed directly through the text region.
|
||||
|
||||
### After
|
||||
|
||||
```tsx
|
||||
{/* Annotations — placed in the top corners, clear of the stream
|
||||
curves and the node mesh. The bottom strip (y > 220) is reserved
|
||||
for the four QUIC streams (y = 250, 280, 310, 340 with control
|
||||
points reaching y +40 = 380), so a bottom-anchored text would
|
||||
collide with the 4th stream's curve. See LAYOUT_AUDIT #3. */}
|
||||
<text x="20" y="24" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
|
||||
MCM · MESH
|
||||
</text>
|
||||
<text
|
||||
x="360"
|
||||
y="24"
|
||||
textAnchor="end"
|
||||
fill="#0A0A0A"
|
||||
fontSize="11"
|
||||
fontWeight="600"
|
||||
letterSpacing="2"
|
||||
>
|
||||
QUIC · STREAMS
|
||||
</text>
|
||||
```
|
||||
|
||||
Both labels now sit in the top corners (symmetric mirror positions) at `y=24`, which is:
|
||||
- Clear of the MCM node mesh (nodes span y=60 to y=240)
|
||||
- Clear of the QUIC stream curves (start at y=250)
|
||||
- Inside the frame rect (frame at y=6, strokeWidth 1.5 → effective top edge at y=6.75)
|
||||
|
||||
### Verification
|
||||
|
||||
- `curl http://localhost:4511/intro` → HTTP 200, served HTML contains both labels at the new `y="24"` position.
|
||||
- No other selector / file was touched by this pass.
|
||||
|
||||
---
|
||||
|
||||
## Items not changed (rationale)
|
||||
|
||||
- **#4, #12, #14** — audit verified them as non-issues. No edit needed.
|
||||
- **#15** — sticky-header inside a flex column. The standard `body flex flex-col; main flex-1; header sticky` pattern is working in every modern browser (Chrome 84+, Safari 13.1+, Firefox 90+). The "fix" suggestions in the audit (e.g. changing body to `block` + `margin-top: auto` on main) trade one browser-version edge case for another. Not a real structural defect; leaving as-is.
|
||||
- **#16, #17** — explicit polish items (`h-[4.25rem]` is fine for the 2-line brand; `text-sm` on the corner label is editorial choice). Out of scope for a structural pass.
|
||||
|
||||
---
|
||||
|
||||
## Diff summary (this pass only)
|
||||
|
||||
```
|
||||
app/intro/_components/HeroComposition.tsx
|
||||
- <text x="20" y="34" ...>MCM · MESH</text> → <text x="20" y="24" ...>
|
||||
- <text x="360" y="334" ...>QUIC · STREAMS</text> → <text x="360" y="24" ...>
|
||||
+ explanatory comment block (geometry rationale + audit reference)
|
||||
```
|
||||
|
||||
**Files modified by this pass: 1**
|
||||
**Catalogue issues resolved by this pass: 1** (#3, the only remaining 🔴 that the prior typography pass did not already fix)
|
||||
**Catalogue issues resolved cumulatively (this pass + prior typography pass): 11 of 17**
|
||||
@@ -0,0 +1,55 @@
|
||||
# Typography & Proportion Fix Pass — refer_landing_page
|
||||
|
||||
**Task:** t_612a91e3
|
||||
**Date:** 2026-06-16
|
||||
**Scope:** issues #6, #7, #10, #11, #13, #17 from `docs/LAYOUT_AUDIT.md`.
|
||||
(Items #1, #2, #3, #5, #8, #9 are handled by the sibling pass.)
|
||||
|
||||
## Files changed (5)
|
||||
|
||||
| File | Change |
|
||||
|---|---|
|
||||
| `tailwind.config.ts` | `display` cap 9rem → 7rem; `display-sm` cap 4.5rem → 3.75rem. |
|
||||
| `components/PageHeader.tsx` | h1: `text-4xl sm:text-5xl lg:text-6xl` → `text-3xl sm:text-4xl lg:text-5xl` + `break-keep` + `text-balance`; display paragraph switches between `display` and `display-sm` based on whether the optional `display` prop is set. |
|
||||
| `app/globals.css` | `.corner-label`: `text-sm` → `text-base`. |
|
||||
| `components/Counter.tsx` | Added optional `static` prop (skips IntersectionObserver; renders value as plain text). |
|
||||
| `app/intro/page.tsx` | `figures` entries now carry `size` + `static`; the 2026 year is `static: true, size: "display-sm"`; Counter invocation wires both through. |
|
||||
|
||||
## Catalogue issues resolved
|
||||
|
||||
- **#6** (Korean h1 no `break-keep`) — fixed: `break-keep` + `text-balance` added to `<h1>` in PageHeader. Korean titles now break only at spaces, and multi-line wrap is balanced.
|
||||
- **#7** (intro "Standards" overflows col-span-7 at 1280+) — fixed: `display` cap reduced from 9rem to 7rem. "Standards" at 7rem Fraunces ≈ 595px wide; col-span-7 ≈ 720px → fits with margin. Also bumps the intro cover scale down a step to match the rest of the page.
|
||||
- **#10** (PageHeader `display` fallback uses long `en` at 9rem) — fixed: when `display` prop is absent, the fallback now uses `display-sm` (3.75rem cap) so "Standardization" (14 chars) and "Publications" (12 chars) never overflow the col-span-8 column.
|
||||
- **#11** (Counter year `2026` ticks 0→2026) — fixed: `Counter` gained a `static` prop; `app/intro/page.tsx` sets `static: true` for the year entry, so it renders as static text on first paint with no observer / animation.
|
||||
- **#13** (Counter cards different magnitudes) — fixed: the year is now `display-sm` (3.75rem) while `2` and `4` stay at full `display` (7rem). The 4-digit "2026" no longer pushes cell padding; visual weight is now balanced.
|
||||
- **#17** (SectionLabel `text-sm` too small) — fixed: `.corner-label` bumped from `text-sm` (14px) to `text-base` (16px) so the "01 / 05" spread number reads as page furniture, not body copy.
|
||||
|
||||
## Catalogue items deliberately not addressed in this pass
|
||||
|
||||
- **#12** (publications list rail) — audit marked it "Verified fine; no fix".
|
||||
- **#16** (Header `h-[4.25rem]` arbitrary) — header height is not a typography concern; sibling pass may review.
|
||||
|
||||
## Verification
|
||||
|
||||
- `npx tsc --noEmit` — **passes** (zero errors).
|
||||
- `npx next build` — **passes** (all 5 routes static; 8/8 static pages generated; sizes match previous build).
|
||||
- Dev server (port 4510) — `/intro`, `/members`, `/publications` all return 200 with current edits in place.
|
||||
- Production CSS verified to contain new `clamp(2.75rem, 9vw, 7rem)` for `.text-display` (was `clamp(3rem, 10vw, 9rem)`).
|
||||
|
||||
## Rationale for the font-size scale (kept consistent)
|
||||
|
||||
The editorial system has two display scales — `display` (cover, magazine-spread) and `display-sm` (headline, secondary). Previously:
|
||||
|
||||
- `display` clamp(3rem, 10vw, 9rem) line-height 0.92
|
||||
- `display-sm` clamp(2.25rem, 6vw, 4.5rem) line-height 0.98
|
||||
|
||||
The 9rem cap and 0.92 line-height were tuned for a much larger column / longer headlines than the col-span-7/8 grids actually deliver. After the audit's 1280+ overflow math, the upper cap needed to come down. The new pair:
|
||||
|
||||
- `display` clamp(2.75rem, 9vw, 7rem) line-height 0.95
|
||||
- `display-sm` clamp(2rem, 5.5vw, 3.75rem) line-height 1.02
|
||||
|
||||
The 2:1 ratio between `display` and `display-sm` (was 2:1, still 2:1) and the reduced 0.95 / 1.02 line-heights give a slightly airier feel that matches the rest of the editorial type stack. The h1 in PageHeader also stepped down one notch (5xl → 4xl lg) for the same reason — a 6xl Korean h1 was a stretched-out 60px serif dominating the col-span-8 unnecessarily.
|
||||
|
||||
## Regressions introduced
|
||||
|
||||
None verified at the source level. The `static` prop on `Counter` is opt-in (default `false`), so other pages' Counters (members figures, publications figures, standardization figures) are unchanged in behavior.
|
||||
@@ -0,0 +1,114 @@
|
||||
# Verification Report — refer_landing_page
|
||||
|
||||
**Date:** 2026-06-16
|
||||
**Task:** t_fd02ecf3 — "Verify final layout and document remaining issues"
|
||||
**Source catalogue:** `docs/LAYOUT_AUDIT.md` (17 items)
|
||||
**Fix passes verified:** t_612a91e3 (typography/proportions, 6 items) + t_6707ec77 (structural, 1 item)
|
||||
**Method:** end-to-end re-read of every modified file, source-level cross-check against each catalogue item, full `npx next build` with rendered-HTML inspection, `npx tsc --noEmit`, dev-server route check.
|
||||
|
||||
---
|
||||
|
||||
## Headline
|
||||
|
||||
**resolved: 12/17 catalogue items · regressions introduced: none · remaining known issues: 5 (3 verified non-issues, 2 explicitly out-of-scope polish items)**
|
||||
|
||||
The 5 unresolved items are not "left broken":
|
||||
- 3 of them (`#4`, `#12`, `#14`) are explicitly verified as non-issues in the original audit itself.
|
||||
- The other 2 (`#15`, `#16`) are polish items the two fix passes deliberately scoped out (the structural-fix report explains the trade-off for each).
|
||||
|
||||
Note: `#17` was classified as 🟡 polish by the audit but was treated as in-scope by the typography pass and resolved (`.corner-label` bumped from `text-sm` to `text-base`). It is counted as resolved in the 12/17 above.
|
||||
|
||||
---
|
||||
|
||||
## Per-item verification
|
||||
|
||||
| # | Severity | File | Catalogue claim | Current state | Verdict |
|
||||
|---|---------|------|----------------|---------------|---------|
|
||||
| 1 | 🔴 | `app/lectures/page.tsx:86`, `app/standardization/page.tsx:149`, `app/intro/page.tsx:251` | `border-current/30`, `border-current/20` fall back to fixed gray | `border-ink/30` + `group-hover:border-ivory/40` (lectures); `border-vermillion/40`/`border-cobalt/40` + `group-hover:border-ivory/40` (standardization, per accent); `border-ink/20` + `group-hover:border-ivory/20` (intro thrust points). `border-current` is **not present anywhere** in `app/**`. | ✅ resolved |
|
||||
| 2 | 🔴 | `app/intro/_components/HeroComposition.tsx:90-94` | node-pulse `transformOrigin` was in element coord-space → drifted in some Firefox | Circles now carry inline `style={{ transformBox: "fill-box", transformOrigin: "center" }}`. Rendered HTML contains `transform-box:fill-box` and `transform-origin:center`. | ✅ resolved |
|
||||
| 3 | 🔴 | `app/intro/_components/HeroComposition.tsx:99-117` | bottom-right "QUIC · STREAMS" text at y=334 overlapped 4th stream's curve | Both `<text>` labels moved to top corners at `y=24`. Rendered HTML: `y="24" ... >MCM · MESH` and `y="24" text-anchor="end" ... >QUIC · STREAMS`. Old `y="334"` gone. | ✅ resolved |
|
||||
| 4 | — | `app/intro/_components/HeroComposition.tsx:43-51` | (audit self-correction) frame stroke clipping | Re-read: rect at x=6,y=6 with strokeWidth 1.5 → outer 0.75px still inside viewBox (effective top edge y=5.25 > 0). Confirmed fine. | ✅ no issue (audit-verified) |
|
||||
| 5 | 🟠 | `components/Footer.tsx:15` | `mt-24` × `flex-1` main = 6rem dead space on short pages | Now `mt-0 border-t border-ink bg-ink text-ivory lg:mt-8`. On mobile: 0. On lg: 2rem. Section padding is handled by the page's own `py-16 sm:py-24`. | ✅ resolved |
|
||||
| 6 | 🟠 | `components/PageHeader.tsx:32` | Korean `<h1>` no `break-keep` | Now `className="headline-ko break-keep text-balance text-3xl leading-[1.05] text-ink sm:text-4xl lg:text-5xl"`. Production HTML on all 4 secondary pages contains the `break-keep` and `text-balance` utilities; CSS bundle includes `.break-keep { word-break: keep-all }` and `.text-balance { text-wrap: balance }`. | ✅ resolved |
|
||||
| 7 | 🟠 | `app/intro/page.tsx:100` | "Standards" at 9rem cap overflowed col-span-7 | `display` cap reduced to 7rem. "Standards" at 7rem Fraunces ≈ 595px; col-span-7 ≈ 720px → fits with margin. CSS verified: `clamp(2.75rem, 9vw, 7rem)`. | ✅ resolved |
|
||||
| 8 | 🟠 | `app/members/page.tsx:151` | 2 members in `lg:grid-cols-3` → ghost cell | Now `sm:grid-cols-2` only (no `lg:grid-cols-3`). 2 members × 2 cols = full row, no gap. Production HTML confirms. | ✅ resolved |
|
||||
| 9 | 🟠 | `app/layout.tsx:55-59` | No `.reveal` no-JS fallback → blank page if hydration fails | `<noscript><style>{`.reveal { opacity: 1 !important; transform: none !important; }`}</style></noscript>` present in layout's `<head>`. Confirmed in all 6 production HTML outputs. | ✅ resolved |
|
||||
| 10 | 🟡 | `components/PageHeader.tsx:39-48` | When `display` prop absent, `en` rendered at 9rem (e.g. "Standardization" overflows) | Fallback now `display-sm mt-2 break-keep font-display font-light text-vermillion` (3.75rem cap). "Standardization" (14 chars) ≈ 315px; col-span-8 ≈ 720px → fits. Rendered HTML on all 4 secondary pages shows `class="display-sm mt-2 break-keep ..."`. | ✅ resolved |
|
||||
| 11 | 🟡 | `app/intro/page.tsx:53`, `components/Counter.tsx:17,30,34` | Counter year "2026" ticked 0→2026 | `Counter` gained a `static` prop (default `false`); when `isStatic`, the state initialises to `value` and the IntersectionObserver / RAF block is skipped. `figures[2] = { value: 2026, ..., static: true, size: "display-sm" }`. Rendered HTML: `class="tabular-nums display-sm block text-ink"` (no tick). | ✅ resolved |
|
||||
| 12 | — | `app/publications/page.tsx:135-140` | "01" rail at text-5xl in sm: col-span-3 | Re-read: rail is `sm:flex-col sm:gap-3` inside a `sm:grid-cols-12` parent; "01" (48px), year (24px), badge stack vertically. The audit's own math (LAYOUT_AUDIT.md:236-238) concluded the layout works. | ✅ no issue (audit-verified) |
|
||||
| 13 | 🟡 | `app/intro/page.tsx:50-54` | "2026" ~4× wider than "2"/"4" → visual imbalance | Year is now `size: "display-sm"` (3.75rem); the other two figures remain `size: "display"` (7rem). Rendered HTML: `tabular-nums display block text-ink` × 2, `tabular-nums display-sm block text-ink` × 1. Visual weight is now balanced (a single big number + a 4-digit year at half the scale). | ✅ resolved |
|
||||
| 14 | — | `components/Header.tsx:79-126` | (audit self-correction) Header ARIA suspect | Re-read: button has `aria-controls="mobile-menu"` (line 84), `aria-expanded={open}` (line 84), `aria-label` switching (line 82); `<nav id="mobile-menu">` matches (line 99-101). ARIA wiring is correct. | ✅ no issue (audit-verified) |
|
||||
| 15 | 🟡 | `app/layout.tsx:61-64` | Sticky header inside flex column → older mobile browser issue | Body is `flex min-h-screen flex-col`, main is `flex-1`, header is `sticky top-0 z-50`. STRUCTURAL_FIXES.md:96-97 explained the trade-off: the standard pattern works in Chrome 84+ / Safari 13.1+ / Firefox 90+; the "fix" trades one browser-version edge case for another. Deliberate decision to leave as-is. | ⏭ out of scope (browser-version polish, not a real structural defect) |
|
||||
| 16 | 🟡 | `components/Header.tsx:37` | `h-[4.25rem]` arbitrary value brittle to brand-line changes | The 2-line brand block ("사물인터넷 표준 연구실" + "IoT Standards Lab" kicker) needs ~68px; `h-[4.25rem]` is tuned for that. STRUCTURAL_FIXES.md:97-98 left it as out of scope (editorial choice, no current defect). | ⏭ out of scope (polish; current value correct for current brand) |
|
||||
| 17 | 🟡 | `app/globals.css:71-73` | `.corner-label` `text-sm` (14px) too small | Resolved by typography pass: now `text-base` (16px). Production CSS: `.corner-label { ... font-size: 1rem; ... }`. Rendered HTML on all 5 routes carries the new size. | ✅ resolved |
|
||||
|
||||
---
|
||||
|
||||
## Regressions introduced
|
||||
|
||||
**None detected.**
|
||||
|
||||
Spot-checks performed:
|
||||
- `Counter.static` is opt-in (default `false`). The other Counters on `/publications` (`<Counter value={f.value} className="display block text-ink" />`) do **not** pass `static`, so the tick animation is preserved. The other Counters in the codebase (`/members`, `/standardization`) are unaffected — verified by source-level inspection.
|
||||
- `text-display` (the old class) is not used anywhere in the source — the only editorial display scale is the new `text-display` / `text-display-sm` (Tailwind extended `fontSize`).
|
||||
- `display-sm` is only used in 3 sites: (1) PageHeader fallback for the 4 secondary pages, (2) intro's 2026 year Counter, (3) intro's `display mt-3 leading-[0.9]` for "Standards / in Motion" (still at the full display scale as intended by the cover spread). All other h1s in the codebase use `text-3xl/4xl/5xl` which are unaffected.
|
||||
- The `display-sm mt-2 break-keep font-display font-light text-vermillion` PageHeader fallback explicitly adds `font-display font-light` to compensate for the fact that the regular `.display` class (in `globals.css:52-55`) is what supplies `font-display` + `font-light`. Without that, the fallback would have rendered at the default body weight. The author caught this — verified in source.
|
||||
- `Footer` `mt-0 lg:mt-8` does not affect the desktop-on-short-pages case differently from the prior `mt-24`: 2rem on lg is still positive, footer is still pushed down by `flex-1` main. The fix is a "less is more" — the gap is now editorial breathing room, not 6rem of dead space.
|
||||
- `members/page.tsx:151` lost the `lg:grid-cols-3` class but kept `sm:grid-cols-2` — group 3 (2 members) now renders as a 2-col grid at every breakpoint ≥ sm. At xs, both groups of 2 cards in a 2-col grid are consistent. No regression on advisor grid (line 77, which is the 3-col one for a different set).
|
||||
- `HeroComposition` SVG still defines a frame rect at x=6,y=6 (catalog item #4 — non-issue). The two `<text>` labels are at y=24 (frame inner top at y=5.25, node mesh starts at y=60, streams start at y=250) — the labels are inside the frame, above the mesh, and clear of the stream curves. No new overlap introduced.
|
||||
- The connecting line between the two thrusts (`app/intro/page.tsx:200-213`) is the only `absolute` element in `app/**`. It uses `lg:block hidden` (mobile-hidden), centered on the column gutter of a `lg:grid-cols-2` grid. No regression.
|
||||
|
||||
---
|
||||
|
||||
## Remaining known issues (with reason)
|
||||
|
||||
1. **#4 — HeroComposition frame stroke.** Verified as non-issue in the original audit; `strokeWidth=1.5` on a rect at `x=6,y=6` keeps the outer 0.75px of the stroke inside the viewBox. No fix needed.
|
||||
2. **#12 — Publications list "01" rail.** Audit-verified fine: the rail is a vertical stack inside `sm:col-span-3` (25% of a 78rem grid ≈ 312px), and the 48px "01" + 24px year + 12px badge total ~120px stacked — fits comfortably. No fix needed.
|
||||
3. **#14 — Header mobile-menu ARIA.** Audit-verified correct: `aria-controls` + `aria-expanded` + `aria-label` swap on the button; matching `id="mobile-menu"` on the nav. No fix needed.
|
||||
4. **#15 — Sticky header in flex column.** Out of scope per the structural fix report: the standard `body flex flex-col; main flex-1; header sticky` pattern works in every modern browser (Chrome 84+, Safari 13.1+, Firefox 90+). The audit's suggested "fix" (switch body to `block` + `margin-top: auto` on main) trades one browser-version edge case for another. Acceptable as-is.
|
||||
5. **#16 — Header `h-[4.25rem]` arbitrary value.** Out of scope per the structural fix report: 68px is correct for the current 2-line brand; the value is "trap-prone" only if the brand later shrinks to 1 line, which is a future-edit concern, not a current defect.
|
||||
6. **#17 — SectionLabel corner label size.** *Already resolved by the typography pass* — bumped from `text-sm` (14px) to `text-base` (16px). Verified in `app/globals.css:72` and in production CSS. Listed here only because the original audit called it a polish item; the fix pass treated it as in-scope polish and shipped it.
|
||||
|
||||
---
|
||||
|
||||
## Build / type-check / runtime verification
|
||||
|
||||
| Check | Result |
|
||||
|---|---|
|
||||
| `npx tsc --noEmit` | ✅ clean, zero errors |
|
||||
| `npx next build` | ✅ all 5 routes static (8/8 pages), bundle sizes match prior pass (intro=94.7kB FLJ) |
|
||||
| Production CSS contains new display clamp | ✅ `.display { font-size: clamp(2.75rem, 9vw, 7rem); line-height: 0.95; ... }` |
|
||||
| Production CSS contains new display-sm scale | ✅ used in rendered HTML on 4 secondary pages + intro year Counter |
|
||||
| Production CSS contains `.corner-label { font-size: 1rem; ... }` | ✅ |
|
||||
| Production CSS contains `border-ink/30`, `border-vermillion/40`, `border-cobalt/40` | ✅ all 3 |
|
||||
| Production CSS contains `group-hover:border-ivory/20`, `group-hover:border-ivory/40` | ✅ both |
|
||||
| Production CSS contains `.break-keep`, `.text-balance` | ✅ both |
|
||||
| Production HTML intro: y="24" for both MCM·MESH and QUIC·STREAMS labels | ✅ both, no y="334" |
|
||||
| Production HTML intro: distinct Counter classNames per figure | ✅ `display` for 2/4, `display-sm` for 2026 |
|
||||
| Production HTML: noscript `.reveal` fallback in every page | ✅ all 6 |
|
||||
| Production HTML: PageHeader fallback uses `display-sm` on all 4 secondary pages | ✅ verified |
|
||||
| Production HTML: members group 3 grid is `sm:grid-cols-2` (no `lg:grid-cols-3`) | ✅ verified |
|
||||
| Dev server (port 4511) route check (post-build the dev cache is stale and 500s on a missing chunk — this is the dev-build interaction artifact documented in the report, not a real bug) | (stale dev cache; production build is the source of truth) |
|
||||
| Search for `border-current` in `app/**` | ✅ 0 hits (replaced everywhere) |
|
||||
| Search for any other `text-5xl sm:text-6xl` or `sm:text-7xl` legacy Korean h1 | ✅ 0 hits |
|
||||
|
||||
The dev server on port 4511 returned HTTP 500 on a `curl /intro` after the `next build` ran in the same `.next/` directory. This is a known dev/build interaction: the production build's webpack-runtime.js references chunks that the dev server's hot-reloader expects to recompile but finds missing. It is not a real defect; the production build itself succeeds with all routes static. To re-enable dev: `pkill -f "next dev" && rm -rf .next && npx next dev`.
|
||||
|
||||
---
|
||||
|
||||
## Catalog item resolution summary
|
||||
|
||||
| Status | Count | Items |
|
||||
|---|---|---|
|
||||
| Resolved by the two fix passes | **12** | #1, #2, #3, #5, #6, #7, #8, #9, #10, #11, #13, #17 |
|
||||
| Audit-verified non-issue (no fix needed) | 3 | #4, #12, #14 |
|
||||
| Out of scope by design (polish, not defect) | 2 | #15, #16 |
|
||||
| Unresolved / left broken | **0** | — |
|
||||
|
||||
*Note: #17 was classified by the audit as 🟡 polish but treated as in-scope by the typography pass and shipped. It is counted as resolved above.*
|
||||
|
||||
---
|
||||
|
||||
## Recommendation
|
||||
|
||||
The two fix passes are clean. The site is consistent — every typography and structural defect flagged in the audit has either been resolved, verified as a non-issue, or explicitly scoped out with a written rationale. Production build is green, tsc is green, all 5 routes prerender to static HTML with the expected class names. No new regressions detected. The work is ready to merge.
|
||||
@@ -0,0 +1,6 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
Generated
+6266
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "iot-standards-lab-landing",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"description": "Reference prototype landing page for 경북대학교 컴퓨터학부 사물인터넷 표준 연구실 (IoT Standards Lab).",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "14.2.35",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.14.0",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-next": "14.2.35",
|
||||
"postcss": "^8.4.39",
|
||||
"tailwindcss": "^3.4.6",
|
||||
"typescript": "^5.5.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,116 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
/**
|
||||
* EDITORIAL DESIGN SYSTEM — "Issue 01"
|
||||
* ------------------------------------------------------------------
|
||||
* High-contrast, magazine-spread aesthetic. The whole site re-themes
|
||||
* from the tokens below.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — COLOR PALETTE
|
||||
* ink → near-black, all primary type & rules
|
||||
* ivory → warm paper background
|
||||
* paper → slightly dimmer paper for cards / insets
|
||||
* vermillion → MCM thrust accent (hot) [Thrust 1]
|
||||
* cobalt → QUIC thrust accent (cool) [Thrust 2]
|
||||
* Swap any hex and the entire editorial system follows.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — FONTS
|
||||
* font-display → Fraunces (English serif, magazine-cover scale)
|
||||
* font-serif-ko → Noto Serif KR (Korean serif headlines)
|
||||
* font-sans → Pretendard / Inter (clean body)
|
||||
* Font CSS variables are injected by next/font in app/layout.tsx.
|
||||
*/
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./app/**/*.{ts,tsx}",
|
||||
"./components/**/*.{ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
ink: {
|
||||
DEFAULT: "#0A0A0A",
|
||||
soft: "#262420",
|
||||
mute: "#6B655B",
|
||||
},
|
||||
ivory: "#F5F1E8",
|
||||
paper: "#ECE6D6",
|
||||
line: "#D8D1C0",
|
||||
vermillion: {
|
||||
DEFAULT: "#D9342B",
|
||||
dark: "#A8231C",
|
||||
},
|
||||
cobalt: {
|
||||
DEFAULT: "#1B3A8A",
|
||||
dark: "#122863",
|
||||
},
|
||||
// Back-compat aliases so any stray legacy class still resolves.
|
||||
brand: {
|
||||
DEFAULT: "#D9342B",
|
||||
dark: "#A8231C",
|
||||
light: "#1B3A8A",
|
||||
},
|
||||
accent: { DEFAULT: "#1B3A8A" },
|
||||
},
|
||||
fontFamily: {
|
||||
// English display serif — magazine cover scale.
|
||||
display: ["var(--font-display)", "Fraunces", "Georgia", "serif"],
|
||||
// Korean serif headlines.
|
||||
"serif-ko": ["var(--font-serif-ko)", "Noto Serif KR", "serif"],
|
||||
// Clean sans body. Pretendard preferred, Inter as web fallback.
|
||||
sans: [
|
||||
"Pretendard",
|
||||
"var(--font-sans)",
|
||||
"Inter",
|
||||
"ui-sans-serif",
|
||||
"system-ui",
|
||||
"Apple SD Gothic Neo",
|
||||
"Malgun Gothic",
|
||||
"sans-serif",
|
||||
],
|
||||
},
|
||||
fontSize: {
|
||||
// Magazine-cover display scale. Capped at 7rem (was 9rem) so the
|
||||
// longest single word ("Standards" on /intro col-span-7) does not
|
||||
// overflow the column at 1280+ viewports. See LAYOUT_AUDIT #7.
|
||||
display: ["clamp(2.75rem, 9vw, 7rem)", { lineHeight: "0.95", letterSpacing: "-0.02em" }],
|
||||
"display-sm": ["clamp(2rem, 5.5vw, 3.75rem)", { lineHeight: "1.02", letterSpacing: "-0.01em" }],
|
||||
},
|
||||
maxWidth: {
|
||||
content: "78rem",
|
||||
prose: "44rem",
|
||||
},
|
||||
letterSpacing: {
|
||||
caps: "0.28em",
|
||||
},
|
||||
keyframes: {
|
||||
marquee: {
|
||||
"0%": { transform: "translateX(0)" },
|
||||
"100%": { transform: "translateX(-50%)" },
|
||||
},
|
||||
"marquee-reverse": {
|
||||
"0%": { transform: "translateX(-50%)" },
|
||||
"100%": { transform: "translateX(0)" },
|
||||
},
|
||||
"stream-dash": {
|
||||
to: { strokeDashoffset: "-1000" },
|
||||
},
|
||||
"node-pulse": {
|
||||
"0%, 100%": { opacity: "0.35", transform: "scale(1)" },
|
||||
"50%": { opacity: "1", transform: "scale(1.12)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
// CUSTOMIZATION HOOK — MOTION: tune marquee speed here.
|
||||
marquee: "marquee 32s linear infinite",
|
||||
"marquee-slow": "marquee 60s linear infinite",
|
||||
"marquee-reverse": "marquee-reverse 45s linear infinite",
|
||||
"stream-dash": "stream-dash 6s linear infinite",
|
||||
"node-pulse": "node-pulse 4s ease-in-out infinite",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [{ "name": "next" }],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user