Merge pull request #24 from Kusitms-28th-Kobaco-B/feat/#23

[feat] Navbar 경로 추가
Kusitms-28th-Kobaco-B · Mar 7, 2024 · b2567ce · b2567ce
2 parents 7a02dc8 + ea353fc
commit b2567ce
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 27 deletions.
diff --git a/src/app/trend/page.tsx → src/app/trend/people/page.tsx b/src/app/trend/page.tsx → src/app/trend/people/page.tsx
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -1,52 +1,119 @@
 "use client";
 
 import { styled } from "styled-components";
-import { colors } from "@/styles/theme";
-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";
+import { motion } from "framer-motion";
+import { NavbarVariants } from "@/styles/animation";
 
 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;
+    }
+  };
+
+  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 (
     <>
       <NOSSR>
-        <Layout>
+        <Layout onClick={(e) => e.stopPropagation()}>
           <LogoBox>
-            <Logo src={"/navbar/kobaco_logo.svg"} alt={"kobaco"} />
+            <Logo
+              src={"/navbar/kobaco_logo.svg"}
+              alt={"kobaco"}
+              onClick={() => {
+                setOpenNavbar(false);
+                router.push("/");
+              }}
+            />
           </LogoBox>
-          <TitleBox
-            onClick={handleNavbarTrue}
-            onMouseEnter={handleNavbarTrue}
-            onMouseLeave={handleNavbarFalse}
-          >
+
+          <TitleBox onClick={handleNavbarClick}>
             {titleData.map((title: string, index: number) => {
               return <Title key={index}>{title}</Title>;
             })}
           </TitleBox>
+
           <AuthBox>
             <div>로그인</div>
             <div>|</div>
             <div>회원가입</div>
           </AuthBox>
+
           {openNavbar && (
             <IndexBox
-              onMouseEnter={handleNavbarTrue}
-              onMouseLeave={handleNavbarFalse}
+              initial="offscreen"
+              whileInView="onscreen"
+              variants={NavbarVariants}
             >
               {subtitleData.map((title: string[], index: number) => (
                 <SubtitleBox key={index}>
-                  {title.map((subtitle: string) => {
-                    return <Title key={subtitle}>{subtitle}</Title>;
+                  {title.map((subtitle: string, subIndex: number) => {
+                    return (
+                      <Title
+                        key={subtitle}
+                        onClick={() => handleIndexClick(index, subIndex)}
+                      >
+                        {subtitle}
+                      </Title>
+                    );
                   })}
                 </SubtitleBox>
               ))}
@@ -60,13 +127,14 @@ 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;
   gap: 2rem;
-  background: ${colors.background};
+  background: ${({ theme }) => theme.colors.background};
   position: fixed;
   top: 0;
   left: 0;
@@ -85,6 +153,7 @@ const LogoBox = styled.div`
 const Logo = styled.img`
   width: 100%;
   height: 100%;
+  cursor: pointer;
 `;
 
 const TitleBox = styled.div`
@@ -98,15 +167,15 @@ const TitleBox = styled.div`
 `;
 
 const Title = styled.div`
-  color: ${colors.white};
+  color: ${({ theme }) => theme.colors.white};
   font-size: 1rem;
   width: 60%;
   display: flex;
   justify-content: center;
   white-space: nowrap;
 
   &:hover {
-    color: ${colors.mainLight1};
+    color: ${({ theme }) => theme.colors.mainLight1};
     transition: 0.1s;
   }
 `;
@@ -119,13 +188,14 @@ const AuthBox = styled.div`
   align-items: center;
   gap: 1rem;
   cursor: pointer;
+  white-space: nowrap;
   div {
-    color: ${colors.white};
+    color: ${({ theme }) => theme.colors.white};
     font-size: 0.8rem;
   }
 `;
 
-const IndexBox = styled.div`
+const IndexBox = styled(motion.div)`
   width: 76%;
   height: 18rem;
   display: flex;

diff --git a/src/components/trend/RelatedContent.tsx b/src/components/trend/RelatedContent.tsx
@@ -13,7 +13,12 @@ const RelatedContent = (props: RelatedContentProps) => {
   return (
     <Layout>
       <TopBox>
-        <Image src="trend/content.svg" alt="content" width={100} height={100} />
+        <Image
+          src="/trend/content.svg"
+          alt="content"
+          width={100}
+          height={100}
+        />
       </TopBox>
       <BottomBox>
         <Title>{title}</Title>

diff --git 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,
     },
   },
 };