atomsystem 0.1.38 → 0.1.40

package/app/templates/Navigation/Navigation.tsx

@@ -1,306 +1,169 @@
-"use client";
+"use client"
+
 import Link from "next/link";
-import Image from "next/image";
-import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
-import clsx from "clsx";
-import { useMediaQuery } from "react-responsive";
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import { useRef, createContext, useContext, useState } from "react";
 
-interface NavItemsAttr {
-  type?: "topnav" | "sidenav";
-  navMenu: {
-    name: string;
-    path?: string;
-  }[];
-}
+// Icons
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
-// Custom CSS classes are now used via css/navigation.css
 
-const handleNavToggle = (targetId: string) => {
-  const el = document.getElementById(targetId);
-  if (el) {
-    const isHidden = el.style.display === "none" || el.style.display === "";
-    el.style.display = isHidden ? "block" : "none";
-  }
-};
+gsap.registerPlugin(useGSAP); // register the hook to avoid React version discrepancies
 
-const Navigation = ({
-  children,
-  id,
-  className,
-  type = "topnav",
-}: {
+// Navigation을 베이스 interface로 정의
+export interface Navigation {
   children: React.ReactNode;
-  id?: string;
-  className?: string;
-  type?: "topnav" | "sidenav";
-}) => {
-  const isMobile = useMediaQuery({ maxWidth: 767 });
-
-  const mobileClose = () => {
-    if (isMobile) {
-      if (id) {
-        handleNavToggle(id);
-      }
-    }
-  };
+}
 
-  return (
-    <nav
-      id={id ? id : undefined}
-      className={`nav-container nav-${type} ${className} overflow-auto`}
-      onClick={mobileClose}
-    >
-      {children}
-    </nav>
-  );
-};
+export interface NavLink extends Navigation {
+  href: string;
+}
 
-const NavItems = ({ navMenu, type = "sidenav" }: NavItemsAttr) => {
-  const pathname = usePathname();
+/**
+ * NavContextProps: 네비게이션 상태를 하위 컴포넌트와 공유하기 위한 인터페이스
+ * - isOpen: 메뉴가 열려 있는지 여부
+ * - setOpen: 메뉴 상태를 변경하는 함수
+ */
+interface NavContextProps {
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+}
 
-  return (
-    <ul className={clsx(`nav-${type}`, { "flex flex-row items-center nav-gap": type === "topnav" })}>
-      {navMenu.map((menu) => {
-        return (
-          <li className="relative group" key={menu.name}>
-            <div className={clsx("flex justify-between items-center pr-4")}>
-              <Link
-                href={menu.path || "#"}
-                className={`${pathname === menu.path ? "nav-text-active" : "nav-text-standard"} nav-${type} block hover:opacity-80 transition-opacity nav-padding`}
-              >
-                {menu.name}
-              </Link>
-            </div>
-          </li>
-        );
-      })}
-    </ul>
-  );
+// NavContext: 상위 NavItem의 상태를 하 하위 NavTrigger와 NavContainer에 전달하는 통로(우체국)
+const NavContext = createContext<NavContextProps | undefined>(undefined);
+
+/**
+ * useNavContext: Context 정보를 쉽고 안전하게 꺼내 쓰기 위한 전용 커스텀 훅
+ * - 부모인 NavItem이 없을 경우(undefined)에도 에러가 나지 않도록 기본값을 반환하는 안전 장치 포함
+ */
+const useNavContext = () => {
+  const context = useContext(NavContext);
+  if (!context) {
+    // 부모를 찾지 못했을 때 앱이 멈추지 않도록 기본 상태 반환
+    return { isOpen: false, setOpen: () => {} };
+  }
+  return context;
 };
 
-const NavToggleButton = ({
-  children,
-  targetId,
-  className,
-}: {
-  children: React.ReactNode;
-  targetId: string;
-  className?: string;
-}) => {
+// 최상위 Navigation 레이아웃 컴포넌트
+const Navigation = ({ children }: Navigation) => {
   return (
-    <button className={className} onClick={() => handleNavToggle(targetId)}>
-      {children}
-    </button>
-  );
-};
+        <nav className="nav-menu flex items-center justify-between">
+            {children}
+        </nav>
+    )
+}
 
