[Feat] 브랜치 병합

- 좌측 비교차트 관련 컴포넌트 구현이로 인한 브랜치 병합

Issues #12

client/src/components/CompareChartSection/CompareList.tsx

@@ -0,0 +1,32 @@
+import { styled } from "styled-components";
+
+const emptyMessage: string = `현재 비교 중인 종목이 없습니다
+비교하고 싶은 항목을 추가해보세요`;
+
+const CompareList = () => {
+  return (
+    <Container>
+      <EmptyIndicator>{emptyMessage}</EmptyIndicator>
+    </Container>
+  );
+};
+
+export default CompareList;
+
+const Container = styled.div`
+  flex: 1 0 0;
+`;
+
+const EmptyIndicator = styled.div`
+  height: 70%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #999999;
+  padding-left: 18px;
+  padding-right: 18px;
+  white-space: pre-wrap;
+  text-align: center;
+  line-height: 20px;
+`;

client/src/components/CompareChartSection/Index.tsx

@@ -0,0 +1,60 @@
+import { styled } from "styled-components";
+
+import SearchBox from "./SearchBox";
+import CompareList from "./CompareList";
+
+const titleText: string = "비교차트";
+
+const CompareChartSection = () => {
+  return (
+    <Container>
+      <UpperBar>
+        <Title>{titleText}</Title>
+        <CloseBtn>&#10005;</CloseBtn>
+      </UpperBar>
+      <SearchBox />
+      <CompareList />
+    </Container>
+  );
+};
+
+export default CompareChartSection;
+
+const Container = styled.div`
+  position: fixed;
+  left: -300px;
+  transition: 0.3s left ease-in-out;
+  display: flex;
+  flex-direction: column;
+  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,38 @@
+import { styled } from "styled-components";
+import searchIcon from "../../asset/CompareChartSection-SearchIcon.png";
+
+const SearchBox = () => {
+  return (
+    <Container>
+      <SearchIcon src={searchIcon} />
+      <SeachBar placeholder="종목명 또는 코드 입력" />
+    </Container>
+  );
+};
+
+export default SearchBox;
+
+const Container = styled.div`
+  width: 100%;
+  height: 39px;
+  padding-left: 12px;
+  padding-right: 12px;
+  border-bottom: 1px solid darkgray;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+`;
+
+const SearchIcon = styled.img`
+  width: 20px;
+  height: 20px;
+`;
+
+const SeachBar = styled.input`
+  flex: 1 0 0;
+  height: 26px;
+  border: none;
+  padding-left: 2px;
+`;

client/src/components/StockOrderSection/Index.tsx

@@ -24,7 +24,7 @@ export default StockOrderSection;
 
 const Container = styled.aside`
   position: fixed;
-  right: 0px;
+  right: -500px;
   transition: right 0.3s ease-in-out;
   display: flex;
   flex-direction: column;

client/src/page/MainPage.tsx

@@ -9,6 +9,7 @@ import EmailVerificationModal from "../components/Signups/EmailCertify";
 import PasswordSettingModal from "../components/Signups/Password";
 
 import CentralChartSection from "../components/CentralChartSection/Index";
+import CompareChartSection from "../components/CompareChartSection/Index";
 import StockOrderSection from "../components/StockOrderSection/Index";
 
 const MainPage = () => {
@@ -42,8 +43,7 @@ const MainPage = () => {
     setEmailSignupModalOpen(false);
   }, []);
 
-  const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] =
-    useState(false);
+  const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = useState(false);
 
   const openEmailVerificationModal = useCallback(() => {
     setEmailSignupModalOpen(false); // 이메일 회원가입 모달 닫기
@@ -54,8 +54,7 @@ const MainPage = () => {
     setEmailVerificationModalOpen(false);
   }, []);
 
-  const [isPasswordSettingModalOpen, setPasswordSettingModalOpen] =
-    useState(false);
+  const [isPasswordSettingModalOpen, setPasswordSettingModalOpen] = useState(false);
 
   const openPasswordSettingModal = useCallback(() => {
     setEmailVerificationModalOpen(false); // 이메일 인증 모달 닫기
@@ -84,18 +83,13 @@ const MainPage = () => {
         <LogoutHeader onLoginClick={openOAuthModal} />
       )}
       <Main>
+        <CompareChartSection />
         <LeftSection></LeftSection>
         <CentralChartSection />
         <StockOrderSection />
         <RightSection></RightSection>
       </Main>
-      {isOAuthModalOpen && (
-        <OAuthLoginModal
-          onClose={closeOAuthModal}
-          onEmailLoginClick={openEmailLoginModal}
-          onEmailSignupClick={openEmailSignupModal}
-        />
-      )}
+      {isOAuthModalOpen && <OAuthLoginModal onClose={closeOAuthModal} onEmailLoginClick={openEmailLoginModal} onEmailSignupClick={openEmailSignupModal} />}
       {isEmailLoginModalOpen && (
         <EmailLoginModal
           onClose={closeEmailLoginModal}