atomsystem 0.1.16 → 0.1.18

package/app/templates/Button/Button.tsx

@@ -15,25 +15,25 @@ export const Button = ({
   return (
     <button
       className={clsx(
-        "px-4 py-2 rounded-common text-button-text transition-all",
+        "px-4 py-2 rounded-common text-white transition-all cursor-pointer rounded-[var(--global-rounded)]",
         {
-          "bg-button-primary-standard hover:bg-button-primary-hover disabled:bg-button-primary-disabled":
+          "bg-[var(--button-main-primary-standard)] hover:bg-[var(--button-main-primary-hover)] active:bg-[var(--button-main-primary-active)] standard:bg-[var(--buttion-main-primary-standard)]/20":
             type == "primary",
         },
         {
-          "bg-button-secondary-standard hover:bg-button-secondary-hover disabled:bg-button-secondary-disabled ":
+          "bg-[var(--button-main-secondary-standard)] hover:bg-[var(--button-main-secondary-hover)] active:bg-[var(--button-main-secondary-active)] standard:bg-[var(--buttion-main-secondary-standard)]/20 ":
             type == "secondary",
         },
         {
-          "bg-button-success-standard hover:bg-button-success-hover disabled:bg-button-success-disabled":
+          "bg-[var(--button-main-success-standard)] hover:bg-[var(--button-main-success-hover)] active:bg-[var(--button-main-success-active)] standard:bg-[var(--buttion-main-success-standard)]/20":
             type == "success",
         },
         {
-          "bg-button-danger-standard hover:bg-button-danger-hover disabled:bg-button-danger-disabled":
+          "bg-[var(--button-main-danger-standard)] hover:bg-[var(--button-main-danger-hover)] active:bg-[var(--button-main-danger-active)] standard:bg-[var(--buttion-main-danger-standard)]/20":
             type == "danger",
         },
         {
-          "bg-button-gray-standard hover:bg-button-gray-hover disabled:bg-button-gray-disabled":
+          "bg-[var(--button-main-gray-standard)] hover:bg-[var(--button-main-gray-hover)] active:bg-[var(--button-main-gray-active)] standard:bg-[var(--buttion-main-gray-standard)]/20":
             type == "gray",
         }
       )}

package/app/templates/Card/Card.tsx

@@ -19,7 +19,7 @@ export const Card = ({
   );
   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`}
+      className={`${type == "standard" ? "bg-[var(--background-card)] border-[var(--color-border)]" : type == "group" ? "bg-fill-group border-none" : ""} ${!hasCardContent ? "p-4" : ""} rounded  border ${className} overflow-auto`}
     >
       {children}
     </div>

package/app/templates/CodeBlock/CodeBlock.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import hljs from "highlight.js";
 import "highlight.js/styles/atom-one-dark.css"; // 스타일 파일
 
@@ -11,6 +11,7 @@ const CodeBlock = ({
   children: React.ReactNode;
 }) => {
   const codeRef = useRef<HTMLElement | null>(null);
+  const [copied, setCopied] = useState(false);
 
   useEffect(() => {
     if (codeRef.current) {
@@ -18,12 +19,33 @@ const CodeBlock = ({
     }
   }, [children]);
 
+  const handleCopy = async () => {
+    if (!codeRef.current) return;
+
+    try {
+      await navigator.clipboard.writeText(codeRef.current.innerText);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500); // 1.5초 후 메시지 제거
+    } catch (err) {
+      console.error("복사 실패:", err);
+    }
+  };
+
   return (
-    <pre>
-      <code ref={codeRef} className={language}>
-        {children}
-      </code>
-    </pre>
+    <div className="relative">
+      <pre>
+        <code ref={codeRef} className={language}>
+          {children}
+        </code>
+      </pre>
+
+      <button
+        onClick={handleCopy}
+        className="absolute top-2 right-2 bg-white text-black text-xs px-2 py-1 rounded hover:bg-gray-200"
+      >
+        {copied ? "Copied!" : "Copy"}
+      </button>
+    </div>
   );
 };
 

package/app/templates/GlobalNav/GlobalNav.tsx

@@ -2,12 +2,25 @@
 import Link from "next/link";
 import Image from "next/image";
 import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import clsx from "clsx";
 
 const GlobalNav = () => {
   const [windowSize, setWindowSize] = useState<number>(); // 초기값 설정
 
   const [toggleMenu, setToggleMenu] = useState<boolean>(false);
 
+  const pathname = usePathname();
+  const navMenu = [
+    { name: "시작하기", path: "/" },
+    { name: "설치하기", path: "/install" },
+    { name: "입력창", path: "/component/input" },
+    { name: "선택창", path: "/component/select" },
+    { name: "체크박스", path: "/component/checkbox" },
+    { name: "라디오", path: "/component/radio" },
+    { name: "버튼", path: "/component/button" },
+  ];
+
   // 윈도우 사이즈 추적
   useEffect(() => {
     const handleResize = () => {
@@ -20,7 +33,6 @@ const GlobalNav = () => {
   }, [windowSize]);
 
   // 초기 토글 값 설정
-
   useEffect(() => {
     if (window.innerWidth > 768) {
       setToggleMenu(true);
@@ -36,7 +48,7 @@ const GlobalNav = () => {
   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"}`}
+        className={`fixed top-0 md:relative w-full max-w-80 h-full bg-[var(--background-card)] text-text-standard z-20 left-0 ${toggleMenu ? "block" : "hidden"}`}
       >
         <div className="brand">
           <div className="flex items-center justify-between">
@@ -60,46 +72,26 @@ const GlobalNav = () => {
             </button>
           </div>
         </div>
+
         <ul>
-          <li>
-            <Link href={"/"} className="px-4 py-2 block">
-              시작하기
-            </Link>
-          </li>
-          <li>
-            <Link href={"/install"} 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>
+          {navMenu.map((menu) => {
+            return (
+              <li key={menu.name}>
+                <Link
+                  href={menu.path}
+                  className={clsx("px-4 py-2 block", {
+                    "text-primary": menu.path == pathname,
+                  })}
+                >
+                  {menu.name}
+                </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"} `}
+        className={`fixed shadow-md rounded-full bg-[var(--background-card)] w-12 h-12 top-6 left-6 z-10 ${toggleMenu ? "hidden" : "block"} `}
       >
         <span
           className="material-symbols-outlined"

package/app/templates/Input/Input.tsx

@@ -4,45 +4,21 @@ import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
 export const Input = ({
-  className,
-  defaultValue = "",
+  type = "text",
   placeholder = "값을 입력해주세요",
   label,
   readOnly,
   disabled,
-  pattern,
   required,
 }: {
+  type?: string;
   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 ? (
@@ -57,43 +33,36 @@ export const Input = ({
         </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 bg-input-background-standard",
-          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}
+        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)] "
+        style={{
+          color: "var(--input-text-standard)",
+          paddingLeft: "var(--global-padding-x)",
+          paddingRight: "var(--global-padding-x)",
+          paddingTop: "var(--global-padding-y)",
+          paddingBottom: "var(--global-padding-y)",
+          borderRadius: "var(--input-rounded)",
+        }}
         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[] }) => {
+export const Select = ({
+  options,
+  label,
+  required,
+  disabled,
+}: {
+  options: string[];
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+}) => {
   const [filterValue, setFilterValue] = useState("");
   const [isOpen, setIsOpen] = useState(false);
   const [menuPosition, setMenuPosition] = useState({
@@ -136,6 +105,17 @@ export const Select = ({ options }: { options: string[] }) => {
 
   return (
     <div className="relative">
+      {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}
       <label className="relative w-fit hidden md:block">
         <input
           ref={inputRef}
@@ -147,11 +127,15 @@ export const Select = ({ options }: { options: string[] }) => {
           }}
           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 }
+            "transition-all bg-[var(--input-background-standard)] border px-4 py-2 border-[var(--color-border)] text-[var(--text-standard)] rounded-[var(--input-rounded)]",
+            { "placeholder:text[var(--input-text-placeholder)]": true },
+            { "focus:border-[var(--input-border-focus)]": true },
+            {
+              "disabled:bg-[var(--input-background-disabled)] disabled:cursor-not-allowed":
+                disabled,
+            }
           )}
+          disabled={disabled}
         />
         <div
           className="absolute flex items-center right-0 top-0 h-full px-2"
@@ -166,7 +150,7 @@ export const Select = ({ options }: { options: string[] }) => {
         createPortal(
           <ul
             ref={dropdownRef}
-            className="absolute w-full border rounded bg-input-background-standard border-input-border-standard shadow-md mt-1"
+            className="absolute w-full border rounded bg-[var(--input-background-standard)] border-[var(--input-border-standard)] shadow-md mt-1"
             style={{
               top: menuPosition.top,
               left: menuPosition.left,
@@ -177,7 +161,7 @@ export const Select = ({ options }: { options: string[] }) => {
               filteredOptions.map((option, index) => (
                 <li
                   key={index}
-                  className="px-4 py-2 text-input-text-value hover:bg-input-background-value cursor-pointer"
+                  className="px-4 py-2 text-[var(--text-standard)] hover:bg-primary/10 cursor-pointer"
                   onClick={() => {
                     setFilterValue(option);
                     setIsOpen(false);
@@ -194,10 +178,10 @@ export const Select = ({ options }: { options: string[] }) => {
         )}
       <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",
+          " block transition-all bg-[(--input-background-standard)] border px-4 py-2 border-[var(--color-border)] text-[var(--text-standard)] rounded-input-rounded",
           { "placeholder:text-input-text-placeholder": true },
-          { "focus:border-input-border-focus": true },
-          { "disabled:bg-input-background-disabled": true },
+          { "focus:border-[var(--input-border-focus)]": true },
+          { "disabled:bg-[var(--input-background-disabled)]": true },
           { "md:hidden": true }
         )}
       >
@@ -216,40 +200,46 @@ export const Select = ({ options }: { options: string[] }) => {
 export const Radio = ({
   name,
   value,
+  label,
   className,
   onChange,
   defaultChecked,
 }: {
   name: string;
   value: string;
+  label?: 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>
+    <>
+      {label ? <p>{label}</p> : null}
+      <label className="flex items-center gap-2">
+        <input
+          type="radio"
+          className={clsx(
+            "relative appearance-none peer w-5 h-5 bg-[var(--input-background-standard)] border border-[var(--color-border)] rounded-full",
+            {
+              "checked:bg-primary after:w-2.5 after:h-2.5 after:bg-[var(--input-background-standard)] 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 = ({
+  text,
   label,
   className,
   onChange,
@@ -257,6 +247,7 @@ export const Checkbox = ({
   required,
   defaultChecked,
 }: {
+  text?: string;
   label?: string;
   className?: string;
   onChange?: () => void;
@@ -265,42 +256,55 @@ export const Checkbox = ({
   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>
+    <>
+      {label ? <p>{label}</p> : null}
+      <label className="relative flex flex-nowrap items-center gap-1">
+        <input
+          type="checkbox"
+          className={clsx(
+            "relative appearance-none peer min-w-5 min-h-5 bg-[var(--input-background-standard)] border border-[var(--color-border)] rounded-common",
+            { "checked:bg-primary": true },
+            { "focus:border-[var(--input-border-focus)]": true },
+            {
+              "disabled:bg-[var(--input-background-disabled)] disabled:cursor-not-allowed":
+                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-[var(--input-background-standard)] ">
+          <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>
+        {text ? (
+          <span
+            className={clsx(
+              "text-[var(--text-standard)] text-nowrap select-none",
+              { "!text-[var(--input-text-disabled)]": disabled }
+            )}
+          >
+            {text}
+          </span>
+        ) : null}
+      </label>
+    </>
   );
 };

package/app/templates/TOC/TOC.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+type Heading = {
+  id: string;
+  text: string;
+  level: number;
+};
+
+export default function TOC() {
+  const [headings, setHeadings] = useState<Heading[]>([]);
+
+  const pathname = usePathname(); // ✅ 페이지 경로 추적
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const headingElements = Array.from(
+        document.querySelectorAll("h1, h2, h3")
+      ) as HTMLHeadingElement[];
+
+      const generatedHeadings: Heading[] = headingElements.map((heading) => {
+        // id가 없으면 자동 생성
+        if (!heading.id) {
+          heading.id =
+            heading.textContent
+              ?.toLowerCase()
+              .replace(/\s+/g, "-")
+              .replace(/[^\w\-]+/g, "") ?? "";
+        }
+
+        return {
+          id: heading.id,
+          text: heading.textContent || "",
+          level: parseInt(heading.tagName.replace("H", "")),
+        };
+      });
+
+      setHeadings(generatedHeadings);
+    }, 50);
+
+    return () => clearTimeout(timer);
+  }, [pathname]);
+
+  return (
+    <nav className="space-y-2 flex flex-col">
+      {headings.map((heading, idx) => {
+        return (
+          <a
+            key={`${heading.id}-${idx}`}
+            href={`#${heading.id}`}
+            style={{ marginLeft: `${(heading.level - 1) * 8}px` }}
+          >
+            {heading.text}
+          </a>
+        );
+      })}
+    </nav>
+  );
+}