atomsystem 0.1.48 → 0.1.50

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;
-}

package/app/templates/Navigation/Navigation.tsx

@@ -1,169 +0,0 @@
-"use client"
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import gsap from 'gsap';
-import { useGSAP } from '@gsap/react';
-import { useRef, createContext, useContext, useState } from "react";
-
-// Icons
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-
-
-gsap.registerPlugin(useGSAP); // register the hook to avoid React version discrepancies
-
-// Navigation을 베이스 interface로 정의
-export interface Navigation {
-  children: React.ReactNode;
-}
-
-export interface NavLink extends Navigation {
-  href: string;
-}
-
-/**
- * NavContextProps: 네비게이션 상태를 하위 컴포넌트와 공유하기 위한 인터페이스
- * - isOpen: 메뉴가 열려 있는지 여부
- * - setOpen: 메뉴 상태를 변경하는 함수
- */
-interface NavContextProps {
-  isOpen: boolean;
-  setOpen: (open: boolean) => void;
-}
-
-// NavContext: 상위 NavItem의 상태를 하 하위 NavTrigger와 NavContainer에 전달하는 통로(우체국)
-const NavContext = createContext<NavContextProps | undefined>(undefined);
-
-/**
- * useNavContext: Context 정보를 쉽고 안전하게 꺼내 쓰기 위한 전용 커스텀 훅
- * - 부모인 NavItem이 없을 경우(undefined)에도 에러가 나지 않도록 기본값을 반환하는 안전 장치 포함
- */
-const useNavContext = () => {
-  const context = useContext(NavContext);
-  if (!context) {
-    // 부모를 찾지 못했을 때 앱이 멈추지 않도록 기본 상태 반환
-    return { isOpen: false, setOpen: () => {} };
-  }
-  return context;
-};
-
-// 최상위 Navigation 레이아웃 컴포넌트
-const Navigation = ({ children }: Navigation) => {
-  return (
-        <nav className="nav-menu flex items-center justify-between">
-            {children}
-        </nav>
-    )
-}
-
-// 로고나 브랜드명을 위한 컴포넌트
-const NavBrand = ({children, href}: NavLink) => {
-  return (
-    <Link href={href} className="flex items-center h-full font-bold text-xl">{children}</Link>
-  )
-}
-
-/**
- * NavItem: 개별 메뉴 항목 및 서브 메뉴의 상태를 관리하는 부모 컨테이너
- * - 각각의 NavItem은 자신만의 isOpen 상태를 독립적으로 가짐
- */
-const NavItem = ({children}: Navigation) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const setOpen = (open: boolean) => setIsOpen(open);
-
-  // 마우스가 메뉴 전체 영역을 완전히 벗어날 때 호출 (메뉴 닫기)
-  const handleMouseLeave = () => setIsOpen(false);
-
-  return (
-    <NavContext.Provider value={{ isOpen, setOpen }}>
-      <li 
-        className={`nav-item`}
-        onMouseLeave={handleMouseLeave}
-      >
-        {children}
-      </li>
-    </NavContext.Provider>
-  )
-}
-
-// 메뉴 항목들을 가로로 정렬해주는 리스트 컨테이너
-const NavList = ({children}: Navigation) => {
-  return (
-    <ul className="flex items-center gap-0">{children}</ul>
-  )
-}
-
-// 일반적인 링크 메뉴 컴포넌트
-const NavLink = ({children, href}: NavLink) => {
-  const pathname = usePathname();
-  const active = pathname === href;
-
-  return (
-    <Link href={href} className={`nav-link ${active ? "active" : ""}`}>{children}</Link>
-  )
-}
-
-/**
- * NavTrigger: 서브 메뉴를 여는 트리거 버튼
- * - 마우스를 올렸을 때(onMouseEnter) 부모 NavItem의 상태를 열림(true)으로 변경
- */
-const NavTrigger = ({children}: Navigation) => {
-    const { isOpen, setOpen } = useNavContext();
-    
-    // 트리거 영역에 진입했을 때만 메뉴 열기 실행
-    const handleMouseEnter = () => setOpen(true);
-
-    return (
-        <div 
-            className="nav-link flex items-center gap-1"
-            onMouseEnter={handleMouseEnter}
-        >
-            {children}
-            {/* 상태에 따라 화살표 아이콘 회전 애니메이션 클래스 적용 */}
-            <KeyboardArrowDownIcon className={`nav-arrow ${isOpen ? "open" : ""}`} />
-        </div>
-    )
-}
-
-/**
- * NavContainer: 서브 메뉴의 실제 내용물이 담기는 컨테이너
- * - GSAP을 사용하여 나타날 때 부드러운 애니메이션 효과 적용
- */
-const NavContainer = ({children}: Navigation) => {
-    const { isOpen } = useNavContext();
-    const containerContentRef = useRef<HTMLUListElement>(null);
-
-    // 메뉴가 열릴 때 실행되는 GSAP 애니메이션
-    useGSAP(() => {
-        if (isOpen && containerContentRef.current) {
-            gsap.fromTo(containerContentRef.current, 
-                { opacity: 0, y: -10 },      // 시작 상태: 투명하고 살짝 위쪽
-                { opacity: 1, y: 0, duration: 0.2, ease: "power2.out" } // 도착 상태: 불투명하고 제자리
-            );
-        }
-    }, [isOpen]);
-    
-
-    // 닫혀 있을 때는 아예 렌더링하지 않음
-    if (!isOpen) return null;
-
-    return (
-        <div className="nav-container">
-          {/* 실제 박스 형태를 가진 내부 리스트 */}
-          <ul ref={containerContentRef} className="nav-content">
-            {children}
-          </ul>
-        </div>
-    )
-}
-
-
-export {
-  Navigation,
-  NavBrand,
-  NavList,
-  NavItem,
-  NavLink,
-  NavTrigger,
-  NavContainer
-}

