atomsystem 0.1.9 → 0.1.11

package/cli/add.js

@@ -0,0 +1,128 @@
+#!/usr/bin/env node
+
+import inquirer from "inquirer";
+import fs from "fs";
+import path from "path";
+import { copyFileSync } from "fs";
+import { fileURLToPath } from "url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+// 컴포넌트 템플릿이 위치한 디렉토리
+const templateDir = path.join(__dirname, "templates");
+
+// 사용할 수 있는 컴포넌트 목록
+const components = [
+  "Button",
+  "Card",
+  "CodeBlock",
+  "GlobalNav",
+  "Input",
+  "Theme",
+]; // 여기 추가할 컴포넌트 목록
+
+// 명령어에서 컴포넌트 이름 가져오기
+const args = process.argv.slice(2); // 'npx atomsystem-add Button -> [Button]'
+const component = args[0] || "all"; // '사용자가 입력하지 않으면 기본적으로 'all''
+
+function addComponent(comp) {
+  const componentPath = path.join(templateDir, `${comp}/${comp}.tsx`);
+  const targetDir = path.join(process.cwd(), "app", "components", comp);
+  const targetPath = path.join(targetDir, `${comp}.tsx`);
+
+  if (fs.existsSync(componentPath)) {
+    // 대상 디렉토리가 없으면 생성
+    if (!fs.existsSync(targetDir)) {
+      fs.mkdirSync(targetDir, { recursive: true });
+      console.log(`Created directory: ${targetDir}`);
+    }
+    copyFileSync(componentPath, targetPath);
+    console.log(`${comp} component has been added to ${targetPath}`);
+  } else {
+    console.log(`Component ${comp} does not exist in the atomsystem.`);
+  }
+}
+
+if (component == "all") {
+  console.log("Adding all components...");
+
+  components.forEach((comp) => {
+    addComponent(comp);
+  });
+} else {
+  // 특정 컴포넌트 추가
+  addComponent(component);
+}
+
+// "all" 이면 모든 컴포넌트를 추가
+
+// 사용자에게 추가할 컴포넌트를 선택하도록 묻습니다.
+// inquirer
+//   .prompt([
+//     {
+//       type: "list",
+//       name: "component",
+//       message: "Which component would you like to add?",
+//       choices: ["all", ...components], // 'all'을 첫 번째로 추가
+//     },
+//   ])
+//   .then((answers) => {
+//     const { component } = answers;
+
+//     // 'all'이 선택되면 모든 컴포넌트를 추가합니다.
+//     if (component === "all") {
+//       console.log("Adding all components...");
+
+//       components.forEach((comp) => {
+//         const componentPath = path.join(templateDir, `${comp}/${comp}.tsx`);
+//         const targetDir = path.join(process.cwd(), "app", "components", comp);
+//         const targetPath = path.join(targetDir, `${comp}.tsx`);
+
+//         if (fs.existsSync(componentPath)) {
+//           // 대상 디렉토리가 없으면 생성
+//           if (!fs.existsSync(targetDir)) {
+//             fs.mkdirSync(targetDir, { recursive: true });
+//             console.log(`Created directory: ${targetDir}`);
+//           }
+
+//           copyFileSync(componentPath, targetPath);
+//           console.log(`${comp} component has been added to ${targetPath}`);
+//         } else {
+//           console.log(
+//             `Component ${comp} does not exist in the templates directory.`
+//           );
+//         }
+//       });
+//     } else {
+//       // 개별 컴포넌트 추가
+//       const componentPath = path.join(
+//         templateDir,
+//         `${component}/${component}.tsx`
+//       );
+//       const targetDir = path.join(
+//         process.cwd(),
+//         "app",
+//         "components",
+//         component
+//       );
+//       const targetPath = path.join(targetDir, `${component}.tsx`);
+
+//       if (fs.existsSync(componentPath)) {
+//         // 대상 디렉토리가 없으면 생성
+//         if (!fs.existsSync(targetDir)) {
+//           fs.mkdirSync(targetDir, { recursive: true });
+//           console.log(`Created directory: ${targetDir}`);
+//         }
+
+//         copyFileSync(componentPath, targetPath);
+//         console.log(`${component} component has been added to ${targetPath}`);
+//       } else {
+//         console.log(
+//           `Component ${component} does not exist in the templates directory.`
+//         );
+//       }
+//     }
+//   })
+//   .catch((error) => {
+//     console.error("Error:", error);
+//   });