-const Sidebar = ({ navMenu, type = "sidenav" }: NavItemsAttr) => {
+// 로고나 브랜드명을 위한 컴포넌트
+const NavBrand = ({children, href}: NavLink) => {
   return (
-    <nav
-      className={clsx(
-        `relative nav-container nav-${type} w-full md:w-[320px] h-full z-20 left-0 overflow-auto`
-      )}
-    >
-      <ul>
-        {navMenu.map((menu, idx) => {
-          return (
-            <li className="relative group" key={menu.name + idx}>
-              <div className={clsx("flex justify-between items-center pr-4")}>
-                <Link
-                  href={menu.path || "#"}
-                  className={clsx(
-                    `block nav-text-standard nav-${type} hover:opacity-80 transition-opacity nav-padding`
-                  )}
-                >
-                  {menu.name}
-                </Link>
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-    </nav>
-  );
-};
+    <Link href={href} className="flex items-center h-full font-bold text-xl">{children}</Link>
+  )
+}
 
-const GlobalNav = ({
-  type = "sidebar",
-  navMenu,
-  brand = true,
-}: {
-  type?: "sidebar" | "topmenu" | "mobile";
-  navMenu: {
-    name: string;
-    path?: string;
-    subItems?: { name: string; path: string }[];
-    label?: boolean;
-  }[];
-  brand?: boolean;
-}) => {
-  const [windowSize, setWindowSize] = useState<number>(); // 초기값 설정
-  const [toggleMenu, setToggleMenu] = useState<boolean>(true);
-  const pathname = usePathname();
-  const [openSubMenu, setOpenSubMenu] = useState<Record<string, boolean>>({});
+/**
+ * NavItem: 개별 메뉴 항목 및 서브 메뉴의 상태를 관리하는 부모 컨테이너
+ * - 각각의 NavItem은 자신만의 isOpen 상태를 독립적으로 가짐
+ */
+const NavItem = ({children}: Navigation) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const setOpen = (open: boolean) => setIsOpen(open);
 
-  // 윈도우 사이즈 추적
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowSize(window.innerWidth); // 윈도우 사이즈 업데이트
-    };
+  // 마우스가 메뉴 전체 영역을 완전히 벗어날 때 호출 (메뉴 닫기)
+  const handleMouseLeave = () => setIsOpen(false);
 
-    window.addEventListener("resize", handleResize); // 리사이즈 이벤트 리스너 추가
+  return (
+    <NavContext.Provider value={{ isOpen, setOpen }}>
+      <li 
+        className={`nav-item`}
+        onMouseLeave={handleMouseLeave}
+      >
+        {children}
+      </li>
+    </NavContext.Provider>
+  )
+}
 
-    return () => window.removeEventListener("resize", handleResize); // 컴포넌트 언마운트 시 리스너 제거
-  }, [windowSize]);
+// 메뉴 항목들을 가로로 정렬해주는 리스트 컨테이너
+const NavList = ({children}: Navigation) => {
+  return (
+    <ul className="flex items-center gap-0">{children}</ul>
+  )
+}
 
-  // 초기 토글 값 설정
-  useEffect(() => {
-    if (window.innerWidth > 768) {
-    } else {
-      setToggleMenu(false);
-    }
-  }, []);
+// 일반적인 링크 메뉴 컴포넌트
+const NavLink = ({children, href}: NavLink) => {
+  const pathname = usePathname();
+  const active = pathname === href;
 
-  const toggleSubMenu = (menuName: string) => {
-    setOpenSubMenu((prev) => ({
-      ...prev,
-      [menuName]: !prev[menuName],
-    }));
-  };
+  return (
+    <Link href={href} className={`nav-link ${active ? "active" : ""}`}>{children}</Link>
+  )
+}
 
-  const navType = type === "sidebar" ? "sidenav" : "topnav";
+/**
+ * NavTrigger: 서브 메뉴를 여는 트리거 버튼
+ * - 마우스를 올렸을 때(onMouseEnter) 부모 NavItem의 상태를 열림(true)으로 변경
+ */
+const NavTrigger = ({children}: Navigation) => {
+    const { isOpen, setOpen } = useNavContext();
+    
+    // 트리거 영역에 진입했을 때만 메뉴 열기 실행
+    const handleMouseEnter = () => setOpen(true);
+
+    return (
+        <div 
+            className="nav-link flex items-center gap-1"
+            onMouseEnter={handleMouseEnter}
+        >
+            {children}
+            {/* 상태에 따라 화살표 아이콘 회전 애니메이션 클래스 적용 */}
+            <KeyboardArrowDownIcon className={`nav-arrow ${isOpen ? "open" : ""}`} />
+        </div>
+    )
+}
 
