From d5bcdb41a212d1b07ce9d94f5ce30f8c8cbcb01f Mon Sep 17 00:00:00 2001
From: DingX2 <96682768+DingX2@users.noreply.github.com>
Date: Mon, 5 Feb 2024 15:47:49 +0900
Subject: [PATCH] Feat/issue-76 (#80)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Feat: Figma -> Sidebar 기본코드 작성중
* Feat: Sidebar 스켈레톤 코드 -> 컴포넌트화
* Feat: Login 버튼 추가
* Style: SVG 파일 추가
* Feat: SVG 동적연결
* Style: 중앙정렬 SVG 재추출
* Style: css 적용 / 글로벌 변수 적용
* Feat: Sidebar Search 추가
* Style: wildSand추가, Sidebar 스타일점검
---
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 -
frontend/src/components/Favorite.tsx | 7 ++
frontend/src/components/Search.tsx | 45 +++++++
frontend/src/components/Sidebar.tsx | 169 +++++++++++++++++++++++++++
frontend/src/pages/WelcomePage.tsx | 88 +++++++++++++-
frontend/src/styles/GlobalStyle.ts | 2 +
12 files changed, 332 insertions(+), 5 deletions(-)
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
create mode 100644 frontend/src/components/Favorite.tsx
create mode 100644 frontend/src/components/Search.tsx
create mode 100644 frontend/src/components/Sidebar.tsx
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..3ad45f2
--- /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..d9e13aa
--- /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..518ab83
--- /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
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..124fd1f
--- /dev/null
+++ b/frontend/src/components/Search.tsx
@@ -0,0 +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 (
+
+ 
+
+
+ )
+}
+
+
+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: var(--color-wildsand);
+ 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
new file mode 100644
index 0000000..ba09e72
--- /dev/null
+++ b/frontend/src/components/Sidebar.tsx
@@ -0,0 +1,169 @@
+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;
+ bottom: React.ReactNode;
+}
+
+interface SidebarItemProps {
+ text: string;
+ type: string;
+ svg?: string;
+ onClick?: () => void;
+}
+
+
+
+export const Sidebar ={
+ wrapper: ({ top, bottom }: SidebarProps) => (
+
+
+ {top}
+
+
+
+ {bottom}
+
+
+ ),
+
+ item: ({ text, type, svg, onClick }: SidebarItemProps) => {
+ const SvgComponent = getSVG(svg);
+ switch (type) {
+ case "list":
+ return (
+
+
+ {SvgComponent && 
}
+
+ {text}
+
+ );
+
+ case "category":
+ return (
+
+
+ {text}
+
+
+ );
+
+ default:
+ return null;
+ }
+ }
+ ,
+
+ line: ()=>{
+ return()
+ }
+}
+
+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;
+ }
+};
+
+
+const MenuListItem = styled.div`
+ display: flex;
+ align-items: center;
+ padding: 12px 16px;
+ gap: 10px;
+ 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;
+`;
+
+const MenuListItemText = styled.span`
+ width: 46px;
+ height: 22px;
+ font-size: var(--font-size-md);
+ line-height: 140%;
+ color: var(--color-rangoongreen);
+`;
+
+const MenuCategoryItem = styled.div`
+ display: flex;
+ align-items: center;
+ padding: 0px 16px 0px 40px;
+ gap: 16px;
+ height: 30px;
+ position: relative;
+ flex: none;
+ 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);
+`;
+
+
+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;
+ align-self: stretch;
+`;
+
+const SidebarBottom = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-top: auto;
+ align-self: stretch;
+`;
+
+const Line= styled.div`
+ display: flex;
+ width: 70%;
+ margin: 0 auto;
+ border: 1px solid var(--color-mercury);
+`
\ No newline at end of file
diff --git a/frontend/src/pages/WelcomePage.tsx b/frontend/src/pages/WelcomePage.tsx
index 83658d4..7fa7ebb 100644
--- a/frontend/src/pages/WelcomePage.tsx
+++ b/frontend/src/pages/WelcomePage.tsx
@@ -1,7 +1,87 @@
+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 = () => {
- return(
- <>It's Home!
- )
+ const [Logintext, setLoginText] = useState("Login");
+ const userinfo = useStore(UserInfoStore);
+
+ const navigate = useNavigate();
+
+ const handleLoginClick = () => {
+ if (Logintext === "Login") {
+ navigate("/signin");
+ } else {
+ setLoginText("Logout");
+ }
+ };
+
+ return (
+
+
+
+
+ {/* Logo */}
+
+ 
+
+
+
+ TadakTadak
+
+
+ {userinfo.username || '유저명'}
+
+
+ {/* Search */}
+
+
+ {/* Menu */}
+
+
+
+
+
+
+
+
+
+
+ {/* Favorite */}
+
+
+
+ }
+ bottom={}
+ />
+
+
+
+ );
};
-export default WelcomePage;
\ No newline at end of file
+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;
+`;
+
+const LogoDiv = styled.div`
+ padding: 12px 16px 0;
+`
\ No newline at end of file
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}
}
`;