From 4074626a62c55f95b7217f1f094ae02770a0f02c Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 8 Mar 2024 05:22:35 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat(#11):=20=ED=8A=B8=EB=A0=8C=EB=93=9C=20?= =?UTF-8?q?=EB=B6=84=EC=84=9D,=20=EA=B4=91=EA=B3=A0=20=EC=B9=B4=ED=94=BC?= =?UTF-8?q?=20=EC=A0=9C=EC=9E=91=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/trend/{ => people}/page.tsx | 0 src/components/navbar/Navbar.tsx | 84 ++++++++++++++++++++++------- 2 files changed, 64 insertions(+), 20 deletions(-) rename src/app/trend/{ => people}/page.tsx (100%) diff --git a/src/app/trend/page.tsx b/src/app/trend/people/page.tsx similarity index 100% rename from src/app/trend/page.tsx rename to src/app/trend/people/page.tsx diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index 3f85406..2eabed5 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -1,20 +1,53 @@ "use client"; import { styled } from "styled-components"; -import { colors } from "@/styles/theme"; import { useState } from "react"; import { subtitleData, titleData } from "@/lib/navbar/navbarData"; import NOSSR from "../common/NOSSR"; +import { useRouter } from "next/navigation"; export default function Navbar() { const [openNavbar, setOpenNavbar] = useState(false); + const router = useRouter(); - const handleNavbarTrue = () => { - setOpenNavbar(true); + const handleNavbarClick = () => { + setOpenNavbar(!openNavbar); }; - const handleNavbarFalse = () => { + const handleIndexClick = (titleIndex: number, subtitleIndex: number) => { setOpenNavbar(false); + + switch (titleIndex) { + case 1: + switch (subtitleIndex) { + case 0: + router.push("/trend/people"); + break; + case 1: + router.push("/trend/item"); + break; + case 2: + router.push("/trend/compare"); + break; + default: + break; + } + break; + case 2: + switch (subtitleIndex) { + case 0: + router.push("/adCopy/createAdCopy"); + break; + case 1: + router.push("/adCopy/gallery"); + break; + default: + break; + } + break; + default: + break; + } }; return ( @@ -22,31 +55,41 @@ export default function Navbar() { - + { + setOpenNavbar(false); + router.push("/"); + }} + /> - + + {titleData.map((title: string, index: number) => { return {title}; })} +
로그인
|
회원가입
 + {openNavbar && ( - + {subtitleData.map((title: string[], index: number) => ( - {title.map((subtitle: string) => { - return {subtitle}; + {title.map((subtitle: string, subIndex: number) => { + return ( + handleIndexClick(index, subIndex)} + > + {subtitle} + + ); })} ))} @@ -66,7 +109,7 @@ const Layout = styled.div` align-items: center; margin: 0 auto; gap: 2rem; - background: ${colors.background}; + background: ${({ theme }) => theme.colors.background}; position: fixed; top: 0; left: 0; @@ -85,6 +128,7 @@ const LogoBox = styled.div` const Logo = styled.img` width: 100%; height: 100%; + cursor: pointer; `; const TitleBox = styled.div` @@ -98,7 +142,7 @@ const TitleBox = styled.div` `; const Title = styled.div` - color: ${colors.white}; + color: ${({ theme }) => theme.colors.white}; font-size: 1rem; width: 60%; display: flex; @@ -106,7 +150,7 @@ const Title = styled.div` white-space: nowrap; &:hover { - color: ${colors.mainLight1}; + color: ${({ theme }) => theme.colors.mainLight1}; transition: 0.1s; } `; @@ -120,7 +164,7 @@ const AuthBox = styled.div` gap: 1rem; cursor: pointer; div { - color: ${colors.white}; + color: ${({ theme }) => theme.colors.white}; font-size: 0.8rem; } `; From a93ed82140448ebd996231fb458f402d0edbb2b7 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 8 Mar 2024 05:26:24 +0900 Subject: [PATCH 2/5] =?UTF-8?q?docs(#23):=20trend=20content=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/trend/RelatedContent.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/trend/RelatedContent.tsx b/src/components/trend/RelatedContent.tsx index 51f6ebd..ba23e0d 100644 --- a/src/components/trend/RelatedContent.tsx +++ b/src/components/trend/RelatedContent.tsx @@ -13,7 +13,12 @@ const RelatedContent = (props: RelatedContentProps) => { return ( - content + content {title} From 2715c544259ac9da90896c24f36edd55199991e6 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 8 Mar 2024 05:29:09 +0900 Subject: [PATCH 3/5] =?UTF-8?q?design(#23):=20navbar=20=EB=B0=B0=EA=B2=BD?= =?UTF-8?q?=EC=83=89=20=EC=96=91=20=EC=98=86=EC=97=90=EB=8F=84=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navbar/Navbar.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index 2eabed5..e98c695 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -103,8 +103,9 @@ export default function Navbar() { const Layout = styled.div` display: flex; - width: 90%; + width: 100%; height: 5.5rem; + padding: 0 5%; justify-content: center; align-items: center; margin: 0 auto; @@ -163,6 +164,7 @@ const AuthBox = styled.div` align-items: center; gap: 1rem; cursor: pointer; + white-space: nowrap; div { color: ${({ theme }) => theme.colors.white}; font-size: 0.8rem; From f06e7c3e84cc6490c224c469c4f68e21ad84fe91 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 8 Mar 2024 05:45:50 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat(#23):=20=EB=B0=B0=EA=B2=BD=20=EB=88=8C?= =?UTF-8?q?=EB=A0=80=EC=9D=84=20=EB=95=8C=20Navbar=20=EC=82=AC=EB=9D=BC?= =?UTF-8?q?=EC=A7=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navbar/Navbar.tsx | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index e98c695..24bf883 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -1,7 +1,7 @@ "use client"; import { styled } from "styled-components"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { subtitleData, titleData } from "@/lib/navbar/navbarData"; import NOSSR from "../common/NOSSR"; import { useRouter } from "next/navigation"; @@ -50,10 +50,28 @@ export default function Navbar() { } }; + const handleOutsideClick = (event: MouseEvent) => { + const target = event.target as HTMLElement; + if (!target.closest("#indexBox") && openNavbar) { + setOpenNavbar(false); + } + }; + + useEffect(() => { + if (openNavbar) { + document.addEventListener("click", handleOutsideClick); + } else { + document.removeEventListener("click", handleOutsideClick); + } + return () => { + document.removeEventListener("click", handleOutsideClick); + }; + }, [openNavbar]); + return ( <> - + e.stopPropagation()}> Date: Fri, 8 Mar 2024 05:50:52 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat(#23):=20navbar=20=EC=95=A0=EB=8B=88?= =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navbar/Navbar.tsx | 10 ++++++++-- src/styles/animation.ts | 10 ++++++---- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index 24bf883..fabe708 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -5,6 +5,8 @@ import { useEffect, useState } from "react"; import { subtitleData, titleData } from "@/lib/navbar/navbarData"; import NOSSR from "../common/NOSSR"; import { useRouter } from "next/navigation"; +import { motion } from "framer-motion"; +import { NavbarVariants } from "@/styles/animation"; export default function Navbar() { const [openNavbar, setOpenNavbar] = useState(false); @@ -96,7 +98,11 @@ export default function Navbar() { {openNavbar && ( - + {subtitleData.map((title: string[], index: number) => ( {title.map((subtitle: string, subIndex: number) => { @@ -189,7 +195,7 @@ const AuthBox = styled.div` } `; -const IndexBox = styled.div` +const IndexBox = styled(motion.div)` width: 76%; height: 18rem; display: flex; diff --git a/src/styles/animation.ts b/src/styles/animation.ts index 9b02de0..1196900 100644 --- a/src/styles/animation.ts +++ b/src/styles/animation.ts @@ -1,9 +1,11 @@ -export const ContainerAnimation = { - hidden: { opacity: 0 }, - visible: { +export const NavbarVariants = { + offscreen: { + opacity: 0, + }, + onscreen: { opacity: 1, transition: { - duration: 1, + duration: 0.2, }, }, };