-  return (
-    <nav
-      className={clsx(
-        `fixed top-0 md:relative w-full nav-container nav-${navType} z-20 left-0 ${toggleMenu ? "block" : "hidden"}`,
-        { [`h-full max-w-80 overflow-auto border-r nav-border`]: type == "sidebar" },
-        { [`h-auto flex flex-row items-center border-b nav-border nav-${navType}`]: type == "topmenu" }
-      )}
-    >
-      {/* brand */}
-      {brand ? (
-        <div className="brand">
-          <div className={`flex items-center justify-between`}>
-            <Link href={"/"}>
-              <Image
-                src={"/images/global/logo.png"}
-                alt="Logo"
-                width={180}
-                height={45}
-                draggable="false"
-              ></Image>
-            </Link>
-            <button
-              className={`fixed shadow-md rounded-full nav-bg nav-${navType} border nav-border w-12 h-12 top-6 left-6 cursor-pointer z-50`}
-              onClick={() => setToggleMenu(!toggleMenu)}
-            >
-              <span
-                className={`material-symbols-outlined nav-text-standard nav-${navType}`}
-                style={{ fontSize: "16px" }}
-              >
-                menu
-              </span>
-            </button>
-          </div>
+/**
+ * NavContainer: 서브 메뉴의 실제 내용물이 담기는 컨테이너
+ * - GSAP을 사용하여 나타날 때 부드러운 애니메이션 효과 적용
+ */
+const NavContainer = ({children}: Navigation) => {
+    const { isOpen } = useNavContext();
+    const containerContentRef = useRef<HTMLUListElement>(null);
+
+    // 메뉴가 열릴 때 실행되는 GSAP 애니메이션
+    useGSAP(() => {
+        if (isOpen && containerContentRef.current) {
+            gsap.fromTo(containerContentRef.current, 
+                { opacity: 0, y: -10 },      // 시작 상태: 투명하고 살짝 위쪽
+                { opacity: 1, y: 0, duration: 0.2, ease: "power2.out" } // 도착 상태: 불투명하고 제자리
+            );
+        }
+    }, [isOpen]);
+    
+
+    // 닫혀 있을 때는 아예 렌더링하지 않음
+    if (!isOpen) return null;
+
+    return (
+        <div className="nav-container">
+          {/* 실제 박스 형태를 가진 내부 리스트 */}
+          <ul ref={containerContentRef} className="nav-content">
+            {children}
+          </ul>
         </div>
-      ) : null}
-      {/* List */}
-      <ul
-        className={clsx("", {
-          "flex flex-row": type == "topmenu",
-        })}
-      >
-        {navMenu.map((menu, idx) => {
-          switch (true) {
-            case menu.label === true && type == "sidebar":
-              return (
-                <p
-                  key={menu.name + idx}
-                  className={`nav-text-sub nav-${navType} mt-2 mb-0 nav-padding`}
-                >
-                  {menu.name}
-                </p>
-              );
-            default:
-              return (
-                <li className="relative group" key={menu.name}>
-                  <div
-                    className={clsx("flex justify-between items-center pr-4")}
-                  >
-                    <Link
-                      href={menu.path || "#"}
-                      className={clsx(
-                        `block nav-text-standard nav-${navType} nav-padding`,
-                        {
-                          "nav-text-active":
-                            (menu.path && menu.path == pathname) ||
-                            menu.subItems?.some((sub) => sub.path === pathname),
-                        }
-                      )}
-                    >
-                      {menu.name}
-                    </Link>
-                    {menu.subItems && type == "sidebar" ? (
-                      <button
-                        className="cursor-pointer"
-                        onClick={() => toggleSubMenu(menu.name)}
-                      >
-                        <span
-                          className={clsx(
-                            `material-symbols-outlined nav-text-sub nav-${navType} transition-transform`,
-                            {
-                              "rotate-90": openSubMenu[menu.name],
-                            }
-                          )}
-                          style={{ fontSize: "16px" }}
-                        >
-                          keyboard_arrow_right
-                        </span>
-                      </button>
-                    ) : null}
-                  </div>
-                  {menu.subItems ? (
-                    <ul
-                      className={clsx(
-                        "block",
-                        {
-                          [`hidden absolute top-[42px] group-hover:block hover:block nav-bg nav-${navType} border nav-border`]:
-                            type == "topmenu",
-                        },
-                        {
-                          hidden: !openSubMenu[menu.name] && type == "sidebar",
-                        }
-                      )}
-                    >
-                      {menu.subItems.map((submenu) => {
-                        return (
-                          <li key={submenu.name}>
-                            <Link
-                              className={clsx(
-                                `block nav-text-standard nav-${navType} nav-padding`,
-                                {
-                                  "nav-text-active": submenu.path == pathname,
-                                },
-                                { "pl-12 ": type == "sidebar" }
-                              )}
-                              href={submenu.path}
-                            >
-                              {submenu.name}
-                            </Link>
-                          </li>
-                        );
-                      })}
-                    </ul>
-                  ) : null}
-                </li>
-              );
-          }
-        })}
-      </ul>
-    </nav>
-  );
-};
-export default Navigation;
-export { Sidebar, GlobalNav, NavToggleButton, NavItems };
+    )
+}
+
+
+export {
+  Navigation,
+  NavBrand,
+  NavList,
+  NavItem,
+  NavLink,
+  NavTrigger,
+  NavContainer
+}

