diff --git a/.cursor/rules/omd-design.mdc b/.cursor/rules/omd-design.mdc new file mode 100644 index 000000000..0470e1acd --- /dev/null +++ b/.cursor/rules/omd-design.mdc @@ -0,0 +1,22 @@ +--- +description: Authoritative brand & UI design system. Read DESIGN.md before UI work. +globs: + - "**/*.tsx" + - "**/*.jsx" + - "**/*.vue" + - "**/*.svelte" + - "**/*.css" + - "**/*.scss" + - "**/tailwind.config.*" + - "**/components/**" + - "**/app/**/page.*" +alwaysApply: false +--- + + +The authoritative design spec lives at `@DESIGN.md` (repo root). Open and read before generating/modifying UI. + +Pending preference corrections: `@.omd/preferences.md`. + +Precedence: DESIGN.md > preferences.md > framework defaults. + diff --git a/.gitignore b/.gitignore index 02e8e113c..0ec7f3d18 100644 --- a/.gitignore +++ b/.gitignore @@ -50,3 +50,7 @@ docs/superpowers/ # Turborepo .turbo **/.turbo + +# Local AI design harness installation +/.agents/ +/.codex/ diff --git a/.omd/init-context.json b/.omd/init-context.json new file mode 100644 index 000000000..efab32a0c --- /dev/null +++ b/.omd/init-context.json @@ -0,0 +1,18 @@ +{ + "reference_id": "skyscanner", + "description": "Apply Skyscanner's desktop layout principles to every Solid Connection web POC page while preserving the existing color concept and component design.", + "mode": "inspired", + "requested_components": ["button", "input", "table", "card", "badge", "tabs", "dialog"], + "builder_url": "https://oh-my-design.kr/builder?step=preview&ref=skyscanner&cfg=c2t5c2Nhbm5lcnx8fHx8MHxidXR0b24saW5wdXQsdGFibGUsY2FyZCxiYWRnZSx0YWJzLGRpYWxvZw", + "delta_set": { + "axes": { + "density.shift": 0 + }, + "voiceHints": ["Preserve Solid Connection's existing Korean product voice"], + "matchedKeywords": ["desktop", "product", "search", "results", "filters"], + "warnings": [ + "Skyscanner color, typography, logo, imagery, and branded component styling are explicitly excluded" + ] + }, + "bootstrapped_at": "2026-07-14T03:31:28.000Z" +} diff --git a/.omd/preferences.md b/.omd/preferences.md new file mode 100644 index 000000000..2e69f1199 --- /dev/null +++ b/.omd/preferences.md @@ -0,0 +1,21 @@ +--- +schema: omd.preferences/v1 +design_md_hash_at_creation: +--- + +# Preference Log + +## 2026-07-14T03:31:28.000Z — preserve-solid-connection-visual-identity + +```omd-meta +id: pref_mrk3guqr_1401f1bd +timestamp: 2026-07-14T03:31:28.000Z +scope: visualTheme +signal: user-statement +confidence: explicit +status: pending +source_agent: codex +source_context: "feat/skyscanner-layout-poc" +``` + +Use Skyscanner only as a layout reference and preserve Solid Connection's existing color concept and component design. diff --git a/.omd/sync.lock.json b/.omd/sync.lock.json new file mode 100644 index 000000000..409860db4 --- /dev/null +++ b/.omd/sync.lock.json @@ -0,0 +1,9 @@ +{ + "design_md_hash": "25bcf48d0657", + "targets": { + "CLAUDE.md": "672475c77b07", + "AGENTS.md": "be71c8d154c9", + ".cursor/rules/omd-design.mdc": "f188a3882e27" + }, + "updated_at": "2026-07-14T03:31:28.000Z" +} diff --git a/AGENTS.md b/AGENTS.md index 2ec944c94..fea962acb 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -51,3 +51,11 @@ - Team workflow: `docs/development-workflow.md` and `CLAUDE.md`. - LLM repository context: `llms.txt`. - Bruno + codegen + React Query skill doc: `docs/skills/ai-bruno-codegen-react-query-skill.md`. + + +## Design System (oh-my-design) + +**Before any UI, styling, copy, or motion change, open and read `./DESIGN.md` in full.** It is the authoritative brand/design spec. Treat its tokens, voice, and component rules as binding unless the user overrides in chat. + +If present, read `./.omd/preferences.md` — pending corrections not yet folded into DESIGN.md. Apply them; flag conflicts. + diff --git a/CLAUDE.md b/CLAUDE.md index 7206666b2..e375e2ae9 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -55,3 +55,14 @@ git commit -m "사용자 인증 기능을 추가했습니다. 이 기능은 JWT - 관련된 설정 변경 여러 작업을 했다면 각각 별도의 커밋으로 분리합니다. + + +# Design System (oh-my-design) + +The authoritative brand & UI spec is **@./DESIGN.md**. +Read before any UI/styling/microcopy/motion work. + +Preference log (pending corrections): @./.omd/preferences.md + +Precedence: DESIGN.md > preferences.md > your defaults. + diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 000000000..6944ca9a1 --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,113 @@ +--- +omd: 0.1 +brand: Solid Connection +bootstrapped_from: skyscanner +bootstrapped_at: 2026-07-14T03:31:28.000Z +--- + +# Solid Connection Desktop Layout System + +This specification uses Skyscanner Backpack as a structural reference only. Solid Connection's visual identity is locked: existing colors, Pretendard typography, icons, copy style, component surfaces, and data behavior remain authoritative. + +## 1. Visual Theme + +- Keep the current calm, practical exchange-student product aesthetic. +- Do not copy Skyscanner colors, fonts, logo, illustrations, travel photography, or branded copy. +- Use Skyscanner only for desktop composition: a horizontal product navigation, a prominent task-entry area, centered wide content, filters beside results, and clear result density. +- Prefer functional product layouts over marketing-style hero sections. + +## 2. Color Tokens + +Colors are inherited from `apps/web/tailwind.config.ts` and must not be replaced by Skyscanner tokens. + +| Role | Token | Value | +|---|---|---| +| Primary action | `primary` | `#5950F6` | +| Secondary action | `secondary` | `#4672EE` | +| Primary tint | `primary-100` | `#EFEEFF` | +| Secondary tint | `secondary-100` | `#E8EDFD` | +| Canvas | `k-0` | `#FFFFFF` | +| Page background | `k-50` | `#F5F5F5` | +| Border | `k-100` | `#DDDDDF` | +| Primary text | `k-900` | `#1A1F27` | +| Secondary text | `k-500` | `#76797D` | + +Existing semantic accent colors remain allowed in their current domain-specific components. Do not introduce `#0062e3`, `#05203c`, Skyscanner teal, or Skyscanner error colors. + +## 3. Typography + +- Use the existing Pretendard variable font everywhere. +- Keep the existing `typo-*` utilities and their current values. +- Page title: `typo-bold-1` unless an existing page intentionally uses a smaller hierarchy. +- Section title: `typo-bold-4` or the existing local token. +- Body and metadata: preserve current `typo-medium-*` / `typo-regular-*` choices. +- Do not add Skyscanner Relative, Larken, viewport-scaled type, or negative letter spacing. + +## 4. Desktop Layout + +- Desktop begins at the repository's existing `md` breakpoint. +- Use one horizontal product navigation at the top. Keep it visible while scrolling. +- Center page content in a `1280px` maximum-width stage with `32-40px` side padding. +- Use a full-width task-entry band near the top of workflow-heavy pages. +- Results pages use a primary content column plus a `300-380px` filter/summary rail where useful. +- Dense card collections use responsive 2-4 column grids; long textual content remains a readable single column. +- Sticky rails sit below the top navigation, never underneath it. +- Auth and focused forms use a centered two-column composition only when the supporting panel adds real context. + +## 5. Mobile Layout + +- Preserve the current mobile UI and bottom navigation. +- Do not force desktop grids, horizontal product navigation, or wide containers onto mobile. +- Mobile remains single-column and keeps existing route-specific navigation and fixed actions. + +## 6. Components + +The builder-selected components are `button`, `input`, `table`, `card`, `badge`, `tabs`, and `dialog`. Their visual language remains the current Solid Connection implementation. + +- Buttons: current primary/secondary colors, existing radius, existing heights, and current disabled behavior. +- Inputs: current border, radius, focus behavior, and error treatment. +- Cards: white surface, `k-100` border, existing 8px radius, subtle current shadows only. +- Badges and tabs: current primary tint/primary text treatment; do not import Skyscanner pill or navy-chip styling. +- Tables and rows: prioritize scanability and stable columns; preserve current semantic colors. +- Dialogs: preserve existing modal components and interaction behavior. + +## 7. Navigation + +- Desktop uses a white top bar with the Solid Connection cloud mark and wordmark. +- Primary sections remain 학교, 커뮤니티, 홈, 멘토, 마이. +- Active navigation uses existing primary colors and a subtle tinted surface. +- Mobile keeps the existing bottom navigation unchanged. + +## 8. Responsive Behavior + +| Width | Behavior | +|---|---| +| `<768px` | Existing mobile single-column UI | +| `768-1023px` | Compact desktop navigation, mostly single-column content | +| `1024-1279px` | Two-column workflows and wider card grids | +| `>=1280px` | Centered `1280px` stage, full result/filter composition | + +- Minimum interactive target remains 44px where the current component supports it. +- Long Korean labels must wrap or truncate deliberately; they must not overlap adjacent content. +- No horizontal page overflow at 390px, 1024px, or 1440px. + +## 9. States + +- Preserve existing loading, empty, error, disabled, and selected states. +- Skeleton dimensions should match final card dimensions to avoid layout shift. +- Empty and error states stay inside the same desktop stage as successful content. +- Do not replace domain-specific messages with Skyscanner copy. + +## 10. Motion + +- Preserve current restrained transitions. +- Hover elevation and translation should remain subtle and must not shift surrounding layout. +- Honor `prefers-reduced-motion` for newly introduced motion. +- Do not add decorative motion, carousel movement, or Skyscanner signature animations. + +## 11. Implementation Guardrails + +- Layout changes may reorganize existing components but must not change API calls, route behavior, or business rules. +- Reuse existing components and Tailwind tokens before introducing new abstractions. +- A page is complete only after desktop and mobile browser verification, overflow checks, broken-image checks, and console review. +- Skyscanner is an inspiration source, not a visual clone. The final screen must still be immediately recognizable as Solid Connection. diff --git a/apps/university-web/src/app/university/(home)/page.tsx b/apps/university-web/src/app/university/(home)/page.tsx index 64383e850..9aca00ea1 100644 --- a/apps/university-web/src/app/university/(home)/page.tsx +++ b/apps/university-web/src/app/university/(home)/page.tsx @@ -51,8 +51,8 @@ const UniversitySelectPage = () => { -
-
+
+

University catalog

소속 대학교 선택

@@ -74,7 +74,7 @@ const UniversitySelectPage = () => {
-