chore(brain): ASTRA 성장 자산 동기화 — 기능 인벤토리·growth(약점프로필/학습큐)·일화기억·장기기억·회의록 원문

2026-06-12 16:37:41 +09:00
parent a97fc7be07
commit 89fb05a28a
781 changed files with 138546 additions and 47 deletions
@@ -0,0 +1,210 @@
+---
+id: wiki-2026-0508-uber-base-web
+title: Uber Base Web
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Base Web, baseui, Uber Base, base-ui (uber)]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.85
+verification_status: applied
+tags: [react, design-system, uber, baseweb, components]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: typescript
+  framework: react-baseweb
+---
+
+# Uber Base Web
+
+## 매 한 줄
+> **"매 Uber 의 React design system — 매 themeable, 매 accessible, 매 styletron-based"**. 2026 현재 Base Web 은 maintenance mode — 매 active development 는 적음. 매 최신 stack 은 보통 Radix / shadcn / Tailwind 의 선호. 매 historical / 매 enterprise reference.
+
+## 매 핵심
+
+### 매 layers
+- **Components**: Button, Input, Modal, DataTable, Picker, etc.
+- **Styletron**: CSS-in-JS engine — atomic CSS output.
+- **Theme**: tokens (color, typography, spacing, sizing).
+- **Overrides API**: deep customization 의 매 unique mechanism.
+
+### 매 Overrides 특징
+- 매 component 의 매 sub-part (`Root`, `Label`, `Input`, etc.) 를 매 style/component/props 의 override.
+- 매 powerful 하지만 매 verbose.
+
+### 매 응용
+1. Uber internal apps (전통적).
+2. Enterprise dashboards / data-heavy SaaS.
+3. 매 highly-themeable products.
+
+## 💻 패턴
+
+### Setup
+```bash
+npm i baseui styletron-engine-monolithic styletron-react react react-dom
+```
+
+```tsx
+import { Provider as StyletronProvider } from 'styletron-react';
+import { Client as Styletron } from 'styletron-engine-monolithic';
+import { LightTheme, BaseProvider } from 'baseui';
+
+const engine = new Styletron();
+
+export function App({ children }: { children: React.ReactNode }) {
+  return (
+    <StyletronProvider value={engine}>
+      <BaseProvider theme={LightTheme}>
+        {children}
+      </BaseProvider>
+    </StyletronProvider>
+  );
+}
+```
+
+### Button
+```tsx
+import { Button, KIND, SIZE, SHAPE } from 'baseui/button';
+
+<Button kind={KIND.primary} size={SIZE.compact} shape={SHAPE.pill}>
+  Save
+</Button>
+```
+
+### Form input
+```tsx
+import { FormControl } from 'baseui/form-control';
+import { Input } from 'baseui/input';
+
+<FormControl label="Email" caption="We never share">
+  <Input value={email} onChange={(e) => setEmail(e.currentTarget.value)} />
+</FormControl>
+```
+
+### Modal
+```tsx
+import { Modal, ModalHeader, ModalBody, ModalFooter, ModalButton } from 'baseui/modal';
+
+<Modal isOpen={open} onClose={() => setOpen(false)}>
+  <ModalHeader>Confirm</ModalHeader>
+  <ModalBody>Delete this?</ModalBody>
+  <ModalFooter>
+    <ModalButton kind="tertiary" onClick={() => setOpen(false)}>Cancel</ModalButton>
+    <ModalButton onClick={onConfirm}>Delete</ModalButton>
+  </ModalFooter>
+</Modal>
+```
+
+### Overrides API
+```tsx
+import { Button } from 'baseui/button';
+
+<Button
+  overrides={{
+    BaseButton: {
+      style: ({ $theme }) => ({
+        borderRadius: '999px',
+        backgroundColor: $theme.colors.accent,
+        ':hover': { backgroundColor: $theme.colors.accent700 },
+      }),
+    },
+  }}
+>
+  Custom
+</Button>
+```
+
+### Custom theme
+```tsx
+import { createTheme, lightThemePrimitives, BaseProvider } from 'baseui';
+
+const primitives = {
+  ...lightThemePrimitives,
+  primaryFontFamily: 'Inter, system-ui, sans-serif',
+};
+
+const overrides = {
+  colors: {
+    buttonPrimaryFill: '#0F62FE',
+    buttonPrimaryHover: '#0353E9',
+  },
+};
+
+const theme = createTheme(primitives, overrides);
+
+<BaseProvider theme={theme}>...</BaseProvider>
+```
+
+### DataTable (heavy)
+```tsx
+import { Unstable_StatefulDataTable as DataTable } from 'baseui/data-table';
+import { StringColumn, NumericalColumn } from 'baseui/data-table';
+
+const columns = [
+  StringColumn({ title: 'Name', mapDataToValue: (d: Row) => d.name }),
+  NumericalColumn({ title: 'Score', mapDataToValue: (d: Row) => d.score }),
+];
+
+<div style={{ height: 500 }}>
+  <DataTable columns={columns} rows={rows.map(r => ({ id: r.id, data: r }))} />
+</div>
+```
+
+### Server-side rendering
+```tsx
+// Next.js _document.tsx
+import { Server, Sheet } from 'styletron-engine-monolithic';
+
+const engine = new Server();
+// 매 render 후 engine.getStylesheets() → 매 inject to head
+```
+
+### Migration off (2026 trend)
+```text
+Base Web component  →  매 Modern alternative
+─────────────────────────────────────────────
+Button             →  shadcn/ui Button (Radix Slot + Tailwind)
+Modal              →  Radix Dialog + Tailwind
+Input/FormControl  →  react-hook-form + Radix + Tailwind
+DataTable          →  TanStack Table + Tailwind
+Theme              →  CSS variables / Tailwind tokens
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| 매 existing Uber/Base Web codebase | 유지 — incremental migration |
+| 매 new project (2026) | shadcn/ui + Radix + Tailwind 또는 Mantine |
+| 매 enterprise / internal tool | Mantine / Ant Design |
+| 매 mobile-web heavy | Tamagui / NativeBase |
+
+**기본값**: 매 new project 는 매 Base Web 의 회피. 매 modern stack 사용.
+
+## 🔗 Graph
+- 부모: [[Design_System]]
+- 변형: [[shadcn_ui]]
+- 응용: [[Styletron]]
+- Adjacent: [[Radix_UI]] · [[Tailwind_CSS]]
+
+## 🤖 LLM 활용
+**언제**: 매 Overrides API debug, 매 theme migration, 매 Base Web → modern stack 변환.
+**언제 X**: 매 new greenfield project — 매 더 modern alternative.
+
+## ❌ 안티패턴
+- **Overrides everywhere**: 매 verbose + 매 maintenance burden.
+- **Mixing styletron + emotion**: 매 dual CSS-in-JS conflict.
+- **No SSR setup**: 매 FOUC.
+- **Greenfield Base Web in 2026**: 매 ecosystem 가 늙음.
+
+## 🧪 검증 / 중복
+- Verified (Base Web docs, Uber Engineering blog, GitHub uber/baseweb, 2026 maintenance status).
+- 신뢰도 A-.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — Base Web with Overrides API, theming, migration notes |