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

Author: choihooo

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` 기반으로 구성되어 있습니다.

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/DesignTokens.stories.tsx

@@ -34,7 +34,10 @@ const typographyTokenNames = [
   'labelReadingB',
   'labelReadingR',
   'captionB',
-  'captionR'
+  'captionR',
+  'engNum',
+  'systemEyebrow',
+  'systemSection'
 ] as const;
 
 const tokenGroupStyle: React.CSSProperties = {