From 7f66f14d55567247c88daf919121a77f7e25e5f3 Mon Sep 17 00:00:00 2001
From: jisu-kim <kss2460@naver.com>
Date: Thu, 21 Nov 2024 19:40:59 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20host=20=ED=8E=98=EC=9D=B4=EC=A7=80=20id?=
 =?UTF-8?q?=20=EB=8C=80=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          | 3 ++-
 frontend/src/components/host/HostRedirect.tsx | 8 ++++++++
 frontend/src/components/host/index.ts         | 1 +
 frontend/src/components/main/MainHeader.tsx   | 6 ++++--
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/host/HostRedirect.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cee1802a..b3f1cee9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import { MainPage, ClientPage, HostPage } from './pages';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '@apis/index';
 import withUserId from '@hocs/withUserId';
+import { HostRedirect } from '@components/host';
 
 function AppComponent() {
   return (
@@ -20,7 +21,7 @@ function AppComponent() {
             <Route path="/" element={<MainPage />} />
             <Route path="/live" element={<ClientPage />} />
             <Route path="/live/:id" element={<ClientPage />} />
-            <Route path="/host" element={<HostPage />} />
+            <Route path="/host" element={<HostRedirect />} />
             <Route path="/host/:id" element={<HostPage />} />
           </Routes>
         </Router>
diff --git a/frontend/src/components/host/HostRedirect.tsx b/frontend/src/components/host/HostRedirect.tsx
new file mode 100644
index 00000000..288545de
--- /dev/null
+++ b/frontend/src/components/host/HostRedirect.tsx
@@ -0,0 +1,8 @@
+import { getStoredId } from '@utils/id';
+import { Navigate } from 'react-router-dom';
+
+export default function HostRedirect() {
+  const userId = getStoredId();
+
+  return <Navigate to={`/host/${userId}`} replace />;
+}
diff --git a/frontend/src/components/host/index.ts b/frontend/src/components/host/index.ts
index 67567f69..d57f1333 100644
--- a/frontend/src/components/host/index.ts
+++ b/frontend/src/components/host/index.ts
@@ -1,2 +1,3 @@
 export { default as Header } from './Header';
 export { default as Setting } from './Setting';
+export { default as HostRedirect } from './HostRedirect';
diff --git a/frontend/src/components/main/MainHeader.tsx b/frontend/src/components/main/MainHeader.tsx
index f2fe8ca3..bf3af36f 100644
--- a/frontend/src/components/main/MainHeader.tsx
+++ b/frontend/src/components/main/MainHeader.tsx
@@ -4,9 +4,11 @@ import { useNavigate } from 'react-router-dom';
 import SearchIcon from '@assets/icons/search_icon.svg';
 import VideoIcon from '@assets/icons/video_icon.svg';
 import { ASSETS } from '@constants/assets';
+import { getStoredId } from '@utils/id';
 
 const MainHeader = () => {
   const navigate = useNavigate();
+  const userId = getStoredId();
 
   return (
     <HeaderContainer>
@@ -20,7 +22,7 @@ const MainHeader = () => {
         </SearchInputWrapper>
         <SearchButton />
       </SearchBox>
-      <StudioBox onClick={() => navigate('/host')}>
+      <StudioBox onClick={() => navigate(`/host/${userId}`)}>
         <VideoIconStyled />
         스튜디오
       </StudioBox>
@@ -119,4 +121,4 @@ const StudioBox = styled.div`
   }
 `;
 
-const VideoIconStyled = styled(VideoIcon)``;
+const VideoIconStyled = styled(VideoIcon)``;
\ No newline at end of file