From 8bbff5a4eb7aac747510f2b9b96ceb5cac2d952c Mon Sep 17 00:00:00 2001 From: hyoribogo <97094709+hyoribogo@users.noreply.github.com> Date: Mon, 4 Dec 2023 04:05:15 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=99=9C=EC=84=B1=ED=99=94=EB=90=9C=20?= =?UTF-8?q?=ED=83=AD=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EC=8B=9C=EC=97=90=EB=8F=84=20=EA=B3=A0=EC=A0=95=20(#107)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: TabsProvider 구현 * refactor: Tabs 컨텍스트로 변경 * refactor: 탭 타입 지정 * refactor: 훅 이름 변경 --- src/App.tsx | 6 ++++-- src/components/TabsProvider/index.tsx | 15 +++++++++++++++ src/components/index.ts | 1 + src/contexts/TabsContext.tsx | 14 ++++++++++++++ src/contexts/index.ts | 1 + src/hooks/index.ts | 1 + src/hooks/useTabs.ts | 8 ++++++++ src/pages/MainPage/index.tsx | 8 +++----- src/types/index.ts | 1 + src/types/tabs.ts | 1 + 10 files changed, 49 insertions(+), 7 deletions(-) create mode 100644 src/components/TabsProvider/index.tsx create mode 100644 src/contexts/TabsContext.tsx create mode 100644 src/hooks/useTabs.ts create mode 100644 src/types/tabs.ts diff --git a/src/App.tsx b/src/App.tsx index 61b16250..59b7f8de 100644 --- a/src/App.tsx +++ b/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() { - + + + diff --git a/src/components/TabsProvider/index.tsx b/src/components/TabsProvider/index.tsx new file mode 100644 index 00000000..8cfeec37 --- /dev/null +++ b/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('invited') + + return ( + + {children} + + ) +} + +export default TabsProvider diff --git a/src/components/index.ts b/src/components/index.ts index 636e3fb8..a8cb913b 100644 --- a/src/components/index.ts +++ b/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' diff --git a/src/contexts/TabsContext.tsx b/src/contexts/TabsContext.tsx new file mode 100644 index 00000000..55ea43ac --- /dev/null +++ b/src/contexts/TabsContext.tsx @@ -0,0 +1,14 @@ +import { Dispatch, SetStateAction, createContext } from 'react' +import { Tabs } from '@/types' + +interface TabsContextType { + activeTab: Tabs + setActiveTab: Dispatch> +} + +const TabsContext = createContext({ + activeTab: 'invited', + setActiveTab: () => {}, +}) + +export default TabsContext diff --git a/src/contexts/index.ts b/src/contexts/index.ts index 68433aca..79fe5743 100644 --- a/src/contexts/index.ts +++ b/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' diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 3bbc1092..b8b640ef 100644 --- a/src/hooks/index.ts +++ b/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' diff --git a/src/hooks/useTabs.ts b/src/hooks/useTabs.ts new file mode 100644 index 00000000..9e29ba89 --- /dev/null +++ b/src/hooks/useTabs.ts @@ -0,0 +1,8 @@ +import { useContext } from 'react' +import { TabsContext } from '@/contexts' + +const useTabs = () => { + return useContext(TabsContext) +} + +export default useTabs diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx index 1b1148c5..48137117 100644 --- a/src/pages/MainPage/index.tsx +++ b/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() diff --git a/src/types/index.ts b/src/types/index.ts index 8b8760ff..fc7b6aec 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,2 +1,3 @@ export * from './reviews' export * from './reviewDetailed' +export * from './tabs' diff --git a/src/types/tabs.ts b/src/types/tabs.ts new file mode 100644 index 00000000..1fc00362 --- /dev/null +++ b/src/types/tabs.ts @@ -0,0 +1 @@ +export type Tabs = 'invited' | 'created' | 'received'