package/app/templates/Navigation/navigation.css

@@ -1,59 +0,0 @@
-.nav-menu{
-    background-color: var(--bg-card);
-    padding: 0 var(--spacing-common-x);
-    border-bottom: 1px solid var(--border-standard);
-    position: relative;
-}
-
-.nav-item{
-    display: block;
-    border-radius: var(--radius-common);
-    padding: var(--spacing-common-y) 0;
-    color: var(--text-standard); 
-}
-
-
-.nav-link{
-    display: block;
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    border-radius: var(--radius-common);
-    cursor: pointer;
-}
-
-.nav-link:hover{
-    background-color: var(--bg-hover);
-}
-
-.nav-link.active{
-    color: var(--color-primary);
-}
-
-.nav-container {
-    position: absolute;
-    padding: var(--spacing-common-y) 0;
-    top: 100%; 
-    left: 0;
-    right: 0;
-    width: 100%;
-    z-index: 100;
-}
-
-.nav-content {
-    display: flex;
-    width: 100%;
-    flex-wrap: wrap;
-    gap: var(--spacing-common-x);
-    background-color: var(--bg-card);
-    border: 1px solid var(--border-standard);
-    border-radius: var(--radius-common);
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    box-shadow: var(--shadow-standard);
-}
-
-.nav-arrow {
-    transition: transform 0.2s ease;
-}
-
-.nav-arrow.open {
-    transform: rotate(180deg);
-}

