feat: ViewPagerTabGroup에서 탭 초기값을 설정할 수 있다

pedaling · Sep 26, 2024 · 1a53eda · 1a53eda
1 parent 3b7b310
commit 1a53eda
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 23 deletions.
diff --git a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx
@@ -10,27 +10,29 @@ import { ViewPagerTabGroupItem } from './ViewPagerTabGroupItem';
 import type { ViewPagerTabGroupProps } from './ViewPagerTabGroupProps';
 import { withViewPagerTabGroupVariation } from './ViewPagerTabGroupProps';
 
-export const ViewPagerTabGroup = withViewPagerTabGroupVariation(({ children, testId, onTabChange, tabSpacing }) => (
-  <TabView
-    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}
-  >
-    {children}
-  </TabView>
-)) as ComponentWithRef<ViewPagerTabGroupProps> & {
+export const ViewPagerTabGroup = withViewPagerTabGroupVariation(({ children, testId, onTabChange, tabSpacing, initialIndex }) => (
+    <TabView
+      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>
+      )}
+      initialIndex={initialIndex}
+      onTabChange={onTabChange}
+    >
+      {children}
+    </TabView>
+  )
+) as ComponentWithRef<ViewPagerTabGroupProps> & {
   Item: ComponentWithRef<ViewPagerTabGroupItemProps>;
 };
 

diff --git a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts
@@ -7,6 +7,7 @@ export type ViewPagerTabGroupProps = {
   tabSpacing?: number;
   onTabChange?: () => void;
   testId?: string;
+  initialIndex?: number;
 };
 
 export const withViewPagerTabGroupVariation = withVariation<ViewPagerTabGroupProps>('ViewPagerTabGroup')();
diff --git a/packages/vibrant-core/src/lib/TabView/TabView.tsx b/packages/vibrant-core/src/lib/TabView/TabView.tsx
@@ -4,8 +4,8 @@ import type { TabViewItemProps } from '../TabViewItem';
 import { withTabViewVariation } from './TabViewProps';
 
 export const TabView = withTabViewVariation(
-  ({ children, testId = 'tab-view', onTabChange, renderTobBarItem, renderTobBarContainer }) => {
-    const [currentIndex, setCurrentIndex] = useState(0);
+  ({ children, testId = 'tab-view', onTabChange, renderTobBarItem, renderTobBarContainer, initialIndex = 0 }) => {
+    const [currentIndex, setCurrentIndex] = useState(initialIndex);
     const childrenElement = Children.toArray(children).filter(isValidElement<TabViewItemProps>);
 
     const selectedTab = childrenElement.find((_, index) => index === currentIndex);

diff --git a/packages/vibrant-core/src/lib/TabView/TabViewProps.ts b/packages/vibrant-core/src/lib/TabView/TabViewProps.ts
@@ -9,6 +9,7 @@ type TabViewProps = {
   renderTobBarContainer: (props: ReactElementChildren) => ReactElement;
   onTabChange?: () => void;
   testId?: string;
+  initialIndex?: number;
 };
 
 export const withTabViewVariation = withVariation<TabViewProps>('TabView')();