package/cli/init.js

@@ -1,6 +1,8 @@
 #!/usr/bin/env node
-import inquirer from "inquirer"; // require -> import
-import { exec } from "child_process"; // require -> import
+import inquirer from "inquirer";
+import { exec } from "child_process";
+import fs from "fs"; // 파일 시스템 작업을 위한 모듈
+import path from "path"; // 경로 작업을 위한 모듈
 
 // 사용자에게 질문을 던져서 Next.js와 React를 설치할지 물어봅니다.
 inquirer
@@ -25,6 +27,85 @@ inquirer
           } else {
             console.log(stdout);
             console.log("Installation complete!");
+
+            // package.json에 scripts 추가
+            const packageJsonPath = path.join(process.cwd(), "package.json");
+            fs.readFile(packageJsonPath, "utf8", (err, data) => {
+              if (err) {
+                console.error("Error reading package.json:", err);
+                return;
+              }
+
+              const packageJson = JSON.parse(data);
+
+              // scripts 항목 추가
+              packageJson.scripts = packageJson.scripts || {};
+              packageJson.scripts.dev = "next dev";
+              packageJson.scripts.build = "next build";
+              packageJson.scripts.start = "next start";
+              packageJson.scripts.lint = "next lint";
+
+              // 수정된 package.json을 덮어씁니다.
+              fs.writeFile(
+                packageJsonPath,
+                JSON.stringify(packageJson, null, 2),
+                (err) => {
+                  if (err) {
+                    console.error("Error updating package.json:", err);
+                  } else {
+                    console.log("Updated package.json with scripts.");
+                  }
+                }
+              );
+            });
+
+            // app 디렉토리 생성 및 layout.tsx, page.tsx 파일 추가
+            const appDir = path.join(process.cwd(), "app");
+            const layoutPath = path.join(appDir, "layout.tsx");
+            const pagePath = path.join(appDir, "page.tsx");
+
+            // app 디렉토리가 없으면 생성
+            if (!fs.existsSync(appDir)) {
+              fs.mkdirSync(appDir);
+            }
+
+            // layout.tsx 파일 내용
+            const layoutContent = `export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+`;
+
+            // page.tsx 파일 내용
+            const pageContent = `export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+`;
+
+            // layout.tsx 파일 생성
+            fs.writeFile(layoutPath, layoutContent, (err) => {
+              if (err) {
+                console.error("Error creating layout.tsx:", err);
+              } else {
+                console.log("Created layout.tsx.");
+              }
+            });
+
+            // page.tsx 파일 생성
+            fs.writeFile(pagePath, pageContent, (err) => {
+              if (err) {
+                console.error("Error creating page.tsx:", err);
+              } else {
+                console.log("Created page.tsx.");
+              }
+            });
           }
         }
       );

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "atomsystem",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "type": "module",
   "bin": {
-    "atomsystem-init": "cli/init.js"
+    "atomsystem-init": "cli/init.js",
+    "atomsystem-add": "cli/add.js"
   },
   "files": [
-    "bin",
-    "test",
     "token.json",
     "tokens",
     "build",
-    "app/component",
     "tailwind.config.ts"
   ],
   "scripts": {

package/app/component/Button/Button.tsx

@@ -1,46 +0,0 @@
-"use client";
-import clsx from "clsx";
-
-export const Button = ({
-  children,
-  type,
-  style,
-  disabled,
-}: {
-  children: React.ReactNode;
-  type: "primary" | "secondary" | "success" | "danger" | "gray";
-  style?: React.CSSProperties;
-  disabled?: boolean;
-}) => {
-  return (
-    <button
-      className={clsx(
-        "px-4 py-2 rounded-common text-button-text transition-all",
-        {
-          "bg-button-primary-standard hover:bg-button-primary-hover disabled:bg-button-primary-disabled":
-            type == "primary",
-        },
-        {
-          "bg-button-secondary-standard hover:bg-button-secondary-hover disabled:bg-button-secondary-disabled ":
-            type == "secondary",
-        },
-        {
-          "bg-button-success-standard hover:bg-button-success-hover disabled:bg-button-success-disabled":
-            type == "success",
-        },
-        {
-          "bg-button-danger-standard hover:bg-button-danger-hover disabled:bg-button-danger-disabled":
-            type == "danger",
-        },
-        {
-          "bg-button-gray-standard hover:bg-button-gray-hover disabled:bg-button-gray-disabled":
-            type == "gray",
-        }
-      )}
-      style={style}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-};

package/app/component/Card/Card.tsx

@@ -1,57 +0,0 @@
-import React from "react";
-
-export const Card = ({
-  children,
-  type = "standard",
-  className = "",
-}: {
-  children: React.ReactNode;
-  className?: string;
-  type?: "standard" | "group";
-}) => {
-  // CardHeader와 CardContent의 존재 여부 확인
-  const hasCardContent = React.Children.toArray(children).some(
-    (child) =>
-      React.isValidElement(child) &&
-      (child.type === CardHeader ||
-        child.type === CardContent ||
-        child.type === CardFooter)
-  );
-  return (
-    <div
-      className={`${type == "standard" ? "bg-fill-card border-fill-border" : type == "group" ? "bg-fill-group border-none" : ""} ${!hasCardContent ? "p-4" : ""} rounded  border ${className} overflow-auto`}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const CardHeader = ({
-  children,
-  noMargin,
-}: {
-  children: React.ReactNode;
-  noMargin?: boolean;
-}) => {
-  return <div className={`${noMargin ? "p-0" : "p-4"}`}>{children}</div>;
-};
-
-export const CardContent = ({
-  children,
-  noMargin,
-}: {
-  children: React.ReactNode;
-  noMargin?: boolean;
-}) => {
-  return <div className={`${noMargin ? "p-0" : "p-4"}`}>{children}</div>;
-};
-
-export const CardFooter = ({
-  children,
-  noMargin,
-}: {
-  children: React.ReactNode;
-  noMargin?: boolean;
-}) => {
-  return <div className={`${noMargin ? "p-0" : "p-4"}`}>{children}</div>;
-};

package/app/component/CodeBlock/CodeBlock.tsx

@@ -1,30 +0,0 @@
-"use client";
-import { useEffect, useRef } from "react";
-import hljs from "highlight.js";
-import "highlight.js/styles/atom-one-dark.css"; // 스타일 파일
-
-const CodeBlock = ({
-  language,
-  children,
-}: {
-  language: string;
-  children: React.ReactNode;
-}) => {
-  const codeRef = useRef<HTMLElement | null>(null);
-
-  useEffect(() => {
-    if (codeRef.current) {
-      hljs.highlightElement(codeRef.current); // 코드 블록 하이라이트
-    }
-  }, [children]);
-
-  return (
-    <pre>
-      <code ref={codeRef} className={language}>
-        {children}
-      </code>
-    </pre>
-  );
-};
-
-export default CodeBlock;

package/app/component/GlobalNav/GlobalNav.tsx

@@ -1,111 +0,0 @@
-"use client";
-import Link from "next/link";
-import Image from "next/image";
-import { useEffect, useState } from "react";
-
-const GlobalNav = () => {
-  const [windowSize, setWindowSize] = useState<number>(); // 초기값 설정
-
-  const [toggleMenu, setToggleMenu] = useState<boolean>(false);
-
-  // 윈도우 사이즈 추적
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowSize(window.innerWidth); // 윈도우 사이즈 업데이트
-    };
-
-    window.addEventListener("resize", handleResize); // 리사이즈 이벤트 리스너 추가
-
-    return () => window.removeEventListener("resize", handleResize); // 컴포넌트 언마운트 시 리스너 제거
-  }, [windowSize]);
-
-  // 초기 토글 값 설정
-
-  useEffect(() => {
-    if (window.innerWidth > 768) {
-      setToggleMenu(true);
-    } else {
-      setToggleMenu(false);
-    }
-
-    // console.log(
-    //   `one Time Work!: ${toggleMenu}, windowSize:${window.innerWidth}`
-    // );
-  }, []);
-
-  return (
-    <>
-      <nav
-        className={`fixed w-full max-w-80 h-full bg-fill-card text-text-standard z-20 left-0 top-0 md:relative ${toggleMenu ? "block" : "hidden"}`}
-      >
-        <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="p-4">
-              <span
-                className="material-symbols-outlined"
-                onClick={() => setToggleMenu(false)}
-                style={{ fontSize: "16px" }}
-              >
-                close
-              </span>
-            </button>
-          </div>
-        </div>
-        <ul>
-          <li>
-            <Link href={"/"} className="px-4 py-2 block">
-              시작하기
-            </Link>
-          </li>
-          <li>
-            <Link href={"/component/input"} className="px-4 py-2 block">
-              입력창
-            </Link>
-          </li>
-          <li>
-            <Link href={"/component/select"} className="px-4 py-2 block">
-              선택창
-            </Link>
-          </li>
-          <li>
-            <Link href={"/component/checkbox"} className="px-4 py-2 block">
-              체크박스
-            </Link>
-          </li>
-          <li>
-            <Link href={"/component/radio"} className="px-4 py-2 block">
-              라디오
-            </Link>
-          </li>
-          <li>
-            <Link href={"/component/button"} className="px-4 py-2 block">
-              버튼
-            </Link>
-          </li>
-        </ul>
-      </nav>
-      <button
-        className={`fixed shadow-md rounded-full bg-fill-card w-12 h-12 top-6 left-6 z-10 ${toggleMenu ? "hidden" : "block"} `}
-      >
-        <span
-          className="material-symbols-outlined"
-          onClick={() => setToggleMenu(true)}
-          style={{ fontSize: "16px" }}
-        >
-          menu
-        </span>
-      </button>
-    </>
-  );
-};
-
-export default GlobalNav;

package/app/component/Input/Input.tsx

@@ -1,306 +0,0 @@
-"use client";
-import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-export const Input = ({
-  className,
-  defaultValue = "",
-  placeholder = "값을 입력해주세요",
-  label,
-  readOnly,
-  disabled,
-  pattern,
-  required,
-}: {
-  className?: string;
-  defaultValue?: string;
-  placeholder?: string;
-  label?: string;
-  readOnly?: boolean;
-  disabled?: boolean;
-  pattern?: string;
-  required?: boolean;
-}) => {
-  const [value, setValue] = useState(defaultValue);
-  const [isValue, setIsValue] = useState(false);
-  const [guide, setGuide] = useState("");
-
-  useEffect(() => {});
-  const handleValue = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const inputValue = e.target.value;
-    if (defaultValue) {
-      setValue(defaultValue);
-    }
-    setValue(inputValue);
-
-    if (e.target.checkValidity()) {
-      setGuide("유효한 값입니다.");
-      setIsValue(true);
-    } else {
-      setGuide("유효하지 않은 값입니다.");
-      setIsValue(false);
-    }
-  };
-
-  return (
-    <>
-      {label ? (
-        <p className={clsx("mb-1 text-text-standard", {})}>
-          <span
-            className={clsx("", {
-              "after:content-['*'] after:ml-1 after:text-danger": required,
-            })}
-          >
-            {label}
-          </span>
-        </p>
-      ) : null}
-      <input
-        type="text"
-        className={clsx(
-          "transition-all border px-4 py-2 border-input-border-standard text-input-text-value rounded-input-rounded",
-          value ? "bg-input-background-value" : "bg-input-background-standard ",
-          { "placeholder:text-input-text-placeholder": true },
-          { "focus:border-input-border-focus": true },
-          { "disabled:bg-input-background-disabled": true },
-          {
-            "invalid:border-input-border-error invalid:bg-input-background-error invalid:text-input-text-error":
-              required && pattern,
-          },
-          {
-            "valid:border-input-border-success valid:bg-input-background-success valid:text-input-text-success":
-              required && pattern,
-          },
-          className
-        )}
-        value={value}
-        onChange={handleValue}
-        placeholder={placeholder}
-        readOnly={readOnly}
-        disabled={disabled}
-        pattern={pattern}
-        required={required}
-      />
-      {guide && required && pattern ? (
-        <p
-          className={`text-sm ${isValue ? "text-input-text-success" : "text-input-text-error"} ml-1 mt-2`}
-        >
-          {guide}
-        </p>
-      ) : null}
-    </>
-  );
-};
-
-export const Select = ({ options }: { options: string[] }) => {
-  const [filterValue, setFilterValue] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-  const [menuPosition, setMenuPosition] = useState({
-    top: 0,
-    left: 0,
-    width: 0,
-  });
-  const inputRef = useRef<HTMLInputElement>(null);
-  const dropdownRef = useRef<HTMLUListElement>(null);
-  const filteredOptions = options.filter((option) =>
-    option.toLowerCase().includes(filterValue.toLowerCase())
-  );
-
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      const rect = inputRef.current.getBoundingClientRect();
-      setMenuPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left,
-        width: rect.width,
-      });
-    }
-  }, [isOpen]);
-
-  useEffect(() => {
-    // 마우스 벗어난 영역 클릭 시 드롭다운 닫기
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node) &&
-        inputRef.current &&
-        !inputRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  return (
-    <div className="relative">
-      <label className="relative w-fit hidden md:block">
-        <input
-          ref={inputRef}
-          type="text"
-          value={filterValue}
-          placeholder="값을 선택해주세요..."
-          onChange={(e) => {
-            setFilterValue(e.target.value);
-          }}
-          onFocus={() => setIsOpen(true)}
-          className={clsx(
-            "transition-all bg-input-background-standard border px-4 py-2 border-input-border-standard text-input-text-value rounded-input-rounded",
-            { "placeholder:text-input-text-placeholder": true },
-            { "focus:border-input-border-focus": true },
-            { "disabled:bg-input-background-disabled": true }
-          )}
-        />
-        <div
-          className="absolute flex items-center right-0 top-0 h-full px-2"
-          draggable
-        >
-          <span className="material-symbols-outlined">
-            <span className="text-base input-text-value">arrow_drop_down</span>
-          </span>
-        </div>
-      </label>
-      {isOpen &&
-        createPortal(
-          <ul
-            ref={dropdownRef}
-            className="absolute w-full border rounded bg-input-background-standard border-input-border-standard shadow-md mt-1"
-            style={{
-              top: menuPosition.top,
-              left: menuPosition.left,
-              width: menuPosition.width,
-            }}
-          >
-            {filteredOptions.length > 0 ? (
-              filteredOptions.map((option, index) => (
-                <li
-                  key={index}
-                  className="px-4 py-2 text-input-text-value hover:bg-input-background-value cursor-pointer"
-                  onClick={() => {
-                    setFilterValue(option);
-                    setIsOpen(false);
-                  }}
-                >
-                  {option}
-                </li>
-              ))
-            ) : (
-              <li className="px-4 py-2 text-gray-500">No results</li>
-            )}
-          </ul>,
-          document.body
-        )}
-      <select
-        className={clsx(
-          " block transition-all bg-input-background-standard border px-4 py-2 border-input-border-standard text-input-text-value rounded-input-rounded",
-          { "placeholder:text-input-text-placeholder": true },
-          { "focus:border-input-border-focus": true },
-          { "disabled:bg-input-background-disabled": true },
-          { "md:hidden": true }
-        )}
-      >
-        {options.map((option, index) => {
-          return (
-            <option key={index} value={option}>
-              {option}
-            </option>
-          );
-        })}
-      </select>
-    </div>
-  );
-};
-
-export const Radio = ({
-  name,
-  value,
-  className,
-  onChange,
-  defaultChecked,
-}: {
-  name: string;
-  value: string;
-  className?: string;
-  onChange?: () => void;
-  defaultChecked?: boolean;
-}) => {
-  return (
-    <label className="flex items-center gap-2">
-      <input
-        type="radio"
-        className={clsx(
-          "relative appearance-none peer w-5 h-5 bg-input-background-standard border border-fill-border rounded-full",
-          {
-            "checked:bg-primary after:w-2.5 after:h-2.5 after:bg-fill-card after:content-[''] after:absolute after:rounded-full after:left-1 after:top-1":
-              true,
-          },
-          { "focus:border-input-border-focus": true },
-          { "disabled:bg-input-background-disabled": true },
-          className
-        )}
-        name={name}
-        onChange={onChange}
-        defaultChecked={defaultChecked}
-      />
-      <span>{value}</span>
-    </label>
-  );
-};
-
-export const Checkbox = ({
-  label,
-  className,
-  onChange,
-  disabled,
-  required,
-  defaultChecked,
-}: {
-  label?: string;
-  className?: string;
-  onChange?: () => void;
-  disabled?: boolean;
-  required?: boolean;
-  defaultChecked?: boolean;
-}) => {
-  return (
-    <label className="relative flex items-center gap-2">
-      <input
-        type="checkbox"
-        className={clsx(
-          "relative appearance-none peer w-5 h-5 bg-input-background-standard border border-fill-border rounded-common",
-          { "checked:bg-primary": true },
-          { "focus:border-input-border-focus": true },
-          { "disabled:bg-input-background-disabled": true },
-          {
-            "after:content-['*'] after:text-danger after:absolute after:-right-1 after:-top-2":
-              required,
-          },
-          className
-        )}
-        onChange={onChange}
-        disabled={disabled}
-        required={required}
-        defaultChecked={defaultChecked}
-      />
-      <span className="absolute left-0.5 top-1 invisible  peer-checked:visible fill-fill-card ">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-4 w-4"
-          viewBox="0 0 20 20"
-          strokeWidth="1"
-        >
-          <path
-            fillRule="evenodd"
-            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-            clipRule="evenodd"
-          ></path>
-        </svg>
-      </span>
-      {label ? (
-        <span className="text-text-standard select-none">{label}</span>
-      ) : null}
-    </label>
-  );
-};

