feat: 디자인 시스템 에셋 및 폰트 추가

README.md

@@ -13,6 +13,34 @@ packages/
   design-system/   # design tokens and brand constants
 ```
 
+## Assets
+
+Figma에서 export한 공통 에셋은 디자인 시스템 패키지에 저장합니다.
+
+```txt
+packages/design-system/assets/
+  logos/
+```
+
+앱에서는 `designAssets` manifest를 통해 사용합니다.
+
+```ts
+import { designAssets } from '@comma/design-system';
+
+const logo = designAssets.logos.symbolDefault.src;
+```
+
+## Fonts
+
+디자인 시스템에서 사용하는 공개 폰트는 로컬 파일로 저장하고 `@font-face`로 로드합니다.
+
+```txt
+packages/design-system/assets/fonts/
+  kepler-std/
+  outfit/
+  pretendard/
+```
+
 ## Bridge
 
 WebView 통신은 `@webview-bridge/web`, `@webview-bridge/react-native`, `zod` 기반으로 구성되어 있습니다.
@@ -28,45 +56,31 @@ apps/web/src/bridge.ts            # typed web client
 ```bash
 nvm use
 pnpm install
+pnpm dev:device
 pnpm dev:web
-pnpm dev:web:lan
 pnpm dev:storybook
 pnpm dev:mobile
-pnpm dev:mobile-client
 pnpm typecheck
 pnpm lint
 pnpm format
 ```
 
 웹 개발 서버는 기본적으로 `http://127.0.0.1:5173`에서 실행됩니다.
 
-실기기에서 Expo Go로 테스트할 때는 Mac의 LAN IP를 `.env`에 넣어야 합니다.
+실기기에서 Expo Go로 테스트할 때는 아래 명령을 사용합니다. 실행 시점의 Mac LAN IP를 자동으로 감지해 WebView URL에 주입합니다.
 
 ```bash
-cp .env.example .env
-```
-
-```env
-EXPO_PUBLIC_WEB_URL=http://YOUR_MAC_LAN_IP:5173
-```
-
-그 경우 웹 서버는 LAN용 명령으로 실행합니다.
-
-```bash
-pnpm dev:web:lan
+pnpm dev:device
 ```
 
 ## Useful Commands
 
 ```bash
 pnpm dev          # web + mobile-shell 전체 dev task
 pnpm dev:web      # React web만 실행, local/simulator
-pnpm dev:web:lan  # React web을 LAN 접근 가능하게 실행, 실기기용
+pnpm dev:device   # 실기기 테스트용, web + Expo Go 서버 실행
 pnpm dev:storybook # 디자인 시스템 Storybook 실행
 pnpm dev:mobile   # Expo shell만 실행
-pnpm dev:mobile-client # installed dev-client 앱에 연결
-pnpm ios:dev-client    # iOS dev-client 빌드/실행
-pnpm android:dev-client # Android dev-client 빌드/실행
 pnpm typecheck    # 전체 타입체크
 pnpm lint         # Biome 검사
 pnpm format       # Biome 포맷
@@ -125,19 +139,3 @@ revert
 초기 세팅 추가
 버그 수정
 ```
-
-## Expo Dev Client
-
-Expo Go로 충분한 동안은 `pnpm dev:mobile`을 쓰면 됩니다. 네이티브 SDK나 config plugin이 필요해지면 dev-client 앱을 한 번 빌드한 뒤 사용합니다.
-
-```bash
-pnpm ios:dev-client
-# or
-pnpm android:dev-client
-```
-
-이후에는 아래 명령으로 Metro를 dev-client 모드로 실행합니다.
-
-```bash
-pnpm dev:mobile-client
-```

apps/mobile-shell/index.ts

@@ -0,0 +1,4 @@
+import { registerRootComponent } from 'expo';
+import App from './App';
+
+registerRootComponent(App);

apps/mobile-shell/package.json

@@ -2,32 +2,29 @@
   "name": "@comma/mobile-shell",
   "private": true,
   "version": "0.0.0",
