feat: viewpager tab 을 개선합니다

packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx

@@ -1,3 +1,4 @@
+import { Children, isValidElement } from 'react';
 import type { ComponentWithRef } from '@vibrant-ui/core';
 import { TabView } from '@vibrant-ui/core';
 import { HStack } from '../HStack';
@@ -11,29 +12,33 @@ import type { ViewPagerTabGroupProps } from './ViewPagerTabGroupProps';
 import { withViewPagerTabGroupVariation } from './ViewPagerTabGroupProps';
 
 export const ViewPagerTabGroup = withViewPagerTabGroupVariation(
-  ({ children, tabId, testId, onTabChange, tabSpacing, native_swipeEnabled = true }) => (
-    <TabView
-      tabId={tabId}
-      testId={testId}
-      renderTobBarContainer={props => (
-        <HStack px={[20, 20, 0]} spacing={tabSpacing} data-testid="top-bar-container">
-          {props}
-        </HStack>
-      )}
-      renderTobBarItem={({ isSelected, onClick, title, tabId }) => (
-        <VStack key={title} spacing={8}>
-          <Pressable onClick={onClick} data-testid={`top-bar-${tabId}`}>
-            <Title level={5}>{title}</Title>
-          </Pressable>
-          {isSelected && <Paper borderColor="onView1" borderStyle="solid" borderWidth={1} />}
-        </VStack>
-      )}
-      onTabChange={onTabChange}
-      native_swipeEnabled={native_swipeEnabled}
-    >
-      {children}
-    </TabView>
-  )
+  ({ children, tabId, testId, onTabChange, tabSpacing, native_swipeEnabled = true }) => {
+    const validChildren = Children.toArray(children).filter(isValidElement<ViewPagerTabGroupItemProps>);
+
+    return (
+      <TabView
+        tabId={tabId}
+        testId={testId}
+        renderTobBarContainer={props => (
+          <HStack px={[20, 20, 0]} spacing={tabSpacing} data-testid="top-bar-container">
+            {props}
+          </HStack>
+        )}
+        renderTobBarItem={({ isSelected, onClick, title, tabId }) => (
+          <VStack key={title} spacing={8}>
+            <Pressable onClick={onClick} data-testid={`top-bar-${tabId}`}>
+              <Title level={5}>{title}</Title>
+            </Pressable>
+            {isSelected && <Paper borderColor="onView1" borderStyle="solid" borderWidth={1} />}
+          </VStack>
+        )}
+        onTabChange={onTabChange}
+        native_swipeEnabled={native_swipeEnabled}
+      >
+        {validChildren}
+      </TabView>
+    );
+  }
 ) as ComponentWithRef<ViewPagerTabGroupProps> & {
   Item: ComponentWithRef<ViewPagerTabGroupItemProps>;
 };

packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts

@@ -3,10 +3,10 @@ import { withVariation } from '@vibrant-ui/core';
 import type { ViewPagerTabGroupItemProps } from './ViewPagerTabGroupItem';
 
 export type ViewPagerTabGroupProps = {
-  children: ReactElement<ViewPagerTabGroupItemProps> | ReactElement<ViewPagerTabGroupItemProps>[];
+  children: (ReactElement<ViewPagerTabGroupItemProps> | undefined)[] | ReactElement<ViewPagerTabGroupItemProps>;
   tabSpacing?: number;
   tabId?: string;
-  onTabChange?: () => void;
+  onTabChange?: (tabId?: string) => void;
   testId?: string;
   native_swipeEnabled?: boolean;
 };

packages/vibrant-core/src/lib/TabView/TabView.tsx

@@ -23,7 +23,7 @@ export const TabView = withTabViewVariation(
 
       setCurrentIndex(index);
 
-      onTabChange?.();
+      onTabChange?.(currentTab?.props.tabId);
     };
 
     const changeTabById = useCallbackRef((tabId?: string) => {

packages/vibrant-core/src/lib/TabView/TabViewProps.ts

@@ -8,7 +8,7 @@ type TabViewProps = {
   children: ReactElement<TabViewItemProps> | ReactElement<TabViewItemProps>[];
   renderTobBarItem: (_: { title: string; isSelected: boolean; onClick: () => void; tabId: string }) => ReactElement;
   renderTobBarContainer: (props: ReactElementChildren) => ReactElement;
-  onTabChange?: () => void;
+  onTabChange?: (tabId?: string) => void;
   testId?: string;
   native_swipeEnabled?: boolean;
 };