atomsystem 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+This is Atom Design System
+
+with tokenStudio,
+with Figma,
+with Storybook,

package/app/component/Button/Button.tsx

@@ -0,0 +1,46 @@
+"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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,30 @@
+"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

@@ -0,0 +1,111 @@
+"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

@@ -0,0 +1,306 @@
+"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

@@ -0,0 +1,118 @@
+"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>
+  );
+};