atomsystem 0.1.26 → 0.1.27

package/app/templates/Navigation/Navigation.tsx

@@ -7,16 +7,16 @@ import clsx from "clsx";
 import { useMediaQuery } from "react-responsive";
 
 interface NavItemsAttr {
+  type?: "topnav" | "sidenav";
   navMenu: {
     name: string;
     path?: string;
   }[];
 }
 
-const navStandardStyle =
-  "bg-[var(--background-card)] text-text-standard border-[var(--color-border)]";
+// Custom CSS classes are now used via css/navigation.css
 
-const navToggle = (targetId: string) => {
+const handleNavToggle = (targetId: string) => {
   const el = document.getElementById(targetId);
   if (el) {
     const isHidden = el.style.display === "none" || el.style.display === "";
@@ -28,18 +28,19 @@ 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) {
-      e.preventDefault();
       if (id) {
-        navToggle(id);
+        handleNavToggle(id);
       }
     }
   };
@@ -47,7 +48,7 @@ const Navigation = ({
   return (
     <nav
       id={id ? id : undefined}
-      className={`${navStandardStyle} ${className} overflow-auto`}
+      className={`nav-container nav-${type} ${className} overflow-auto`}
       onClick={mobileClose}
     >
       {children}
@@ -55,27 +56,21 @@ const Navigation = ({
   );
 };
 
-const NavItems = ({ navMenu }: NavItemsAttr) => {
+const NavItems = ({ navMenu, type = "sidenav" }: NavItemsAttr) => {
   const pathname = usePathname();
 
   return (
-    <ul>
+    <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")}>
-              {menu.path ? (
-                <Link
-                  href={menu.path}
-                  className={`${pathname === menu.path ? `text-primary` : `text-[var(--text-standard)]`} px-4 py-2 block `}
-                >
-                  {menu.name}
-                </Link>
-              ) : (
-                <p className={`px-4 py-2 block text-[var(--text-standard)]`}>
-                  {menu.name}
-                </p>
-              )}
+              <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>
         );
@@ -94,36 +89,32 @@ const NavToggleButton = ({
   className?: string;
 }) => {
   return (
-    <button className={className} onClick={() => navToggle(targetId)}>
+    <button className={className} onClick={() => handleNavToggle(targetId)}>
       {children}
     </button>
   );
 };
 
-const Sidebar = ({ navMenu }: NavItemsAttr) => {
+const Sidebar = ({ navMenu, type = "sidenav" }: NavItemsAttr) => {
   return (
     <nav
       className={clsx(
-        `relative ${navStandardStyle} w-full md:w-[320px] h-full z-20 left-0 overflow-auto`
+        `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}>
+            <li className="relative group" key={menu.name + idx}>
               <div className={clsx("flex justify-between items-center pr-4")}>
-                {menu.path ? (
-                  <Link
-                    href={menu.path}
-                    className={clsx(
-                      "px-4 py-2 block text-[var(--text-standard)]"
-                    )}
-                  >
-                    {menu.name}
-                  </Link>
-                ) : (
-                  <p></p>
-                )}
+                <Link
+                  href={menu.path || "#"}
+                  className={clsx(
+                    `block nav-text-standard nav-${type} hover:opacity-80 transition-opacity nav-padding`
+                  )}
+                >
+                  {menu.name}
+                </Link>
               </div>
             </li>
           );
@@ -178,12 +169,14 @@ const GlobalNav = ({
     }));
   };
 
+  const navType = type === "sidebar" ? "sidenav" : "topnav";
+
   return (
     <nav
       className={clsx(
-        `fixed top-0 md:relative w-full  bg-[var(--background-card)] text-text-standard z-20 left-0 ${toggleMenu ? "block" : "hidden"}`,
-        { "h-full max-w-80 overflow-auto": type == "sidebar" },
-        { "h-auto flex flex-row items-center": type == "topmenu" }
+        `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 */}
@@ -200,11 +193,11 @@ const GlobalNav = ({
               ></Image>
             </Link>
             <button
-              className={`fixed shadow-md rounded-full bg-[var(--background-card)] w-12 h-12 top-6 left-6 cursor-pointer z-50`}
+              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 text-[var(--text-standard)]"
+                className={`material-symbols-outlined nav-text-standard nav-${navType}`}
                 style={{ fontSize: "16px" }}
               >
                 menu
@@ -225,25 +218,24 @@ const GlobalNav = ({
               return (
                 <p
                   key={menu.name + idx}
-                  className="px-4 text-sm text-sub mt-2 mb-0"
+                  className={`nav-text-sub nav-${navType} mt-2 mb-0 nav-padding`}
                 >
                   {menu.name}
                 </p>
               );
             default:
-              if (!menu.path) return null;
               return (
                 <li className="relative group" key={menu.name}>
                   <div
                     className={clsx("flex justify-between items-center pr-4")}
                   >
                     <Link
-                      href={menu.path}
+                      href={menu.path || "#"}
                       className={clsx(
-                        "px-4 py-2 block text-[var(--text-standard)]",
+                        `block nav-text-standard nav-${navType} nav-padding`,
                         {
-                          "text-primary":
-                            menu.path == pathname ||
+                          "nav-text-active":
+                            (menu.path && menu.path == pathname) ||
                             menu.subItems?.some((sub) => sub.path === pathname),
                         }
                       )}
@@ -257,7 +249,7 @@ const GlobalNav = ({
                       >
                         <span
                           className={clsx(
-                            "material-symbols-outlined text-[var(--text-sub)] transition-transform",
+                            `material-symbols-outlined nav-text-sub nav-${navType} transition-transform`,
                             {
                               "rotate-90": openSubMenu[menu.name],
                             }
@@ -274,7 +266,7 @@ const GlobalNav = ({
                       className={clsx(
                         "block",
                         {
-                          "hidden absolute top-[42px] group-hover:block hover:block bg-[var(--background-card)]":
+                          [`hidden absolute top-[42px] group-hover:block hover:block nav-bg nav-${navType} border nav-border`]:
                             type == "topmenu",
                         },
                         {
@@ -287,9 +279,9 @@ const GlobalNav = ({
                           <li key={submenu.name}>
                             <Link
                               className={clsx(
-                                "px-4 py-2 block text-[var(--text-standard)]",
+                                `block nav-text-standard nav-${navType} nav-padding`,
                                 {
-                                  "text-primary": submenu.path == pathname,
+                                  "nav-text-active": submenu.path == pathname,
                                 },
                                 { "pl-12 ": type == "sidebar" }
                               )}

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}</>;
 };

package/app/templates/Toast/Toast.tsx

@@ -9,7 +9,7 @@ gsap.registerPlugin(useGSAP);
 // ✅ Toast Message 타입 정의
 export type ToastMessage = {
   id: string;
-  status: "success" | "error";
+  status?: "standard" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "error";
   message: string;
   desc?: string;
 };
@@ -55,7 +55,7 @@ export const Toast = () => {
   }, []);
 
   return (
-    <div className="fixed flex flex-col gap-2 bottom-[24px] right-[24px] z-50">
+    <div className="toast-container">
       {messages.map((message) => (
         <ToastItem
           key={message.id}
@@ -97,10 +97,10 @@ const ToastItem = ({
   return (
     <div
       ref={elRef}
-      className="bg-[var(--background-card)] border border-[var(--color-border)] rounded text-white p-4 shadow-md min-w-[250px]"
+      className={`toast-item ${message.status || "standard"}`}
     >
       <p>{message.message}</p>
-      {message.desc ? <p className="text-sm">{message.desc}</p> : null}
+      {message.desc ? <p className="toast-desc">{message.desc}</p> : null}
     </div>
   );
 };