[Feature] 디자인 시스템 기반 컴포넌트 이어서 작업

apps/web/src/app/page.tsx

@@ -1,17 +1,27 @@
 'use client'
 
-import { Button, Text } from '@vook-client/design-system'
+import { Button, Text, List, Icon, SearchBar } from '@vook-client/design-system'
+import { useState } from 'react'
 
 import { TestComponent } from '@/components/TestComponent'
 
 const API_URL =
   process.env.NEXT_PUBLIC_API_URL || 'https://dev.vook-api.seungyeop-lee.com'
 
 const Home = () => {
+  const [wordState, setWordState] = useState('')
+
   return (
     <main>
       Hello world!
       <Text>프리텐다드</Text>
+      <List>Label</List>
+      <SearchBar
+        wordHistory={['SDK', 'History', 'SDK']}
+        wordState={wordState}
+        setWordState={setWordState}
+      />
+      <Icon name="typo" size="typo" />
       <TestComponent />
       <Button>Button</Button>
       <h1>API_URL: {API_URL}</h1>

apps/workshop/.storybook/main.ts

@@ -76,6 +76,7 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../public'],
   async viteFinal(config) {
     return mergeConfig(config, {
       plugins: [require('@vanilla-extract/vite-plugin').vanillaExtractPlugin()],