fix: resolve TStepBox and TTabBox onChange not working in Storybook

- Add explicit destructuring of onChange prop in both components
- Fix args.onChange overriding actual onChange function in Storybook Templates
- Update context default values for onChange callbacks to empty functions
- Ensure onChange callbacks are properly invoked during navigation

Author: Siyeop

src/components/data-container/step-box/TStepBox.tsx

@@ -12,6 +12,7 @@ const TStepBox = ({
     nextButtonLabel = 'Next',
     completeButtonLabel = 'Complete',
     value,
+    onChange,
     children,
     style,
     className,
@@ -24,6 +25,7 @@ const TStepBox = ({
         nextButtonLabel,
         completeButtonLabel,
         value,
+        onChange,
         children,
         style,
         className,

src/components/data-container/step-box/TStepBoxContext.ts

@@ -16,7 +16,7 @@ type stepBoxContext = {
 export const tabBoxContext = createContext<stepBoxContext>({
     totalStep: 0,
     currentStep: 0,
-    onChangeCurrentStep: null,
+    onChangeCurrentStep: () => {},
     prevButtonLabel: '',
     nextButtonLabel: '',
     completeButtonLabel: '',

stories/components/data-container/step-box/TStepBox.stories.tsx

@@ -16,8 +16,12 @@ type Story = StoryObj<typeof TStepBox>;
 const Template = (args) => {
     const [stepNumber, setStepNumber] = useState<number>(1);
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {onChange, ...restArgs} = args;
+
     return (
         <>
+            {stepNumber}
             <TStepBox
                 value={stepNumber}
                 onChange={setStepNumber}
@@ -29,7 +33,7 @@ const Template = (args) => {
                     '정책 선택',
                     '확인 및 생성',
                 ]}
-                {...args}
+                {...restArgs}
             >
                 <TStepBoxItem contentDirection={'top-bottom'}>
                     <div>Step 1-1 Content</div>
@@ -68,7 +72,7 @@ const Template = (args) => {
                     '정책 선택',
                     '확인 및 생성',
                 ]}
-                {...args}
+                {...restArgs}
             >
                 <TStepBoxItem contentDirection={'left-right'}>
                     <div>Step 1-1 Content</div>
@@ -103,7 +107,7 @@ export const Default: Story = {
     render: Template,
     args: {
         prevButtonLabel: '이전',
-        nextButtonLabel: '다음22',
+        nextButtonLabel: '다음',
         completeButtonLabel: '저장하기',
     },
 };

stories/components/data-container/tab-box/TTabBox.stories.tsx

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react';
+import {useState} from 'react';
 
-import useInputState from '@/common/hook/UseInputState';
 import TTabBox from '@/components/data-container/tab-box/TTabBox';
 import type {TTabBoxValue} from '@/components/data-container/tab-box/TTabBox.interface';
 import TTabItem from '@/components/data-container/tab-box/TTabItem';
@@ -15,11 +15,14 @@ export default meta;
 type Story = StoryObj<typeof TTabBox>;
 
 const Template = (args) => {
-    const tab = useInputState<TTabBoxValue>(0);
+    const [tab, setTab] = useState<TTabBoxValue>(0);
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {onChange, ...restArgs} = args;
 
     return (
         <>
-            <TTabBox {...tab} {...args}>
+            <TTabBox value={tab} onChange={setTab} {...restArgs}>
                 <TTabItem label={'One'} content={<div>Tab One</div>} />
                 <TTabItem label={'Two'} content={<div>Tab Two</div>} />
                 <TTabItem label={'Three'} content={<div>Tab Three</div>} />