atomsystem 0.1.47 → 0.1.49

package/app/templates/Form/Form.tsx

@@ -1,289 +0,0 @@
-"use client";
-import clsx from "clsx";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-export const Label = ({
-    label,
-    required,
-}: {
-    label: string;
-    required?: boolean;
-}) => {
-    return (
-        <p className={"mb-1 text-text-standard"}>  
-            <span
-                className={clsx("", {
-                    "after:content-['*'] after:ml-1 after:text-danger": required,
-                })}
-            >
-                {label}
-            </span>
-        </p>
-    );
-};
-
-export const Input = ({
-  type = "text",
-  placeholder = "값을 입력해주세요",
-  readOnly,
-  disabled,
-  required,
-}: {
-  type?: string;
-  className?: string;
-  placeholder?: string;
-  readOnly?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-}) => {
-  return (
-      <input
-        className="input"
-        type={type}
-        placeholder={placeholder}
-        readOnly={readOnly}
-        disabled={disabled}
-        required={required}
-      />
-  );
-};
-
-export const Select = ({
-  options = [],
-  disabled,
-}: {
-  options: string[];
-  disabled?: boolean;
-}) => {
-  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())
-  );
-
-  useLayoutEffect(() => {
-    if (isOpen && inputRef.current && dropdownRef.current) {
-      const rect = inputRef.current.getBoundingClientRect();
-      const dropdownRect = dropdownRef.current.getBoundingClientRect();
-
-      if (Math.abs(menuPosition.width - rect.width) > 0.5) {
-        setMenuPosition({
-          top: rect.bottom + window.scrollY,
-          left: rect.left,
-          width: rect.width,
-        });
-        return;
-      }
-
-      let top = rect.bottom + window.scrollY;
-
-      if (rect.bottom + dropdownRect.height > window.innerHeight) {
-        top = rect.top + window.scrollY - dropdownRect.height;
-      }
-
-      setMenuPosition((prev) => {
-        if (
-          Math.abs(prev.top - top) < 0.5 &&
-          Math.abs(prev.left - rect.left) < 0.5
-        ) {
-          return prev;
-        }
-        return {
-          top,
-          left: rect.left,
-          width: rect.width,
-        };
-      });
-    }
-  }, [isOpen, filterValue, menuPosition.width]);
-
-  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="select hidden sm:block"
-          disabled={disabled}
-        />
-        <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 select-menu"
-            style={{
-              top: menuPosition.top,
-              left: menuPosition.left,
-              width: menuPosition.width,
-            }}
-          >
-            {filteredOptions.length > 0 ? (
-              filteredOptions.map((option, index) => (
-                <li
-                  key={index}
-                  className="select-menu-item"
-                  onClick={() => {
-                    setFilterValue(option);
-                    setIsOpen(false);
-                  }}
-                >
-                  {option}
-                </li>
-              ))
-            ) : (
-              <li className="select-menu-item">No results</li>
-            )}
-          </ul>,
-          document.body
-        )}
-      <select
-        className="select block sm:hidden"
-      >
-        {options.map((option, index) => {
-          return (
-            <option key={index} value={option}>
-              {option}
-            </option>
-          );
-        })}
-      </select>
-    </div>
-  );
-};
-
-export const Radio = ({
-  name,
-  value,
-  label,
-  className,
-  onChange,
-  defaultChecked,
-  checked,
-}: {
-  name: string;
-  value: string;
-  label?: string;
-  className?: string;
-  onChange?: () => void;
-  defaultChecked?: boolean;
-  checked?: boolean;
-}) => {
-  return (
-    <>
-      {label ? <p>{label}</p> : null}
-      <label className="flex items-center gap-1">
-        <input
-          type="radio"
-          className={clsx(
-            "relative appearance-none radio 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}
-          checked={checked}
-        />
-        <span>{value}</span>
-      </label>
-    </>
-  );
-};
-
-export const Checkbox = ({
-  text,
-  onChange,
-  disabled,
-  required,
-  defaultChecked,
-}: {
-  text?: string;
-  className?: string;
-  onChange?: () => void;
-  disabled?: boolean;
-  required?: boolean;
-  defaultChecked?: boolean;
-}) => {
-  return (
-    <>
-      <label className="checkbox gap-1.5">
-        <input
-          type="checkbox"
-          className="appearance-none hidden"
-          onChange={onChange}
-          disabled={disabled}
-          required={required}
-          defaultChecked={defaultChecked}
-        />
-        <span>
-          <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-text-standard text-nowrap select-none",
-              { "!text-text-disabled": disabled }
-            )}
-          >
-            {text}
-          </span>
-        ) : null}
-      </label>
-    </>
-  );
-};

package/app/templates/Form/form.css

