From 91bd2d2e3b1568aab24409b229c0809b0d6c9b32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=91=ED=98=84?=
 <gimbyeonghyeon@gimbyeonghyeon-ui-MacBookAir.local>
Date: Mon, 25 Sep 2023 20:39:40 +0900
Subject: [PATCH] =?UTF-8?q?[refactor]=ED=97=A4=EB=8D=94=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=EC=99=80=20=EB=A1=9C=EA=B7=B8=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=ED=97=A4=EB=8D=94=EB=A5=BC=20=ED=8F=AC=ED=95=A8?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EC=83=81=EC=9C=84=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20Index.tsx=EB=A1=9C=20?=
 =?UTF-8?q?=EB=AA=85=EB=AA=85=20=ED=9B=84=20=EB=A9=94=EC=9D=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=9E=84=ED=8F=AC=ED=8A=B8=20Iss?=
 =?UTF-8?q?ues=20#123?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Headers/Index.tsx | 17 +++++++++++++++++
 client/src/page/MainPage.tsx            |  7 ++-----
 2 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/Headers/Index.tsx

diff --git a/client/src/components/Headers/Index.tsx b/client/src/components/Headers/Index.tsx
new file mode 100644
index 0000000..4018cba
--- /dev/null
+++ b/client/src/components/Headers/Index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../store/config';
+import LoginHeader from './LoginHeader';
+import LogoutHeader from './LogoutHeader';
+
+const Header: React.FC = () => {
+  const isLogin = useSelector((state: RootState) => state.login);
+
+  if (isLogin === 1) {
+    return <LoginHeader onProfileClick={() => { /* Handle profile click logic here */ }} />;
+  }
+  
+  return <LogoutHeader onLoginClick={() => { /* Handle login click logic here */ }} />;
+}
+
+export default Header;
diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
index 93d61d7..d5b445b 100644
--- a/client/src/page/MainPage.tsx
+++ b/client/src/page/MainPage.tsx
@@ -3,8 +3,7 @@ import { useSelector, useDispatch } from "react-redux";
 // import { BrowserRouter as Router, Route, Routes  } from "react-router-dom";
 import styled from "styled-components";
 
-import LogoutHeader from "../components/Headers/LogoutHeader";
-import LoginHeader from "../components/Headers/LoginHeader";
+import Header from "../components/Headers/Index";
 
 import OAuthLoginModal from "../components/Logins/OAuthLogin";
 import EmailLoginModal from "../components/Logins/EmailLogin";
@@ -28,7 +27,6 @@ import ProfileModal from "../components/Profile/profileModal";
 // import CashModal from "../components/Profile/cashModal";
 import { StateProps } from "../models/stateProps";
 import { TabContainerPage } from "./TabPages/TabContainerPage";
-import { RootState } from "../store/config";
 
 // 🔴 로그아웃 관련 action 함수
 import { setLoginState } from "../reducer/member/loginSlice";
@@ -46,7 +44,6 @@ const MainPage = () => {
   const [isProfileModalOpen, setProfileModalOpen] = useState(false); //프로필 모달 보이기/숨기기
 
   const dispatch = useDispatch();
-  const isLogin = useSelector((state: RootState) => state.login);
 
   const openOAuthModal = useCallback(() => {
     setOAuthModalOpen(true);
@@ -206,7 +203,7 @@ const MainPage = () => {
 
   return (
     <Container>
-      {isLogin == 1 ? <LoginHeader onProfileClick={openProfileModal} /> : <LogoutHeader onLoginClick={openOAuthModal} />}
+      <Header/>
       <Main>
         <CompareChartSection />
         <LeftSection leftExpand={expandScreen.left}>