package/app/component/Theme/Theme.tsx

@@ -1,118 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { Radio } from "../Input/Input";
-
-export const ThemeSelector = ({
-  type,
-}: {
-  type: "all" | "theme" | "input";
-}) => {
-  const themes = ["standard", "dark"];
-  const [selectedTheme, setSelectedTheme] = useState<string | null>(null);
-  const inputThemes = ["inputStandard", "inputCircle"];
-  const [selectedInputTheme, setSelectedInputTheme] = useState<string | null>(
-    null
-  );
-  const [isThemeLoading, setThemeLoading] = useState(false);
-
-  useEffect(() => {
-    const chageThemeValue = () => {
-      const storedTheme = localStorage.getItem("theme") || "standard";
-      const storedInputTheme =
-        localStorage.getItem("inputTheme") || "inputStandard";
-
-      setSelectedTheme(storedTheme);
-      setSelectedInputTheme(storedInputTheme);
-    };
-
-    chageThemeValue();
-    setThemeLoading(true);
-  }, []);
-
-  // main theme
-  const handleThemeChange = (theme: string) => {
-    if (typeof window !== "undefined") {
-      localStorage.setItem("theme", theme);
-      window.dispatchEvent(new Event("storage"));
-      setSelectedTheme(theme);
-    }
-  };
-  // input theme
-  const handleInputThemeChange = (theme: string) => {
-    if (typeof window !== "undefined") {
-      localStorage.setItem("inputTheme", theme);
-      window.dispatchEvent(new Event("storage"));
-      setSelectedInputTheme(theme);
-    }
-  };
-  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}
-              />
-            ))}
-          </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>
-  );
-};
-
-export const ThemeWrapper = ({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className: string;
-}) => {
-  const [theme, setTheme] = useState<string | null>(null); // 테마 상태 추가
-  const [inputTheme, setInputTheme] = useState<string | null>(null); // 테마 상태 추가
-  const [isThemeLoading, setThemeLoading] = useState(false);
-  // theme setting
-  useEffect(() => {
-    // 로컬 스토리지에서 테마 가져오기
-    const listenStorageChange = () => {
-      setTheme(localStorage.getItem("theme") || "standard");
-      setInputTheme(localStorage.getItem("inputTheme") || "inputStandard");
-    };
-    listenStorageChange();
-    window.addEventListener("storage", listenStorageChange);
-    setThemeLoading(true);
-    return () => window.removeEventListener("storage", listenStorageChange);
-  }, [theme]);
-
-  if (isThemeLoading == false) {
-    return null;
-  }
-
-  return (
-    <body className={`${className} ${theme} ${inputTheme}`}>{children}</body>
-  );
-};

package/app/component/component.css

@@ -1,42 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  h1 {
-    @apply text-mobileH1 lg:text-h1 text-text-standard;
-  }
-  h2 {
-    @apply text-mobileH2 lg:text-h2 text-text-standard;
-  }
-  h3 {
-    @apply text-mobileH3 lg:text-h3 text-text-standard;
-  }
-  h4 {
-    @apply text-mobileH4 lg:text-h4 text-text-standard;
-  }
-  h5 {
-    @apply text-mobileH5 lg:text-h5 text-text-standard;
-  }
-  h6 {
-    @apply text-mobileH6 lg:text-h6 text-text-standard;
-  }
-
-  p {
-    @apply text-base text-text-standard;
-  }
-
-  hr {
-    @apply border-fill-border;
-  }
-  *:focus {
-    @apply outline-none;
-  }
-}
-
-@layer components {
-  .required::after {
-    content: "*";
-    @apply ml-1 text-danger;
-  }
-}