From d25ae42a36fde5baac8446db979826080ab1538d Mon Sep 17 00:00:00 2001
From: loki-class101 <loki.kim@101.inc>
Date: Thu, 26 Sep 2024 20:25:21 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20ViewPagerTabGroup=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=ED=83=AD=20=EC=B4=88=EA=B8=B0=EA=B0=92=EC=9D=84=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewPagerTabGroup/ViewPagerTabGroup.tsx   | 45 ++++++++++---------
 .../ViewPagerTabGroupProps.ts                 |  1 +
 .../vibrant-core/src/lib/TabView/TabView.tsx  |  4 +-
 .../src/lib/TabView/TabViewProps.ts           |  1 +
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx
index bc7dd6186..67197c822 100644
--- a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx
+++ b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx
@@ -10,27 +10,30 @@ 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
index 060cddbe4..d523ecb52 100644
--- 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
index f33442680..c19e629fd 100644
--- 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
index 7e4c96ede..882ffa6d0 100644
--- 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')();