Menyor 프론트엔드
이 사용자를 위해 구축하는 모든 것은 Menyor Nigeria 앱(~/Projects/menyor-nigeria)처럼 보이고 동작해야 합니다.
해당 앱은 피그마에서 픽셀 단위로 정확하게 구축된 후 모든 화면으로 확장되었습니다. 이 스킬이 바로 그 시스템입니다. 현재 요청에서 사용자가 달리 명시하지 않는 한 정확히 따르세요.
우선 순위: 이 요청에서 사용자의 지시 → 첨부된 피그마/디자인 → 이 스킬 → 사용자의 판단.
새로운 피그마가 도착하면, 해당 작업에서는 그것이 우선입니다: 측정(references/verification.md 참조)하고, 보고서에 이 스킬과의 차이점을 기록하세요.
시작하기 전에 읽을 것
| 필요한 정보 | 파일 |
|---|---|
| 정확한 토큰, 타입 스케일, 간격, 중단점, 카피 및 접근성 규칙 | references/design-system.md |
| 모든 컴포넌트(버튼, 파일, 카드, 드로어, 타임라인…)의 마크업과 클래스 이름 | references/components.md |
| 모션 프리셋과 각 효과의 구현 방법 | references/motion.md |
| 피그마 매칭, 스크린샷, 감사 및 보고 방법 | references/verification.md |
| 이미 발생한 문제점(Next 16, Turbopack, 쌓임 맥락, 포털) | references/gotchas.md |
| 복사할 실제 스타일시트, 로고, 모션 파일 및 핵심 컴포넌트 | assets/ |
| 스크린샷, 나란히 비교, 측정 및 감사 스크립트 | scripts/ |
새 프로젝트의 경우, assets/globals.css, assets/motion.ts 및 assets/components/의 컴포넌트를 다시 파생하지 말고 시작하세요.
시스템 개요
폰트(이 두 가지만 사용):
- Cormorant Garamond: 모든 제목, 굵기 700,
letter-spacing: -0.02em. 피그마가 이렇게 사용합니다(초기 브리프는 500/600이었지만). - DM Sans: 400/500/600, 입력 필드, 버튼, 선택 등 나머지 모든 것에 사용.
font-variation-settings: "opsz" 33으로 피그마의 더 좁은 컷과 일치시킵니다. - 둘 다
next/font/google,display: 'swap'으로 로드하고, 미리 로드합니다. - 로고는 SVG이며, 폰트가 아닙니다.
색상(이것만 사용):
| 토큰 | Hex | 용도 |
|---|---|---|
--brand-blue | #006BA6 | 버튼, 링크, 제목, 파란색 밴드, 푸터 |
--brand-blue-hover | #005A8C | 호버 |
--brand-blue-tint | #E6F0F6 | 배지, 선택된 행 |
--bg | #EBEAEA | 페이지, 카드 내 행 |
--surface | #FFFFFF | 카드, 입력 필드, 드로어 |
--ink | #111111 | 텍스트 |
--ink-muted | #5F6368 | 캡션, 도움말 텍스트 |
--success | #1E8E3E | 아이콘 및 "확인" 점에만 사용, 본문 텍스트에는 사용하지 않음(흰색에서 명암비 4.2:1) |
--error | #C62828 | 오류 |
--on-blue | #FFFFFF | 파란색 위 텍스트; 60% 불투명도로 구분선 |
Hex 값은 :root와 BRAND.colors 구성(이메일 및 PDF에서 읽음)에만 있습니다.
구분선과 스크림은 color-mix(in srgb, var(--ink) 12%, transparent)로 파생됩니다.
모양:
- 모든 버튼, 탭, 입력 필드, 선택, 검색 상자 및 여행 컨트롤은 알약(pill) 모양입니다.
- 큰 카드는 48px 모서리, 카드는 24px, 이미지는 24px, 행은 16px입니다.
- 아웃라인 컨트롤과 입력 필드는 1px 파란색 테두리를 가집니다.
- 카드에는 테두리가 없으며, 어떤 것에도 그림자가 없습니다.
- 계층 구조는 회색 대 흰색 표면에서 비롯됩니다.
타입 스케일(데스크톱 → 폰):
| 요소 | 크기 |
|---|---|
| 히어로 | 110px / 112px 줄 높이 → 48px |
섹션 및 페이지 헤드라인(.display) | 64px / 1.22 → 40px |
| 카드 제목 | 30px |
| 목록 행 | 24px |
| 본문 | 16px |
| 도움말 텍스트 | 14px |
| 배지 | 13px |
| 가격 | 22px, 굵기 600, 표 형식 숫자 |
| 눈썹 텍스트 | DM Sans 16px, 대문자, 파란색 |
레이아웃:
- 컨테이너 최대 너비 1480px, 여백 40px(폰에서는 24px).
- 헤더 96px(폰에서는 72px), 회색 페이지에 고정(sticky)되며 스크롤 시 1px 구분선이 생깁니다.
- 섹션 간격은 데스크톱에서 약 160px, 폰에서 80px입니다.
- 중단점: 1360px(컴팩트 여행 알약), 1180px(네비게이션이 메뉴로 변경), 960px(단일 열), 640px(폰).
카피:
- 표시 헤드라인은 Title Case 사용("Everything For Your Trip, In One Place").
- UI 텍스트는 sentence case 사용("Add to my trip").
- 모든 카피는
src/content/*.ts에 있습니다. 컴포넌트에 문자열을 하드코딩하지 마십시오. - 브랜드 값(이메일, 전화, WhatsApp, 법적 이름, 소셜)은
BRAND에서 가져옵니다. - 가격은 항상 통화 헬퍼를 통해 표시(기본 NGN, 기억됨).
- 리뷰, 평점, 통계 또는 연락처 정보를 절대 임의로 만들지 마십시오.
- 플레이스홀더는 가시적으로
[대괄호]안에 남겨둡니다.
절대 준수 사항
- 위의 두 폰트와 색상만 사용하세요. 새 화면마다
scripts/audits.mjs(paletteAudit)를 실행하세요. - 그림자, 카드 테두리, 그라디언트 없음. 유일한 예외는 미묘한 사진 그라디언트이며, 텍스트에 필요한 경우에만 가능합니다.
- 모든 컨트롤은 1px 파란색 아웃라인 또는 단색 파란색 채우기가 있는 알약 모양입니다. 포커스 시 2px 흰색 + 2px 파란색 링이 표시됩니다.
- 공유 모션 프리셋 파일 하나.
transform과opacity만 애니메이션; FAQ와 예약 카드 높이는 의도적인 예외입니다.prefers-reduced-motion은 모든 것을 비활성화하고 콘텐츠를 한 번에 표시합니다. - 기본적으로 접근성:
- WCAG AA 명암비.
- 레이블이 지정된 컨트롤.
- 드로어와 모달은 포커스를 가두고, Escape 키로 닫히며, 연 버튼으로 포커스를 반환하고,
document.body의 포털에 렌더링됩니다. - 토글은
aria-pressed를 사용하고, 알약 선택은role="radio"와aria-checked를 사용합니다. - 시각적 전용 플레이스홀더는
aria-hidden입니다.
- 카피는 콘텐츠 파일에, 브랜드 값은
BRAND에서 가져옵니다. 이미지에는 실제 대체 텍스트가 필요하며, 경로는 콘텐츠 파일에 있습니다. - 390px, 768px, 1440px에 반응하며 가로 스크롤이 없음:
- 폰은 다음 카드가 일부 보이는 스냅 캐러셀을 사용합니다.
- 필터와 예약 양식은 하단 시트로 이동합니다.
- 주요 작업은 하단 고정 바에 있습니다.
- 드로어는 하단 시트가 됩니다.
- 보고 전에 확인:
- 1440px와 390px에서 스크린샷 촬영.
- 디자인과 나란히 비교.
- 팔레트, 명암비 감사 및 axe 실행.
- 프로덕션 빌드에서 Lighthouse 모바일 실행: 성능 최소 85, 접근성 최소 95, CLS 0.
- 차이점을 정직하게 보고.
새 화면 구축 순서
- 먼저 카피를 콘텐츠 파일에 넣습니다.
references/components.md의 기존 컴포넌트로 구성합니다.- 일반적인 구조: 중앙 정렬
page-head(눈썹 텍스트 +.display줄 + 소개), 그 다음 회색 페이지에 흰색large-card/step-card/checkout-card블록. - 목록은 흰색 카드 내부의 회색
update-row/listing-row행에 있습니다.
- 일반적인 구조: 중앙 정렬
- 기존 컴포넌트로 해결되지 않는 경우에만,
globals.css의 적절한 섹션에 새 클래스를 추가하고 토큰을 기반으로 구축합니다. Tailwind나 인라인 색상은 사용하지 않습니다. - 모션 프리셋(
Reveal,SectionHeading라인 상승, 호버 리프트)을 연결합니다. - 확인(
references/verification.md) 후 스크린샷과 함께 보고합니다.