Merge pull request #37 from codestates-seb/dev-client#13/compareChart…

…Component

[FE] #13 좌측 비교차트 컴포넌트 레이아웃 구현

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/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";
 
 const MainPage = () => {
   const [isOAuthModalOpen, setOAuthModalOpen] = useState(false);
@@ -83,6 +84,7 @@ const MainPage = () => {
         <LogoutHeader onLoginClick={openOAuthModal} />
       )}
       <Main>
+        <CompareChartSection />
         <LeftSection></LeftSection>
         <CentralChartSection />
         <RightSection></RightSection>