왼쪽 사이드 바 컴포넌트 구현 완료

src/App.css

@@ -0,0 +1,5 @@
+.App {
+  width: 100vw;
+  height: 100vh;
+  background-color: #fafcff;
+}

src/App.jsx

@@ -9,16 +9,18 @@ import StockDetailPage from "./pages/stock/detail/Stock.detail";
 
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<LandingPage />}></Route>
-        <Route path="/main" element={<MainPage />}></Route>
-        <Route path="/main/social" element={<Socialpage />}></Route>
-        <Route path="/main/stock" element={<StockPage />}></Route>
-        <Route path="/main/stocks/:id" element={<StockDetailPage />}></Route>
-        <Route path="/main/keyword" element={<KeywordPage />}></Route>
-      </Routes>
-    </Router>
+    <div className="App">
+      <Router>
+        <Routes>
+          <Route path="/" element={<LandingPage />}></Route>
+          <Route path="/main" element={<MainPage />}></Route>
+          <Route path="/main/social" element={<Socialpage />}></Route>
+          <Route path="/main/stock" element={<StockPage />}></Route>
+          <Route path="/main/stocks/:id" element={<StockDetailPage />}></Route>
+          <Route path="/main/keyword" element={<KeywordPage />}></Route>
+        </Routes>
+      </Router>
+    </div>
   );
 }
 

src/components/common/header/Header.jsx

