atomsystem 0.1.20 → 0.1.21

package/app/templates/Badge/Badge.tsx

@@ -0,0 +1,30 @@
+export const Badge = ({
+  children,
+  color,
+  type,
+  className,
+}: {
+  children: React.ReactNode;
+  color: "primary" | "secondary" | "warning" | "danger";
+  type?: "default" | "tint";
+  className?: string;
+}) => {
+  switch (type) {
+    case "tint":
+      return (
+        <span
+          className={`text-sm px-1.5 rounded ${color === "primary" ? "bg-primary/20 !text-primary" : color === "secondary" ? "bg-secondary/20 !text-secondary" : color === "warning" ? "bg-warning/20 !text-warning" : color === "danger" ? "bg-danger/20 !text-danger" : null} ${className}`}
+        >
+          {children}
+        </span>
+      );
+    default:
+      return (
+        <span
+          className={`text-sm px-1.5 rounded ${color === "primary" ? "bg-primary !text-white" : color === "secondary" ? "bg-secondary !text-white" : color === "warning" ? "bg-warning !text-white" : color === "danger" ? "bg-danger !text-white" : null} ${className}`}
+        >
+          {children}
+        </span>
+      );
+  }
+};

package/app/templates/GlobalNav/GlobalNav.tsx

@@ -12,8 +12,9 @@ const GlobalNav = ({
   type?: "sidebar" | "topmenu" | "mobile";
   navMenu: {
     name: string;
-    path: string;
+    path?: string;
     subItems?: { name: string; path: string }[];
+    label?: boolean;
   }[];
 }) => {
   const [windowSize, setWindowSize] = useState<number>(); // 초기값 설정
@@ -52,7 +53,7 @@ const GlobalNav = ({
       <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": type == "sidebar" },
+          { "h-full max-w-80 overflow-auto": type == "sidebar" },
           { "h-auto flex flex-row items-center": type == "topmenu" }
         )}
       >
@@ -88,77 +89,95 @@ const GlobalNav = ({
             "flex flex-row": type == "topmenu",
           })}
         >