package/app/templates/Pagination/Pagination.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-const Pagination = ({
-  pageRange,
-  pageViewRange,
-  totalCount,
-  pageTotal,
-  currentPage,
-  onPageChange,
-}: {
-  currentPage: number;
-  onPageChange: (page: number) => void;
-  /**  페이지당 데이터 개수 정보를 받습니다. */
-  pageViewRange: number;
-  /**  페이지네이션을 보여줄 최대 개수정보를 받습니다. */
-  pageRange: number;
-  /** 데이터의 총 개수를 받아 페이지당 데이터 개수로 나누어 총 페이지네이션 정보를 계산합니다. */
-  totalCount?: number;
-  /** 전체 페이지네이션의 토탈 정보를 받습니다. */
-  pageTotal?: number;
-}) => {
-  const totalPages = pageTotal
-    ? pageTotal
-    : totalCount
-      ? Math.ceil(totalCount / pageViewRange)
-      : 0;
-  const [pageStart, setPageStart] = useState(1);
-  const scrollTop = () => {
-    setTimeout(() => {
-      window.scrollTo({ top: 0, behavior: "smooth" });
-    }, 0);
-  };
-
-  return (
-    <div className="pagination">
-      <button
-        disabled={pageStart === 1}
-        onClick={() => {
-          scrollTop();
-          const newStart = Math.max(1, pageStart - pageRange);
-          setPageStart(newStart);
-          onPageChange(newStart);
-        }}
-        className="pagination-btn"
-      >
-        <span className="material-symbols-outlined">keyboard_arrow_left</span>
-      </button>
-      <ul className="pagination-list">
-        {[...Array(pageRange)].map((_, i) => {
-          const page = pageStart + i;
-
-          const isFirstIndex = i === 0;
-          const isLastIndex = i === pageRange - 1;
-          const isLastPageInRange = page === totalPages;
-
-          if (page > totalPages) return null;
-
-          return (
-            <li
-              key={page}
-              onClick={() => {
-                onPageChange(page);
-
-                // 첫 번째 인덱스 클릭 시 이전 범위로
-                if (isFirstIndex && pageStart > 1) {
-                  setPageStart(Math.max(1, pageStart - pageRange + 1));
-                }
-
-                // 마지막 인덱스 클릭 시 다음 범위로
-                if (isLastIndex && !isLastPageInRange) {
-                  setPageStart(pageStart + pageRange - 1);
-                }
-                scrollTop();
-              }}
-              className={`pagination-item ${
-                currentPage === page ? "pagination-item-active" : ""
-              }`}
-            >
-              {page}
-            </li>
-          );
-        })}
-      </ul>
-      <button
-        disabled={pageStart + pageRange > totalPages}
-        onClick={() => {
-          scrollTop();
-          const newStart = pageStart + pageRange;
-          if (newStart <= totalPages) {
-            setPageStart(newStart);
-            onPageChange(newStart);
-          }
-        }}
-        className="pagination-btn"
-      >
-        <span className="material-symbols-outlined">keyboard_arrow_right</span>
-      </button>
-    </div>
-  );
-};
-
-export default Pagination;

package/app/templates/Pagination/pagination.css

@@ -1,66 +0,0 @@
-.pagination {
-  display: flex;
-  align-items: center;
-  color: var(--color-text-standard);
-}
-
-.pagination-btn {
-  padding: var(--spacing-common-y) var(--spacing-common-x);
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-common);
-  color: inherit;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pagination-btn:hover:not(:disabled) {
-  background-color: var(--color-pagination-bg-hover);
-  color: var(--color-primary);
-}
-
-.pagination-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  color: var(--color-text-disabled);
-}
-
-.pagination-list {
-  display: flex;
-  width: 100%;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.pagination-item {
-  flex: 1; /* w-full behavior mapped */
-  text-align: center;
-  padding: var(--spacing-common-y) var(--spacing-common-x);
-  cursor: pointer;
-  color: inherit;
-  border-radius: var(--radius-common);
-  transition: all 0.2s ease;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pagination-item:hover {
-  background-color: var(--color-pagination-bg-hover);
-  color: var(--color-primary);
-}
-
-.pagination-item-active {
-  color: var(--color-primary);
-  font-weight: var(--font-weight-header);
-}
-
-.pagination-item-active:hover {
-  background-color: transparent; /* Reset hover if it's the active one */
-  cursor: default;
-}

package/app/templates/Radio/Radio.tsx

@@ -1,45 +0,0 @@
-"use client";
-import clsx from "clsx";
-import "./radio.css";
-
-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 cursor-pointer">
-        <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(--color-bg-input-standard)] after:content-[''] after:absolute after:rounded-full after:left-1 after:top-1":
-                true,
-            },
-            className
-          )}
-          name={name}
-          onChange={onChange}
-          defaultChecked={defaultChecked}
-          checked={checked}
-        />
-        <span>{value}</span>
-      </label>
-    </>
-  );
-};

package/app/templates/Radio/radio.css

@@ -1,29 +0,0 @@
-.radio{
-    position: relative;
-    width: var(--spacing-small);
-    height: var(--spacing-small);  
-    border: 1px solid var(--color-border-standard);
-    background: var(--color-bg-input-standard);
-    color: var(--color-bg-input-standard);
-    cursor: pointer;
-}
-
-.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);
-}
-
-.radio:disabled {
-    background: var(--color-bg-input-disabled);
-    cursor: not-allowed;
-}