From b31fa6dd86849337829587f7691bdd993a649ba8 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 13 Jun 2025 15:53:34 +0900 Subject: [PATCH 1/6] =?UTF-8?q?chore:=20ui=20=ED=8C=A8=ED=82=A4=EC=A7=80?= =?UTF-8?q?=20storybook=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/packages/ui/.storybook/main.ts | 15 ++++++++++++ frontend/packages/ui/.storybook/preview.ts | 16 +++++++++++++ frontend/packages/ui/package.json | 4 +++- frontend/packages/ui/vite.config.ts | 28 ++++++++++++++++++++++ 4 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 frontend/packages/ui/.storybook/main.ts create mode 100644 frontend/packages/ui/.storybook/preview.ts create mode 100644 frontend/packages/ui/vite.config.ts diff --git a/frontend/packages/ui/.storybook/main.ts b/frontend/packages/ui/.storybook/main.ts new file mode 100644 index 00000000..9b6e0b42 --- /dev/null +++ b/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; diff --git a/frontend/packages/ui/.storybook/preview.ts b/frontend/packages/ui/.storybook/preview.ts new file mode 100644 index 00000000..3792e452 --- /dev/null +++ b/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; diff --git a/frontend/packages/ui/package.json b/frontend/packages/ui/package.json index dee142cf..50c0a78e 100644 --- a/frontend/packages/ui/package.json +++ b/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" diff --git a/frontend/packages/ui/vite.config.ts b/frontend/packages/ui/vite.config.ts new file mode 100644 index 00000000..43b4882b --- /dev/null +++ b/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'), + }, + }, +}); From f5b8d49576548dbf7a15b359d175a211cca9688f Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 13 Jun 2025 15:58:13 +0900 Subject: [PATCH 2/6] =?UTF-8?q?chore:=20useCheckbox=20=ED=9B=85=EC=9D=84?= =?UTF-8?q?=20export?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/packages/ui/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/packages/ui/src/index.ts b/frontend/packages/ui/src/index.ts index b1fceab1..d27965be 100644 --- a/frontend/packages/ui/src/index.ts +++ b/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'; \ No newline at end of file From d0241fb53f2a4e5545669d1e0002afee2310d036 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 13 Jun 2025 16:25:05 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20useEffect=EB=A1=9C=20=EC=9D=B8?= =?UTF-8?q?=ED=95=9C=20=EB=AC=B4=ED=95=9C=EB=A3=A8=ED=94=84=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/packages/ui/src/hooks/useGroup.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/frontend/packages/ui/src/hooks/useGroup.ts b/frontend/packages/ui/src/hooks/useGroup.ts index 53c7f595..5665b0f6 100644 --- a/frontend/packages/ui/src/hooks/useGroup.ts +++ b/frontend/packages/ui/src/hooks/useGroup.ts @@ -1,4 +1,4 @@ -import { useEffect, useReducer } from 'react'; +import { useReducer } from 'react'; type State = { checkedList: Set; @@ -65,15 +65,10 @@ 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, { + checkedList: new Set(defaultCheckedList), + isAllChecked: defaultCheckedList?.length === itemIds.length, + }); const handleToggleCheck = (id: number) => { dispatch({ type: 'TOGGLE_ITEM', id, itemIds }); From a22be1769275d9a242cfc5e27d43144066a066c4 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 13 Jun 2025 16:28:04 +0900 Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20=EC=A4=91=EB=B3=B5=EB=90=9C=20i?= =?UTF-8?q?nit=20=EB=A1=9C=EC=A7=81=EC=9D=84=20=ED=95=A8=EC=88=98=EB=A1=9C?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/packages/ui/src/hooks/useGroup.ts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/frontend/packages/ui/src/hooks/useGroup.ts b/frontend/packages/ui/src/hooks/useGroup.ts index 5665b0f6..02fe0f6a 100644 --- a/frontend/packages/ui/src/hooks/useGroup.ts +++ b/frontend/packages/ui/src/hooks/useGroup.ts @@ -36,10 +36,7 @@ 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: @@ -47,6 +44,11 @@ const reducer = (state: State, action: Action): State => { } }; +const initializeState = (defaultCheckedList: number[], itemIds: number[]): State => ({ + checkedList: new Set(defaultCheckedList), + isAllChecked: defaultCheckedList.length === itemIds.length, +}); + interface GroupStateProps { defaultCheckedList?: number[]; itemIds: number[]; @@ -65,10 +67,7 @@ export const useGroup = ({ defaultCheckedList = [], itemIds, }: GroupStateProps): GroupStateReturn => { - const [state, dispatch] = useReducer(reducer, { - checkedList: new Set(defaultCheckedList), - isAllChecked: defaultCheckedList?.length === itemIds.length, - }); + const [state, dispatch] = useReducer(reducer, initializeState(defaultCheckedList, itemIds)); const handleToggleCheck = (id: number) => { dispatch({ type: 'TOGGLE_ITEM', id, itemIds }); From dc4a751490c33cfe666d0565b7896e2ae99b4a31 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 13 Jun 2025 16:37:56 +0900 Subject: [PATCH 5/6] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20alias=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/packages/ui/vite.config.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/packages/ui/vite.config.ts b/frontend/packages/ui/vite.config.ts index 43b4882b..11dad966 100644 --- a/frontend/packages/ui/vite.config.ts +++ b/frontend/packages/ui/vite.config.ts @@ -18,11 +18,7 @@ export default defineConfig({ 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'), }, }, }); From 992be41fe254ee61903adf3aed2549fae19dcf88 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 13 Jun 2025 22:31:14 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor:=20vite.config=EB=A5=BC=20storyboo?= =?UTF-8?q?kConfig=EC=9D=98=20viteFinal=20=EC=98=B5=EC=85=98=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EC=A0=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/packages/ui/.storybook/main.ts | 27 +++++++++++++++++++++++++ frontend/packages/ui/vite.config.ts | 24 ---------------------- 2 files changed, 27 insertions(+), 24 deletions(-) delete mode 100644 frontend/packages/ui/vite.config.ts diff --git a/frontend/packages/ui/.storybook/main.ts b/frontend/packages/ui/.storybook/main.ts index 9b6e0b42..b66e7ae4 100644 --- a/frontend/packages/ui/.storybook/main.ts +++ b/frontend/packages/ui/.storybook/main.ts @@ -1,4 +1,8 @@ import type { StorybookConfig } from '@storybook/react-vite'; +import { vanillaExtractPlugin as veEsbuildPlugin } from '@vanilla-extract/esbuild-plugin'; +import { vanillaExtractPlugin as veVitePlugin } from '@vanilla-extract/vite-plugin'; +import path from 'path'; +import { fileURLToPath } from 'url'; const config: StorybookConfig = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], @@ -11,5 +15,28 @@ const config: StorybookConfig = { name: '@storybook/react-vite', options: {}, }, + viteFinal: async (config) => { + const { mergeConfig } = await import('vite'); + const filename = fileURLToPath(import.meta.url); + const dirname = path.dirname(filename); + + return mergeConfig( + config, + { + plugins: [veVitePlugin()], + optimizeDeps: { + esbuildOptions: { + plugins: [veEsbuildPlugin({ runtime: true })], + }, + }, + resolve: { + alias: { + '@': path.resolve(dirname, '../src'), + '@hooks': path.resolve(dirname, '../src/hooks'), + '@components': path.resolve(dirname, '../src/components'), + }, + }, + }); + }, }; export default config; diff --git a/frontend/packages/ui/vite.config.ts b/frontend/packages/ui/vite.config.ts deleted file mode 100644 index 11dad966..00000000 --- a/frontend/packages/ui/vite.config.ts +++ /dev/null @@ -1,24 +0,0 @@ -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'), - '@components': path.resolve(dirname, 'src/components'), - }, - }, -});