feat: 활성화된 탭 페이지 이동 시에도 고정 (#107)

* feat: TabsProvider 구현

* refactor: Tabs 컨텍스트로 변경

* refactor: 탭 타입 지정

* refactor: 훅 이름 변경

src/App.tsx

@@ -5,7 +5,7 @@ import {
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { RouterProvider } from 'react-router-dom'
-import { ThemeProvider, ToastProvider } from './components'
+import { TabsProvider, ThemeProvider, ToastProvider } from './components'
 import { router } from './routes'
 
 const queryClient = new QueryClient({
@@ -31,7 +31,9 @@ function App() {
     <ToastProvider>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider>
-          <RouterProvider router={router} />
+          <TabsProvider>
+            <RouterProvider router={router} />
+          </TabsProvider>
         </ThemeProvider>
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>

src/components/TabsProvider/index.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren, useState } from 'react'
+import { TabsContext } from '@/contexts'
+import { Tabs } from '@/types'
+
+const TabsProvider = ({ children }: PropsWithChildren) => {
+  const [activeTab, setActiveTab] = useState<Tabs>('invited')
+
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+      {children}
+    </TabsContext.Provider>
+  )
+}
+
+export default TabsProvider

src/components/index.ts

@@ -7,6 +7,7 @@ export { default as SearchBar } from './SearchBar'
 export { default as Input } from './Input'
 export { default as Header } from './Header'
 export { default as ThemeProvider } from './ThemeProvider'
+export { default as TabsProvider } from './TabsProvider'
 export { default as Dropdown } from './Dropdown'
 export { default as Modal } from './Modal'
 export { default as ReviewInfo } from './ReviewInfo'

src/contexts/TabsContext.tsx

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction, createContext } from 'react'
+import { Tabs } from '@/types'
+
+interface TabsContextType {
+  activeTab: Tabs
+  setActiveTab: Dispatch<SetStateAction<Tabs>>
+}
+
+const TabsContext = createContext<TabsContextType>({
+  activeTab: 'invited',
+  setActiveTab: () => {},
+})
+
+export default TabsContext

src/contexts/index.ts

@@ -1,2 +1,3 @@
 export { default as ThemeContext } from './ThemeContext'
 export { default as ToastContext } from './ToastContext'
+export { default as TabsContext } from './TabsContext'

src/hooks/index.ts

@@ -6,3 +6,4 @@ export { default as useToast } from './useToast'
 export { default as useInfiniteScroll } from './useInfiniteScroll'
 export { default as useRefine } from './useRefine'
 export { default as useCheckHeaderRoute } from './useCheckHeaderRoute'
+export { default as useTabs } from './useTabs'

src/hooks/useTabs.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import { TabsContext } from '@/contexts'
+
+const useTabs = () => {
+  return useContext(TabsContext)
+}
+
+export default useTabs

src/pages/MainPage/index.tsx

@@ -1,6 +1,6 @@
-import { Suspense, useState } from 'react'
+import { Suspense } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useToast } from '@/hooks'
+import { useTabs, useToast } from '@/hooks'
 import { Header, TokenErrorBoundary } from '@/components'
 import { useDeleteReview } from '@/apis/hooks'
 import { rangerIdle } from '@/assets/images'
@@ -20,9 +20,7 @@ const MainPage = () => {
 
   const navigate = useNavigate()
 
-  const [activeTab, setActiveTab] = useState<
-    'invited' | 'created' | 'received'
-  >('invited')
+  const { activeTab, setActiveTab } = useTabs()
 
   const { addToast } = useToast()
 

src/types/index.ts

@@ -1,2 +1,3 @@
 export * from './reviews'
 export * from './reviewDetailed'
+export * from './tabs'

src/types/tabs.ts

@@ -0,0 +1 @@
+export type Tabs = 'invited' | 'created' | 'received'