-  "main": "expo/AppEntry.js",
+  "main": "index.ts",
   "scripts": {
     "dev": "expo start",
-    "dev:client": "expo start --dev-client",
-    "android:dev-client": "expo run:android",
-    "ios": "expo run:ios",
-    "ios:dev-client": "expo run:ios",
+    "dev:device": "expo start --go --lan",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
     "web": "expo start --web",
-    "typecheck": "tsc --noEmit",
-    "android": "expo run:android"
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@comma/bridge": "workspace:*",
     "@webview-bridge/react-native": "^1.7.9",
-    "expo": "~53.0.27",
-    "expo-dev-client": "~5.2.4",
-    "expo-splash-screen": "~0.30.10",
-    "expo-status-bar": "^2.2.0",
-    "react": "19.0.0",
-    "react-native": "0.79.6",
-    "react-native-webview": "13.13.5",
+    "expo": "~54.0.35",
+    "expo-splash-screen": "~31.0.13",
+    "expo-status-bar": "^3.0.9",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-webview": "13.15.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "@types/node": "^26.0.1",
-    "@types/react": "~19.0.10",
-    "typescript": "~5.8.3"
+    "@types/react": "~19.1.17",
+    "typescript": "~5.9.3"
   }
 }

apps/storybook/src/Assets.stories.tsx

@@ -0,0 +1,83 @@
+import { designAssets, radii, themeClass, typography, vars } from '@comma/design-system';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  title: 'Design System/Assets'
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const groups = Object.entries(designAssets);
+
+export const Assets: Story = {
+  render: () => (
+    <div
+      className={themeClass}
+      style={{
+        minHeight: '100vh',
+        padding: 32,
+        background: vars.color.backgroundPrimary,
+        color: vars.color.textPrimary,
+        fontFamily: vars.font.body
+      }}
+    >
+      <div style={{ display: 'grid', gap: 32 }}>
+        {groups.map(([groupName, assets]) => (
+          <section key={groupName} style={{ display: 'grid', gap: 12 }}>
+            <h2 style={{ margin: 0, ...typography.systemSection }}>{groupName}</h2>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
+                gap: 12
+              }}
+            >
+              {Object.entries(assets).map(([assetName, asset]) => (
+                <article
+                  key={assetName}
+                  style={{
+                    display: 'grid',
+                    gap: 10,
+                    padding: 12,
+                    borderRadius: radii.md,
+                    border: `1px solid ${vars.color.lineTertiary}`,
+                    background: vars.color.backgroundFill
+                  }}
+                >
+                  <div
+                    style={{
+                      display: 'grid',
+                      placeItems: 'center',
+                      overflow: 'auto',
+                      borderRadius: radii.sm,
+                      background: vars.color.backgroundPrimary
+                    }}
+                  >
+                    <img
+                      src={asset.src}
+                      alt={asset.description}
+                      style={{
+                        display: 'block',
+                        width: asset.width,
+                        height: asset.height,
+                        objectFit: 'contain'
+                      }}
+                    />
+                  </div>
+                  <div style={{ display: 'grid', gap: 4 }}>
+                    <strong style={typography.labelNormalB}>{assetName}</strong>
+                    <span style={{ ...typography.captionR, color: vars.color.textSecondary }}>
+                      {asset.width}x{asset.height} · {asset.figmaNodeId}
+                    </span>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
+    </div>
+  )
+};

apps/storybook/src/Button.stories.tsx

@@ -37,7 +37,7 @@ export const Playground: Story = {
         minHeight: 240,
         display: 'grid',
         placeItems: 'center',
-        background: vars.color.background,
+        background: vars.color.backgroundPrimary,
         fontFamily: vars.font.body
       }}
     >
@@ -58,7 +58,7 @@ export const Variants: Story = {
         alignItems: 'center',
         gap: 12,
         padding: 32,
-        background: vars.color.background,
+        background: vars.color.backgroundPrimary,
         fontFamily: vars.font.body
       }}
     >