atomsystem 0.1.47 → 0.1.49

package/app/templates/Tab/Tab.tsx

@@ -1,117 +0,0 @@
-"use client";
-
-import { useRef, useState } from "react";
-import gsap from "gsap";
-import { useGSAP } from "@gsap/react";
-
-const Tab = ({
-  tabs,
-  tabClass = "tab",
-  tabNavItemClass = "tab-nav-item",
-  tabNavItemActiveClass = "tab-nav-item-active",
-  tabContents,
-  tabContentClass = "tab-content",
-  tabContentItem = "tab-content-item",
-  expectionValue,
-  expectionLayout,
-}: {
-  /**탭 네비게이션을 정의내립니다.
-   */
-  tabs: Array<{
-    /** id는 탭 메뉴의 고유 값입니다. 고유 값을 통해 Active 상태 값을 관리합니다.*/
-    id: string;
-    /** target은 배열로 제공되며, 타겟의 배열과 동일한 내용을 tabContent로 적용됩니다.*/
-    target: string[];
-    /** 탭 메뉴의 ReactNode 내용을 받습니다.*/
-    tabItem: React.ReactNode;
-  }>;
-  /** 탭 메뉴의 tailwinds css 스타일 지정을 위한 class를 받습니다.*/
-  tabClass?: string;
-  /** 탭 메뉴의 각각의 tailwinds css 스타일 지정을 위한 class를 받습니다.*/
-  tabNavItemClass?: string;
-  /** 탭 메뉴의 활성화 상태의 tailwinds css 스타일 지정을 위한 class를 받습니다.*/
-  tabNavItemActiveClass?: string;
-  /** 탭 메뉴의 콘텐츠 값을 정의내립니다.*/
-  tabContents: Array<{
-    /** 고유 ID 값입니다.*/
-    id: string;
-    /** 태그 값으로 tabs target에서 선택된 내용만 화면에 제공됩니다.*/
-    tag: string;
-    /** 탭 메뉴의 콘텐츠 ReactNode 정보를 받습니다.*/
-    content: React.ReactNode;
-  }>;
-  /** 탭 메뉴의 콘텐츠 레이아웃을 위한한 tailwinds css 스타일 지정을 위한 class를 받습니다. */
-  tabContentClass?: string;
-  /** 탭 메뉴의 콘텐츠의 각 개별 요소를 위한 tailwinds css 스타일 지정을 위한 class를 받습니다. */
-  tabContentItem?: string;
-  /** 예외 레이아웃을 사용할 콘텐츠의 tag값을 입력받습니다. */
-  expectionValue?: string;
-  /** 예외 레이아웃에 사용하기 위한 tailwinds css 스타일 지정을 위한 class를 받습니다. */
-  expectionLayout?: string;
-}) => {
-  const [activeContent, setActiveContent] = useState(tabs[0].target);
-  const [activeTab, setActiveTab] = useState(tabs[0].id);
-  const tabContentRef = useRef<HTMLDivElement>(null);
-
-  const handleTabActive = (target: string[], id: string) => {
-    setActiveContent(target);
-    setActiveTab(id);
-  };
-
-  // 👇 activeContent가 변경된 이후에 실행
-  useGSAP(() => {
-    if (tabContentRef.current) {
-      gsap.fromTo(
-        tabContentRef.current.children,
-        { y: 50, opacity: 0 },
-        {
-          y: 0,
-          opacity: 1,
-          stagger: 0.1,
-          duration: 0.6,
-          ease: "power4.out",
-        }
-      );
-    }
-  }, [activeContent]);
-
-  return (
-    <div className="flex flex-col w-full">
-      <div className={tabClass}>
-        {tabs.map((tab) => {
-          return (
-            <button
-              key={tab.id}
-              id={tab.id}
-              onClick={() => handleTabActive(tab.target, tab.id)}
-              className={`${tabNavItemClass} ${
-                activeTab == tab.id
-                  ? tabNavItemActiveClass
-                  : ""
-              }`}
-            >
-              {tab.tabItem}
-            </button>
-          );
-        })}
-      </div>
-      <div ref={tabContentRef} className={tabContentClass}>
-        {tabContents.map((tabContent) => {
-          return activeContent.includes(tabContent.tag) ? (
-            <div
-              key={tabContent.id}
-              id={tabContent.tag}
-              className={`${tabContentItem} ${
-                activeTab == expectionValue ? expectionLayout : ""
-              }`}
-            >
-              {tabContent.content}
-            </div>
-          ) : null;
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default Tab;

package/app/templates/Tab/tab.css

@@ -1,56 +0,0 @@
-.tab {
-  display: flex;
-  width: 100%;
-  background-color: var(--color-bg-wrapper);
-  border-bottom: 1px solid var(--color-border-standard);
-  position: relative;
-  z-index: 0;
-  height: 57px;
-}
-
-.tab-nav-item {
-  padding: var(--spacing-common-x);
-  cursor: pointer;
-  border: 1px solid transparent; /* reserve space for active state border */
-  border-bottom: none;
-  background-color: transparent;
-  color: var(--color-text-standard);
-  transition: all 0.2s ease-in-out;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tab-nav-item:hover {
-  background-color: var(--color-bg-card);
-}
-
-.tab-nav-item-active {
-  background-color: var(--color-bg-card);
-  border: 1px solid var(--color-border-standard);
-  border-bottom: 1px solid var(--color-bg-card);
-  position: relative;
-  z-index: 10;
-  color: var(--color-primary);
-}
-
-.tab-content {
-  background-color: var(--color-bg-card);
-  padding: var(--spacing-common-x);
-  border: 1px solid var(--color-border-standard);
-  border-top: 0;
-  margin-top: -1px; /* Overlap the top line of content with the bottom line of tab to allow the active tab to connect */
-  position: relative;
-  z-index: 1;
-}
-
-.tab-content-item {
-  color: var(--color-text-standard);
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .tab-content-item {
-    width: auto;
-  }
-}

package/app/templates/Table/Table.tsx

@@ -1,54 +0,0 @@
-/** 테이블에 표시할 데이터 배열. 각 객체는 하나의 행을 나타냅니다.
- * 객체의 키는 테이블 헤더가 되고, 값은 해당 셀의 내용이 됩니다.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Table = ({ tableData }: { tableData: Record<string, any>[] }) => {
-  // tableData가 제공되지 않았거나 비어있는 경우, 데이터 없음 메시지를 표시합니다.
-  if (!tableData || tableData.length === 0) {
-    return (
-      <div className="table-empty">
-        <p>표시할 데이터가 없습니다.</p>
-      </div>
-    );
-  }
-
-  const headers = Object.keys(tableData[0]);
-
-  return (
-    <div className="table-container">
-      <table className="table">
-        <thead className="table-header">
-          <tr>
-            {/* 헤더 배열을 순회하며 각 헤더에 대한 <th>태그를 생성합니다. */}
-            {headers.map((header, index) => {
-              return (
-                <th key={index}>
-                  {header}
-                </th>
-              );
-            })}
-          </tr>
-        </thead>
-        {/* 테이블 바디 부분 */}
-        <tbody className="table-body">
-          {/* tableData 배열을 순회하며 각 데이터 객체(행)에 대한 <tr> 태그를 생성합니다. */}
-          {tableData.map((row, rowIndex) => {
-            return (
-              <tr key={rowIndex} className="table-row">
-                {/* 각 행 내에서 헤더 배열을 다시 순회하며 해당 헤더에 맞는 셀(<td>)을 생성합니다. */}
-                {headers.map((header, colIndex) => (
-                  <td key={colIndex} className="table-cell">
-                    {/* 현재 행 객체(row)에서 해당 헤더(키)에 해당하는 값을 가져와 셀에 표시합니다. */}
-                    {row[header]}
-                  </td>
-                ))}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default Table;

package/app/templates/Table/table.css

@@ -1,58 +0,0 @@
-.table-container {
-  overflow: auto;
-  width: 100%;
-}
-
-.table {
-  min-width: 100%;
-  border-collapse: collapse;
-  border-radius: var(--radius-common);
-  border: 1px solid var(--color-table-header-border);
-  overflow: hidden;
-}
-
-.table-header {
-  background-color: var(--color-table-header-bg);
-}
-
-.table-header th {
-  padding: var(--spacing-common-y) var(--spacing-common-x);
-  text-align: center;
-  color: var(--color-table-header-text);
-  font-weight: var(--font-weight-header);
-  font-size: var(--text-body);
-  letter-spacing: 0.05em;
-  border-bottom: 1px solid var(--color-table-header-border);
-}
-
-.table-body {
-  /* Body styles if needed */
-}
-
-.table-row {
-  background-color: var(--color-table-body-bg);
-  transition: background-color 0.2s ease;
-}
-
-.table-row:nth-child(even) {
-  background-color: var(--color-table-body-bgEven);
-}
-
-.table-row:hover {
-  filter: brightness(0.95);
-}
-
-.table-cell {
-  padding: var(--spacing-sm-y) var(--spacing-common-x);
-  color: var(--color-table-body-text);
-  font-size: var(--text-body);
-  border-bottom: 1px solid var(--color-table-body-border);
-  text-align: left;
-}
-
-.table-empty {
-  padding: var(--spacing-common-x);
-  text-align: center;
-  color: var(--color-text-standard);
-  font-size: var(--text-body);
-}

package/app/templates/Theme/Theme.tsx

@@ -1,121 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { Radio } from "../Form/Form";
-import { themes } from "@/build/typescript/theme";
-import { Button } from "../Button/Button";
-import { ModalContent } from "../Modal/Modal";
-
-export const ThemeSelector = () => {
-  const [selectedThemes, setSelectedThemes] = useState<Record<string, string>>({});
-  const [tempThemes, setTempThemes] = useState<Record<string, string>>({});
-  const [isThemeLoading, setThemeLoading] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  useEffect(() => {
-    const chageThemeValue = () => {
-      const newThemes: Record<string, string> = {};
-      Object.entries(themes).forEach(([group, groupThemes]) => {
-        const storedKey = group === "global" ? "theme" : `theme-${group}`;
-        const storedTheme = localStorage.getItem(storedKey) || groupThemes[0];
-        newThemes[group] = storedTheme;
-      });
-      setSelectedThemes(newThemes);
-      setTempThemes(newThemes);
-    };
-
-    chageThemeValue();
-    setThemeLoading(true);
-  }, []);
-
-  const handleTempThemeChange = (group: string, theme: string) => {
-    setTempThemes((prev) => ({ ...prev, [group]: theme }));
-  };
-
-  const handleApply = () => {
-    if (typeof window !== "undefined") {
-      Object.entries(tempThemes).forEach(([group, theme]) => {
-        const storedKey = group === "global" ? "theme" : `theme-${group}`;
-        localStorage.setItem(storedKey, theme);
-      });
-      window.dispatchEvent(new Event("storage"));
-      setSelectedThemes(tempThemes);
-      setIsModalOpen(false);
-    }
-  };
-
-  const handleOpenModal = () => {
-    setTempThemes(selectedThemes); // Reset to current applied themes
-    setIsModalOpen(true);
-  };
-
-  if (isThemeLoading === false) {
-    return null;
-  }
-
-  return (
-    <>
-      <Button type="primary" onClick={handleOpenModal} style={{ width: "100%" }}>
-        <div className="flex items-center justify-center gap-2">
-          <span className="material-symbols-outlined" style={{ fontSize: "18px" }}>palette</span>
-          <span>테마 설정</span>
-        </div>
-      </Button>
-      <ModalContent
-        isOpen={isModalOpen}
-        onRequestClose={() => setIsModalOpen(false)}
-        modalTitle="테마 설정"
-        modalFooter={
-          <div className="flex justify-end gap-2 w-full mt-4">
-            <Button type="gray" onClick={() => setIsModalOpen(false)}>취소</Button>
-            <Button type="primary" onClick={handleApply}>적용</Button>
-          </div>
-        }
-      >
-        <div className="flex flex-col gap-6 p-4">
-          {Object.entries(themes).map(([group, groupThemes]) => (
-            <div key={group} className="flex flex-col gap-3">
-              <p className="font-bold capitalize">{group} Theme</p>
-              <div className="flex gap-4 flex-wrap">
-                {groupThemes.map((theme) => (
-                  <Radio
-                    name={`theme-${group}-modal`}
-                    value={theme}
-                    key={theme}
-                    onChange={() => handleTempThemeChange(group, theme)}
-                    checked={theme === tempThemes[group]}
-                  />
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </ModalContent>
-    </>
-  );
-};
-
-export const ThemeProvider = () => {
-  const [isThemeLoading, setThemeLoading] = useState(false);
-
-  useEffect(() => {
-    const listenStorageChange = () => {
-      Object.entries(themes).forEach(([group, groupThemes]) => {
-        const storedKey = group === "global" ? "theme" : `theme-${group}`;
-        const currentTheme = localStorage.getItem(storedKey) || groupThemes[0];
-        
-        document.documentElement.classList.remove(...groupThemes);
-        document.documentElement.classList.add(currentTheme);
-      });
-    };
-
-    listenStorageChange();
-    window.addEventListener("storage", listenStorageChange);
-    setThemeLoading(true);
-    return () => window.removeEventListener("storage", listenStorageChange);
-  }, []);
-
-  if (isThemeLoading === false) {
-    return null;
-  }
-};

package/app/templates/Toast/Toast.tsx

@@ -1,106 +0,0 @@
-"use client";
-
-import { useEffect, useState, useRef } from "react";
-import gsap from "gsap";
-import { useGSAP } from "@gsap/react";
-
-gsap.registerPlugin(useGSAP);
-
-// ✅ Toast Message 타입 정의
-export type ToastMessage = {
-  id: string;
-  status?: "standard" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "error";
-  message: string;
-  desc?: string;
-};
-
-// ✅ 전역 메시지 저장소와 구독 시스템
-let messages: ToastMessage[] = [];
-let listener: ((messages: ToastMessage[]) => void) | null = null;
-
-export const addToast = (msg: Omit<ToastMessage, "id">) => {
-  const id = Math.random().toString(36).substring(2) + Date.now().toString(36);
-  messages = [...messages, { id, ...msg }];
-  //   messages 값 listener에 반영
-  listener?.(messages);
-};
-
-const removeToast = (id: string) => {
-  messages = messages.filter((m) => m.id !== id);
-  listener?.(messages);
-};
-
-// 콜백으로 message value 추적적
-const subscribeToast = (cb: (messages: ToastMessage[]) => void) => {
-  listener = cb;
-  cb(messages);
-};
-
-const unsubscribeToast = () => {
-  listener = null;
-};
-
-// ✅ useToast 훅 제공
-export const useToast = () => {
-  return addToast;
-};
-
-// ✅ ToastContainer 컴포넌트 (내부 ToastItem 포함)
-export const Toast = () => {
-  const [messages, setMessages] = useState<ToastMessage[]>([]);
-
-  useEffect(() => {
-    subscribeToast(setMessages);
-    return () => unsubscribeToast();
-  }, []);
-
-  return (
-    <div className="toast-container">
-      {messages.map((message) => (
-        <ToastItem
-          key={message.id}
-          message={message}
-          remove={() => removeToast(message.id)}
-        />
-      ))}
-    </div>
-  );
-};
-
-const ToastItem = ({
-  message,
-  remove,
-}: {
-  message: ToastMessage;
-  remove: () => void;
-}) => {
-  const elRef = useRef<HTMLDivElement>(null);
-
-  useGSAP(() => {
-    if (!elRef.current) return;
-
-    const tl = gsap.timeline({ onComplete: remove });
-    tl.from(elRef.current, {
-      opacity: 0,
-      y: 50,
-      ease: "power4.out",
-    });
-
-    tl.to(elRef.current, {
-      delay: 3,
-      y: 50,
-      opacity: 0,
-      ease: "power4.out",
-    });
-  }, []);
-
-  return (
-    <div
-      ref={elRef}
-      className={`toast-item ${message.status || "standard"}`}
-    >
-      <p>{message.message}</p>
-      {message.desc ? <p className="toast-desc">{message.desc}</p> : null}
-    </div>
-  );
-};

package/app/templates/Toast/toast.css

@@ -1,69 +0,0 @@
-.toast-container {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm-y);
-  bottom: 24px;
-  right: 24px;
-  z-index: 50;
-}
-
-.toast-item {
-  background-color: var(--toast-bg, var(--color-bg-card));
-  border: 1px solid var(--toast-border, var(--border-standard));
-  border-radius: var(--radius-common);
-  color: var(--toast-color, var(--text-standard));
-  padding: var(--spacing-common-x);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  min-width: 250px;
-}
-
-/* Status Variants */
-.toast-item.standard {
-  --toast-bg: var(--color-bg-card);
-  --toast-border: var(--border-standard);
-  --toast-color: var(--text-standard);
-}
-
-.toast-item.primary {
-  --toast-bg: var(--color-primary);
-  --toast-border: var(--color-primary);
-  --toast-color: var(--color-white);
-}
-
-.toast-item.secondary {
-  --toast-bg: var(--color-secondary);
-  --toast-border: var(--color-secondary);
-  --toast-color: var(--color-white);
-}
-
-.toast-item.success {
-  --toast-bg: var(--color-success);
-  --toast-border: var(--color-success);
-  --toast-color: var(--color-white);
-}
-
-.toast-item.danger,
-.toast-item.error {
-  --toast-bg: var(--color-danger);
-  --toast-border: var(--color-danger);
-  --toast-color: var(--color-white);
-}
-
-.toast-item.warning {
-  --toast-bg: var(--color-warning);
-  --toast-border: var(--color-warning);
-  --toast-color: var(--color-white);
-}
-
-.toast-item.info {
-  --toast-bg: var(--color-info);
-  --toast-border: var(--color-info);
-  --toast-color: var(--color-white);
-}
-
-.toast-desc {
-  font-size: var(--text-sm);
-  margin-top: var(--spacing-gap-small);
-  opacity: 0.9;
-}