atomsystem 0.1.39 → 0.1.40

package/app/templates/Navigation/Navigation.tsx

@@ -2,6 +2,15 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import { useRef, createContext, useContext, useState } from "react";
+
+// Icons
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
+
+gsap.registerPlugin(useGSAP); // register the hook to avoid React version discrepancies
 
 // Navigation을 베이스 interface로 정의
 export interface Navigation {
@@ -12,7 +21,33 @@ export interface NavLink extends Navigation {
   href: string;
 }
 
+/**
+ * NavContextProps: 네비게이션 상태를 하위 컴포넌트와 공유하기 위한 인터페이스
+ * - isOpen: 메뉴가 열려 있는지 여부
+ * - setOpen: 메뉴 상태를 변경하는 함수
+ */
+interface NavContextProps {
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+}
 
+// 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;
+};
+
+// 최상위 Navigation 레이아웃 컴포넌트
 const Navigation = ({ children }: Navigation) => {
   return (
         <nav className="nav-menu flex items-center justify-between">
@@ -21,33 +56,114 @@ const Navigation = ({ children }: Navigation) => {
     )
 }
 
-
+// 로고나 브랜드명을 위한 컴포넌트
 const NavBrand = ({children, href}: NavLink) => {
   return (
-    <Link href={href} className="flex items-center">{children}</Link>
+    <Link href={href} className="flex items-center h-full font-bold text-xl">{children}</Link>
+  )
+}
+
+/**
+ * NavItem: 개별 메뉴 항목 및 서브 메뉴의 상태를 관리하는 부모 컨테이너
+ * - 각각의 NavItem은 자신만의 isOpen 상태를 독립적으로 가짐
+ */
+const NavItem = ({children}: Navigation) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const setOpen = (open: boolean) => setIsOpen(open);
+
+  // 마우스가 메뉴 전체 영역을 완전히 벗어날 때 호출 (메뉴 닫기)
+  const handleMouseLeave = () => setIsOpen(false);
+
+  return (
+    <NavContext.Provider value={{ isOpen, setOpen }}>
+      <li 
+        className={`nav-item`}
+        onMouseLeave={handleMouseLeave}
+      >
+        {children}
+      </li>
+    </NavContext.Provider>
   )
 }
 
+// 메뉴 항목들을 가로로 정렬해주는 리스트 컨테이너
 const NavList = ({children}: Navigation) => {
   return (
     <ul className="flex items-center gap-0">{children}</ul>
   )
 }
 