@@ -1,115 +0,0 @@
-
-.input{
-    background: var(--bg-input-standard);
-    border: 1px solid var(--border-standard);   
-    color: var(--text-standard);
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    border-radius: var(--radius-common);
-}
-
-.input::placeholder{
-    color: var(--text-placeholder);
-}
-
-.input:focus{
-    border: 1px solid var(--border-active);   
-}
-
-.input:disabled{
-    background: var(--bg-input-disabled);
-    border: 1px solid var(--border-standard);   
-    color: var(--text-disabled);
-}
-
-.select{
-    background: var(--bg-input-standard);
-    border: 1px solid var(--border-standard);   
-    color: var(--text-standard);
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    border-radius: var(--radius-common);
-}
-.select:focus{
-    border: 1px solid var(--border-active);   
-}
-
-.select:disabled{
-    background: var(--bg-input-disabled);
-    border: 1px solid var(--border-standard);   
-    color: var(--text-disabled);
-}
-
-.select-menu {
-    border: 1px solid var(--border-active);   
-    border-radius: var(--radius-common);
-    overflow:hidden;
-}
-
-.select-menu .select-menu-item {
-    background: var(--bg-input-standard);
-    border: 1px solid var(--border-standard);   
-    color: var(--text-standard);
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    cursor:pointer
-}
-
-.select-menu .select-menu-item:hover {
-    background: var(--bg-input-hover);
-}
-
-.select-menu .select-menu-item:active,
-.select-menu .select-menu-item:focus  {
-    background: var(--color-primary);
-    border: 1px solid var(--color-primary);   
-    color: var(--text-active);
-}
-
-.checkbox{
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: var(--spacing-small);
-  height: var(--spacing-small);  
-  border: 1px solid var(--border-standard);
-  border-radius: var(--radius-common);
-  background: var(--bg-input-standard);
-  color: var(--bg-input-standard);
-}
-
-.checkbox span svg{
-    color: var(--bg-input-standard);
-    fill: var(--bg-input-standard);
-}
-
-.checkbox:has(input:checked){
-    background: var(--color-primary);
-    border: 1px solid var(--color-primary);
-}
-
-.checkbox:has(input:checked) span svg{
-    color: var(--text-active);
-    fill: var(--text-active);
-}
-
-.radio{
-    position: relative;
-    width: var(--spacing-small);
-    height: var(--spacing-small);  
-    border: 1px solid var(--border-standard);
-    background: var(--bg-input-standard);
-    color: var(--bg-input-standard);
-}
-
-.radio::after{
-    content:'';
-    position:absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: var(--spacing-common-y);
-    height: var(--spacing-common-y);  
-    border-radius: var(--radius-circle);
-}
-
-.radio:checked::after{
-    background: var(--color-primary);
-}

package/app/templates/Modal/Modal.tsx

@@ -1,71 +0,0 @@
-"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="modal-overlay"
-      className={`modal modal-${size}`}
-    >
-      <ModalTitle onRequestClose={onRequestClose} title={modalTitle} />
-      <div className="modal-content">{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="modal-header">
-      <h6 className="modal-title">{title}</h6>
-      <button
-        onClick={onRequestClose}
-        className="material-symbols-outlined modal-close"
-      >
-        close
-      </button>
-    </div>
-  );
-};
-
-export const ModalFooter = ({
-  modalFooter,
-}: {
-  modalFooter: React.ReactNode;
-}) => {
-  return <div className="modal-footer">{modalFooter}</div>;
-};

package/app/templates/Modal/modal.css

@@ -1,98 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 50;
-}
-
-.modal {
-  background-color: var(--color-bg-card);
-  padding: 0;
-  border-radius: var(--radius-common);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  color: var(--color-text-standard);
-  border: 1px solid var(--color-border-standard);
-  max-height: 90vh;
-}
-
-.modal-content {
-  padding: var(--spacing-common-x);
-  width: 100%;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--spacing-common-y) var(--spacing-common-x);
-  border-bottom: 1px solid var(--color-border-standard);
-}
-
-.modal-title {
-  font-size: var(--text-h6);
-  font-weight: var(--font-weight-header);
-  margin: 0;
-  color: var(--color-text-standard);
-}
-
-.modal-close {
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  color: var(--color-text-standard);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: color 0.2s ease-in-out;
-}
-
-.modal-close:hover {
-  color: var(--color-danger);
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  padding: var(--spacing-common-y) var(--spacing-common-x);
-  border-top: 1px solid var(--color-border-standard);
-  gap: var(--spacing-gap-small);
-}
-
-/* Modal Sizes */
-.modal-normal {
-  max-width: 28rem; /* Tailwind max-w-md */
-}
-
-.modal-middle {
-  max-width: 36rem; /* Tailwind max-w-xl */
-}
-
-.modal-large {
-  max-width: 64rem; /* Tailwind max-w-5xl */
-}
-
-.modal-xl {
-  max-width: 72rem; /* Tailwind max-w-6xl */
-}
-
-.modal-full {
-  max-width: calc(100vw - (var(--spacing-common-x) * 2));
-}
-
-.modal-full-screen {
-  width: 100vw;
-  height: 100vh;
-  max-height: 100vh;
-  max-width: 100vw;
-  border-radius: 0;
-  border: none;
-}