From ef7204cf040d3da7218d9d9a7912a5c19667f8d7 Mon Sep 17 00:00:00 2001 From: DingX2 Date: Mon, 5 Feb 2024 00:50:22 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Feat:=20Figma=20->=20Sidebar=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=EC=BD=94=EB=93=9C=20=EC=9E=91=EC=84=B1=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Sidebar.tsx | 56 +++++++++++++++++++++++++++++ frontend/src/pages/WelcomePage.tsx | 7 +++- 2 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/Sidebar.tsx diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx new file mode 100644 index 0000000..8ac9be9 --- /dev/null +++ b/frontend/src/components/Sidebar.tsx @@ -0,0 +1,56 @@ +export const Sidebar = () =>{ + return( +
+
+
+
+
+ + + +
+
+ +
+ + {/* Menu */} +
+
+
+ + "text" + +
+
+
+
+ + Category + +
+
+ Line +
+ + "Favorite" + +
+
+
+
+
+
+
+
+ + +
+
+ + "Logout" + +
+
+
+ ) +} \ No newline at end of file diff --git a/frontend/src/pages/WelcomePage.tsx b/frontend/src/pages/WelcomePage.tsx index 83658d4..966b5a9 100644 --- a/frontend/src/pages/WelcomePage.tsx +++ b/frontend/src/pages/WelcomePage.tsx @@ -1,6 +1,11 @@ +import { Sidebar } from "../components/Sidebar"; + const WelcomePage = () => { return( - <>It's Home! +
+ <>It's Home! + +
) }; From d114b493f5063ff5e775cafae47ab2888a8aa75d Mon Sep 17 00:00:00 2001 From: DingX2 Date: Mon, 5 Feb 2024 02:16:14 +0900 Subject: [PATCH 2/9] =?UTF-8?q?Feat:=20Sidebar=20=EC=8A=A4=EC=BC=88?= =?UTF-8?q?=EB=A0=88=ED=86=A4=20=EC=BD=94=EB=93=9C=20->=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Favorite.tsx | 7 +++ frontend/src/components/Search.tsx | 8 +++ frontend/src/components/Sidebar.tsx | 82 ++++++++++++---------------- frontend/src/pages/WelcomePage.tsx | 43 ++++++++++++--- 4 files changed, 85 insertions(+), 55 deletions(-) create mode 100644 frontend/src/components/Favorite.tsx create mode 100644 frontend/src/components/Search.tsx diff --git a/frontend/src/components/Favorite.tsx b/frontend/src/components/Favorite.tsx new file mode 100644 index 0000000..4df305f --- /dev/null +++ b/frontend/src/components/Favorite.tsx @@ -0,0 +1,7 @@ +export const Favorite = ()=>{ + return ( +
+
+
+ ) +} \ No newline at end of file diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx new file mode 100644 index 0000000..bfd1da9 --- /dev/null +++ b/frontend/src/components/Search.tsx @@ -0,0 +1,8 @@ +export const Search = ()=>{ + return ( +
+
+ +
+ ) +} \ No newline at end of file diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 8ac9be9..64a4cb8 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,56 +1,42 @@ -export const Sidebar = () =>{ - return( -
-
-
-
-
- - +import { Search } from "./Search" -
-
- -
+export const Sidebar ={ - {/* Menu */} -
-
-
- - "text" - -
-
-
-
- - Category - -
-
- Line -
- - "Favorite" - -
-
-
-
-
-
-
+ wrapper: ({ top, bottom }) => ( +
+
+ {top}
-
-
- - "Logout" - -
+ {bottom}
- ) + ), + + item: ({ text, type }: { text: string; type: string }) => { + switch (type) { + case "list": + return ( +
+ + {text} + +
+ ); + + case "category": + return ( +
+ + {text} + +
+ ); + + default: + return null; + } + } + , } \ No newline at end of file diff --git a/frontend/src/pages/WelcomePage.tsx b/frontend/src/pages/WelcomePage.tsx index 966b5a9..f296962 100644 --- a/frontend/src/pages/WelcomePage.tsx +++ b/frontend/src/pages/WelcomePage.tsx @@ -1,12 +1,41 @@ import { Sidebar } from "../components/Sidebar"; +import { Search } from "../components/Search"; +import { Favorite } from "../components/Favorite"; const WelcomePage = () => { - return( -
- <>It's Home! - -
- ) + return ( +
+ <>It's Home! + + {/* Logo */} +
+ + + + {/* Search */} + + + {/* Menu */} +
+ + +
+ + + ----- + + {/* Favorite */} + + + + } + + bottom={} + /> +
+ ); }; -export default WelcomePage; \ No newline at end of file +export default WelcomePage; From ab9286e04758f372e9fa3ea9e986b1c11eaabcf4 Mon Sep 17 00:00:00 2001 From: DingX2 Date: Mon, 5 Feb 2024 02:26:07 +0900 Subject: [PATCH 3/9] =?UTF-8?q?Feat:=20Login=20=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 --- frontend/src/components/Sidebar.tsx | 18 ++++++++++++++---- frontend/src/pages/WelcomePage.tsx | 26 +++++++++++++++++++------- 2 files changed, 33 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 64a4cb8..446a282 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,8 +1,18 @@ import { Search } from "./Search" -export const Sidebar ={ +interface SidebarProps{ + top: React.ReactNode; + bottom: React.ReactNode; +} + +interface SidebarItemProps { + text: string; + type: string; + onClick?: () => void; +} - wrapper: ({ top, bottom }) => ( +export const Sidebar ={ + wrapper: ({ top, bottom }: SidebarProps) => (
{top} @@ -14,11 +24,11 @@ export const Sidebar ={
), - item: ({ text, type }: { text: string; type: string }) => { + item: ({ text, type, onClick }: SidebarItemProps) => { switch (type) { case "list": return ( -
+
{text} diff --git a/frontend/src/pages/WelcomePage.tsx b/frontend/src/pages/WelcomePage.tsx index f296962..18b7c39 100644 --- a/frontend/src/pages/WelcomePage.tsx +++ b/frontend/src/pages/WelcomePage.tsx @@ -1,8 +1,21 @@ import { Sidebar } from "../components/Sidebar"; import { Search } from "../components/Search"; import { Favorite } from "../components/Favorite"; +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; const WelcomePage = () => { + const [Logintext, setLoginText] = useState("Login"); + const navigate = useNavigate(); + + const handleLoginClick = () => { + if (Logintext === "Login") { + navigate("/signin"); + } else { + setLoginText("Logout"); + } + }; + return (
<>It's Home! @@ -19,20 +32,19 @@ const WelcomePage = () => { {/* Menu */}
- - + +
- + ----- {/* Favorite */} - - + + } - - bottom={} + bottom={} />
); From 9860452d8f1785eb160a85e3f7152cdf10af352b Mon Sep 17 00:00:00 2001 From: DingX2 Date: Mon, 5 Feb 2024 02:54:08 +0900 Subject: [PATCH 4/9] =?UTF-8?q?Style:=20SVG=20=ED=8C=8C=EC=9D=BC=20=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 --- frontend/src/assets/Create.svg | 3 +++ frontend/src/assets/Home.svg | 3 +++ frontend/src/assets/Logo.svg | 9 +++++++++ frontend/src/assets/Logout.svg | 3 +++ frontend/src/assets/Search.svg | 4 ++++ frontend/src/assets/Star.svg | 3 +++ frontend/src/assets/react.svg | 1 - 7 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 frontend/src/assets/Create.svg create mode 100644 frontend/src/assets/Home.svg create mode 100644 frontend/src/assets/Logo.svg create mode 100644 frontend/src/assets/Logout.svg create mode 100644 frontend/src/assets/Search.svg create mode 100644 frontend/src/assets/Star.svg delete mode 100644 frontend/src/assets/react.svg diff --git a/frontend/src/assets/Create.svg b/frontend/src/assets/Create.svg new file mode 100644 index 0000000..3de0e04 --- /dev/null +++ b/frontend/src/assets/Create.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/Home.svg b/frontend/src/assets/Home.svg new file mode 100644 index 0000000..eab9e0e --- /dev/null +++ b/frontend/src/assets/Home.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/Logo.svg b/frontend/src/assets/Logo.svg new file mode 100644 index 0000000..f4907f3 --- /dev/null +++ b/frontend/src/assets/Logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/Logout.svg b/frontend/src/assets/Logout.svg new file mode 100644 index 0000000..13d79f6 --- /dev/null +++ b/frontend/src/assets/Logout.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/Search.svg b/frontend/src/assets/Search.svg new file mode 100644 index 0000000..6881e64 --- /dev/null +++ b/frontend/src/assets/Search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/Star.svg b/frontend/src/assets/Star.svg new file mode 100644 index 0000000..57b4b2e --- /dev/null +++ b/frontend/src/assets/Star.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/frontend/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 56216c72af9d4aa25418f2a87e2ed4f550017bf9 Mon Sep 17 00:00:00 2001 From: DingX2 Date: Mon, 5 Feb 2024 02:54:49 +0900 Subject: [PATCH 5/9] =?UTF-8?q?Feat:=20SVG=20=EB=8F=99=EC=A0=81=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Sidebar.tsx | 29 ++++++++++++++++++++++++++--- frontend/src/pages/WelcomePage.tsx | 8 ++++---- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 446a282..b5b6243 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,4 +1,9 @@ -import { Search } from "./Search" +import styled from '@emotion/styled'; +import Home from "../assets/Home.svg" +import Create from "../assets/Create.svg" +import Star from "../assets/Star.svg" +import Logout from "../assets/Logout.svg" + interface SidebarProps{ top: React.ReactNode; @@ -8,6 +13,7 @@ interface SidebarProps{ interface SidebarItemProps { text: string; type: string; + svg?: string; onClick?: () => void; } @@ -24,12 +30,14 @@ export const Sidebar ={
), - item: ({ text, type, onClick }: SidebarItemProps) => { + item: ({ text, type, svg, onClick }: SidebarItemProps) => { + const SvgComponent = getSVG(svg); switch (type) { case "list": return (
+ {SvgComponent && {text}} {text}
@@ -49,4 +57,19 @@ export const Sidebar ={ } } , -} \ No newline at end of file +} + +const getSVG = (svg: string) => { + switch (svg) { + case "Home": + return Home; + case "Create": + return Create; + case "Star": + return Star; + case "Logout": + return Logout; + default: + return null; + } +}; \ No newline at end of file diff --git a/frontend/src/pages/WelcomePage.tsx b/frontend/src/pages/WelcomePage.tsx index 18b7c39..f8eeaed 100644 --- a/frontend/src/pages/WelcomePage.tsx +++ b/frontend/src/pages/WelcomePage.tsx @@ -32,19 +32,19 @@ const WelcomePage = () => { {/* Menu */}
- - + +
----- {/* Favorite */} - + } - bottom={} + bottom={} />
); From d4de66becffb4f132e42b1b57314b967c4e405df Mon Sep 17 00:00:00 2001 From: DingX2 Date: Mon, 5 Feb 2024 03:03:20 +0900 Subject: [PATCH 6/9] =?UTF-8?q?Style:=20=EC=A4=91=EC=95=99=EC=A0=95?= =?UTF-8?q?=EB=A0=AC=20SVG=20=EC=9E=AC=EC=B6=94=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/Home.svg | 4 ++-- frontend/src/assets/Search.svg | 5 ++--- frontend/src/assets/Star.svg | 4 ++-- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/assets/Home.svg b/frontend/src/assets/Home.svg index eab9e0e..3ad45f2 100644 --- a/frontend/src/assets/Home.svg +++ b/frontend/src/assets/Home.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/Search.svg b/frontend/src/assets/Search.svg index 6881e64..13d79f6 100644 --- a/frontend/src/assets/Search.svg +++ b/frontend/src/assets/Search.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/frontend/src/assets/Star.svg b/frontend/src/assets/Star.svg index 57b4b2e..518ab83 100644 --- a/frontend/src/assets/Star.svg +++ b/frontend/src/assets/Star.svg @@ -1,3 +1,3 @@ - - + + From d9f313015686735bd12d21b4e0f3a4fe570f67ae Mon Sep 17 00:00:00 2001 From: DingX2 Date: Mon, 5 Feb 2024 04:09:40 +0900 Subject: [PATCH 7/9] =?UTF-8?q?Style:=20css=20=EC=A0=81=EC=9A=A9=20/=20?= =?UTF-8?q?=EA=B8=80=EB=A1=9C=EB=B2=8C=20=EB=B3=80=EC=88=98=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Sidebar.tsx | 142 ++++++++++++++++++++++++---- frontend/src/pages/WelcomePage.tsx | 75 ++++++++++----- 2 files changed, 174 insertions(+), 43 deletions(-) diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index b5b6243..007a9a8 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -4,7 +4,6 @@ import Create from "../assets/Create.svg" import Star from "../assets/Star.svg" import Logout from "../assets/Logout.svg" - interface SidebarProps{ top: React.ReactNode; bottom: React.ReactNode; @@ -17,17 +16,19 @@ interface SidebarItemProps { onClick?: () => void; } + + export const Sidebar ={ wrapper: ({ top, bottom }: SidebarProps) => ( -
-
+ + {top} -
+ -
+ {bottom} -
-
+ + ), item: ({ text, type, svg, onClick }: SidebarItemProps) => { @@ -35,21 +36,21 @@ export const Sidebar ={ switch (type) { case "list": return ( -
- + + {SvgComponent && {text}} - {text} - -
+ + {text} + ); case "category": return ( -
- + + {text} - -
+ + ); default: @@ -57,6 +58,10 @@ export const Sidebar ={ } } , + + line: ()=>{ + return() + } } const getSVG = (svg: string) => { @@ -72,4 +77,107 @@ const getSVG = (svg: string) => { default: return null; } -}; \ No newline at end of file +}; + + +const MenuListItem = styled.div` + display: flex; + align-items: center; + padding: 12px 16px; + gap: 10px; + width: 139px; + height: 48px; + position: relative; + transition: background-color 0.3s ease; + + &:hover { + background-color: var(--color-mercury); + cursor: pointer; + } +`; + +const Icons = styled.div` + width: 24px; + height: 24px; + flex-grow: 0; +`; + +const MenuListItemText = styled.span` + width: 46px; + height: 22px; + font-size: var(--font-size-md); + line-height: 140%; + color: var(--color-rangoongreen); + flex: none; + flex-grow: 0; +`; + +const MenuCategoryItem = styled.div` + display: flex; + align-items: center; + padding: 0px 16px 0px 40px; + gap: 16px; + height: 30px; + position: relative; + flex: none; + align-self: stretch; + flex-grow: 0; + transition: background-color 0.3s ease; + + &:hover { + background-color: var(--color-mercury); + cursor: pointer; + } +`; + + +const MenuCategoryItemText = styled.span` + width: 70px; + height: 20px; + font-size: var(--font-size-sm); + line-height: 140%; + color: var(--color-rangoongreen); + flex: none; + flex-grow: 0; +`; + + +const SidebarWrapper = styled.div` + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 32px; + background: var(--color-white); + border-right: 1px solid var(--color-mercury); + height: 100%; + padding-bottom: 32px; +`; + +const SidebarTop = styled.div` + display: flex; + flex-direction: column; + padding: 0px; + gap: 11px; + margin: 0 auto; + flex: none; + align-self: stretch; + flex-grow: 0; +`; + +const SidebarBottom = styled.div` + flex-direction: column; + gap: 10px; + margin: 0 auto; + flex: none; + flex-grow: 0; + margin-top: auto; +`; + +const Line= styled.div` + display: flex; + width: 70%; + margin: 0 auto; + border: 1px solid var(--color-mercury); + flex: none; + flex-grow: 0; +` \ No newline at end of file diff --git a/frontend/src/pages/WelcomePage.tsx b/frontend/src/pages/WelcomePage.tsx index f8eeaed..02fef10 100644 --- a/frontend/src/pages/WelcomePage.tsx +++ b/frontend/src/pages/WelcomePage.tsx @@ -3,51 +3,74 @@ import { Search } from "../components/Search"; import { Favorite } from "../components/Favorite"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; +import { Container, Wrapper, SideWrapper } from "../styles/Layout"; +import styled from '@emotion/styled'; const WelcomePage = () => { - const [Logintext, setLoginText] = useState("Login"); - const navigate = useNavigate(); - - const handleLoginClick = () => { - if (Logintext === "Login") { - navigate("/signin"); - } else { - setLoginText("Logout"); - } - }; - - return ( -
- <>It's Home! - + const [Logintext, setLoginText] = useState("Login"); + const [username,setUsername] = useState('타닥이'); + + const navigate = useNavigate(); + + const handleLoginClick = () => { + if (Logintext === "Login") { + navigate("/signin"); + } else { + setLoginText("Logout"); + } + }; + + return ( + + + + {/* Logo */}
- - + + TadakTadak + + + {username} + {/* Search */} {/* Menu */}
- - + +
+ + - ----- + {/* Favorite */} - - } + + } bottom={} - /> -
+ /> + + + ); }; export default WelcomePage; + +const ServiceText = styled.div` + font-size: var(--font-size-lg); + padding: 12px 16px; +`; + +const UsernameText = styled.div` + font-size: var(--font-size-sm); + padding: 0px 16px; +`; \ No newline at end of file From b17ec71bafcaf95fccaeb6e2c8d0a7e41c9c66ab Mon Sep 17 00:00:00 2001 From: DingX2 Date: Mon, 5 Feb 2024 04:42:43 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Feat:=20Sidebar=20Search=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/Search.svg | 5 +-- frontend/src/components/Search.tsx | 47 ++++++++++++++++++++++++++--- frontend/src/components/Sidebar.tsx | 14 --------- frontend/src/pages/WelcomePage.tsx | 21 ++++++++++--- 4 files changed, 61 insertions(+), 26 deletions(-) diff --git a/frontend/src/assets/Search.svg b/frontend/src/assets/Search.svg index 13d79f6..6881e64 100644 --- a/frontend/src/assets/Search.svg +++ b/frontend/src/assets/Search.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx index bfd1da9..dc43969 100644 --- a/frontend/src/components/Search.tsx +++ b/frontend/src/components/Search.tsx @@ -1,8 +1,45 @@ +import styled from '@emotion/styled'; +import SearchSVG from "../assets/Search.svg" +import { useState } from "react" + export const Search = ()=>{ + const [searchData,setSearchData] = useState("Search...") + + const handleInputChange = (event: React.ChangeEvent) => { + setSearchData(event.target.value); + }; + return ( -
-
- -
+ + SearchSVG + + ) -} \ No newline at end of file +} + + +const SearchDiv = styled.div` + width: 70%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: 0 auto; + padding: 8px 16px; + gap: 10px; + background: #F5F5F5; + border-radius: 10px; +`; + +const SearchInput = styled.input` + border: none; + outline: none; + background: none; + font-size: var(--font-size-xs); + line-height: 140%; +`; \ No newline at end of file diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 007a9a8..dc255bc 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -99,7 +99,6 @@ const MenuListItem = styled.div` const Icons = styled.div` width: 24px; height: 24px; - flex-grow: 0; `; const MenuListItemText = styled.span` @@ -108,8 +107,6 @@ const MenuListItemText = styled.span` font-size: var(--font-size-md); line-height: 140%; color: var(--color-rangoongreen); - flex: none; - flex-grow: 0; `; const MenuCategoryItem = styled.div` @@ -120,8 +117,6 @@ const MenuCategoryItem = styled.div` height: 30px; position: relative; flex: none; - align-self: stretch; - flex-grow: 0; transition: background-color 0.3s ease; &:hover { @@ -137,8 +132,6 @@ const MenuCategoryItemText = styled.span` font-size: var(--font-size-sm); line-height: 140%; color: var(--color-rangoongreen); - flex: none; - flex-grow: 0; `; @@ -158,18 +151,13 @@ const SidebarTop = styled.div` flex-direction: column; padding: 0px; gap: 11px; - margin: 0 auto; - flex: none; align-self: stretch; - flex-grow: 0; `; const SidebarBottom = styled.div` flex-direction: column; gap: 10px; margin: 0 auto; - flex: none; - flex-grow: 0; margin-top: auto; `; @@ -178,6 +166,4 @@ const Line= styled.div` width: 70%; margin: 0 auto; border: 1px solid var(--color-mercury); - flex: none; - flex-grow: 0; ` \ No newline at end of file diff --git a/frontend/src/pages/WelcomePage.tsx b/frontend/src/pages/WelcomePage.tsx index 02fef10..7fa7ebb 100644 --- a/frontend/src/pages/WelcomePage.tsx +++ b/frontend/src/pages/WelcomePage.tsx @@ -1,14 +1,17 @@ import { Sidebar } from "../components/Sidebar"; import { Search } from "../components/Search"; import { Favorite } from "../components/Favorite"; +import Logo from "../assets/Logo.svg" import { useState } from "react"; import { useNavigate } from "react-router-dom"; import { Container, Wrapper, SideWrapper } from "../styles/Layout"; import styled from '@emotion/styled'; +import { UserInfoStore } from "../stores/UserInfoStore"; +import { useStore } from "zustand" const WelcomePage = () => { const [Logintext, setLoginText] = useState("Login"); - const [username,setUsername] = useState('타닥이'); + const userinfo = useStore(UserInfoStore); const navigate = useNavigate(); @@ -28,12 +31,15 @@ const WelcomePage = () => { top={ <> {/* Logo */} -
+ + logo + + - TadakTadak + TadakTadak - {username} + {userinfo.username || '유저명'} {/* Search */} @@ -68,9 +74,14 @@ export default WelcomePage; const ServiceText = styled.div` font-size: var(--font-size-lg); padding: 12px 16px; + font-weight: 700; `; const UsernameText = styled.div` font-size: var(--font-size-sm); padding: 0px 16px; -`; \ No newline at end of file +`; + +const LogoDiv = styled.div` + padding: 12px 16px 0; +` \ No newline at end of file From fff1925c9f05fe195d560eb9a8b2f43636d07752 Mon Sep 17 00:00:00 2001 From: DingX2 Date: Mon, 5 Feb 2024 15:46:08 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Style:=20wildSand=EC=B6=94=EA=B0=80,=20Side?= =?UTF-8?q?bar=20=EC=8A=A4=ED=83=80=EC=9D=BC=EC=A0=90=EA=B2=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/Logo.svg | 8 ++++---- frontend/src/components/Search.tsx | 2 +- frontend/src/components/Sidebar.tsx | 4 ++-- frontend/src/styles/GlobalStyle.ts | 2 ++ 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/frontend/src/assets/Logo.svg b/frontend/src/assets/Logo.svg index f4907f3..d9e13aa 100644 --- a/frontend/src/assets/Logo.svg +++ b/frontend/src/assets/Logo.svg @@ -1,9 +1,9 @@ - - + + - + - + diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx index dc43969..124fd1f 100644 --- a/frontend/src/components/Search.tsx +++ b/frontend/src/components/Search.tsx @@ -32,7 +32,7 @@ const SearchDiv = styled.div` margin: 0 auto; padding: 8px 16px; gap: 10px; - background: #F5F5F5; + background: var(--color-wildsand); border-radius: 10px; `; diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index dc255bc..ba09e72 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -85,7 +85,6 @@ const MenuListItem = styled.div` align-items: center; padding: 12px 16px; gap: 10px; - width: 139px; height: 48px; position: relative; transition: background-color 0.3s ease; @@ -155,10 +154,11 @@ const SidebarTop = styled.div` `; const SidebarBottom = styled.div` + display: flex; flex-direction: column; gap: 10px; - margin: 0 auto; margin-top: auto; + align-self: stretch; `; const Line= styled.div` diff --git a/frontend/src/styles/GlobalStyle.ts b/frontend/src/styles/GlobalStyle.ts index 087124b..06c5967 100644 --- a/frontend/src/styles/GlobalStyle.ts +++ b/frontend/src/styles/GlobalStyle.ts @@ -17,6 +17,7 @@ const colorShark = '#2B2D31'; const colorRangoonGreen = '#1B1A17'; const colorHarlequin = '#2ACC02'; const colorOrient = '#02607E'; +const colorWildsand = '#F5F5F5'; export const GlobalStyle = css` :root { @@ -35,5 +36,6 @@ export const GlobalStyle = css` --color-rangoongreen: ${colorRangoonGreen}; --color-harlequin: ${colorHarlequin}; --color-orient: ${colorOrient}; + --color-wildsand: ${colorWildsand} } `;