-
-const NavItem = ({children, href}: NavLink) => {
+// 일반적인 링크 메뉴 컴포넌트
+const NavLink = ({children, href}: NavLink) => {
   const pathname = usePathname();
   const active = pathname === href;
 
   return (
-    <Link href={href} className={`nav-item ${active ? "text-primary!" : ""}`}>{children}</Link>
+    <Link href={href} className={`nav-link ${active ? "active" : ""}`}>{children}</Link>
   )
 }
 
+/**
+ * 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>
+    )
+}
+
+/**
+ * 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>
+    )
+}
+
 
 export {
   Navigation,
   NavBrand,
   NavList,
-  NavItem
+  NavItem,
+  NavLink,
+  NavTrigger,
+  NavContainer
 }

package/app/templates/Navigation/navigation.css

@@ -1,16 +1,59 @@
 .nav-menu{
     background-color: var(--bg-card);
+    padding: 0 var(--spacing-common-x);
     border-bottom: 1px solid var(--border-standard);
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-
+    position: relative;
 }
 
 .nav-item{
+    display: block;
     border-radius: var(--radius-common);
+    padding: var(--spacing-common-y) 0;
+    color: var(--text-standard); 
+}
+
+
+.nav-link{
+    display: block;
     padding: var(--spacing-common-y) var(--spacing-common-x);
-    color: var(--text-standard);
+    border-radius: var(--radius-common);
+    cursor: pointer;
 }
 
-.nav-item:hover{
+.nav-link:hover{
     background-color: var(--bg-hover);
-}
+}
+
+.nav-link.active{
+    color: var(--color-primary);
+}
+
+.nav-container {
+    position: absolute;
+    padding: var(--spacing-common-y) 0;
+    top: 100%; 
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 100;
+}
+
+.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-arrow {
+    transition: transform 0.2s ease;
+}
+
+.nav-arrow.open {
+    transform: rotate(180deg);
+}

package/app/templates/Sidebar/Sidebar.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import { createContext, useContext, useRef, useState } from "react";
+
+// Icons
+import MenuIcon from '@mui/icons-material/Menu';
+
+gsap.registerPlugin(useGSAP); // register the hook to avoid React version discrepancies
+
+// Navigation을 베이스 interface로 정의
+export interface Sidebar {
+  children: React.ReactNode;
+  minWidth?: number
+}
+
+export interface NavLink {
+  children: React.ReactNode;
+  href: string;
+}
+
+interface SideContext {
+  isOpen: boolean;
+  setToggle: (open: boolean) => void;
+}
+
+const SideContext = createContext<SideContext | undefined>(undefined);
+
+const useSideContext = () => {
+  const context = useContext(SideContext);
+  if (!context) {
+    return { isOpen: false, setToggle: () => {} };
+  }
+  return context;
+}
+
+const SidebarProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const setToggle = (open: boolean) => setIsOpen(open);
+
+  return (
+    <SideContext.Provider value={{ isOpen, setToggle }}>
+      {children}
+    </SideContext.Provider>
+  );
+};
+
+const SidebarToggle = () => {
+  const { isOpen, setToggle } = useSideContext();
+  return (
+      <button className="cursor-pointer" onClick={() => setToggle(!isOpen)}><MenuIcon className="text-text-sub" sx={{fontSize: "20px"}}/></button>
+  )
+}
+
+const Sidebar = ({ children, minWidth }: Sidebar) => {
+  const { isOpen } = useSideContext();
+  const sidebarRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(() => {
+    if (sidebarRef.current) {
+        if (isOpen) {
+            // 열릴 때: 나타나면서 제자리로
+            gsap.to(sidebarRef.current, { 
+                display: "flex",
+                opacity: 1, 
+                x: 0, 
+                width: minWidth, 
+                minWidth: minWidth,
+                duration: 0.3, 
+                ease: "power2.out" 
+            });
+        } else {
+            // 닫힐 때: 사라지면서 왼쪽으로, 너비도 0으로
+            gsap.to(sidebarRef.current, { 
+                opacity: 0, 
+                x: -20, 
+                width: 0, 
+                minWidth: 0,
+                duration: 0.3, 
+                ease: "power2.in",
+                onComplete: () => {
+                    gsap.set(sidebarRef.current, { display: "none" });
+                }
+            });
+        }
+    }
+  }, [isOpen]);
+
+
+  return (
+      <aside ref={sidebarRef} className={`nav-side flex-col overflow-hidden h-full`} style={{ width: isOpen ? minWidth : 0, minWidth: isOpen ? minWidth : 0 }}>
+          {children}
+      </aside>
+    )
+}
+
+
+const SideNavBrand = ({children, href}: NavLink) => {
+  return (
+    <Link href={href} className="flex items-center">{children}</Link>
+  )
+}
+
+const SideNavList = ({children}: Sidebar) => {
+  return (
+    <ul className="nav-list flex flex-col">{children}</ul>
+  )
+}
+
+
+const SideNavItem = ({children}: Sidebar) => {
+  return (
+    <li>{children}</li>
+  )
+}
+
+const SideNavLink = ({children, href}: NavLink) => {
+  
+    const pathname = usePathname();
+    const active = pathname === href;
+
+  return (
+    <Link href={href} className={`nav-link text-nowrap ${active ? "active" : ""}`}>{children}</Link>
+  )
+}
+
+
+export {
+  Sidebar,
+  SidebarProvider,
+  SidebarToggle,
+  SideNavBrand,
+  SideNavList,
+  SideNavItem,
+  SideNavLink
+}

package/build/css/_variables.css

@@ -1,251 +1,251 @@
-@theme {
---color-gray-100: #f5f5f5;
---color-gray-200: #e6e6e6;
---color-gray-300: #dbdbdb;
---color-gray-400: #d4d4d4;
---color-gray-500: #cccccc;
---color-gray-600: #bfbfbf;
---color-gray-700: #b3b3b3;
---color-gray-800: #a6a6a6;
---color-gray-900: #999999;
---color-gray-950: #707070;
---color-dark-100: #111111;
---color-dark-200: #222222;
---color-dark-300: #333333;
---color-dark-400: #444444;
---color-dark-500: #555555;
---color-dark-600: #666666;
---color-dark-700: #777777;
---color-dark-800: #888888;
---color-dark-900: #999999;
---color-dark-950: #b2b2b2;
---color-blue-100: #e3f2fd;
---color-blue-200: #bbdefb;
---color-blue-300: #90caf9;
---color-blue-400: #64b5f6;
---color-blue-500: #2196f3;
---color-blue-600: #1e88e5;
---color-blue-700: #1976d2;
---color-blue-800: #1565c0;
---color-blue-900: #0d47a1;
---color-blue-950: #0a2f6b;
---color-indigo-100: #e8eaf6;
---color-indigo-200: #c5cae9;
---color-indigo-300: #7986cb;
---color-indigo-400: #3f51b5;
---color-indigo-500: #162c4e;
---color-indigo-600: #122542;
---color-indigo-700: #0e1d35;
---color-indigo-800: #0a1628;
---color-indigo-900: #070f1b;
---color-indigo-950: #04080e;
---color-red-100: #ffebee;
---color-red-200: #ffcdd2;
---color-red-300: #ef9a9a;
---color-red-400: #e57373;
---color-red-500: #f44336;
---color-red-600: #e53935;
---color-red-700: #d32f2f;
---color-red-800: #c62828;
---color-red-900: #b71c1c;
---color-red-950: #7f1212;
---color-yellow-100: #fff8e1;
---color-yellow-200: #ffecb3;
---color-yellow-300: #ffe082;
---color-yellow-400: #ffd54f;
---color-yellow-500: #ffb300;
---color-yellow-600: #ffa000;
---color-yellow-700: #ff8f00;
---color-yellow-800: #ff6f00;
---color-yellow-900: #e65100;
---color-yellow-950: #9e3600;
---color-green-100: #e8f5e9;
---color-green-200: #c8e6c9;
---color-green-300: #a5d6a7;
---color-green-400: #81c784;
---color-green-500: #4caf50;
---color-green-600: #43a047;
---color-green-700: #388e3c;
---color-green-800: #2e7d32;
---color-green-900: #1b5e20;
---color-green-950: #104015;
---color-black: #111111;
---color-white: #fafafa;
---color-primary: var(--color-blue-500);
---color-secondary: var(--color-indigo-500);
---color-danger: var(--color-red-500);
---color-warning: var(--color-yellow-500);
---color-info: var(--color-gray-900);
---color-success: var(--color-green-500);
---text-h1: 40px;
---text-h2: 36px;
---text-h3: 28px;
---text-h4: 24px;
---text-h5: 20px;
---text-h6: 16px;
---text-body: 16px;
---text-sm: 12px;
---font-weight-header: 700;
---radius-common: 4px;
---radius-circle: 10000000px;
---font-spoqaNeo: Spoqa Han Sans Neo;
---spacing-common-y: 12px;
---spacing-common-x: 16px;
---spacing-gap-small: 4px;
---spacing-sm-y: 8px;
---spacing-small: 20px;
-
-  --color-bg-card: var(--bg-card);
-  --color-bg-wrapper: var(--bg-wrapper);
-  --color-bg-hover: var(--bg-hover);
-  --color-bg-input-standard: var(--bg-input-standard);
-  --color-bg-input-hover: var(--bg-input-hover);
-  --color-bg-input-disabled: var(--bg-input-disabled);
-  --color-text-title: var(--text-title);
-  --color-text-body: var(--text-body);
-  --color-text-sub: var(--text-sub);
-  --color-text-standard: var(--text-standard);
-  --color-text-active: var(--text-active);
-  --color-text-placeholder: var(--text-placeholder);
-  --color-text-disabled: var(--text-disabled);
-  --color-border-standard: var(--border-standard);
-  --color-border-active: var(--border-active);
-  --color-button-primary-bg-disabled: var(--button-primary-bg-disabled);
-  --color-button-primary-text-disabled: var(--button-primary-text-disabled);
-  --color-button-primary-border-disabled: var(--button-primary-border-disabled);
-  --color-button-secondary-bg-disabled: var(--button-secondary-bg-disabled);
-  --color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
-  --color-button-secondary-border-disabled: var(--button-secondary-border-disabled);
-  --color-button-success-bg-disabled: var(--button-success-bg-disabled);
-  --color-button-success-text-disabled: var(--button-success-text-disabled);
-  --color-button-success-border-disabled: var(--button-success-border-disabled);
-  --color-button-danger-bg-disabled: var(--button-danger-bg-disabled);
-  --color-button-danger-text-disabled: var(--button-danger-text-disabled);
-  --color-button-danger-border-disabled: var(--button-danger-border-disabled);
-  --color-button-warning-bg-disabled: var(--button-warning-bg-disabled);
-  --color-button-warning-text-disabled: var(--button-warning-text-disabled);
-  --color-button-warning-border-disabled: var(--button-warning-border-disabled);
-  --color-button-gray-bg-disabled: var(--button-gray-bg-disabled);
-  --color-button-gray-text-disabled: var(--button-gray-text-disabled);
-  --color-button-gray-border-disabled: var(--button-gray-border-disabled);
-  --color-table-header-bg: var(--table-header-bg);
-  --color-table-header-text: var(--table-header-text);
-  --color-table-header-border: var(--table-header-border);
-  --color-table-body-bg: var(--table-body-bg);
-  --color-table-body-bgEven: var(--table-body-bgEven);
-  --color-table-body-text: var(--table-body-text);
-  --color-table-body-border: var(--table-body-border);
-  --color-pagination-bg-hover: var(--pagination-bg-hover);
-  --color-callout-note-bg: var(--callout-note-bg);
-  --color-callout-note-text: var(--callout-note-text);
-  --color-callout-tip-bg: var(--callout-tip-bg);
-  --color-callout-tip-text: var(--callout-tip-text);
-  --color-callout-danger-bg: var(--callout-danger-bg);
-  --color-callout-danger-text: var(--callout-danger-text);
-  --color-callout-warning-bg: var(--callout-warning-bg);
-  --color-callout-warning-text: var(--callout-warning-text);
-}
-
-.white {
---bg-card: var(--color-white);
---bg-wrapper: var(--color-gray-200);
---bg-hover: var(--color-gray-200);
---bg-input-standard: var(--color-gray-100);
---bg-input-hover: var(--color-gray-200);
---bg-input-disabled: var(--color-gray-500);
---text-title: var(--color-dark-100);
---text-body: var(--color-dark-400);
---text-sub: var(--color-gray-950);
---text-standard: var(--color-dark-300);
---text-active: var(--color-gray-100);
---text-placeholder: var(--color-gray-950);
---text-disabled: var(--color-gray-950);
---border-standard: var(--color-gray-500);
---border-active: var(--color-dark-400);
---button-primary-bg-disabled: var(--color-blue-200);
---button-primary-text-disabled: var(--color-blue-400);
---button-primary-border-disabled: var(--color-blue-200);
---button-secondary-bg-disabled: var(--color-indigo-200);
---button-secondary-text-disabled: var(--color-indigo-400);
---button-secondary-border-disabled: var(--color-indigo-200);
---button-success-bg-disabled: var(--color-green-200);
---button-success-text-disabled: var(--color-green-400);
---button-success-border-disabled: var(--color-green-200);
---button-danger-bg-disabled: var(--color-red-200);
---button-danger-text-disabled: var(--color-red-400);
---button-danger-border-disabled: var(--color-red-200);
---button-warning-bg-disabled: var(--color-yellow-200);
---button-warning-text-disabled: var(--color-yellow-400);
---button-warning-border-disabled: var(--color-yellow-200);
---button-gray-bg-disabled: var(--color-gray-200);
---button-gray-text-disabled: var(--color-gray-500);
---button-gray-border-disabled: var(--color-gray-300);
---table-header-bg: var(--color-gray-400);
---table-header-text: var(--color-dark-500);
---table-header-border: var(--color-gray-500);
---table-body-bg: var(--color-white);
---table-body-bgEven: var(--color-gray-100);
---table-body-text: var(--color-dark-300);
---table-body-border: var(--color-gray-300);
---pagination-bg-hover: var(--color-gray-100);
---callout-note-bg: var(--color-gray-100);
---callout-note-text: var(--color-gray-900);
---callout-tip-bg: var(--color-green-100);
---callout-tip-text: var(--color-green-900);
---callout-danger-bg: var(--color-red-100);
---callout-danger-text: var(--color-red-900);
---callout-warning-bg: var(--color-yellow-100);
---callout-warning-text: var(--color-yellow-900);
-} 
-
-.dark {
---bg-card: var(--color-dark-200);
---bg-wrapper: var(--color-black);
---bg-hover: var(--color-dark-400);
---bg-input-standard: var(--color-dark-300);
---bg-input-hover: var(--color-dark-400);
---bg-input-disabled: var(--color-dark-200);
---text-title: var(--color-white);
---text-body: var(--color-gray-200);
---text-sub: var(--color-gray-600);
---text-standard: var(--color-white);
---text-active: var(--color-white);
---text-placeholder: var(--color-gray-950);
---text-disabled: var(--color-dark-400);
---border-standard: var(--color-dark-400);
---border-active: var(--color-gray-500);
---button-primary-bg-disabled: var(--color-blue-900);
---button-primary-text-disabled: var(--color-blue-700);
---button-primary-border-disabled: var(--color-blue-800);
---button-secondary-bg-disabled: var(--color-indigo-900);
---button-secondary-text-disabled: var(--color-indigo-700);
---button-secondary-border-disabled: var(--color-indigo-800);
---button-success-bg-disabled: var(--color-green-900);
---button-success-text-disabled: var(--color-green-700);
---button-success-border-disabled: var(--color-green-800);
---button-danger-bg-disabled: var(--color-red-900);
---button-danger-text-disabled: var(--color-red-700);
---button-danger-border-disabled: var(--color-red-800);
---button-warning-bg-disabled: var(--color-yellow-900);
---button-warning-text-disabled: var(--color-yellow-700);
---button-warning-border-disabled: var(--color-yellow-800);
---button-gray-bg-disabled: var(--color-gray-800);
---button-gray-text-disabled: var(--color-gray-600);
---button-gray-border-disabled: var(--color-gray-700);
---table-header-bg: var(--color-dark-400);
---table-header-text: var(--color-gray-200);
---table-header-border: var(--color-dark-600);
---table-body-bg: var(--color-dark-200);
---table-body-bgEven: var(--color-dark-300);
---table-body-text: var(--color-gray-200);
---table-body-border: var(--color-dark-400);
---pagination-bg-hover: var(--color-dark-300);
---callout-note-bg: var(--color-dark-300);
---callout-note-text: var(--color-white);
---callout-tip-bg: var(--color-green-950);
---callout-tip-text: var(--color-green-200);
---callout-danger-bg: var(--color-red-950);
---callout-danger-text: var(--color-red-200);
---callout-warning-bg: var(--color-yellow-950);
---callout-warning-text: var(--color-yellow-200);
+@theme {
+--color-gray-100: #f5f5f5;
+--color-gray-200: #e6e6e6;
+--color-gray-300: #dbdbdb;
+--color-gray-400: #d4d4d4;
+--color-gray-500: #cccccc;
+--color-gray-600: #bfbfbf;
+--color-gray-700: #b3b3b3;
+--color-gray-800: #a6a6a6;
+--color-gray-900: #999999;
+--color-gray-950: #707070;
+--color-dark-100: #111111;
+--color-dark-200: #222222;
+--color-dark-300: #333333;
+--color-dark-400: #444444;
+--color-dark-500: #555555;
+--color-dark-600: #666666;
+--color-dark-700: #777777;
+--color-dark-800: #888888;
+--color-dark-900: #999999;
+--color-dark-950: #b2b2b2;
+--color-blue-100: #e3f2fd;
+--color-blue-200: #bbdefb;
+--color-blue-300: #90caf9;
+--color-blue-400: #64b5f6;
+--color-blue-500: #2196f3;
+--color-blue-600: #1e88e5;
+--color-blue-700: #1976d2;
+--color-blue-800: #1565c0;
+--color-blue-900: #0d47a1;
+--color-blue-950: #0a2f6b;
+--color-indigo-100: #e8eaf6;
+--color-indigo-200: #c5cae9;
+--color-indigo-300: #7986cb;
+--color-indigo-400: #3f51b5;
+--color-indigo-500: #162c4e;
+--color-indigo-600: #122542;
+--color-indigo-700: #0e1d35;
+--color-indigo-800: #0a1628;
+--color-indigo-900: #070f1b;
+--color-indigo-950: #04080e;
+--color-red-100: #ffebee;
+--color-red-200: #ffcdd2;
+--color-red-300: #ef9a9a;
+--color-red-400: #e57373;
+--color-red-500: #f44336;
+--color-red-600: #e53935;
+--color-red-700: #d32f2f;
+--color-red-800: #c62828;
+--color-red-900: #b71c1c;
+--color-red-950: #7f1212;
+--color-yellow-100: #fff8e1;
+--color-yellow-200: #ffecb3;
+--color-yellow-300: #ffe082;
+--color-yellow-400: #ffd54f;
+--color-yellow-500: #ffb300;
+--color-yellow-600: #ffa000;
+--color-yellow-700: #ff8f00;
+--color-yellow-800: #ff6f00;
+--color-yellow-900: #e65100;
+--color-yellow-950: #9e3600;
+--color-green-100: #e8f5e9;
+--color-green-200: #c8e6c9;
+--color-green-300: #a5d6a7;
+--color-green-400: #81c784;
+--color-green-500: #4caf50;
+--color-green-600: #43a047;
+--color-green-700: #388e3c;
+--color-green-800: #2e7d32;
+--color-green-900: #1b5e20;
+--color-green-950: #104015;
+--color-black: #111111;
+--color-white: #fafafa;
+--color-primary: var(--color-blue-500);
+--color-secondary: var(--color-indigo-500);
+--color-danger: var(--color-red-500);
+--color-warning: var(--color-yellow-500);
+--color-info: var(--color-gray-900);
+--color-success: var(--color-green-500);
+--text-h1: 40px;
+--text-h2: 36px;
+--text-h3: 28px;
+--text-h4: 24px;
+--text-h5: 20px;
+--text-h6: 16px;
+--text-body: 16px;
+--text-sm: 12px;
+--font-weight-header: 700;
+--radius-common: 4px;
+--radius-circle: 10000000px;
+--font-spoqaNeo: Spoqa Han Sans Neo;
+--spacing-common-y: 12px;
+--spacing-common-x: 16px;
+--spacing-gap-small: 4px;
+--spacing-sm-y: 8px;
+--spacing-small: 20px;
+
+  --color-bg-card: var(--bg-card);
+  --color-bg-wrapper: var(--bg-wrapper);
+  --color-bg-hover: var(--bg-hover);
+  --color-bg-input-standard: var(--bg-input-standard);
+  --color-bg-input-hover: var(--bg-input-hover);
+  --color-bg-input-disabled: var(--bg-input-disabled);
+  --color-text-title: var(--text-title);
+  --color-text-body: var(--text-body);
+  --color-text-sub: var(--text-sub);
+  --color-text-standard: var(--text-standard);
+  --color-text-active: var(--text-active);
+  --color-text-placeholder: var(--text-placeholder);
+  --color-text-disabled: var(--text-disabled);
+  --color-border-standard: var(--border-standard);
+  --color-border-active: var(--border-active);
+  --color-button-primary-bg-disabled: var(--button-primary-bg-disabled);
+  --color-button-primary-text-disabled: var(--button-primary-text-disabled);
+  --color-button-primary-border-disabled: var(--button-primary-border-disabled);
+  --color-button-secondary-bg-disabled: var(--button-secondary-bg-disabled);
+  --color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
+  --color-button-secondary-border-disabled: var(--button-secondary-border-disabled);
+  --color-button-success-bg-disabled: var(--button-success-bg-disabled);
+  --color-button-success-text-disabled: var(--button-success-text-disabled);
+  --color-button-success-border-disabled: var(--button-success-border-disabled);
+  --color-button-danger-bg-disabled: var(--button-danger-bg-disabled);
+  --color-button-danger-text-disabled: var(--button-danger-text-disabled);
+  --color-button-danger-border-disabled: var(--button-danger-border-disabled);
+  --color-button-warning-bg-disabled: var(--button-warning-bg-disabled);
+  --color-button-warning-text-disabled: var(--button-warning-text-disabled);
+  --color-button-warning-border-disabled: var(--button-warning-border-disabled);
+  --color-button-gray-bg-disabled: var(--button-gray-bg-disabled);
+  --color-button-gray-text-disabled: var(--button-gray-text-disabled);
+  --color-button-gray-border-disabled: var(--button-gray-border-disabled);
+  --color-table-header-bg: var(--table-header-bg);
+  --color-table-header-text: var(--table-header-text);
+  --color-table-header-border: var(--table-header-border);
+  --color-table-body-bg: var(--table-body-bg);
+  --color-table-body-bgEven: var(--table-body-bgEven);
+  --color-table-body-text: var(--table-body-text);
+  --color-table-body-border: var(--table-body-border);
+  --color-pagination-bg-hover: var(--pagination-bg-hover);
+  --color-callout-note-bg: var(--callout-note-bg);
+  --color-callout-note-text: var(--callout-note-text);
+  --color-callout-tip-bg: var(--callout-tip-bg);
+  --color-callout-tip-text: var(--callout-tip-text);
+  --color-callout-danger-bg: var(--callout-danger-bg);
+  --color-callout-danger-text: var(--callout-danger-text);
+  --color-callout-warning-bg: var(--callout-warning-bg);
+  --color-callout-warning-text: var(--callout-warning-text);
+}
+
+.white {
+--bg-card: var(--color-white);
+--bg-wrapper: var(--color-gray-200);
+--bg-hover: var(--color-gray-200);
+--bg-input-standard: var(--color-gray-100);
+--bg-input-hover: var(--color-gray-200);
+--bg-input-disabled: var(--color-gray-500);
+--text-title: var(--color-dark-100);
+--text-body: var(--color-dark-400);
+--text-sub: var(--color-gray-950);
+--text-standard: var(--color-dark-300);
+--text-active: var(--color-gray-100);
+--text-placeholder: var(--color-gray-950);
+--text-disabled: var(--color-gray-950);
+--border-standard: var(--color-gray-500);
+--border-active: var(--color-dark-400);
+--button-primary-bg-disabled: var(--color-blue-200);
+--button-primary-text-disabled: var(--color-blue-400);
+--button-primary-border-disabled: var(--color-blue-200);
+--button-secondary-bg-disabled: var(--color-indigo-200);
+--button-secondary-text-disabled: var(--color-indigo-400);
+--button-secondary-border-disabled: var(--color-indigo-200);
+--button-success-bg-disabled: var(--color-green-200);
+--button-success-text-disabled: var(--color-green-400);
+--button-success-border-disabled: var(--color-green-200);
+--button-danger-bg-disabled: var(--color-red-200);
+--button-danger-text-disabled: var(--color-red-400);
+--button-danger-border-disabled: var(--color-red-200);
+--button-warning-bg-disabled: var(--color-yellow-200);
+--button-warning-text-disabled: var(--color-yellow-400);
+--button-warning-border-disabled: var(--color-yellow-200);
+--button-gray-bg-disabled: var(--color-gray-200);
+--button-gray-text-disabled: var(--color-gray-500);
+--button-gray-border-disabled: var(--color-gray-300);
+--table-header-bg: var(--color-gray-400);
+--table-header-text: var(--color-dark-500);
+--table-header-border: var(--color-gray-500);
+--table-body-bg: var(--color-white);
+--table-body-bgEven: var(--color-gray-100);
+--table-body-text: var(--color-dark-300);
+--table-body-border: var(--color-gray-300);
+--pagination-bg-hover: var(--color-gray-100);
+--callout-note-bg: var(--color-gray-100);
+--callout-note-text: var(--color-gray-900);
+--callout-tip-bg: var(--color-green-100);
+--callout-tip-text: var(--color-green-900);
+--callout-danger-bg: var(--color-red-100);
+--callout-danger-text: var(--color-red-900);
+--callout-warning-bg: var(--color-yellow-100);
+--callout-warning-text: var(--color-yellow-900);
+} 
+
+.dark {
+--bg-card: var(--color-dark-200);
+--bg-wrapper: var(--color-black);
+--bg-hover: var(--color-dark-400);
+--bg-input-standard: var(--color-dark-300);
+--bg-input-hover: var(--color-dark-400);
+--bg-input-disabled: var(--color-dark-200);
+--text-title: var(--color-white);
+--text-body: var(--color-gray-200);
+--text-sub: var(--color-gray-600);
+--text-standard: var(--color-white);
+--text-active: var(--color-white);
+--text-placeholder: var(--color-gray-950);
+--text-disabled: var(--color-dark-400);
+--border-standard: var(--color-dark-400);
+--border-active: var(--color-gray-500);
+--button-primary-bg-disabled: var(--color-blue-900);
+--button-primary-text-disabled: var(--color-blue-700);
+--button-primary-border-disabled: var(--color-blue-800);
+--button-secondary-bg-disabled: var(--color-indigo-900);
+--button-secondary-text-disabled: var(--color-indigo-700);
+--button-secondary-border-disabled: var(--color-indigo-800);
+--button-success-bg-disabled: var(--color-green-900);
+--button-success-text-disabled: var(--color-green-700);
+--button-success-border-disabled: var(--color-green-800);
+--button-danger-bg-disabled: var(--color-red-900);
+--button-danger-text-disabled: var(--color-red-700);
+--button-danger-border-disabled: var(--color-red-800);
+--button-warning-bg-disabled: var(--color-yellow-900);
+--button-warning-text-disabled: var(--color-yellow-700);
+--button-warning-border-disabled: var(--color-yellow-800);
+--button-gray-bg-disabled: var(--color-gray-800);
+--button-gray-text-disabled: var(--color-gray-600);
+--button-gray-border-disabled: var(--color-gray-700);
+--table-header-bg: var(--color-dark-400);
+--table-header-text: var(--color-gray-200);
+--table-header-border: var(--color-dark-600);
+--table-body-bg: var(--color-dark-200);
+--table-body-bgEven: var(--color-dark-300);
+--table-body-text: var(--color-gray-200);
+--table-body-border: var(--color-dark-400);
+--pagination-bg-hover: var(--color-dark-300);
+--callout-note-bg: var(--color-dark-300);
+--callout-note-text: var(--color-white);
+--callout-tip-bg: var(--color-green-950);
+--callout-tip-text: var(--color-green-200);
+--callout-danger-bg: var(--color-red-950);
+--callout-danger-text: var(--color-red-200);
+--callout-warning-bg: var(--color-yellow-950);
+--callout-warning-text: var(--color-yellow-200);
 } 

package/build/typescript/theme.ts

@@ -1,6 +1,6 @@
-export const themes: Record<string, string[]> = {
-  "global": [
-    "white",
-    "dark"
-  ]
+export const themes: Record<string, string[]> = {
+  "global": [
+    "white",
+    "dark"
+  ]
 };

package/cli/add.js

@@ -20,7 +20,7 @@ const components = [
   "Collapse",
   "CodeBlock",
   "Navigation",
-  "Sidemenu",
+  "Sidebar",
   "Input",
   "Theme",
   "Tab",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atomsystem",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "type": "module",
   "homepage": "https://system.atomground.com",
   "bin": {
@@ -28,9 +28,13 @@
     "style-dictionary": "^4.2.0"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@gsap/react": "^2.1.2",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
+    "@mui/icons-material": "^7.3.9",
+    "@mui/material": "^7.3.9",
     "@next/mdx": "^15.4.6",
     "@next/third-parties": "^15.0.3",
     "@tailwindcss/postcss": "^4.0.17",

package/app/templates/Sidemenu/Sidemenu.tsx

@@ -1,55 +0,0 @@
-"use client"
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-// Navigation을 베이스 interface로 정의
-export interface Sidemenu {
-  children: React.ReactNode;
-  minWidth?: number
-}
-
-export interface NavLink {
-  children: React.ReactNode;
-  href: string;
-}
-
-
-const Sidemenu = ({ children, minWidth }: Sidemenu) => {
-  return (
-        <aside className={`nav-side flex flex-col overflow-auto h-full`} style={{minWidth: `${minWidth}px`}}>
-            {children}
-        </aside>
-    )
-}
-
-
-const NavBrand = ({children, href}: NavLink) => {
-  return (
-    <Link href={href} className="flex items-center">{children}</Link>
-  )
-}
-
-const NavList = ({children}: Sidemenu) => {
-  return (
-    <ul className="nav-list flex flex-col">{children}</ul>
-  )
-}
-
-
-const NavItem = ({children, href}: NavLink) => {
-  const pathname = usePathname();
-  const active = pathname === href;
-
-  return (
-    <Link href={href} className={`nav-item text-nowrap ${active ? "text-primary!" : ""}`}>{children}</Link>
-  )
-}
-
-
-export {
-  Sidemenu,
-  NavBrand,
-  NavList,
-  NavItem
-}