atomsystem 0.1.25 → 0.1.27

package/app/templates/Navigation/Navigation.tsx

@@ -0,0 +1,306 @@
+"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";
+
+interface NavItemsAttr {
+  type?: "topnav" | "sidenav";
+  navMenu: {
+    name: string;
+    path?: string;
+  }[];
+}
+
+// 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";
+  }
+};
+
+const Navigation = ({
+  children,
+  id,
+  className,
+  type = "topnav",
+}: {
+  children: React.ReactNode;
+  id?: string;
+  className?: string;
+  type?: "topnav" | "sidenav";
+}) => {
+  const isMobile = useMediaQuery({ maxWidth: 767 });
+
+  const mobileClose = (e: React.MouseEvent) => {
+    if (isMobile) {
+      if (id) {
+        handleNavToggle(id);
+      }
+    }
+  };
+
+  return (
+    <nav
+      id={id ? id : undefined}
+      className={`nav-container nav-${type} ${className} overflow-auto`}
+      onClick={mobileClose}
+    >
+      {children}
+    </nav>
+  );
+};
+
+const NavItems = ({ navMenu, type = "sidenav" }: NavItemsAttr) => {
+  const pathname = usePathname();
+
+  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>
+  );
+};
+
+const NavToggleButton = ({
+  children,
+  targetId,
+  className,
+}: {
+  children: React.ReactNode;
+  targetId: string;
+  className?: string;
+}) => {
+  return (
+    <button className={className} onClick={() => handleNavToggle(targetId)}>
+      {children}
+    </button>
+  );
+};
+
+const Sidebar = ({ navMenu, type = "sidenav" }: NavItemsAttr) => {
+  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>
+  );
+};
+
+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>>({});
+
+  // 윈도우 사이즈 추적
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize(window.innerWidth); // 윈도우 사이즈 업데이트
+    };
+
+    window.addEventListener("resize", handleResize); // 리사이즈 이벤트 리스너 추가
+
+    return () => window.removeEventListener("resize", handleResize); // 컴포넌트 언마운트 시 리스너 제거
+  }, [windowSize]);
+
+  // 초기 토글 값 설정
+  useEffect(() => {
+    if (window.innerWidth > 768) {
+    } else {
+      setToggleMenu(false);
+    }
+  }, []);
+
+  const toggleSubMenu = (menuName: string) => {
+    setOpenSubMenu((prev) => ({
+      ...prev,
+      [menuName]: !prev[menuName],
+    }));
+  };
+
+  const navType = type === "sidebar" ? "sidenav" : "topnav";
+
+  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>
+        </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 };

package/app/templates/Pagination/Pagination.tsx