@@ -1,49 +1,12 @@
-import React, { useState } from "react";
-import {
-  StyledHeaderDiv,
-  StyledHeaderInput,
-  StyledHeaderParentDiv,
-  StyledHeaderInputDiv,
-  StyledSearchIcon,
-  StyledHeaderMoonIcon,
-  StyledHeaderSunIcon,
-  StyledHeaderFillMoonIcon,
-  StyledHeaderFillSunIcon,
-} from "./Header.style";
-import Logo from "../logo/Logo";
+import React from "react";
+import { StyledHeaderDiv, StyledHeaderParentDiv } from "./Header.style";
+import Search from "../search/Search";
 
 export default function Header(props) {
-  const [isDarkMode, setIsDarkMode] = useState(false);
-
-  const toggleTheme = () => {
-    setIsDarkMode(!isDarkMode);
-  };
-
   return (
     <StyledHeaderDiv>
-      <Logo size={"m"} />
       <StyledHeaderParentDiv>
-        <StyledHeaderInputDiv>
-          <StyledHeaderInput
-            placeholder="Search"
-            width={props.width}
-            height={props.height}
-          />
-          <StyledSearchIcon />
-        </StyledHeaderInputDiv>
-        <div>
-          {isDarkMode ? (
-            <>
-              <StyledHeaderFillMoonIcon onClick={toggleTheme} filled />
-              <StyledHeaderSunIcon onClick={toggleTheme} />
-            </>
-          ) : (
-            <>
-              <StyledHeaderMoonIcon onClick={toggleTheme} />
-              <StyledHeaderFillSunIcon onClick={toggleTheme} filled />
-            </>
-          )}
-        </div>
+        <Search width="900px" height="50px" />
       </StyledHeaderParentDiv>
     </StyledHeaderDiv>
   );

src/components/common/header/Header.style.js

@@ -1,81 +1,22 @@
-import styled, { css } from "styled-components";
-import { IoSearch } from "react-icons/io5";
-import { IoMoonOutline } from "react-icons/io5";
-import { IoSunnyOutline } from "react-icons/io5";
-import { IoMoon } from "react-icons/io5";
-import { IoSunny } from "react-icons/io5";
+import styled from "styled-components";
 
 export const StyledHeaderDiv = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 100px;
   padding: 10px;
-  padding-top: 20px;
+  padding-bottom: 0px;
+`;
+export const StyledHeaderLogoDiv = styled.div`
+  margin-left: 30px;
 `;
 
 export const StyledHeaderParentDiv = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-right: 50px;
-  width: 90%;
-`;
-
-export const StyledHeaderInputDiv = styled.div`
-  position: relative;
-`;
-
-export const StyledHeaderInput = styled.input`
-  width: ${(props) => props.width || "900px"};
-  height: ${(props) => props.height || "50px"};
-  padding: 10px;
-  line-height: 2rem;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 30px;
-  font-size: 20px;
+  margin: 0px 50px;
   margin-left: 100px;
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 5px rgba(40, 203, 238, 1);
-    border: 1px solid rgba(81, 203, 238, 1);
-  }
-
-  &::placeholder {
-    font-size: 18px;
-    padding-left: 10px;
-  }
-`;
-
-export const StyledSearchIcon = styled(IoSearch)`
-  position: absolute;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 24px;
-  color: rgba(0, 0, 0, 0.5);
-`;
-
-const iconStyles = css`
-  font-size: 1.6rem !important;
-  margin-right: 10px;
-  cursor: pointer;
-`;
-
-export const StyledHeaderMoonIcon = styled(IoMoonOutline)`
-  ${iconStyles}
-`;
-
-export const StyledHeaderSunIcon = styled(IoSunnyOutline)`
-  ${iconStyles}
-`;
-
-export const StyledHeaderFillMoonIcon = styled(IoMoon)`
-  ${iconStyles}
-  color: ${({ filled }) => (filled ? "gold" : "#000")};
-`;
-
-export const StyledHeaderFillSunIcon = styled(IoSunny)`
-  ${iconStyles}
-  color: ${({ filled }) => (filled ? "#F87315" : "#000")};
+  width: 90%;
 `;

src/components/common/logo/Logo.style.js

@@ -2,6 +2,6 @@ import styled from "styled-components";
 
 export const StyledLogoImg = styled.img`
   width: ${({ size }) =>
-    size === "s" ? "50px" : size === "m" ? "100px" : "150px"};
-  aspect-ratio: "4/3";
+    size === "s" ? "50px" : size === "m" ? "150px" : "150px"};
+  aspect-ratio: "4/2";
 `;

src/components/common/search/Search.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import {
+  StyledHeaderInput,
+  StyledHeaderInputDiv,
+  StyledSearchIcon,
+} from "./Search.style";
+
+export default function Search(props) {
+  return (
+    <StyledHeaderInputDiv>
+      <StyledHeaderInput
+        placeholder="Search"
+        width={props.width}
+        height={props.height}
+      />
+      <StyledSearchIcon />
+    </StyledHeaderInputDiv>
+  );
+}

src/components/common/search/Search.style.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { IoSearch } from "react-icons/io5";
+
+export const StyledHeaderInputDiv = styled.div`
+  position: relative;
+`;
+
+export const StyledHeaderInput = styled.input`
+  width: ${(props) => props.width || "900px"};
+  height: ${(props) => props.height || "50px"};
+  padding: 10px;
+  line-height: 2rem;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 30px;
+  font-size: 20px;
+  margin-left: 100px;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(40, 203, 238, 1);
+    border: 1px solid rgba(81, 203, 238, 1);
+  }
+
+  &::placeholder {
+    font-size: 18px;
+    padding-left: 10px;
+  }
+`;
+
+export const StyledSearchIcon = styled(IoSearch)`
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.5);
+`;

src/components/common/sidebar/Sidebar.jsx

@@ -1,3 +1,64 @@
+import {
+  StyledSidebarDiv,
+  StyledSidebarItemDiv,
+  StyledHomeIcon,
+  StyledAnalyzeIcon,
+  StyledRelateIcon,
+  StyledKeywordIcon,
+  StyledHeaderFillMoonIcon,
+  StyledHeaderFillSunIcon,
+  StyledSidebarInfoDiv,
+  StyledToggleCircle,
+  StyledToggleContainer,
+} from "./Sidebar.style";
+import Logo from "../logo/Logo";
+import { useState } from "react";
+
 export default function Sidebar() {
-  return <div></div>;
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
+  return (
+    <StyledSidebarDiv>
+      <div>
+        <Logo />
+      </div>
+      <StyledSidebarInfoDiv>
+        <div>
+          <StyledSidebarItemDiv>
+            <StyledHomeIcon />
+            <span>한눈에 보기</span>
+          </StyledSidebarItemDiv>
+          <StyledSidebarItemDiv>
+            <StyledAnalyzeIcon />
+            <span>소셜 분석</span>
+          </StyledSidebarItemDiv>
+          <StyledSidebarItemDiv>
+            <StyledRelateIcon />
+            <span>연관 주식</span>
+          </StyledSidebarItemDiv>
+          <StyledSidebarItemDiv>
+            <StyledKeywordIcon />
+            <span>연관 키워드</span>
+          </StyledSidebarItemDiv>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            marginBottom: "10px",
+          }}
+        >
+          <StyledHeaderFillSunIcon darkMode={isDarkMode} />
+          <StyledToggleContainer onClick={toggleTheme} isDarkMode={isDarkMode}>
+            <StyledToggleCircle isDarkMode={isDarkMode} />
+          </StyledToggleContainer>
+          <StyledHeaderFillMoonIcon darkMode={isDarkMode} />
+        </div>
+      </StyledSidebarInfoDiv>
+    </StyledSidebarDiv>
+  );
 }