-          {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={clsx(
-                      "px-4 py-2 block text-[var(--text-standard)]",
-                      {
-                        "text-primary":
-                          menu.path == pathname ||
-                          menu.subItems?.some((sub) => sub.path === pathname),
-                      }
-                    )}
+          {navMenu.map((menu, idx) => {
+            switch (true) {
+              case menu.label === true && type == "sidebar":
+                return (
+                  <p
+                    key={menu.name + idx}
+                    className="px-4 text-sm text-sub mt-2 mb-0"
                   >
                     {menu.name}
-                  </Link>
-                  {menu.subItems && type == "sidebar" ? (
-                    <button
-                      className="cursor-pointer"
-                      onClick={() => toggleSubMenu(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")}
                     >
-                      <span
+                      <Link
+                        href={menu.path}
                         className={clsx(
-                          "material-symbols-outlined text-[var(--text-sub)] transition-transform",
+                          "px-4 py-2 block text-[var(--text-standard)]",
                           {
-                            "rotate-90": openSubMenu[menu.name],
+                            "text-primary":
+                              menu.path == pathname ||
+                              menu.subItems?.some(
+                                (sub) => sub.path === pathname
+                              ),
                           }
                         )}
-                        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 bg-[var(--background-card)]":
-                          type == "topmenu",
-                      },
-                      {
-                        hidden: !openSubMenu[menu.name] && type == "sidebar",
-                      }
-                    )}
-                  >
-                    {menu.subItems.map((submenu) => {
-                      return (
-                        <li key={submenu.name}>
-                          <Link
+                        {menu.name}
+                      </Link>
+                      {menu.subItems && type == "sidebar" ? (
+                        <button
+                          className="cursor-pointer"
+                          onClick={() => toggleSubMenu(menu.name)}
+                        >
+                          <span
                             className={clsx(
-                              "px-4 py-2 block text-[var(--text-standard)]",
+                              "material-symbols-outlined text-[var(--text-sub)] transition-transform",
                               {
-                                "text-primary": submenu.path == pathname,
-                              },
-                              { "pl-12 ": type == "sidebar" }
+                                "rotate-90": openSubMenu[menu.name],
+                              }
                             )}
-                            href={submenu.path}
+                            style={{ fontSize: "16px" }}
                           >
-                            {submenu.name}
-                          </Link>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                ) : null}
-              </li>
-            );
+                            keyboard_arrow_right
+                          </span>
+                        </button>
+                      ) : null}
+                    </div>
+                    {menu.subItems ? (
+                      <ul
+                        className={clsx(
+                          "block",
+                          {
+                            "hidden absolute top-[42px] group-hover:block hover:block bg-[var(--background-card)]":
+                              type == "topmenu",
+                          },
+                          {
+                            hidden:
+                              !openSubMenu[menu.name] && type == "sidebar",
+                          }
+                        )}
+                      >
+                        {menu.subItems.map((submenu) => {
+                          return (
+                            <li key={submenu.name}>
+                              <Link
+                                className={clsx(
+                                  "px-4 py-2 block text-[var(--text-standard)]",
+                                  {
+                                    "text-primary": submenu.path == pathname,
+                                  },
+                                  { "pl-12 ": type == "sidebar" }
+                                )}
+                                href={submenu.path}
+                              >
+                                {submenu.name}
+                              </Link>
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    ) : null}
+                  </li>
+                );
+            }
           })}
         </ul>
       </nav>

package/app/templates/Input/Input.tsx

@@ -34,7 +34,7 @@ export const Input = ({
       ) : null}
       <input
         type={type}
-        className="border rounded focus:outline-none focus:ring-0 bg-[var(--input-background-standard)] disabled:bg-[var(--input-background-disabled)] disabled:cursor-not-allowed border-[var(--input-border-standard)] focus:border-[var(--input-border-focus)] "
+        className="border rounded focus:outline-none focus:ring-0 bg-[var(--input-background-standard)] disabled:bg-[var(--input-background-disabled)] disabled:cursor-not-allowed border-[var(--input-border-standard)] focus:border-[var(--input-border-focus)] w-full"
         style={{
           color: "var(--input-text-standard)",
           paddingLeft: "var(--global-padding-x)",

package/app/templates/Modal/Modal.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import ReactModal from "react-modal";
+import React, { useEffect } from "react";
+
+type ModalProps = {
+  isOpen: boolean;
+  onRequestClose: () => void;
+  children: React.ReactNode;
+  modalTitle: string;
+  modalFooter: React.ReactNode;
+  size?: "normal" | "middle" | "large" | "xl" | "full" | "full-screen";
+};
+
+export const ModalContent = ({
+  isOpen,
+  onRequestClose,
+  children,
+  modalTitle,
+  modalFooter,
+  size = "normal",
+}: ModalProps) => {
+  useEffect(() => {
+    ReactModal.setAppElement("#modal-root"); // 접근성 설정
+  }, []);
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      shouldCloseOnEsc={true}
+      overlayClassName="fixed inset-0 bg-black/40 flex justify-center items-center z-50"
+      className={`bg-[var(--modal-background)] p-0 rounded shadow-md w-full flex flex-col ${size === "normal" ? "max-w-md" : size === "middle" ? "max-w-xl" : size === "large" ? "max-w-5xl" : size === "xl" ? "max-w-6xl" : size === "full" ? "max-w-screen" : size === "full-screen" ? "w-screen h-screen" : null}`}
+    >
+      <ModalTitle onRequestClose={onRequestClose} title={modalTitle} />
+      <div className="p-4 w-full h-full">{children}</div>
+      <ModalFooter modalFooter={modalFooter} />
+    </ReactModal>
+  );
+};
+
+export const Modal = () => {
+  return <div id="modal-root"></div>;
+};
+
+type ModalTitleProps = {
+  title: string;
+  onRequestClose: () => void;
+};
+
+export const ModalTitle = ({ title, onRequestClose }: ModalTitleProps) => {
+  return (
+    <div className="flex justify-between py-3 px-4">
+      <h6>{title}</h6>
+      <button
+        onClick={onRequestClose}
+        className="material-symbols-outlined cursor-pointer"
+      >
+        close
+      </button>
+    </div>
+  );
+};
+
+export const ModalFooter = ({
+  modalFooter,
+}: {
+  modalFooter: React.ReactNode;
+}) => {
+  return <div className="flex justify-end py-3 px-4">{modalFooter}</div>;
+};

package/app/templates/Pagination/Pagination.tsx

@@ -17,15 +17,15 @@ const Pagination = ({
   /**  페이지네이션을 보여줄 최대 개수정보를 받습니다. */
   pageRange: number;
   /** totlaCount로 받아 계산하거나 전체 페이지네이션의 토탈 정보를 받습니다. */
-  totalCount: number;
+  totalCount?: number;
   /** totlaCount로 받아 계산하거나 전체 페이지네이션의 토탈 정보를 받습니다. */
   pageTotal?: number;
 }) => {
   const totalPages = pageTotal
     ? pageTotal
     : totalCount
-    ? Math.ceil(totalCount / pageViewRange)
-    : 0;
+      ? Math.ceil(totalCount / pageViewRange)
+      : 0;
   const [pageStart, setPageStart] = useState(1);
   const scrollTop = () => {
     setTimeout(() => {
@@ -34,7 +34,7 @@ const Pagination = ({
   };
 
   return (
-    <div className="text-[#999] flex border-[#666] border-b">
+    <div className="text-[#999] flex">
       <button
         disabled={pageStart === 1}
         onClick={() => {
@@ -47,7 +47,7 @@ const Pagination = ({
       >
         <span className="material-symbols-outlined">keyboard_arrow_left</span>
       </button>
-      <ul className="grid grid-cols-5 w-full">
+      <ul className="flex w-full">
         {[...Array(pageRange)].map((_, i) => {
           const page = pageStart + i;
 
@@ -74,7 +74,7 @@ const Pagination = ({
                 }
                 scrollTop();
               }}
-              className={` w-full text-center py-8 cursor-pointer ${
+              className={` w-full text-center py-8 cursor-pointer px-2 ${
                 currentPage === page ? "text-primary" : ""
               }`}
             >

package/app/templates/Theme/Theme.tsx

@@ -9,7 +9,7 @@ export const ThemeSelector = ({
   type: "all" | "theme" | "input";
 }) => {
   const themes = ["light", "dark"];
-  const [selectedTheme, setSelectedTheme] = useState<string | null>(null);
+  const [selectedTheme, setSelectedTheme] = useState<string | null>("light");
   // const inputThemes = ["inputStandard", "inputCircle"];
   // const [selectedInputTheme, setSelectedInputTheme] = useState<string | null>(
   //   null

package/app/templates/Toast/Toast.tsx

@@ -19,7 +19,7 @@ let messages: ToastMessage[] = [];
 let listener: ((messages: ToastMessage[]) => void) | null = null;
 
 export const addToast = (msg: Omit<ToastMessage, "id">) => {
-  const id = crypto.randomUUID();
+  const id = Math.random().toString(36).substring(2) + Date.now().toString(36);
   messages = [...messages, { id, ...msg }];
   //   messages 값 listener에 반영
   listener?.(messages);

package/cli/add.js

@@ -16,6 +16,7 @@ const templateDir = path.join(__dirname, "..", "app", "templates");
 // 사용할 수 있는 컴포넌트 목록
 const components = [
   "Button",
+  "Badge",
   "Card",
   "CodeBlock",
   "GlobalNav",
@@ -25,6 +26,7 @@ const components = [
   "Toast",
   "Pagination",
   "Table",
+  "Modal",
 ]; // 여기 추가할 컴포넌트 목록
 
 // 명령어에서 컴포넌트 이름 가져오기

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atomsystem",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "type": "module",
   "homepage": "https://system.atomground.com",
   "bin": {
@@ -39,6 +39,7 @@
     "next": "^15.2.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-modal": "^3.16.3",
     "sd-tailwindcss-transformer": "^2.0.0",
     "style-dictionary": "^4.2.0"
   },
@@ -46,6 +47,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-modal": "^3.16.3",
     "@vitest/browser": "^3.1.1",
     "@vitest/coverage-v8": "^3.1.1",
     "eslint": "^8",

package/token.json

@@ -1,6 +1,9 @@
 {
   "color": {
     "primary": { "value": "#2196f3", "type": "color" },
+    "secondary": { "value": "#162c4e", "type": "color" },
+    "danger": { "value": "#ff4a4a", "type": "color" },
+    "warning": { "value": "#ffa300", "type": "color" },
     "border": {
       "value": {
         "light": "#ccc",
@@ -25,7 +28,7 @@
   },
   "text": {
     "h1": {
-      "value": 32,
+      "value": 38,
       "type": "typography"
     },
     "h1-line-height": {
@@ -37,18 +40,42 @@
       "type": "typography"
     },
     "h2": {
-      "value": 24,
+      "value": 32,
       "type": "typography"
     },
     "h2-line-height": {
-      "value": 36,
+      "value": 42,
       "type": "typography"
     },
     "h3": {
-      "value": 16,
+      "value": 30,
       "type": "typography"
     },
     "h3-line-height": {
+      "value": 38,
+      "type": "typography"
+    },
+    "h4": {
+      "value": 24,
+      "type": "typography"
+    },
+    "h4-line-height": {
+      "value": 38,
+      "type": "typography"
+    },
+    "h5": {
+      "value": 20,
+      "type": "typography"
+    },
+    "h5-line-height": {
+      "value": 32,
+      "type": "typography"
+    },
+    "h6": {
+      "value": 16,
+      "type": "typography"
+    },
+    "h6-line-height": {
       "value": 24,
       "type": "typography"
     },
@@ -250,5 +277,13 @@
         }
       }
     }
+  },
+  "modal": {
+    "background": {
+      "value": {
+        "light": "#fafafa",
+        "dark": "#333333"
+      }
+    }
   }
 }