@@ -34,7 +34,7 @@ const Pagination = ({
   };
 
   return (
-    <div className="text-[#999] flex">
+    <div className="pagination">
       <button
         disabled={pageStart === 1}
         onClick={() => {
@@ -43,11 +43,11 @@ const Pagination = ({
           setPageStart(newStart);
           onPageChange(newStart);
         }}
-        className="px-2 py-8 cursor-pointer disabled:opacity-40"
+        className="pagination-btn"
       >
         <span className="material-symbols-outlined">keyboard_arrow_left</span>
       </button>
-      <ul className="flex w-full">
+      <ul className="pagination-list">
         {[...Array(pageRange)].map((_, i) => {
           const page = pageStart + i;
 
@@ -74,8 +74,8 @@ const Pagination = ({
                 }
                 scrollTop();
               }}
-              className={` w-full text-center py-8 cursor-pointer px-2 ${
-                currentPage === page ? "text-primary" : ""
+              className={`pagination-item ${
+                currentPage === page ? "pagination-item-active" : ""
               }`}
             >
               {page}
@@ -93,7 +93,7 @@ const Pagination = ({
             onPageChange(newStart);
           }
         }}
-        className="px-2 py-8 cursor-pointer disabled:opacity-40"
+        className="pagination-btn"
       >
         <span className="material-symbols-outlined">keyboard_arrow_right</span>
       </button>

package/app/templates/Tab/Tab.tsx

@@ -6,12 +6,12 @@ import { useGSAP } from "@gsap/react";
 
 const Tab = ({
   tabs,
-  tabClass = "w-full bg-[var(--background-wrapper)] border-b border-[var(--color-border)] relative z-0 h-[57px]",
-  tabNavItemClass = "p-4",
-  tabNavItemActiveClass = "bg-[var(--background-card)] border border-[var(--color-border)] border-b-[var(--background-card)] relative z-10",
+  tabClass = "tab",
+  tabNavItemClass = "tab-nav-item",
+  tabNavItemActiveClass = "tab-nav-item-active",
   tabContents,
-  tabContentClass = "p-4 border border-t-0  border-[var(--color-border)] -mt-[1px]",
-  tabContentItem = "text-[var(--text-standard)]",
+  tabContentClass = "tab-content",
+  tabContentItem = "tab-content-item",
   expectionValue,
   expectionLayout,
 }: {
@@ -76,7 +76,7 @@ const Tab = ({
   }, [activeContent]);
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col w-full">
       <div className={tabClass}>
         {tabs.map((tab) => {
           return (
@@ -84,9 +84,9 @@ const Tab = ({
               key={tab.id}
               id={tab.id}
               onClick={() => handleTabActive(tab.target, tab.id)}
-              className={`cursor-pointer ${tabNavItemClass} ${
+              className={`${tabNavItemClass} ${
                 activeTab == tab.id
-                  ? `text-primary ${tabNavItemActiveClass}`
+                  ? tabNavItemActiveClass
                   : ""
               }`}
             >
@@ -101,8 +101,8 @@ const Tab = ({
             <div
               key={tabContent.id}
               id={tabContent.tag}
-              className={`w-full sm:w-auto ${tabContentItem} ${
-                activeTab == expectionValue ? expectionLayout : null
+              className={`${tabContentItem} ${
+                activeTab == expectionValue ? expectionLayout : ""
               }`}
             >
               {tabContent.content}

package/app/templates/Table/Table.tsx

@@ -6,8 +6,8 @@ const Table = ({ tableData }: { tableData: Record<string, any>[] }) => {
   // tableData가 제공되지 않았거나 비어있는 경우, 데이터 없음 메시지를 표시합니다.
   if (!tableData || tableData.length === 0) {
     return (
-      <div className="p-4 text-center">
-        <p className="text-[var(--text-standard)]">표시할 데이터가 없습니다.</p>
+      <div className="table-empty">
+        <p>표시할 데이터가 없습니다.</p>
       </div>
     );
   }
@@ -15,17 +15,14 @@ const Table = ({ tableData }: { tableData: Record<string, any>[] }) => {
   const headers = Object.keys(tableData[0]);
 
   return (
-    <div className="overflow-auto w-full">
-      <table className="min-w-full border border-[var(--color-border)] rounded]">
-        <thead className="bg-[var(--table-header-background)]">
+    <div className="table-container">
+      <table className="table">
+        <thead className="table-header">
           <tr>
             {/* 헤더 배열을 순회하며 각 헤더에 대한 <th>태그를 생성합니다. */}
             {headers.map((header, index) => {
               return (
-                <th
-                  key={index}
-                  className="px-6 py-3 text-center text-[var(--table-header-text)] tracking-wider border-b border-[var(--color-border)]"
-                >
+                <th key={index}>
                   {header}
                 </th>
               );
@@ -33,20 +30,14 @@ const Table = ({ tableData }: { tableData: Record<string, any>[] }) => {
           </tr>
         </thead>
         {/* 테이블 바디 부분 */}
-        <tbody className={`divide-y divide-[var(--color-border)] `}>
+        <tbody className="table-body">
           {/* tableData 배열을 순회하며 각 데이터 객체(행)에 대한 <tr> 태그를 생성합니다. */}
           {tableData.map((row, rowIndex) => {
             return (
-              <tr
-                key={rowIndex}
-                className={` ${rowIndex % 2 === 0 ? `bg-[var(--table-body-background)]` : `bg-[var(--table-body-background-even)]`}`}
-              >
+              <tr key={rowIndex} className="table-row">
                 {/* 각 행 내에서 헤더 배열을 다시 순회하며 해당 헤더에 맞는 셀(<td>)을 생성합니다. */}
                 {headers.map((header, colIndex) => (
-                  <td
-                    key={colIndex} // 고유한 키를 제공합니다.
-                    className={`px-4 py-2 text-[var(--text-body-text)] border-b border-[var(--color-border)]`}
-                  >
+                  <td key={colIndex} className="table-cell">
                     {/* 현재 행 객체(row)에서 해당 헤더(키)에 해당하는 값을 가져와 셀에 표시합니다. */}
                     {row[header]}
                   </td>

package/app/templates/Theme/Theme.tsx

@@ -1,118 +1,125 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Radio } from "../Input/Input";
+import { Radio } from "../Form/Form";
+import { themes } from "@/build/typescript/theme";
+import { Button } from "../Button/Button";
+import { ModalContent } from "../Modal/Modal";
 
-export const ThemeSelector = ({
-  type,
-}: {
-  type: "all" | "theme" | "input";
-}) => {
-  const themes = ["light", "dark"];
-  const [selectedTheme, setSelectedTheme] = useState<string | null>("light");
-  // const inputThemes = ["inputStandard", "inputCircle"];
-  // const [selectedInputTheme, setSelectedInputTheme] = useState<string | null>(
-  //   null
-  // );
+export const ThemeSelector = () => {
+  const [selectedThemes, setSelectedThemes] = useState<Record<string, string>>({});
+  const [tempThemes, setTempThemes] = useState<Record<string, string>>({});
   const [isThemeLoading, setThemeLoading] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   useEffect(() => {
     const chageThemeValue = () => {
-      const storedTheme = localStorage.getItem("theme") || "light";
-      // const storedInputTheme =
-      //   localStorage.getItem("inputTheme") || "inputStandard";
-
-      setSelectedTheme(storedTheme);
-      // setSelectedInputTheme(storedInputTheme);
+      const newThemes: Record<string, string> = {};
+      Object.entries(themes).forEach(([group, groupThemes]) => {
+        const storedKey = group === "global" ? "theme" : `theme-${group}`;
+        const storedTheme = localStorage.getItem(storedKey) || groupThemes[0];
+        newThemes[group] = storedTheme;
+      });
+      setSelectedThemes(newThemes);
+      setTempThemes(newThemes);
     };
 
     chageThemeValue();
     setThemeLoading(true);
   }, []);
 
-  // main theme
-  const handleThemeChange = (theme: string) => {
+  const handleTempThemeChange = (group: string, theme: string) => {
+    setTempThemes((prev) => ({ ...prev, [group]: theme }));
+  };
+
+  const handleApply = () => {
     if (typeof window !== "undefined") {
-      localStorage.setItem("theme", theme);
+      Object.entries(tempThemes).forEach(([group, theme]) => {
+        const storedKey = group === "global" ? "theme" : `theme-${group}`;
+        localStorage.setItem(storedKey, theme);
+      });
       window.dispatchEvent(new Event("storage"));
-      setSelectedTheme(theme);
+      setSelectedThemes(tempThemes);
+      setIsModalOpen(false);
     }
   };
-  // input theme
-  // const handleInputThemeChange = (theme: string) => {
-  //   if (typeof window !== "undefined") {
-  //     localStorage.setItem("inputTheme", theme);
-  //     window.dispatchEvent(new Event("storage"));
-  //     setSelectedInputTheme(theme);
-  //   }
-  // };
-  if (isThemeLoading == false) {
+
+  const handleOpenModal = () => {
+    setTempThemes(selectedThemes); // Reset to current applied themes
+    setIsModalOpen(true);
+  };
+
+  if (isThemeLoading === false) {
     return null;
   }
 
   return (
-    <div className="flex flex-col gap-4">
-      <p>theme 선택</p>
-      <div className="flex flex-col gap-4">
-        {type == "all" || type == "theme" ? (
-          <div className="flex gap-4">
-            {themes.map((theme) => (
-              <Radio
-                name="mainTheme"
-                value={theme}
-                key={theme}
-                onChange={() => handleThemeChange(theme)}
-                defaultChecked={theme == selectedTheme}
-              />
-            ))}
+    <>
+      <Button type="primary" onClick={handleOpenModal} style={{ width: "100%" }}>
+        <div className="flex items-center justify-center gap-2">
+          <span className="material-symbols-outlined" style={{ fontSize: "18px" }}>palette</span>
+          <span>테마 설정</span>
+        </div>
+      </Button>
+      <ModalContent
+        isOpen={isModalOpen}
+        onRequestClose={() => setIsModalOpen(false)}
+        modalTitle="테마 설정"
+        modalFooter={
+          <div className="flex justify-end gap-2 w-full mt-4">
+            <Button type="gray" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button type="primary" onClick={handleApply}>적용</Button>
           </div>
-        ) : null}
-        {/* {type == "all" || type == "input" ? (
-          <div className="flex gap-4">
-            {inputThemes.map((inputTheme) => (
-              <Radio
-                name="inputTheme"
-                value={inputTheme}
-                key={inputTheme}
-                onChange={() => handleInputThemeChange(inputTheme)}
-                defaultChecked={inputTheme == selectedInputTheme}
-              />
-            ))}
-          </div>
-        ) : null} */}
-      </div>
-    </div>
+        }
+      >
+        <div className="flex flex-col gap-6 p-4">
+          {Object.entries(themes).map(([group, groupThemes]) => (
+            <div key={group} className="flex flex-col gap-3">
+              <p className="font-bold capitalize">{group} Theme</p>
+              <div className="flex gap-4 flex-wrap">
+                {groupThemes.map((theme) => (
+                  <Radio
+                    name={`theme-${group}-modal`}
+                    value={theme}
+                    key={theme}
+                    onChange={() => handleTempThemeChange(group, theme)}
+                    checked={theme === tempThemes[group]}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </ModalContent>
+    </>
   );
 };
 
-export const ThemeWrapper = ({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className: string;
-}) => {
-  const [theme, setTheme] = useState<string | null>(null); // 테마 상태 추가
-  const [inputTheme, setInputTheme] = useState<string | null>(null); // 테마 상태 추가
+export const ThemeProvider = () => {
+  const [theme, setTheme] = useState<Record<string, string>>({});
   const [isThemeLoading, setThemeLoading] = useState(false);
-  // theme setting
+
   useEffect(() => {
-    // 로컬 스토리지에서 테마 가져오기
     const listenStorageChange = () => {
-      setTheme(localStorage.getItem("theme") || "light");
-      setInputTheme(localStorage.getItem("inputTheme") || "inputStandard");
-
-      document.body.className = `${className} ${theme} ${inputTheme}`;
+      const newThemes: Record<string, string> = {};
+      Object.entries(themes).forEach(([group, groupThemes]) => {
+        const storedKey = group === "global" ? "theme" : `theme-${group}`;
+        const currentTheme = localStorage.getItem(storedKey) || groupThemes[0];
+        newThemes[group] = currentTheme;
+        
+        document.documentElement.classList.remove(...groupThemes);
+        document.documentElement.classList.add(currentTheme);
+      });
+      setTheme(newThemes);
     };
+
     listenStorageChange();
     window.addEventListener("storage", listenStorageChange);
     setThemeLoading(true);
     return () => window.removeEventListener("storage", listenStorageChange);
-  }, [theme]);
+  }, []);
 
-  if (isThemeLoading == false) {
+  if (isThemeLoading === false) {
     return null;
   }
-
-  return <>{children}</>;
 };