From 1317e0788db61af374e81cbfd373f12510097abf Mon Sep 17 00:00:00 2001 From: sockki Date: Thu, 14 Mar 2024 13:56:02 +0900 Subject: [PATCH 01/16] =?UTF-8?q?Feat=20=EC=B6=94=EA=B0=80=EB=90=9C=20?= =?UTF-8?q?=EC=96=B4=EB=93=9C=EB=AF=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=20-=20#12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/AdmitRequest.tsx | 4 ++++ src/pages/admin/Product.tsx | 4 ++++ src/pages/admin/Program.tsx | 4 ++++ src/routes/router.tsx | 6 ++++++ 4 files changed, 18 insertions(+) create mode 100644 src/pages/admin/AdmitRequest.tsx create mode 100644 src/pages/admin/Product.tsx create mode 100644 src/pages/admin/Program.tsx diff --git a/src/pages/admin/AdmitRequest.tsx b/src/pages/admin/AdmitRequest.tsx new file mode 100644 index 0000000..9c5947d --- /dev/null +++ b/src/pages/admin/AdmitRequest.tsx @@ -0,0 +1,4 @@ +export default function AdmitRequest() { + return
승인 요청 관리
; + } + \ No newline at end of file diff --git a/src/pages/admin/Product.tsx b/src/pages/admin/Product.tsx new file mode 100644 index 0000000..b657f48 --- /dev/null +++ b/src/pages/admin/Product.tsx @@ -0,0 +1,4 @@ +export default function Product() { + return
상품관리
; + } + \ No newline at end of file diff --git a/src/pages/admin/Program.tsx b/src/pages/admin/Program.tsx new file mode 100644 index 0000000..6f8913c --- /dev/null +++ b/src/pages/admin/Program.tsx @@ -0,0 +1,4 @@ +export default function Program() { + return
이용권 관리
; + } + \ No newline at end of file diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 6e412e9..0d1f2ab 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -18,6 +18,9 @@ import UserRoute from "./UserRoute"; import TrainerRoute from "./TrainerRoute"; import AdminRoute from "./AdminRoute"; import Layout from "../components/Layout"; +import Product from "../pages/admin/Product"; +import Program from "../pages/admin/Program"; +import AdmitRequest from "../pages/admin/AdmitRequest"; export const router = createBrowserRouter([ { @@ -61,6 +64,9 @@ export const router = createBrowserRouter([ { path: "/admin/account", element: }, { path: "/admin/trainer", element: }, { path: "/admin/banner", element: }, + { path: "/admin/product", element: }, + { path: "/admin/program", element: }, + { path: "/admin/admit-request", element: }, ], }, ], From cc7238a9ad81245e6f367d948fb20422f1c8edc6 Mon Sep 17 00:00:00 2001 From: sockki Date: Thu, 14 Mar 2024 14:04:43 +0900 Subject: [PATCH 02/16] =?UTF-8?q?Fix=20getMenuList=20admin=20=EA=B3=84?= =?UTF-8?q?=EC=A0=95=20=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80=20-=20#12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/getMenuList.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/hooks/getMenuList.ts b/src/hooks/getMenuList.ts index 2ddf576..31eb780 100644 --- a/src/hooks/getMenuList.ts +++ b/src/hooks/getMenuList.ts @@ -42,6 +42,18 @@ export class MenuFactory { label: "배너 관리", path: "/admin/banner", }, + { + label: "상품 관리", + path: "/admin/product", + }, + { + label: "이용권 관리", + path: "/admin/program", + }, + { + label: "승인 요청 관리", + path: "/admin/admit-request", + }, ]; } From 30b5e07614a774c56b1e1c2759c113f43a675f70 Mon Sep 17 00:00:00 2001 From: sockki Date: Thu, 14 Mar 2024 16:10:21 +0900 Subject: [PATCH 03/16] =?UTF-8?q?Feat=20AdminMenu=20=EA=B5=AC=ED=98=84=20-?= =?UTF-8?q?=20#12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.tsx | 60 ++++++++++++++++++++++++++++++++----- src/hooks/getMenuList.ts | 12 ++++++-- src/styles/Header.styles.ts | 45 ++++++++++++++++++++++++++++ 3 files changed, 106 insertions(+), 11 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 01661cb..d223dc3 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,35 +1,79 @@ import * as S from "../styles/Header.styles"; import Logo from "../assets/img_logo.png"; import { getMenuList } from "../hooks/getMenuList"; -import { useState } from "react"; -import { useNavigate } from "react-router"; +import { useEffect, useState } from "react"; +import { useLocation, useNavigate } from "react-router"; export default function Header() { - const [login] = useState({ user: "user" }); + const [login, setLogin] = useState({ user: "user" }); + const [onMenu, setonMenu] = useState(false); const menuList = getMenuList(login); const navigate = useNavigate(); + const locationObject = useLocation(); const handleMoveToMenu = (path: string) => { navigate(path); }; + const handleMenu = () => { + setonMenu(!onMenu); + }; + + // 로그인 구현 전에 임시로 만든 코드입니다. + useEffect(() => { + if (locationObject.pathname.includes("admin")) { + setLogin({ user: "admin" }); + } + }, []); + return ( 로고 - {menuList.map((menu: any, index: number) => ( + {login.user !== "admin" ? ( + menuList.map((menu: any, index: number) => ( + { + handleMoveToMenu(menu.path); + }} + > + {menu.label} + + )) + ) : ( { - handleMoveToMenu(menu.path); + handleMenu(); }} > - {menu.label} + MENU - ))} + )} + {onMenu && ( + { + handleMenu(); + }} + > + + MENU + {menuList.map((menu: any, index: number) => ( + { + handleMoveToMenu(menu.path); + }} + > + {menu.label} + + ))} + + + )} ); diff --git a/src/hooks/getMenuList.ts b/src/hooks/getMenuList.ts index 31eb780..523051d 100644 --- a/src/hooks/getMenuList.ts +++ b/src/hooks/getMenuList.ts @@ -1,13 +1,15 @@ // TODO login, menuList type 지정 필요 export class MenuFactory { - baseMenu = [{ label: "PlanIt?", path: "/about" }]; - public createMenuList(login: any) { let menu: any = []; if (login.user === "user") { menu = [ + { + label: "PlanIt?", + path: "/about" + }, { label: "이용권", path: "/user/ticket", @@ -21,6 +23,10 @@ export class MenuFactory { if (login.user === "trainer") { menu = [ + { + label: "PlanIt?", + path: "/about" + }, { label: "스케줄", path: "/trainer/schedule", @@ -57,7 +63,7 @@ export class MenuFactory { ]; } - return [...this.baseMenu, ...menu]; + return [...menu]; } } diff --git a/src/styles/Header.styles.ts b/src/styles/Header.styles.ts index e261a8c..6cae663 100644 --- a/src/styles/Header.styles.ts +++ b/src/styles/Header.styles.ts @@ -31,6 +31,7 @@ export const LogoContainer = styled.div` `; export const MenuContainer = styled.div` + position: relative; display: flex; align-items: center; gap: 20px; @@ -44,3 +45,47 @@ export const Menu = styled.button` font-size: var(--font-size-600); } `; + +export const Overlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +` + +export const AdminMenuContainer = styled.div` + position: absolute; + top: 0; + right: 0; + width: 300px; + height: 500px; + border-bottom-left-radius: 20px; + background-color: var(--main-color-300); + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; + + @media screen and (max-width: ${breakPoints.small}px) { + width: 250px; + } +` + +export const AdminMenuTitle = styled.div` + font-size: var(--font-size-300); + font-weight: 700; + margin-top: 30px; + margin-bottom: 20px; + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-500); + } +` + +export const AdminMenuContent = styled.div` + font-size: var(--font-size-400); + + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-600); + } +` From 2ac945ebcd4b2ed6a003a59c9e07d6c6b2800c9f Mon Sep 17 00:00:00 2001 From: sockki Date: Thu, 14 Mar 2024 16:20:44 +0900 Subject: [PATCH 04/16] =?UTF-8?q?Style=20AdminMenu=20shadow=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20-=20#12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/Header.styles.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/styles/Header.styles.ts b/src/styles/Header.styles.ts index 6cae663..b969be5 100644 --- a/src/styles/Header.styles.ts +++ b/src/styles/Header.styles.ts @@ -62,11 +62,12 @@ export const AdminMenuContainer = styled.div` height: 500px; border-bottom-left-radius: 20px; background-color: var(--main-color-300); + box-shadow: 4px 4px 4px rgba(0,0,0,0.25); display: flex; flex-direction: column; align-items: center; - gap: 30px; - + gap: 35px; + @media screen and (max-width: ${breakPoints.small}px) { width: 250px; } From 5301b0e2f42f2757484197863caee24e9834658d Mon Sep 17 00:00:00 2001 From: sockki Date: Thu, 14 Mar 2024 13:56:02 +0900 Subject: [PATCH 05/16] =?UTF-8?q?Feat=20=EC=B6=94=EA=B0=80=EB=90=9C=20?= =?UTF-8?q?=EC=96=B4=EB=93=9C=EB=AF=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=20-=20#12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/AdmitRequest.tsx | 4 ++++ src/pages/admin/Product.tsx | 4 ++++ src/pages/admin/Program.tsx | 4 ++++ src/routes/router.tsx | 6 ++++++ 4 files changed, 18 insertions(+) create mode 100644 src/pages/admin/AdmitRequest.tsx create mode 100644 src/pages/admin/Product.tsx create mode 100644 src/pages/admin/Program.tsx diff --git a/src/pages/admin/AdmitRequest.tsx b/src/pages/admin/AdmitRequest.tsx new file mode 100644 index 0000000..9c5947d --- /dev/null +++ b/src/pages/admin/AdmitRequest.tsx @@ -0,0 +1,4 @@ +export default function AdmitRequest() { + return
승인 요청 관리
; + } + \ No newline at end of file diff --git a/src/pages/admin/Product.tsx b/src/pages/admin/Product.tsx new file mode 100644 index 0000000..b657f48 --- /dev/null +++ b/src/pages/admin/Product.tsx @@ -0,0 +1,4 @@ +export default function Product() { + return
상품관리
; + } + \ No newline at end of file diff --git a/src/pages/admin/Program.tsx b/src/pages/admin/Program.tsx new file mode 100644 index 0000000..6f8913c --- /dev/null +++ b/src/pages/admin/Program.tsx @@ -0,0 +1,4 @@ +export default function Program() { + return
이용권 관리
; + } + \ No newline at end of file diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 6e412e9..0d1f2ab 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -18,6 +18,9 @@ import UserRoute from "./UserRoute"; import TrainerRoute from "./TrainerRoute"; import AdminRoute from "./AdminRoute"; import Layout from "../components/Layout"; +import Product from "../pages/admin/Product"; +import Program from "../pages/admin/Program"; +import AdmitRequest from "../pages/admin/AdmitRequest"; export const router = createBrowserRouter([ { @@ -61,6 +64,9 @@ export const router = createBrowserRouter([ { path: "/admin/account", element: }, { path: "/admin/trainer", element: }, { path: "/admin/banner", element: }, + { path: "/admin/product", element: }, + { path: "/admin/program", element: }, + { path: "/admin/admit-request", element: }, ], }, ], From febffcea44a950207468fbb59cf2d122a7f99ab1 Mon Sep 17 00:00:00 2001 From: sockki Date: Thu, 14 Mar 2024 14:04:43 +0900 Subject: [PATCH 06/16] =?UTF-8?q?Fix=20getMenuList=20admin=20=EA=B3=84?= =?UTF-8?q?=EC=A0=95=20=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80=20-=20#12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/getMenuList.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/hooks/getMenuList.ts b/src/hooks/getMenuList.ts index 2ddf576..31eb780 100644 --- a/src/hooks/getMenuList.ts +++ b/src/hooks/getMenuList.ts @@ -42,6 +42,18 @@ export class MenuFactory { label: "배너 관리", path: "/admin/banner", }, + { + label: "상품 관리", + path: "/admin/product", + }, + { + label: "이용권 관리", + path: "/admin/program", + }, + { + label: "승인 요청 관리", + path: "/admin/admit-request", + }, ]; } From 7f100b8b4275d99f2825613a9cfb1fe77db83b32 Mon Sep 17 00:00:00 2001 From: sockki Date: Thu, 14 Mar 2024 16:10:21 +0900 Subject: [PATCH 07/16] =?UTF-8?q?Feat=20AdminMenu=20=EA=B5=AC=ED=98=84=20-?= =?UTF-8?q?=20#12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.tsx | 60 ++++++++++++++++++++++++++++++++----- src/hooks/getMenuList.ts | 12 ++++++-- src/styles/Header.styles.ts | 45 ++++++++++++++++++++++++++++ 3 files changed, 106 insertions(+), 11 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 01661cb..d223dc3 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,35 +1,79 @@ import * as S from "../styles/Header.styles"; import Logo from "../assets/img_logo.png"; import { getMenuList } from "../hooks/getMenuList"; -import { useState } from "react"; -import { useNavigate } from "react-router"; +import { useEffect, useState } from "react"; +import { useLocation, useNavigate } from "react-router"; export default function Header() { - const [login] = useState({ user: "user" }); + const [login, setLogin] = useState({ user: "user" }); + const [onMenu, setonMenu] = useState(false); const menuList = getMenuList(login); const navigate = useNavigate(); + const locationObject = useLocation(); const handleMoveToMenu = (path: string) => { navigate(path); }; + const handleMenu = () => { + setonMenu(!onMenu); + }; + + // 로그인 구현 전에 임시로 만든 코드입니다. + useEffect(() => { + if (locationObject.pathname.includes("admin")) { + setLogin({ user: "admin" }); + } + }, []); + return ( 로고 - {menuList.map((menu: any, index: number) => ( + {login.user !== "admin" ? ( + menuList.map((menu: any, index: number) => ( + { + handleMoveToMenu(menu.path); + }} + > + {menu.label} + + )) + ) : ( { - handleMoveToMenu(menu.path); + handleMenu(); }} > - {menu.label} + MENU - ))} + )} + {onMenu && ( + { + handleMenu(); + }} + > + + MENU + {menuList.map((menu: any, index: number) => ( + { + handleMoveToMenu(menu.path); + }} + > + {menu.label} + + ))} + + + )} ); diff --git a/src/hooks/getMenuList.ts b/src/hooks/getMenuList.ts index 31eb780..523051d 100644 --- a/src/hooks/getMenuList.ts +++ b/src/hooks/getMenuList.ts @@ -1,13 +1,15 @@ // TODO login, menuList type 지정 필요 export class MenuFactory { - baseMenu = [{ label: "PlanIt?", path: "/about" }]; - public createMenuList(login: any) { let menu: any = []; if (login.user === "user") { menu = [ + { + label: "PlanIt?", + path: "/about" + }, { label: "이용권", path: "/user/ticket", @@ -21,6 +23,10 @@ export class MenuFactory { if (login.user === "trainer") { menu = [ + { + label: "PlanIt?", + path: "/about" + }, { label: "스케줄", path: "/trainer/schedule", @@ -57,7 +63,7 @@ export class MenuFactory { ]; } - return [...this.baseMenu, ...menu]; + return [...menu]; } } diff --git a/src/styles/Header.styles.ts b/src/styles/Header.styles.ts index e261a8c..6cae663 100644 --- a/src/styles/Header.styles.ts +++ b/src/styles/Header.styles.ts @@ -31,6 +31,7 @@ export const LogoContainer = styled.div` `; export const MenuContainer = styled.div` + position: relative; display: flex; align-items: center; gap: 20px; @@ -44,3 +45,47 @@ export const Menu = styled.button` font-size: var(--font-size-600); } `; + +export const Overlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +` + +export const AdminMenuContainer = styled.div` + position: absolute; + top: 0; + right: 0; + width: 300px; + height: 500px; + border-bottom-left-radius: 20px; + background-color: var(--main-color-300); + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; + + @media screen and (max-width: ${breakPoints.small}px) { + width: 250px; + } +` + +export const AdminMenuTitle = styled.div` + font-size: var(--font-size-300); + font-weight: 700; + margin-top: 30px; + margin-bottom: 20px; + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-500); + } +` + +export const AdminMenuContent = styled.div` + font-size: var(--font-size-400); + + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-600); + } +` From ac4826ab1823f19208a9ee581723c18c93e362cc Mon Sep 17 00:00:00 2001 From: sockki Date: Thu, 14 Mar 2024 16:20:44 +0900 Subject: [PATCH 08/16] =?UTF-8?q?Style=20AdminMenu=20shadow=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20-=20#12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/Header.styles.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/styles/Header.styles.ts b/src/styles/Header.styles.ts index 6cae663..b969be5 100644 --- a/src/styles/Header.styles.ts +++ b/src/styles/Header.styles.ts @@ -62,11 +62,12 @@ export const AdminMenuContainer = styled.div` height: 500px; border-bottom-left-radius: 20px; background-color: var(--main-color-300); + box-shadow: 4px 4px 4px rgba(0,0,0,0.25); display: flex; flex-direction: column; align-items: center; - gap: 30px; - + gap: 35px; + @media screen and (max-width: ${breakPoints.small}px) { width: 250px; } From 8b955b2dee751d91549eac3d64daf77053ad48a1 Mon Sep 17 00:00:00 2001 From: sockki Date: Thu, 14 Mar 2024 17:02:18 +0900 Subject: [PATCH 09/16] =?UTF-8?q?Fix=20shadow=20=EC=88=98=EC=A0=95=20-=20#?= =?UTF-8?q?12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/Header.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/Header.styles.ts b/src/styles/Header.styles.ts index b969be5..6fb9aae 100644 --- a/src/styles/Header.styles.ts +++ b/src/styles/Header.styles.ts @@ -62,7 +62,7 @@ export const AdminMenuContainer = styled.div` height: 500px; border-bottom-left-radius: 20px; background-color: var(--main-color-300); - box-shadow: 4px 4px 4px rgba(0,0,0,0.25); + box-shadow: 4px 3px 4px rgba(0,0,0,0.30); display: flex; flex-direction: column; align-items: center; From 99cc3e149a04134ae3941ce6b5f09928bd7849f7 Mon Sep 17 00:00:00 2001 From: sockki Date: Fri, 15 Mar 2024 11:09:02 +0900 Subject: [PATCH 10/16] =?UTF-8?q?Feat=20Header=20Menu=20=EC=B6=94=EC=83=81?= =?UTF-8?q?=ED=99=94=20-=20#12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.tsx | 58 ++-------------- src/components/Menu/AdminMenu.tsx | 106 ++++++++++++++++++++++++++++++ src/components/Menu/Menu.tsx | 40 +++++++++++ src/hooks/getMenuList.ts | 3 +- 4 files changed, 153 insertions(+), 54 deletions(-) create mode 100644 src/components/Menu/AdminMenu.tsx create mode 100644 src/components/Menu/Menu.tsx diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d223dc3..9a9f801 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,32 +1,20 @@ import * as S from "../styles/Header.styles"; import Logo from "../assets/img_logo.png"; -import { getMenuList } from "../hooks/getMenuList"; import { useEffect, useState } from "react"; -import { useLocation, useNavigate } from "react-router"; +import { useLocation } from "react-router"; +import AdminMenu from "./Menu/AdminMenu"; +import Menu from "./Menu/Menu"; export default function Header() { const [login, setLogin] = useState({ user: "user" }); - const [onMenu, setonMenu] = useState(false); - - const menuList = getMenuList(login); - const navigate = useNavigate(); const locationObject = useLocation(); - const handleMoveToMenu = (path: string) => { - navigate(path); - }; - - const handleMenu = () => { - setonMenu(!onMenu); - }; - // 로그인 구현 전에 임시로 만든 코드입니다. useEffect(() => { if (locationObject.pathname.includes("admin")) { setLogin({ user: "admin" }); } }, []); - return ( @@ -34,45 +22,9 @@ export default function Header() { {login.user !== "admin" ? ( - menuList.map((menu: any, index: number) => ( - { - handleMoveToMenu(menu.path); - }} - > - {menu.label} - - )) + ) : ( - { - handleMenu(); - }} - > - MENU - - )} - {onMenu && ( - { - handleMenu(); - }} - > - - MENU - {menuList.map((menu: any, index: number) => ( - { - handleMoveToMenu(menu.path); - }} - > - {menu.label} - - ))} - - + )} diff --git a/src/components/Menu/AdminMenu.tsx b/src/components/Menu/AdminMenu.tsx new file mode 100644 index 0000000..ec48012 --- /dev/null +++ b/src/components/Menu/AdminMenu.tsx @@ -0,0 +1,106 @@ +import styled from "styled-components"; +import { breakPoints } from "../../styles/breakPoints"; +import { useState } from "react"; +import { getMenuList } from "../../hooks/getMenuList"; +import { useNavigate } from "react-router"; + +interface Ilogin { + login: {user:string}; +} + +export default function AdminMenu({login}:Ilogin) { + const [onMenu, setonMenu] = useState(false); + const menuList = getMenuList(login); + const navigate = useNavigate(); + + const handleMoveToMenu = (path: string) => { + navigate(path); + }; + const handleMenu = () => { + setonMenu(!onMenu); + }; + return <> + { + handleMenu(); + }} + > + MENU + + {onMenu && ( + { + handleMenu(); + }} + > + + MENU + {menuList.map((menu: any, index: number) => ( + { + handleMoveToMenu(menu.path); + }} + > + {menu.label} + + ))} + + + )} + +} + +export const Menu = styled.button` + font-size: var(--font-size-400); + font-weight: 700; + + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-600); + } +`; + +export const Overlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +` + +export const AdminMenuContainer = styled.div` + position: absolute; + top: 0; + right: 0; + width: 300px; + height: 500px; + border-bottom-left-radius: 20px; + background-color: var(--main-color-300); + box-shadow: 4px 3px 4px rgba(0,0,0,0.30); + display: flex; + flex-direction: column; + align-items: center; + gap: 35px; + + @media screen and (max-width: ${breakPoints.small}px) { + width: 250px; + } +` + +export const AdminMenuTitle = styled.div` + font-size: var(--font-size-300); + font-weight: 700; + margin-top: 30px; + margin-bottom: 20px; + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-500); + } +` + +export const AdminMenuContent = styled.div` + font-size: var(--font-size-400); + + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-600); + } +` \ No newline at end of file diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx new file mode 100644 index 0000000..9ee7995 --- /dev/null +++ b/src/components/Menu/Menu.tsx @@ -0,0 +1,40 @@ +import styled from "styled-components"; +import { getMenuList } from "../../hooks/getMenuList"; +import { breakPoints } from "../../styles/breakPoints"; +import { useNavigate } from "react-router"; + +interface Ilogin { + login: {user:string}; +} + + +export default function Menu({login}:Ilogin) { + const menuList = getMenuList(login); + const navigate = useNavigate(); + const handleMoveToMenu = (path: string) => { + navigate(path); + }; + return ( + <> + {menuList.map((menu: any, index: number) => ( + { + handleMoveToMenu(menu.path); + }} + > + {menu.label} + + ))} + + ); +} + +export const Content = styled.button` + font-size: var(--font-size-400); + font-weight: 700; + + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-600); + } +`; diff --git a/src/hooks/getMenuList.ts b/src/hooks/getMenuList.ts index 523051d..4d57af6 100644 --- a/src/hooks/getMenuList.ts +++ b/src/hooks/getMenuList.ts @@ -1,8 +1,9 @@ // TODO login, menuList type 지정 필요 + export class MenuFactory { public createMenuList(login: any) { - let menu: any = []; + let menu:any = []; if (login.user === "user") { menu = [ From c0c7cdfe43463b04a2878d220f2ee5032ccd0a35 Mon Sep 17 00:00:00 2001 From: sockki Date: Fri, 15 Mar 2024 13:26:20 +0900 Subject: [PATCH 11/16] =?UTF-8?q?Feat=20Menu=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Menu/Menu.tsx | 94 ++++++++++++++++++++++++++++++++++-- src/styles/Header.styles.ts | 1 + 2 files changed, 92 insertions(+), 3 deletions(-) diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 9ee7995..b58a3a1 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -2,18 +2,24 @@ import styled from "styled-components"; import { getMenuList } from "../../hooks/getMenuList"; import { breakPoints } from "../../styles/breakPoints"; import { useNavigate } from "react-router"; +import { useState } from "react"; +import { CommonButton } from "../../styles/globalStyles"; interface Ilogin { - login: {user:string}; + login: { user: string }; } - -export default function Menu({login}:Ilogin) { +export default function Menu({ login }: Ilogin) { + const [onMenu, setonMenu] = useState(false); const menuList = getMenuList(login); const navigate = useNavigate(); + const handleMoveToMenu = (path: string) => { navigate(path); }; + const handleMenu = () => { + setonMenu(!onMenu); + }; return ( <> {menuList.map((menu: any, index: number) => ( @@ -26,6 +32,27 @@ export default function Menu({login}:Ilogin) { {menu.label} ))} + { + handleMenu(); + }} + /> + {onMenu && ( + { + handleMenu(); + }} + > + + abc@abc.com + 홍길동 + + + + + + + )} ); } @@ -38,3 +65,64 @@ export const Content = styled.button` font-size: var(--font-size-600); } `; + +export const Profile = styled.button` + margin-left: 10px; + width: 40px; + height: 40px; + background-color: var(--white-color-500); + border-radius: 100%; + &:hover { + box-shadow: 0 0 11px rgba(102, 102, 102, 0.25); + } +`; + +export const Overlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +`; + +export const ProfileMenu = styled.div` + position: absolute; + top: 90px; + right: 0; + width: 320px; + height: 150px; + background-color: var(--main-color-300); + border-radius: 0 0 15px 15px; + display: flex; + flex-direction: column; + align-items: center; + gap:20px; + padding-top: 2%; +`; + +export const Infomation = styled.div` + font-size: var(--font-size-400); + font-weight: 700; + + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-600); + } +` + + +export const ProfileButtons = styled.div` + display: flex; + gap: 20px; +` +export const Button = styled(CommonButton)` + background-color: var(--main-color-400); + width: 80px; + height: 30px; + font-size: var(--font-size-500); + &:hover { + background-color: var(--main-color-500); + } +` + + + diff --git a/src/styles/Header.styles.ts b/src/styles/Header.styles.ts index 6fb9aae..724bc99 100644 --- a/src/styles/Header.styles.ts +++ b/src/styles/Header.styles.ts @@ -9,6 +9,7 @@ export const HeaderContainer = styled.header` width: calc(100% - 20px); height: 80px; background-color: #f6ffff; + z-index: 2; `; export const LogoContainer = styled.div` From 038eebff2edd1f432afbd747ae5d9d6d828b77c0 Mon Sep 17 00:00:00 2001 From: sockki Date: Fri, 15 Mar 2024 13:36:15 +0900 Subject: [PATCH 12/16] =?UTF-8?q?Style=20Menu,AdminMenu=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20Menu.styles.ts=EC=97=90=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.tsx | 4 +- src/components/Menu/AdminMenu.tsx | 141 ++++++++++-------------------- src/components/Menu/Menu.tsx | 100 +++------------------ src/styles/menu/Menu.styles.ts | 107 +++++++++++++++++++++++ 4 files changed, 168 insertions(+), 184 deletions(-) create mode 100644 src/styles/menu/Menu.styles.ts diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 9a9f801..a9a10e3 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -2,8 +2,8 @@ import * as S from "../styles/Header.styles"; import Logo from "../assets/img_logo.png"; import { useEffect, useState } from "react"; import { useLocation } from "react-router"; -import AdminMenu from "./Menu/AdminMenu"; -import Menu from "./Menu/Menu"; +import AdminMenu from "./menu/AdminMenu"; +import Menu from "./menu/Menu"; export default function Header() { const [login, setLogin] = useState({ user: "user" }); diff --git a/src/components/Menu/AdminMenu.tsx b/src/components/Menu/AdminMenu.tsx index ec48012..d5882d7 100644 --- a/src/components/Menu/AdminMenu.tsx +++ b/src/components/Menu/AdminMenu.tsx @@ -1,106 +1,55 @@ -import styled from "styled-components"; -import { breakPoints } from "../../styles/breakPoints"; import { useState } from "react"; import { getMenuList } from "../../hooks/getMenuList"; import { useNavigate } from "react-router"; +import * as S from "../../styles/menu/Menu.styles"; + interface Ilogin { - login: {user:string}; + login: { user: string }; } -export default function AdminMenu({login}:Ilogin) { - const [onMenu, setonMenu] = useState(false); - const menuList = getMenuList(login); - const navigate = useNavigate(); - - const handleMoveToMenu = (path: string) => { - navigate(path); - }; - const handleMenu = () => { - setonMenu(!onMenu); - }; - return <> - { - handleMenu(); - }} - > - MENU - - {onMenu && ( - { - handleMenu(); - }} - > - - MENU - {menuList.map((menu: any, index: number) => ( - { - handleMoveToMenu(menu.path); - }} - > - {menu.label} - - ))} - - - )} +export default function AdminMenu({ login }: Ilogin) { + const [onMenu, setonMenu] = useState(false); + const menuList = getMenuList(login); + const navigate = useNavigate(); + + const handleMoveToMenu = (path: string) => { + navigate(path); + }; + const handleMenu = () => { + setonMenu(!onMenu); + }; + return ( + <> + { + handleMenu(); + }} + > + MENU + + {onMenu && ( + { + handleMenu(); + }} + > + + MENU + {menuList.map((menu: any, index: number) => ( + { + handleMoveToMenu(menu.path); + }} + > + {menu.label} + + ))} + + + )} + ); } -export const Menu = styled.button` - font-size: var(--font-size-400); - font-weight: 700; - - @media screen and (max-width: ${breakPoints.small}px) { - font-size: var(--font-size-600); - } -`; - -export const Overlay = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; -` - -export const AdminMenuContainer = styled.div` - position: absolute; - top: 0; - right: 0; - width: 300px; - height: 500px; - border-bottom-left-radius: 20px; - background-color: var(--main-color-300); - box-shadow: 4px 3px 4px rgba(0,0,0,0.30); - display: flex; - flex-direction: column; - align-items: center; - gap: 35px; - - @media screen and (max-width: ${breakPoints.small}px) { - width: 250px; - } -` - -export const AdminMenuTitle = styled.div` - font-size: var(--font-size-300); - font-weight: 700; - margin-top: 30px; - margin-bottom: 20px; - @media screen and (max-width: ${breakPoints.small}px) { - font-size: var(--font-size-500); - } -` - -export const AdminMenuContent = styled.div` - font-size: var(--font-size-400); - - @media screen and (max-width: ${breakPoints.small}px) { - font-size: var(--font-size-600); - } -` \ No newline at end of file diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index b58a3a1..18de54f 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -1,9 +1,7 @@ -import styled from "styled-components"; import { getMenuList } from "../../hooks/getMenuList"; -import { breakPoints } from "../../styles/breakPoints"; import { useNavigate } from "react-router"; import { useState } from "react"; -import { CommonButton } from "../../styles/globalStyles"; +import * as S from "../../styles/menu/Menu.styles"; interface Ilogin { login: { user: string }; @@ -23,106 +21,36 @@ export default function Menu({ login }: Ilogin) { return ( <> {menuList.map((menu: any, index: number) => ( - { handleMoveToMenu(menu.path); }} > {menu.label} - + ))} - { handleMenu(); }} /> {onMenu && ( - { handleMenu(); }} > - - abc@abc.com - 홍길동 - - - - - - + + abc@abc.com + 홍길동 + + 수정하기 + 로그아웃 + + + )} ); } - -export const Content = styled.button` - font-size: var(--font-size-400); - font-weight: 700; - - @media screen and (max-width: ${breakPoints.small}px) { - font-size: var(--font-size-600); - } -`; - -export const Profile = styled.button` - margin-left: 10px; - width: 40px; - height: 40px; - background-color: var(--white-color-500); - border-radius: 100%; - &:hover { - box-shadow: 0 0 11px rgba(102, 102, 102, 0.25); - } -`; - -export const Overlay = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; -`; - -export const ProfileMenu = styled.div` - position: absolute; - top: 90px; - right: 0; - width: 320px; - height: 150px; - background-color: var(--main-color-300); - border-radius: 0 0 15px 15px; - display: flex; - flex-direction: column; - align-items: center; - gap:20px; - padding-top: 2%; -`; - -export const Infomation = styled.div` - font-size: var(--font-size-400); - font-weight: 700; - - @media screen and (max-width: ${breakPoints.small}px) { - font-size: var(--font-size-600); - } -` - - -export const ProfileButtons = styled.div` - display: flex; - gap: 20px; -` -export const Button = styled(CommonButton)` - background-color: var(--main-color-400); - width: 80px; - height: 30px; - font-size: var(--font-size-500); - &:hover { - background-color: var(--main-color-500); - } -` - - - diff --git a/src/styles/menu/Menu.styles.ts b/src/styles/menu/Menu.styles.ts new file mode 100644 index 0000000..438ba21 --- /dev/null +++ b/src/styles/menu/Menu.styles.ts @@ -0,0 +1,107 @@ +import styled from "styled-components"; +import { breakPoints } from "../breakPoints"; +import { CommonButton } from "../globalStyles"; + +export const Content = styled.button` + font-size: var(--font-size-400); + font-weight: 700; + + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-600); + } +`; + +export const Overlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +`; + +export const AdminMenuContainer = styled.div` + position: absolute; + top: 0; + right: 0; + width: 300px; + height: 500px; + border-bottom-left-radius: 20px; + background-color: var(--main-color-300); + box-shadow: 4px 3px 4px rgba(0, 0, 0, 0.3); + display: flex; + flex-direction: column; + align-items: center; + gap: 35px; + + @media screen and (max-width: ${breakPoints.small}px) { + width: 250px; + } +`; + +export const AdminMenuTitle = styled.div` + font-size: var(--font-size-300); + font-weight: 700; + margin-top: 30px; + margin-bottom: 20px; + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-500); + } +`; + +export const AdminMenuContent = styled.div` + font-size: var(--font-size-400); + + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-600); + } +`; + +export const Profile = styled.button` + margin-left: 10px; + width: 40px; + height: 40px; + background-color: var(--white-color-500); + border-radius: 100%; + &:hover { + box-shadow: 0 0 11px rgba(102, 102, 102, 0.25); + } +`; + +export const ProfileMenu = styled.div` + position: absolute; + top: 90px; + right: 0; + width: 320px; + height: 150px; + background-color: var(--main-color-300); + border-radius: 0 0 15px 15px; + display: flex; + flex-direction: column; + align-items: center; + gap:20px; + padding-top: 2%; +`; + +export const Infomation = styled.div` + font-size: var(--font-size-400); + font-weight: 700; + + @media screen and (max-width: ${breakPoints.small}px) { + font-size: var(--font-size-600); + } +` + + +export const ProfileButtons = styled.div` + display: flex; + gap: 20px; +` +export const Button = styled(CommonButton)` + background-color: var(--main-color-400); + width: 80px; + height: 30px; + font-size: var(--font-size-500); + &:hover { + background-color: var(--main-color-500); + } +` \ No newline at end of file From 7aaf598f1236565b1752281c5525380f8ae3f449 Mon Sep 17 00:00:00 2001 From: sockki Date: Fri, 15 Mar 2024 19:05:13 +0900 Subject: [PATCH 13/16] =?UTF-8?q?fix=20=ED=8F=B4=EB=8D=94=20=EB=AA=85=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.tsx | 4 ++-- src/components/{Menu => asdasd}/AdminMenu.tsx | 0 src/components/{Menu => asdasd}/Menu.tsx | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename src/components/{Menu => asdasd}/AdminMenu.tsx (100%) rename src/components/{Menu => asdasd}/Menu.tsx (100%) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a9a10e3..bf3dcb5 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -2,8 +2,8 @@ import * as S from "../styles/Header.styles"; import Logo from "../assets/img_logo.png"; import { useEffect, useState } from "react"; import { useLocation } from "react-router"; -import AdminMenu from "./menu/AdminMenu"; -import Menu from "./menu/Menu"; +import AdminMenu from "./asdasd/AdminMenu"; +import Menu from "./asdasd/Menu"; export default function Header() { const [login, setLogin] = useState({ user: "user" }); diff --git a/src/components/Menu/AdminMenu.tsx b/src/components/asdasd/AdminMenu.tsx similarity index 100% rename from src/components/Menu/AdminMenu.tsx rename to src/components/asdasd/AdminMenu.tsx diff --git a/src/components/Menu/Menu.tsx b/src/components/asdasd/Menu.tsx similarity index 100% rename from src/components/Menu/Menu.tsx rename to src/components/asdasd/Menu.tsx From 4d2f64b18d8451e7caa44c35827fc4c9bf22a3ea Mon Sep 17 00:00:00 2001 From: sockki Date: Fri, 15 Mar 2024 19:05:52 +0900 Subject: [PATCH 14/16] =?UTF-8?q?Fix=20=ED=8F=B4=EB=8D=94=20=EB=AA=85=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.tsx | 4 ++-- src/components/{asdasd => menu}/AdminMenu.tsx | 0 src/components/{asdasd => menu}/Menu.tsx | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename src/components/{asdasd => menu}/AdminMenu.tsx (100%) rename src/components/{asdasd => menu}/Menu.tsx (100%) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index bf3dcb5..a9a10e3 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -2,8 +2,8 @@ import * as S from "../styles/Header.styles"; import Logo from "../assets/img_logo.png"; import { useEffect, useState } from "react"; import { useLocation } from "react-router"; -import AdminMenu from "./asdasd/AdminMenu"; -import Menu from "./asdasd/Menu"; +import AdminMenu from "./menu/AdminMenu"; +import Menu from "./menu/Menu"; export default function Header() { const [login, setLogin] = useState({ user: "user" }); diff --git a/src/components/asdasd/AdminMenu.tsx b/src/components/menu/AdminMenu.tsx similarity index 100% rename from src/components/asdasd/AdminMenu.tsx rename to src/components/menu/AdminMenu.tsx diff --git a/src/components/asdasd/Menu.tsx b/src/components/menu/Menu.tsx similarity index 100% rename from src/components/asdasd/Menu.tsx rename to src/components/menu/Menu.tsx From 5e762b50ef35fee16f1ea1d72fbc3a2010e8f3a8 Mon Sep 17 00:00:00 2001 From: chobuzz Date: Sat, 16 Mar 2024 02:19:33 +0900 Subject: [PATCH 15/16] =?UTF-8?q?[FEAT]=20pixelToRem=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/pixelToRem.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/utils/pixelToRem.ts diff --git a/src/utils/pixelToRem.ts b/src/utils/pixelToRem.ts new file mode 100644 index 0000000..36aca59 --- /dev/null +++ b/src/utils/pixelToRem.ts @@ -0,0 +1,5 @@ +const ROOT_FONT_SIZE = 16; + +const pixelToRem = (pixel: number): string => { + return pixel / ROOT_FONT_SIZE + "rem"; +}; From a2640afc822df79223f0b9aa58ad29278e75159a Mon Sep 17 00:00:00 2001 From: chobuzz Date: Sun, 17 Mar 2024 02:43:18 +0900 Subject: [PATCH 16/16] =?UTF-8?q?[FEAT]=20Login=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Login.tsx | 32 +++++++++++++++++++++++++++++++- src/utils/pixelToRem.ts | 2 ++ 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index ab6d246..7babf42 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -2,22 +2,52 @@ import styled from "styled-components"; import { CommonInput, CommonButton } from "../styles/globalStyles"; import { useNavigate } from "react-router"; import { LoginSignUpContainer } from "../styles/LoginSignUp.style"; +import { useState, ChangeEvent } from "react"; export default function Login() { + const [email, setEmail] = useState("abcd"); + const [password, setPassword] = useState("dddd"); + const navigate = useNavigate(); const goToSignUp = () => { navigate("/signUp"); }; + const handleChange = (e: ChangeEvent) => { + const { name, value } = e.target; + switch (name) { + case "email": + setEmail(value); + break; + case "password": + setPassword(value); + break; + default: + break; + } + }; + return (

LOGIN

- + 로그인

회원가입

diff --git a/src/utils/pixelToRem.ts b/src/utils/pixelToRem.ts index 36aca59..bbb361b 100644 --- a/src/utils/pixelToRem.ts +++ b/src/utils/pixelToRem.ts @@ -3,3 +3,5 @@ const ROOT_FONT_SIZE = 16; const pixelToRem = (pixel: number): string => { return pixel / ROOT_FONT_SIZE + "rem"; }; + +export default pixelToRem;