refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조
에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게 [공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류. 문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인). - Topic_Programming → Domain_Programming (내부 구조 보존) - Topic_Graphic → Domain_Design - Topic_Business → Domain_Product - Topic_General → Domain_General - _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning), Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing) - 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서) - 빈 폴더 정리 (memory/procedures) - 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,218 @@
|
||||
---
|
||||
id: wiki-2026-0508-base-layouts
|
||||
title: Base Layouts
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [layout-primitives, app-shell, holy-grail-layout]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [layout, css, ui, responsive, shell]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: tsx
|
||||
framework: tailwind
|
||||
---
|
||||
|
||||
# Base Layouts
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 layout 의 primitive 의 reuse 한다"**. 매 base layout 의 application shell — 매 header / sidebar / main / footer 의 stable scaffolding. 매 2026 의 CSS Grid + Flexbox + Container Queries (baseline 2024) + `dvh/svh/lvh` viewport units 의 holy-grail 의 trivial 의 만들었다.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 canonical layouts
|
||||
- **Stack**: 매 vertical flow — header/main/footer.
|
||||
- **Sidebar**: 매 nav + content — 2-column.
|
||||
- **Holy Grail**: 매 header + nav + main + aside + footer.
|
||||
- **Centered (Cover)**: 매 hero / login.
|
||||
- **Split-pane**: 매 editor / preview, mail client.
|
||||
- **Dashboard grid**: 매 card grid — 매 auto-fit minmax.
|
||||
|
||||
### 매 modern primitives (2024-2026)
|
||||
- **CSS Grid `subgrid`**: 매 nested alignment (Firefox 71, Chrome 117, Safari 16).
|
||||
- **Container queries**: 매 component-level responsive (`@container`).
|
||||
- **`dvh` / `svh` / `lvh`**: 매 mobile address-bar 의 stable viewport.
|
||||
- **`:has()`**: 매 parent selector — 매 layout 의 child-state-driven.
|
||||
- **Anchor positioning** (Chrome 125+): 매 popover / tooltip 의 native.
|
||||
|
||||
### 매 응용
|
||||
1. Admin dashboard.
|
||||
2. Editor (VS Code-style).
|
||||
3. Marketing landing.
|
||||
4. Mobile app shell — 매 bottom nav.
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### Holy Grail — CSS Grid (12 lines)
|
||||
```css
|
||||
.app {
|
||||
display: grid;
|
||||
min-height: 100dvh;
|
||||
grid-template:
|
||||
"header header header" auto
|
||||
"nav main aside" 1fr
|
||||
"footer footer footer" auto
|
||||
/ 200px 1fr 200px;
|
||||
}
|
||||
.header { grid-area: header; }
|
||||
.nav { grid-area: nav; }
|
||||
.main { grid-area: main; }
|
||||
.aside { grid-area: aside; }
|
||||
.footer { grid-area: footer; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app {
|
||||
grid-template:
|
||||
"header" auto
|
||||
"nav" auto
|
||||
"main" 1fr
|
||||
"aside" auto
|
||||
"footer" auto / 1fr;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Tailwind app shell (React)
|
||||
```tsx
|
||||
export function AppShell({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="grid min-h-dvh grid-rows-[auto_1fr_auto] grid-cols-[16rem_1fr]">
|
||||
<header className="col-span-2 border-b bg-white px-4 py-3">
|
||||
<Logo /> <UserMenu className="ml-auto" />
|
||||
</header>
|
||||
<aside className="border-r overflow-y-auto">
|
||||
<Nav />
|
||||
</aside>
|
||||
<main className="overflow-y-auto p-6">{children}</main>
|
||||
<footer className="col-span-2 border-t px-4 py-2 text-sm text-gray-500">
|
||||
© 2026
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Centered (Cover)
|
||||
```css
|
||||
.cover {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 100dvh;
|
||||
padding: 1rem;
|
||||
}
|
||||
.cover > * { max-inline-size: 60ch; }
|
||||
```
|
||||
|
||||
### Split-pane (resizable)
|
||||
```tsx
|
||||
// react-resizable-panels (2025 default)
|
||||
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
|
||||
|
||||
<PanelGroup direction="horizontal">
|
||||
<Panel defaultSize={30} minSize={20}><FileTree /></Panel>
|
||||
<PanelResizeHandle className="w-1 bg-gray-200 hover:bg-blue-500" />
|
||||
<Panel><Editor /></Panel>
|
||||
<PanelResizeHandle className="w-1 bg-gray-200" />
|
||||
<Panel defaultSize={30}><Preview /></Panel>
|
||||
</PanelGroup>
|
||||
```
|
||||
|
||||
### Auto-fit dashboard grid
|
||||
```css
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
### Container queries
|
||||
```css
|
||||
.card { container-type: inline-size; }
|
||||
|
||||
@container (min-width: 400px) {
|
||||
.card .layout {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Sidebar with `:has()` (zero JS)
|
||||
```css
|
||||
.app:has(#nav-toggle:checked) .sidebar { transform: translateX(0); }
|
||||
.sidebar { transform: translateX(-100%); transition: transform .2s; }
|
||||
```
|
||||
|
||||
### Mobile app shell — bottom nav (safe area)
|
||||
```css
|
||||
.bottom-nav {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
padding-block-end: env(safe-area-inset-bottom);
|
||||
background: white;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.scroll-area {
|
||||
height: 100dvh;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
```
|
||||
|
||||
### Subgrid (nested card alignment)
|
||||
```css
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-rows: subgrid;
|
||||
grid-row: span 3; /* title / body / footer aligned across siblings */
|
||||
}
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| Layout | Tool |
|
||||
|---|---|
|
||||
| App shell, 2D | CSS Grid named areas |
|
||||
| 1D linear | Flexbox |
|
||||
| Component-level responsive | Container queries |
|
||||
| Resizable panes | react-resizable-panels / Radix Splitter |
|
||||
| Mobile shell | dvh + safe-area-inset |
|
||||
| Multi-card alignment | `subgrid` |
|
||||
|
||||
**기본값**: Grid for 2D + named areas, Flex for 1D, Tailwind utility for prototyping.
|
||||
|
||||
## 🔗 Graph
|
||||
- 변형: [[Holy-Grail-Layout]] · [[App-Shell]]
|
||||
- Adjacent: [[Arrangement-and-Composition]] · [[Architecture_Diagramming_Standards]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 ASCII wireframe → CSS Grid 의 generation, Tailwind class 의 suggestion.
|
||||
**언제 X**: 매 pixel-perfect design — 매 designer + visual review 의 필수.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **`100vh` on mobile**: 매 address-bar overflow — 매 `100dvh` 의 사용.
|
||||
- **Nested flex hell**: 매 5+ flex level — 매 grid 의 use.
|
||||
- **Fixed pixel breakpoint**: 매 zoom 의 break — 매 `em`/`rem` 의 use.
|
||||
- **Hidden overflow without scroll**: 매 content 의 cut.
|
||||
- **Magic number margins**: 매 design token / spacing scale 의 use.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (CSS Grid spec — W3C; Every Layout — Bell & Andrew; web.dev — container queries).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — Grid/Flex/container-queries/subgrid base layout patterns |
|
||||
Reference in New Issue
Block a user