fix: remove opacity modifiers on Header active badges to satisfy WCAG 2.1 AA contrast (R-9.6) and update DESIGN.md

This commit is contained in:
2026-07-30 22:34:41 +09:00
parent f672f7af7d
commit 43c75daec6
2 changed files with 9 additions and 9 deletions
+5 -5
View File
@@ -66,13 +66,13 @@ export default function Header() {
aria-current={active ? "page" : undefined} aria-current={active ? "page" : undefined}
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${ className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
active active
? "bg-vermillion text-white shadow-sm dark:bg-vermillion dark:text-ivory font-bold" ? "bg-vermillion text-white shadow-sm dark:text-ivory font-bold"
: "text-ink hover:text-vermillion hover:bg-paper/60" : "text-ink hover:text-vermillion hover:bg-paper/60"
}`} }`}
> >
<span <span
className={`font-display text-[0.62rem] ${ className={`font-display text-[0.62rem] ${
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute" active ? "text-white dark:text-ivory" : "text-ink-mute"
}`} }`}
> >
{item.no} {item.no}
@@ -126,14 +126,14 @@ export default function Header() {
aria-current={active ? "page" : undefined} aria-current={active ? "page" : undefined}
className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${ className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
active active
? "bg-vermillion text-white font-bold dark:bg-vermillion dark:text-ivory shadow-sm" ? "bg-vermillion text-white font-bold dark:text-ivory shadow-sm"
: "text-ink hover:bg-paper/60" : "text-ink hover:bg-paper/60"
}`} }`}
> >
<span className="flex items-baseline gap-3"> <span className="flex items-baseline gap-3">
<span <span
className={`font-display text-xs ${ className={`font-display text-xs ${
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute" active ? "text-white dark:text-ivory" : "text-ink-mute"
}`} }`}
> >
{item.no} {item.no}
@@ -142,7 +142,7 @@ export default function Header() {
</span> </span>
<span <span
className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${ className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
active ? "text-white/90 dark:text-ivory/90" : "text-ink-mute" active ? "text-white dark:text-ivory" : "text-ink-mute"
}`} }`}
> >
{item.en} {item.en}
+4 -4
View File
@@ -259,7 +259,7 @@ HeroComposition(props: { className?: string })
</Reveal> </Reveal>
``` ```
> **함께 쓰는 관용구:** 모든 페이지는 `PageHeader`(`components/PageHeader.tsx`)로 시작 > **함께 쓰는 관용구:** 모든 페이지는 페이지 섹션 헤더
> → (선택) `Marquee` 밴드 1개 → 통계 밴드(`Counter` ×3, `gap-px bg-line sm:grid-cols-3`) > → (선택) `Marquee` 밴드 1개 → 통계 밴드(`Counter` ×3, `gap-px bg-line sm:grid-cols-3`)
> → `Reveal`+`SectionLabel` 로 여는 콘텐츠 섹션. 행 내 스태거는 `delay={i * 80}`~`120`. > → `Reveal`+`SectionLabel` 로 여는 콘텐츠 섹션. 행 내 스태거는 `delay={i * 80}`~`120`.
@@ -269,17 +269,17 @@ HeroComposition(props: { className?: string })
| 라우트 | index | 잡지에서의 역할 | 특징 | | 라우트 | index | 잡지에서의 역할 | 특징 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| `/intro` | 1 | **커버 스프레드** | 거대 한/영 히어로 + `HeroComposition` 아트, 키워드 `Marquee`, 통계, 풀쿼트, 5연구 기둥 3+2 매거진 조판 그리드 | | `/` | 1 | **커버 스프레드** | 거대 한/영 히어로 + `HeroComposition` 아트, Research Project PageView(3대 과제), 4핵심 분야 조판 그리드 |
| `/members` | 2 | **기고자 페이지(Contributors)** | 인원 통계 카운터, PI 피처 스프레드, 박/석/학부 그룹을 헤어라인 그리드 + 교차 강조색으로 | | `/members` | 2 | **기고자 페이지(Contributors)** | 인원 통계 카운터, PI 피처 스프레드, 박/석/학부 그룹을 헤어라인 그리드 + 교차 강조색으로 |
| `/publications` | 3 | **목차/서지(Index & Bibliography)** | 서지 `Marquee`, 파생 통계, 번호 매긴 편집 목록(저널=vermillion, 학회=cobalt) | | `/publications` | 3 | **목차/서지(Index & Bibliography)** | 서지 `Marquee`, 파생 통계, 번호 매긴 편집 목록(저널=vermillion, 학회=cobalt) |
| `/lectures` | 4 | **강의 카탈로그(Course catalog)** | 3개 강의 카드(테두리·강조색 호버 면), 코드·KO/EN 제목·레벨 칩 | | `/lectures` | 4 | **강의 카탈로그(Course catalog)** | 45개 학기 학부·대학원 개설 교과목 이력 |
| `/standardization` | 5 | **표준화 바이라인(Standards byline)** | 기구 `Marquee`, 통계, 기관별 2열 기여 그리드, 기관마다 강조색 배정 | | `/standardization` | 5 | **표준화 바이라인(Standards byline)** | 기구 `Marquee`, 통계, 기관별 2열 기여 그리드, 기관마다 강조색 배정 |
--- ---
## 8. 새 페이지 추가 체크리스트 ## 8. 새 페이지 추가 체크리스트
1. **마스트헤드:** `PageHeader` 로 시작 — `ko`, `en`, 라우트 `index`(intro 1 … standardization 5) 부여. 1. **내비게이션 배지 & 마스트헤드:** `Header.tsx` 활성 배지(`bg-vermillion text-white dark:text-ivory`, `aria-current="page"`)와 페이지 타이틀 섹션으로 시작.
2. **콘텐츠 분리:** 편집 데이터 전부를 파일 상단 `// CUSTOMIZATION HOOK` 배열에 둔다. 2. **콘텐츠 분리:** 편집 데이터 전부를 파일 상단 `// CUSTOMIZATION HOOK` 배열에 둔다.
3. **레이아웃:** 헤어라인 그리드 관용구(`gap-px bg-line` + 자식 `bg-ivory`)로 구성, 섹션은 `border-b border-ink` 로 구획. 3. **레이아웃:** 헤어라인 그리드 관용구(`gap-px bg-line` + 자식 `bg-ivory`)로 구성, 섹션은 `border-b border-ink` 로 구획.
4. **모션:** 등장 가치가 있는 블록을 `Reveal` 로 감싸고, §2 페어링 규칙대로 vermillion/cobalt 를 교차 배정. 4. **모션:** 등장 가치가 있는 블록을 `Reveal` 로 감싸고, §2 페어링 규칙대로 vermillion/cobalt 를 교차 배정.