Feat/issue-76

frontend/src/components/Favorite.tsx

@@ -0,0 +1,7 @@
+export const Favorite = ()=>{
+  return (
+    <div className="Favorite">
+      <div className="Favorite-item"/>
+    </div>
+  )
+}

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<string>("Search...")
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchData(event.target.value);
+  };
+
+  return (
+    <SearchDiv>
+      <img src={SearchSVG} alt='SearchSVG' />
+      <SearchInput
+        type="text"
+        placeholder="Search..."
+        value={searchData}
+        onChange={handleInputChange}
+      />
+    </SearchDiv>
+  )
+}
+
+
+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%;
+`;

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) => (
+    <SidebarWrapper>
+      <SidebarTop>
+        {top}
+      </SidebarTop>
+
+      <SidebarBottom>
+        {bottom}
+      </SidebarBottom>
+    </SidebarWrapper>
+  ),
+
+  item: ({ text, type, svg, onClick }: SidebarItemProps) => {
+    const SvgComponent = getSVG(svg);
+    switch (type) {
+      case "list":
+        return (
+          <MenuListItem onClick={onClick}>
+            <Icons>
+              {SvgComponent && <img src={SvgComponent} alt={text} />}
+            </Icons>
+            <MenuListItemText>{text}</MenuListItemText>
+          </MenuListItem>
+        );
+
+      case "category":
+        return (
+          <MenuCategoryItem>
+            <MenuCategoryItemText>
+              {text}
+            </MenuCategoryItemText>
+          </MenuCategoryItem>
+        );
+
+      default:
+        return null; 
+    }
+  }
+  ,
+
+  line: ()=>{
+    return(<Line/>)
+  }
+}
+
+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);
+`

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 (
+        <Container>
+            <Wrapper>
+                <SideWrapper>
+                    <Sidebar.wrapper
+                    top={
+                <>
+            {/* Logo */}
+            <LogoDiv>
+                <img src={Logo} alt="logo" width="56px" height="56px" />
+            </LogoDiv>
+
+            <ServiceText>
+                TadakTadak
+            </ServiceText>
+            <UsernameText>
+            {userinfo.username || '유저명'}
+            </UsernameText>
+
+            {/* Search */}
+            <Search />
+
+            {/* Menu */}
+            <div className="Menu-list">
+                <Sidebar.item text="Home" type="list" svg="Home" />
+                <Sidebar.item text="Create" type="list" svg="Create" />
+            </div>
+
+            <Sidebar.item text="Category 1" type="category" />
+            <Sidebar.item text="Category 2" type="category" />
+
+            <Sidebar.line/>
+
+            {/* Favorite */}
+            <Sidebar.item text="Favorite" type="list" svg="Star" />
+            <Favorite />
+            </>
+            }
+        bottom={<Sidebar.item text={Logintext} type="list" svg="Logout" onClick={handleLoginClick} />}
+        />
+        </SideWrapper>
+    </Wrapper>
+    </Container>
+  );
 };
 
-export default WelcomePage;
+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;
+`

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}
 	}
 `;