From e2b5282559124f8b9be7d0adcefc1bd5efbacfb9 Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Wed, 12 Jun 2024 14:50:39 +0900 Subject: [PATCH 01/11] =?UTF-8?q?=E2=9C=A8=20feat:=20App=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=81=AC=EA=B8=B0=20=EB=B8=8C?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=EC=A0=80=20=EC=A0=84=EC=B2=B4=20=EB=84=93?= =?UTF-8?q?=EC=9D=B4=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 5 +++++ src/App.jsx | 22 ++++++++++++---------- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/App.css b/src/App.css index e69de29..1d617d3 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,5 @@ +.App { + width: 100vw; + height: 100vh; + background-color: #fafcff; +} diff --git a/src/App.jsx b/src/App.jsx index 89d0893..efc251a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,16 +9,18 @@ import StockDetailPage from "./pages/stock/detail/Stock.detail"; function App() { return ( - - - }> - }> - }> - }> - }> - }> - - +
+ + + }> + }> + }> + }> + }> + }> + + +
); } From eab38c547a8e7e4b4b509c095327d458bb7b6889 Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Wed, 12 Jun 2024 14:51:21 +0900 Subject: [PATCH 02/11] =?UTF-8?q?=F0=9F=8E=A8=20design:=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EA=B0=84=EA=B2=A9=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/header/Header.style.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/common/header/Header.style.js b/src/components/common/header/Header.style.js index 3bd11a4..644fbe9 100644 --- a/src/components/common/header/Header.style.js +++ b/src/components/common/header/Header.style.js @@ -11,13 +11,18 @@ export const StyledHeaderDiv = styled.div` align-items: center; padding: 10px; padding-top: 20px; + background-color: white; +`; +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; + margin: 0px 50px; + margin-left: 100px; width: 90%; `; From 47a39f3994751083b6db2b935445cfbd0731e1dc Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Wed, 12 Jun 2024 14:52:41 +0900 Subject: [PATCH 03/11] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=ED=97=A4=EB=8D=94?= =?UTF-8?q?=20=EB=A1=9C=EA=B3=A0=20div=EC=95=88=EC=97=90=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/header/Header.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/common/header/Header.jsx b/src/components/common/header/Header.jsx index b0f5ac8..1ca8f25 100644 --- a/src/components/common/header/Header.jsx +++ b/src/components/common/header/Header.jsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import { StyledHeaderDiv, + StyledHeaderLogoDiv, StyledHeaderInput, StyledHeaderParentDiv, StyledHeaderInputDiv, @@ -21,7 +22,9 @@ export default function Header(props) { return ( - + + + Date: Wed, 12 Jun 2024 14:53:26 +0900 Subject: [PATCH 04/11] =?UTF-8?q?=E2=9C=A8=20feat:=20header=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EB=B3=80=EC=88=98=EB=A1=9C=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/variables.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/components/variables.js diff --git a/src/components/variables.js b/src/components/variables.js new file mode 100644 index 0000000..5a7db0b --- /dev/null +++ b/src/components/variables.js @@ -0,0 +1 @@ +export const sidebarHeightOffset = "125px"; From 26cef1d3d0cb0405c43fe323d793cf06822c081b Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Wed, 12 Jun 2024 14:55:42 +0900 Subject: [PATCH 05/11] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=A9=94=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4=EB=8D=94=20=EB=B0=8F=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=B6=94=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.jsx | 14 +++++++------- src/pages/main/Main.jsx | 11 ++++++++++- src/pages/main/Main.style.js | 6 ++++++ 3 files changed, 23 insertions(+), 8 deletions(-) create mode 100644 src/pages/main/Main.style.js diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..b91620d 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,10 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.jsx' -import './index.css' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.jsx"; +import "./index.css"; -ReactDOM.createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById("root")).render( - , -) + +); diff --git a/src/pages/main/Main.jsx b/src/pages/main/Main.jsx index 41ea0a4..09832a4 100644 --- a/src/pages/main/Main.jsx +++ b/src/pages/main/Main.jsx @@ -1,3 +1,12 @@ +import Header from "../../components/common/header/Header"; +import Sidebar from "../../components/common/sidebar/Sidebar"; +import { StyledMainDiv } from "./Main.style"; + export default function MainPage() { - return
mainPage
; + return ( + +
+ + + ); } diff --git a/src/pages/main/Main.style.js b/src/pages/main/Main.style.js new file mode 100644 index 0000000..45d8cc9 --- /dev/null +++ b/src/pages/main/Main.style.js @@ -0,0 +1,6 @@ +import styled from "styled-components"; + +export const StyledMainDiv = styled.div` + width: 100%; + height: 100%; +`; From c8c6e0de2f8addb281f5b890ae3af5e1592e822a Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Wed, 12 Jun 2024 14:56:23 +0900 Subject: [PATCH 06/11] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/sidebar/Sidebar.jsx | 30 ++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/components/common/sidebar/Sidebar.jsx b/src/components/common/sidebar/Sidebar.jsx index 4ade0f3..f23c123 100644 --- a/src/components/common/sidebar/Sidebar.jsx +++ b/src/components/common/sidebar/Sidebar.jsx @@ -1,3 +1,31 @@ +import { + StyledSidebarDiv, + StyledSidebarItemDiv, + StyledHomeIcon, + StyledAnalyzeIcon, + StyledRelateIcon, + StyledKeywordIcon, +} from "./Sidebar.style"; + export default function Sidebar() { - return
; + return ( + + + + 한눈에 보기 + + + + 소셜 분석 + + + + 연관 주식 + + + + 연관 키워드 + + + ); } From 6b2449c40a04376780aca5bdc7472d02a0b58c91 Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Wed, 12 Jun 2024 14:56:55 +0900 Subject: [PATCH 07/11] =?UTF-8?q?=F0=9F=8E=A8=20design:=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/sidebar/Sidebar.style.js | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/components/common/sidebar/Sidebar.style.js diff --git a/src/components/common/sidebar/Sidebar.style.js b/src/components/common/sidebar/Sidebar.style.js new file mode 100644 index 0000000..4da1859 --- /dev/null +++ b/src/components/common/sidebar/Sidebar.style.js @@ -0,0 +1,62 @@ +import styled, { css } from "styled-components"; +import { sidebarHeightOffset } from "../../variables"; +import { AiOutlineHome } from "react-icons/ai"; +import { IoStatsChart } from "react-icons/io5"; +import { TbCirclesRelation } from "react-icons/tb"; +import { VscSymbolKeyword } from "react-icons/vsc"; + +export const StyledSidebarDiv = styled.div` + display: flex; + flex-direction: column; + align-items: center; + width: 250px; + margin-top: 10px; + height: calc(100% - ${sidebarHeightOffset}); + border-right: 1px solid rgba(0, 0, 0, 0.2); + background-color: white; + padding-top: 50px; +`; + +export const StyledSidebarItemDiv = styled.div` + width: 100%; + display: flex; + justify-content: start; + align-items: center; + margin-bottom: 20px; + padding: 10px 50px; + cursor: pointer; + + &:hover { + background-color: #43d2ff; + border-radius: 50px; + & span, + & svg { + color: white; + } + } + + & span { + margin-left: 15px; + transition: color 0.3s; + color: rgba(0, 0, 0, 0.5); + } +`; + +const iconStyles = css` + font-size: 1.5rem !important; + color: rgba(0, 0, 0, 0.7); + transition: color 0.3s; +`; + +export const StyledHomeIcon = styled(AiOutlineHome)` + ${iconStyles} +`; +export const StyledAnalyzeIcon = styled(IoStatsChart)` + ${iconStyles} +`; +export const StyledRelateIcon = styled(TbCirclesRelation)` + ${iconStyles} +`; +export const StyledKeywordIcon = styled(VscSymbolKeyword)` + ${iconStyles} +`; From 173b216c739038f1483a306405485c4d320d9024 Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Wed, 12 Jun 2024 15:59:46 +0900 Subject: [PATCH 08/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EB=A1=9C=EA=B3=A0=20=EC=9C=84=EC=B9=98=EB=A5=BC=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/header/Header.jsx | 28 ---------- src/components/common/header/Header.style.js | 32 +---------- src/components/common/logo/Logo.style.js | 4 +- src/components/common/sidebar/Sidebar.jsx | 53 +++++++++++++------ .../common/sidebar/Sidebar.style.js | 19 ++++--- src/components/variables.js | 2 +- src/pages/main/Main.jsx | 4 +- src/pages/main/Main.style.js | 1 + 8 files changed, 58 insertions(+), 85 deletions(-) diff --git a/src/components/common/header/Header.jsx b/src/components/common/header/Header.jsx index 1ca8f25..16a74d2 100644 --- a/src/components/common/header/Header.jsx +++ b/src/components/common/header/Header.jsx @@ -1,30 +1,15 @@ import React, { useState } from "react"; import { StyledHeaderDiv, - StyledHeaderLogoDiv, StyledHeaderInput, StyledHeaderParentDiv, StyledHeaderInputDiv, StyledSearchIcon, - StyledHeaderMoonIcon, - StyledHeaderSunIcon, - StyledHeaderFillMoonIcon, - StyledHeaderFillSunIcon, } from "./Header.style"; -import Logo from "../logo/Logo"; export default function Header(props) { - const [isDarkMode, setIsDarkMode] = useState(false); - - const toggleTheme = () => { - setIsDarkMode(!isDarkMode); - }; - return ( - - - -
- {isDarkMode ? ( - <> - - - - ) : ( - <> - - - - )} -
); diff --git a/src/components/common/header/Header.style.js b/src/components/common/header/Header.style.js index 644fbe9..ddcb969 100644 --- a/src/components/common/header/Header.style.js +++ b/src/components/common/header/Header.style.js @@ -1,17 +1,13 @@ 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"; export const StyledHeaderDiv = styled.div` display: flex; justify-content: space-between; align-items: center; + height: 100px; padding: 10px; - padding-top: 20px; - background-color: white; + padding-bottom: 0px; `; export const StyledHeaderLogoDiv = styled.div` margin-left: 30px; @@ -60,27 +56,3 @@ export const StyledSearchIcon = styled(IoSearch)` 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")}; -`; diff --git a/src/components/common/logo/Logo.style.js b/src/components/common/logo/Logo.style.js index 2815250..30edf6b 100644 --- a/src/components/common/logo/Logo.style.js +++ b/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"; `; diff --git a/src/components/common/sidebar/Sidebar.jsx b/src/components/common/sidebar/Sidebar.jsx index f23c123..5a02c8c 100644 --- a/src/components/common/sidebar/Sidebar.jsx +++ b/src/components/common/sidebar/Sidebar.jsx @@ -5,27 +5,48 @@ import { StyledAnalyzeIcon, StyledRelateIcon, StyledKeywordIcon, + StyledHeaderMoonIcon, + StyledHeaderSunIcon, + StyledHeaderFillMoonIcon, + StyledHeaderFillSunIcon, + StyledSidebarInfoDiv, + StyledToggleIcon, + StyledToggleDarkIcon, } from "./Sidebar.style"; +import Logo from "../logo/Logo"; +import { useState } from "react"; export default function Sidebar() { + const [isDarkMode, setIsDarkMode] = useState(false); + + const toggleTheme = () => { + setIsDarkMode(!isDarkMode); + }; + return ( - - - 한눈에 보기 - - - - 소셜 분석 - - - - 연관 주식 - - - - 연관 키워드 - +
+ +
+ +
+ + + 한눈에 보기 + + + + 소셜 분석 + + + + 연관 주식 + + + + 연관 키워드 + +
); } diff --git a/src/components/common/sidebar/Sidebar.style.js b/src/components/common/sidebar/Sidebar.style.js index 4da1859..21e7884 100644 --- a/src/components/common/sidebar/Sidebar.style.js +++ b/src/components/common/sidebar/Sidebar.style.js @@ -1,5 +1,4 @@ import styled, { css } from "styled-components"; -import { sidebarHeightOffset } from "../../variables"; import { AiOutlineHome } from "react-icons/ai"; import { IoStatsChart } from "react-icons/io5"; import { TbCirclesRelation } from "react-icons/tb"; @@ -9,12 +8,19 @@ export const StyledSidebarDiv = styled.div` display: flex; flex-direction: column; align-items: center; - width: 250px; - margin-top: 10px; - height: calc(100% - ${sidebarHeightOffset}); + min-width: 250px; + height: 100%; border-right: 1px solid rgba(0, 0, 0, 0.2); background-color: white; - padding-top: 50px; + padding-top: 20px; +`; + +export const StyledSidebarInfoDiv = styled.div` + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; `; export const StyledSidebarItemDiv = styled.div` @@ -23,7 +29,7 @@ export const StyledSidebarItemDiv = styled.div` justify-content: start; align-items: center; margin-bottom: 20px; - padding: 10px 50px; + padding: 10px 60px; cursor: pointer; &:hover { @@ -44,7 +50,6 @@ export const StyledSidebarItemDiv = styled.div` const iconStyles = css` font-size: 1.5rem !important; - color: rgba(0, 0, 0, 0.7); transition: color 0.3s; `; diff --git a/src/components/variables.js b/src/components/variables.js index 5a7db0b..46e0bf6 100644 --- a/src/components/variables.js +++ b/src/components/variables.js @@ -1 +1 @@ -export const sidebarHeightOffset = "125px"; +export const sidebarHeightOffset = "140px"; diff --git a/src/pages/main/Main.jsx b/src/pages/main/Main.jsx index 09832a4..dca7caf 100644 --- a/src/pages/main/Main.jsx +++ b/src/pages/main/Main.jsx @@ -5,8 +5,10 @@ import { StyledMainDiv } from "./Main.style"; export default function MainPage() { return ( -
+
+
+
); } diff --git a/src/pages/main/Main.style.js b/src/pages/main/Main.style.js index 45d8cc9..e7a2587 100644 --- a/src/pages/main/Main.style.js +++ b/src/pages/main/Main.style.js @@ -1,6 +1,7 @@ import styled from "styled-components"; export const StyledMainDiv = styled.div` + display: flex; width: 100%; height: 100%; `; From b04f28fb6f7be0998cc877a77b7c1dff41354009 Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Wed, 12 Jun 2024 16:01:25 +0900 Subject: [PATCH 09/11] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=8B=A4=ED=81=AC?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=ED=86=A0=EA=B8=80=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/sidebar/Sidebar.jsx | 16 ++++++ .../common/sidebar/Sidebar.style.js | 52 +++++++++++++++++++ 2 files changed, 68 insertions(+) diff --git a/src/components/common/sidebar/Sidebar.jsx b/src/components/common/sidebar/Sidebar.jsx index 5a02c8c..a9501d8 100644 --- a/src/components/common/sidebar/Sidebar.jsx +++ b/src/components/common/sidebar/Sidebar.jsx @@ -47,6 +47,22 @@ export default function Sidebar() { 연관 키워드 +
+ {isDarkMode ? ( + <> + + + + + ) : ( + <> + + + + + )} +
+ ); } diff --git a/src/components/common/sidebar/Sidebar.style.js b/src/components/common/sidebar/Sidebar.style.js index 21e7884..2719c3e 100644 --- a/src/components/common/sidebar/Sidebar.style.js +++ b/src/components/common/sidebar/Sidebar.style.js @@ -3,6 +3,14 @@ import { AiOutlineHome } from "react-icons/ai"; import { IoStatsChart } from "react-icons/io5"; import { TbCirclesRelation } from "react-icons/tb"; import { VscSymbolKeyword } from "react-icons/vsc"; +import { + IoMoonOutline, + IoSunnyOutline, + IoMoon, + IoSunny, +} from "react-icons/io5"; +import { MdToggleOff } from "react-icons/md"; +import { BiSolidToggleRight } from "react-icons/bi"; export const StyledSidebarDiv = styled.div` display: flex; @@ -50,6 +58,7 @@ export const StyledSidebarItemDiv = styled.div` const iconStyles = css` font-size: 1.5rem !important; + color: ${({ darkMode }) => (darkMode ? "gold" : "rgba(0, 0, 0, 0.7)")}; transition: color 0.3s; `; @@ -65,3 +74,46 @@ export const StyledRelateIcon = styled(TbCirclesRelation)` export const StyledKeywordIcon = styled(VscSymbolKeyword)` ${iconStyles} `; + +const DarkModeIconStyles = css` + font-size: 1.6rem !important; + margin-right: 10px; + cursor: pointer; +`; + +const ToggleIconStyles = css` + font-size: 2.3rem !important; + margin-right: 10px; + cursor: pointer; +`; + +export const StyledHeaderMoonIcon = styled(IoMoonOutline)` + ${DarkModeIconStyles} + color: ${({ darkMode }) => (darkMode ? "gold" : "gold")}; +`; + +export const StyledHeaderSunIcon = styled(IoSunnyOutline)` + ${DarkModeIconStyles} + color: ${({ darkMode }) => (darkMode ? "rgba(0, 0, 0, 0.7)" : "#F87315")}; +`; + +export const StyledHeaderFillMoonIcon = styled(IoMoon)` + ${DarkModeIconStyles} + color: ${({ filled }) => (filled ? "gold" : "#000")}; +`; + +export const StyledHeaderFillSunIcon = styled(IoSunny)` + ${DarkModeIconStyles} + color: ${({ filled }) => (filled ? "#F87315" : "#000")}; +`; + +export const StyledToggleIcon = styled(MdToggleOff)` + ${ToggleIconStyles} + color: rgba(0, 0, 0, 0.7); + transition: color 0.3s; +`; +export const StyledToggleDarkIcon = styled(BiSolidToggleRight)` + ${ToggleIconStyles} + color: rgba(0, 0, 0, 0.7); + transition: color 0.3s; +`; From 8fc256509619f9e4b9c7ea4e36addf93973429d3 Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Wed, 12 Jun 2024 16:25:34 +0900 Subject: [PATCH 10/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=ED=86=A0=EA=B8=80=20=EB=B2=84=ED=8A=BC=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=EC=97=90=EC=84=9C=20div=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=20=EB=B0=8F=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/sidebar/Sidebar.jsx | 32 +++++++-------- .../common/sidebar/Sidebar.style.js | 41 +++++++++++++++---- 2 files changed, 47 insertions(+), 26 deletions(-) diff --git a/src/components/common/sidebar/Sidebar.jsx b/src/components/common/sidebar/Sidebar.jsx index a9501d8..ab2dc6a 100644 --- a/src/components/common/sidebar/Sidebar.jsx +++ b/src/components/common/sidebar/Sidebar.jsx @@ -5,13 +5,11 @@ import { StyledAnalyzeIcon, StyledRelateIcon, StyledKeywordIcon, - StyledHeaderMoonIcon, - StyledHeaderSunIcon, StyledHeaderFillMoonIcon, StyledHeaderFillSunIcon, StyledSidebarInfoDiv, - StyledToggleIcon, - StyledToggleDarkIcon, + StyledToggleCircle, + StyledToggleContainer, } from "./Sidebar.style"; import Logo from "../logo/Logo"; import { useState } from "react"; @@ -47,20 +45,18 @@ export default function Sidebar() { 연관 키워드 -
- {isDarkMode ? ( - <> - - - - - ) : ( - <> - - - - - )} +
+ + + + +
diff --git a/src/components/common/sidebar/Sidebar.style.js b/src/components/common/sidebar/Sidebar.style.js index 2719c3e..0acfa12 100644 --- a/src/components/common/sidebar/Sidebar.style.js +++ b/src/components/common/sidebar/Sidebar.style.js @@ -76,35 +76,36 @@ export const StyledKeywordIcon = styled(VscSymbolKeyword)` `; const DarkModeIconStyles = css` - font-size: 1.6rem !important; + font-size: 1.4rem !important; margin-right: 10px; cursor: pointer; `; const ToggleIconStyles = css` - font-size: 2.3rem !important; + font-size: 1.5rem !important; margin-right: 10px; cursor: pointer; `; -export const StyledHeaderMoonIcon = styled(IoMoonOutline)` +/* export const StyledHeaderMoonIcon = styled(IoMoonOutline)` ${DarkModeIconStyles} - color: ${({ darkMode }) => (darkMode ? "gold" : "gold")}; + color: ${({ darkMode }) => (darkMode ? "black" : "rgba(0,0,0,0.3)")}; `; export const StyledHeaderSunIcon = styled(IoSunnyOutline)` ${DarkModeIconStyles} - color: ${({ darkMode }) => (darkMode ? "rgba(0, 0, 0, 0.7)" : "#F87315")}; -`; + color: ${({ darkMode }) => + darkMode ? "rgba(0, 0, 0, 0.7)" : "rgba(0,0,0,0.3)"}; +`; */ export const StyledHeaderFillMoonIcon = styled(IoMoon)` ${DarkModeIconStyles} - color: ${({ filled }) => (filled ? "gold" : "#000")}; + color: ${({ darkMode }) => (darkMode ? "gold" : "rgba(0,0,0,0.3)")}; `; export const StyledHeaderFillSunIcon = styled(IoSunny)` ${DarkModeIconStyles} - color: ${({ filled }) => (filled ? "#F87315" : "#000")}; + color: ${({ darkMode }) => (darkMode ? "rgba(0,0,0,0.3)" : "#F87315")}; `; export const StyledToggleIcon = styled(MdToggleOff)` @@ -117,3 +118,27 @@ export const StyledToggleDarkIcon = styled(BiSolidToggleRight)` color: rgba(0, 0, 0, 0.7); transition: color 0.3s; `; + +export const StyledToggleContainer = styled.div` + width: 50px; + height: 25px; + border-radius: 15px; + background-color: ${({ isDarkMode }) => (isDarkMode ? "#333" : "#ddd")}; + display: flex; + align-items: center; + padding: 0 5px; + cursor: pointer; + position: relative; + transition: background-color 0.3s; + margin: 0px 5px; +`; + +export const StyledToggleCircle = styled.div` + width: 15px; + height: 15px; + border-radius: 50%; + background-color: white; + position: absolute; + left: ${({ isDarkMode }) => (isDarkMode ? "calc(100% - 25px)" : "5px")}; + transition: left 0.3s; +`; From 0d806806336198827d86d669b9cfa3aba9ce1f2b Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Thu, 13 Jun 2024 09:01:58 +0900 Subject: [PATCH 11/11] =?UTF-8?q?=E2=9C=A8=20feat:=20Search=20Input=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/header/Header.jsx | 20 ++-------- src/components/common/header/Header.style.js | 38 +------------------ src/components/common/search/Search.jsx | 19 ++++++++++ src/components/common/search/Search.style.js | 37 ++++++++++++++++++ src/components/common/sidebar/Sidebar.jsx | 4 +- .../common/sidebar/Sidebar.style.js | 4 +- 6 files changed, 65 insertions(+), 57 deletions(-) create mode 100644 src/components/common/search/Search.jsx create mode 100644 src/components/common/search/Search.style.js diff --git a/src/components/common/header/Header.jsx b/src/components/common/header/Header.jsx index 16a74d2..732d536 100644 --- a/src/components/common/header/Header.jsx +++ b/src/components/common/header/Header.jsx @@ -1,24 +1,12 @@ -import React, { useState } from "react"; -import { - StyledHeaderDiv, - StyledHeaderInput, - StyledHeaderParentDiv, - StyledHeaderInputDiv, - StyledSearchIcon, -} from "./Header.style"; +import React from "react"; +import { StyledHeaderDiv, StyledHeaderParentDiv } from "./Header.style"; +import Search from "../search/Search"; export default function Header(props) { return ( - - - - + ); diff --git a/src/components/common/header/Header.style.js b/src/components/common/header/Header.style.js index ddcb969..ef01a81 100644 --- a/src/components/common/header/Header.style.js +++ b/src/components/common/header/Header.style.js @@ -1,5 +1,4 @@ -import styled, { css } from "styled-components"; -import { IoSearch } from "react-icons/io5"; +import styled from "styled-components"; export const StyledHeaderDiv = styled.div` display: flex; @@ -21,38 +20,3 @@ export const StyledHeaderParentDiv = styled.div` margin-left: 100px; 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-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); -`; diff --git a/src/components/common/search/Search.jsx b/src/components/common/search/Search.jsx new file mode 100644 index 0000000..f1cb78e --- /dev/null +++ b/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 ( + + + + + ); +} diff --git a/src/components/common/search/Search.style.js b/src/components/common/search/Search.style.js new file mode 100644 index 0000000..3c11d0e --- /dev/null +++ b/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); +`; diff --git a/src/components/common/sidebar/Sidebar.jsx b/src/components/common/sidebar/Sidebar.jsx index ab2dc6a..3844344 100644 --- a/src/components/common/sidebar/Sidebar.jsx +++ b/src/components/common/sidebar/Sidebar.jsx @@ -52,11 +52,11 @@ export default function Sidebar() { marginBottom: "10px", }} > - + - +
diff --git a/src/components/common/sidebar/Sidebar.style.js b/src/components/common/sidebar/Sidebar.style.js index 0acfa12..0a5c919 100644 --- a/src/components/common/sidebar/Sidebar.style.js +++ b/src/components/common/sidebar/Sidebar.style.js @@ -134,8 +134,8 @@ export const StyledToggleContainer = styled.div` `; export const StyledToggleCircle = styled.div` - width: 15px; - height: 15px; + width: 20px; + height: 20px; border-radius: 50%; background-color: white; position: absolute;