[Feat] 좌측 비교차트 컴포넌트 레이아웃 일부 구현

- 좌측 비교차트 컴포넌트 상단 제목 레이아웃 구현

Issues #13

client/src/components/CompareChartSection/Index.tsx

@@ -0,0 +1,57 @@
+import { styled } from "styled-components";
+
+import SearchBox from "./SearchBox";
+
+const titleText: string = "비교차트";
+
+const CompareChartSection = () => {
+  return (
+    <Container>
+      <UpperBar>
+        <Title>{titleText}</Title>
+        <CloseBtn>&#10005;</CloseBtn>
+      </UpperBar>
+      <SearchBox />
+    </Container>
+  );
+};
+
+export default CompareChartSection;
+
+const Container = styled.div`
+  position: fixed;
+  left: 0px;
+  transition: 0.3s left ease-in-out;
+
+  min-width: 248px;
+  height: 100%;
+  border: 1px solid black;
+`;
+
+const UpperBar = styled.div`
+  position: relative;
+  width: 100%;
+  height: 43px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid darkgray;
+`;
+
+const Title = styled.h2`
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const CloseBtn = styled.button`
+  position: absolute;
+  right: 10px;
+  width: 28px;
+  height: 95%;
+  border: none;
+  font-size: 17px;
+  font-weight: 500;
+  color: #525252;
+  background-color: #ffff;
+`;

client/src/components/CompareChartSection/SearchBox.tsx

@@ -0,0 +1,15 @@
+import { styled } from "styled-components";
+
+const SearchBox = () => {
+  return <Container></Container>;
+};
+
+export default SearchBox;
+
+const Container = styled.div`
+  width: 100%;
+  height: 39px;
+  padding-left: 12px;
+  padding-right: 12px;
+  border-bottom: 1px solid darkgray;
+`;

client/src/page/MainPage.tsx

@@ -1,12 +1,15 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback } from "react";
 import styled from "styled-components";
 import LogoutHeader from "../components/Headers/LogoutHeader";
 import LoginHeader from "../components/Headers/LoginHeader";
 import OAuthLoginModal from "../components/Logins/OAuthLogin";
 import EmailLoginModal from "../components/Logins/EmailLogin";
 import EmailSignupModal from "../components/Signups/EmailSignup";
-import EmailVerificationModal from '../components/Signups/EmailCertify';
-import PasswordSettingModal from '../components/Signups/Password';
+import EmailVerificationModal from "../components/Signups/EmailCertify";
+import PasswordSettingModal from "../components/Signups/Password";
+
+// 왼쪽 비교차트
+import CompareChartSection from "../components/CompareChartSection/Index";
 
 const MainPage = () => {
   const [isOAuthModalOpen, setOAuthModalOpen] = useState(false);
@@ -22,24 +25,25 @@ const MainPage = () => {
   }, []);
 
   const openEmailLoginModal = useCallback(() => {
-    setOAuthModalOpen(false); 
-    setEmailLoginModalOpen(true); 
+    setOAuthModalOpen(false);
+    setEmailLoginModalOpen(true);
   }, []);
 
   const closeEmailLoginModal = useCallback(() => {
     setEmailLoginModalOpen(false);
   }, []);
 
   const openEmailSignupModal = useCallback(() => {
-    setOAuthModalOpen(false); 
-    setEmailSignupModalOpen(true); 
+    setOAuthModalOpen(false);
+    setEmailSignupModalOpen(true);
   }, []);
 
   const closeEmailSignupModal = useCallback(() => {
     setEmailSignupModalOpen(false);
   }, []);
 
-  const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = useState(false);
+  const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] =
+    useState(false);
 
   const openEmailVerificationModal = useCallback(() => {
     setEmailSignupModalOpen(false); // 이메일 회원가입 모달 닫기
@@ -50,21 +54,22 @@ const MainPage = () => {
     setEmailVerificationModalOpen(false);
   }, []);
 
-  const [isPasswordSettingModalOpen, setPasswordSettingModalOpen] = useState(false);
+  const [isPasswordSettingModalOpen, setPasswordSettingModalOpen] =
+    useState(false);
 
   const openPasswordSettingModal = useCallback(() => {
-    setEmailVerificationModalOpen(false);  // 이메일 인증 모달 닫기
-    setPasswordSettingModalOpen(true);     // 비밀번호 설정 모달 열기
+    setEmailVerificationModalOpen(false); // 이메일 인증 모달 닫기
+    setPasswordSettingModalOpen(true); // 비밀번호 설정 모달 열기
   }, []);
 
   const closePasswordSettingModal = useCallback(() => {
     setPasswordSettingModalOpen(false);
   }, []);
 
-  const [isLoggedIn, setIsLoggedIn] = useState(false);  // 로그인 상태 관리
+  const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태 관리
 
   const handleLogin = () => {
-      setIsLoggedIn(true);
+    setIsLoggedIn(true);
   };
 
   const handleLogout = () => {
@@ -73,45 +78,53 @@ const MainPage = () => {
 
   return (
     <Container>
-      {isLoggedIn ? 
-        <LoginHeader onLogoutClick={handleLogout} /> : // 로그아웃 버튼 클릭 핸들러 추가
+      {isLoggedIn ? (
+        <LoginHeader onLogoutClick={handleLogout} /> // 로그아웃 버튼 클릭 핸들러 추가
+      ) : (
         <LogoutHeader onLoginClick={openOAuthModal} />
-      }
+      )}
       <Main>
+        <CompareChartSection />
         <LeftSection></LeftSection>
         <CentralSection></CentralSection>
         <RightSection></RightSection>
       </Main>
-      {isOAuthModalOpen && <OAuthLoginModal 
-        onClose={closeOAuthModal} 
-        onEmailLoginClick={openEmailLoginModal} 
-        onEmailSignupClick={openEmailSignupModal} 
-      />}
-      {isEmailLoginModalOpen && 
-        <EmailLoginModal 
+      {isOAuthModalOpen && (
+        <OAuthLoginModal
+          onClose={closeOAuthModal}
+          onEmailLoginClick={openEmailLoginModal}
+          onEmailSignupClick={openEmailSignupModal}
+        />
+      )}
+      {isEmailLoginModalOpen && (
+        <EmailLoginModal
           onClose={closeEmailLoginModal}
-          onLogin={handleLogin}  // 추가된 prop
+          onLogin={handleLogin} // 추가된 prop
         />
-      }
-      
-      {isEmailSignupModalOpen && 
-        <EmailSignupModal 
-          onClose={closeEmailSignupModal} 
+      )}
+
+      {isEmailSignupModalOpen && (
+        <EmailSignupModal
+          onClose={closeEmailSignupModal}
           onRequestVerification={openEmailVerificationModal} // 추가된 prop
         />
-      }
-      
-      {isEmailVerificationModalOpen && 
-        <EmailVerificationModal 
+      )}
+
+      {isEmailVerificationModalOpen && (
+        <EmailVerificationModal
           onClose={closeEmailVerificationModal}
-          onNextStep={openPasswordSettingModal}  // 추가된 prop
+          onNextStep={openPasswordSettingModal} // 추가된 prop
         />
-      }
-
-      {isPasswordSettingModalOpen && 
-          <PasswordSettingModal onClose={() => { handleLogin(); closePasswordSettingModal(); }} />
-      }
-
+      )}
+
+      {isPasswordSettingModalOpen && (
+        <PasswordSettingModal
+          onClose={() => {
+            handleLogin();
+            closePasswordSettingModal();
+          }}
+        />
+      )}
     </Container>
   );
 };