[FE-Feat] ui 패키지에 Storybook 세팅

frontend/packages/ui/.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+export default config;

frontend/packages/ui/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import '@endolphin/theme/css';
+
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

frontend/packages/ui/package.json

@@ -11,7 +11,9 @@
   "scripts": {
     "build": "tsup --clean",
     "start": "tsup --watch",
-    "test": "vitest"
+    "test": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "publishConfig": {
     "access": "public"

frontend/packages/ui/src/hooks/useGroup.ts

@@ -1,4 +1,4 @@
-import { useEffect, useReducer } from 'react';
+import { useReducer } from 'react';
 
 type State = {
   checkedList: Set<number>;
@@ -36,17 +36,19 @@ const reducer = (state: State, action: Action): State => {
     }
 
     case 'INIT': {
-      return { 
-        checkedList: new Set(action.defaultCheckedList),
-        isAllChecked: action.defaultCheckedList.length === action.itemIds.length,
-      };
+      return initializeState(action.defaultCheckedList, action.itemIds);
     }
 
     default:
       return state;
   }
 };
 
+const initializeState = (defaultCheckedList: number[], itemIds: number[]): State => ({
+  checkedList: new Set(defaultCheckedList),
+  isAllChecked: defaultCheckedList.length === itemIds.length,
+});
+
 interface GroupStateProps {
   defaultCheckedList?: number[];
   itemIds: number[];
@@ -65,15 +67,7 @@ export const useGroup = ({
   defaultCheckedList = [], 
   itemIds, 
 }: GroupStateProps): GroupStateReturn => {  
-  const [state, dispatch] = useReducer(
-    reducer, { 
-      checkedList: new Set(defaultCheckedList), 
-      isAllChecked: defaultCheckedList.length === itemIds.length, 
-    });
-
-  useEffect(() => {
-    dispatch({ type: 'INIT', defaultCheckedList, itemIds });
-  }, [defaultCheckedList, itemIds]);
+  const [state, dispatch] = useReducer(reducer, initializeState(defaultCheckedList, itemIds));
 
   const handleToggleCheck = (id: number) => {
     dispatch({ type: 'TOGGLE_ITEM', id, itemIds });

frontend/packages/ui/src/index.ts

@@ -16,4 +16,5 @@ export { Tab } from './components/Tab';
 export { Text } from './components/Text';
 export { Toggle } from './components/Toggle';
 export { default as Tooltip } from './components/Tooltip';
+export { useCheckbox } from './hooks/useCheckbox';
 export { useGroupContext, useUnsafeGroupContext } from '@components/Group/GroupContext';

frontend/packages/ui/vite.config.ts

@@ -0,0 +1,28 @@
+import { vanillaExtractPlugin as veEsbuildPlugin } from '@vanilla-extract/esbuild-plugin';
+import { vanillaExtractPlugin as veVitePlugin } from '@vanilla-extract/vite-plugin';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { defineConfig } from 'vitest/config';
+
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+
+export default defineConfig({
+  plugins: [react(), veVitePlugin()],
+  optimizeDeps: {
+    esbuildOptions: {
+      plugins: [veEsbuildPlugin({ runtime: true })],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(dirname, 'src'),
+      '@hooks': path.resolve(dirname, 'src/hooks'),
+      '@utils': path.resolve(dirname, 'src/utils'),
+      '@constants': path.resolve(dirname, 'src/constants'),
+      '@components': path.resolve(dirname, 'src/components'),
+      '@features': path.resolve(dirname, 'src/features'),
+    },
+  },
+});