package/app/templates/Navigation/navigation.css

@@ -1,69 +1,59 @@
-
-
-.nav-container.nav-topnav {
-    background-color: var(--bg-topnav);
-    color: var(--text-topnav-standard);
-    border-color: var(--border-topnav);
-}
-
-.nav-container.nav-sidenav {
-    background-color: var(--bg-sidenav);
-    color: var(--text-sidenav-standard);
-    border-color: var(--border-sidenav);
-}
-
-.nav-bg.nav-topnav {
-    background-color: var(--bg-topnav);
-}
-
-.nav-bg.nav-sidenav {
-    background-color: var(--bg-sidenav);
+.nav-menu{
+    background-color: var(--bg-card);
+    padding: 0 var(--spacing-common-x);
+    border-bottom: 1px solid var(--border-standard);
+    position: relative;
 }
 
-.nav-border.nav-topnav {
-    border-color: var(--border-topnav);
+.nav-item{
+    display: block;
+    border-radius: var(--radius-common);
+    padding: var(--spacing-common-y) 0;
+    color: var(--text-standard); 
 }
 
-.nav-border.nav-sidenav {
-    border-color: var(--border-sidenav);
-}
-
-.nav-text-standard.nav-topnav {
-    color: var(--text-topnav-standard);
-}
-
-.nav-text-standard.nav-sidenav {
-    color: var(--text-sidenav-standard);
-}
-
-.nav-text-active.nav-topnav {
-    color: var(--text-topnav-active);
-}
 
-.nav-text-active.nav-sidenav {
-    color: var(--text-sidenav-active);
+.nav-link{
+    display: block;
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    border-radius: var(--radius-common);
+    cursor: pointer;
 }
 
-.nav-text-sub.nav-topnav {
-    color: var(--text-topnav-sub);
+.nav-link:hover{
+    background-color: var(--bg-hover);
 }
 
-.nav-text-sub.nav-sidenav {
-    color: var(--text-sidenav-sub);
+.nav-link.active{
+    color: var(--color-primary);
 }
 
-.nav-padding.nav-topnav {
-    padding: var(--spacing-topnav-y) var(--spacing-topnav-x);
+.nav-container {
+    position: absolute;
+    padding: var(--spacing-common-y) 0;
+    top: 100%; 
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 100;
 }
 
-.nav-padding.nav-sidenav {
-    padding: var(--spacing-sidenav-y) var(--spacing-sidenav-x);
+.nav-content {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: var(--spacing-common-x);
+    background-color: var(--bg-card);
+    border: 1px solid var(--border-standard);
+    border-radius: var(--radius-common);
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    box-shadow: var(--shadow-standard);
 }
 
-.nav-gap.nav-topnav {
-    gap: var(--spacing-topnav-gap);
+.nav-arrow {
+    transition: transform 0.2s ease;
 }
 
-.nav-gap.nav-sidenav {
-    gap: var(--spacing-sidenav-gap);
+.nav-arrow.open {
+    transform: rotate(180deg);
 }