atomsystem 0.1.47 → 0.1.49

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/Sidebar/Sidebar.tsx

@@ -1,139 +0,0 @@
-"use client"
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import gsap from 'gsap';
-import { useGSAP } from '@gsap/react';
-import { createContext, useContext, useRef, useState } from "react";
-
-// Icons
-import MenuIcon from '@mui/icons-material/Menu';
-
-gsap.registerPlugin(useGSAP); // register the hook to avoid React version discrepancies
-
-// Navigation을 베이스 interface로 정의
-export interface Sidebar {
-  children: React.ReactNode;
-  minWidth?: number
-}
-
-export interface NavLink {
-  children: React.ReactNode;
-  href: string;
-}
-
-interface SideContext {
-  isOpen: boolean;
-  setToggle: (open: boolean) => void;
-}
-
-const SideContext = createContext<SideContext | undefined>(undefined);
-
-const useSideContext = () => {
-  const context = useContext(SideContext);
-  if (!context) {
-    return { isOpen: false, setToggle: () => {} };
-  }
-  return context;
-}
-
-const SidebarProvider = ({ children }: { children: React.ReactNode }) => {
-  const [isOpen, setIsOpen] = useState(true);
-  const setToggle = (open: boolean) => setIsOpen(open);
-
-  return (
-    <SideContext.Provider value={{ isOpen, setToggle }}>
-      {children}
-    </SideContext.Provider>
-  );
-};
-
-const SidebarToggle = () => {
-  const { isOpen, setToggle } = useSideContext();
-  return (
-      <button className="cursor-pointer" onClick={() => setToggle(!isOpen)}><MenuIcon className="text-text-sub" sx={{fontSize: "20px"}}/></button>
-  )
-}
-
-const Sidebar = ({ children, minWidth }: Sidebar) => {
-  const { isOpen } = useSideContext();
-  const sidebarRef = useRef<HTMLDivElement>(null);
-
-  useGSAP(() => {
-    if (sidebarRef.current) {
-        if (isOpen) {
-            // 열릴 때: 나타나면서 제자리로
-            gsap.to(sidebarRef.current, { 
-                display: "flex",
-                opacity: 1, 
-                x: 0, 
-                width: minWidth, 
-                minWidth: minWidth,
-                duration: 0.3, 
-                ease: "power2.out" 
-            });
-        } else {
-            // 닫힐 때: 사라지면서 왼쪽으로, 너비도 0으로
-            gsap.to(sidebarRef.current, { 
-                opacity: 0, 
-                x: -20, 
-                width: 0, 
-                minWidth: 0,
-                duration: 0.3, 
-                ease: "power2.in",
-                onComplete: () => {
-                    gsap.set(sidebarRef.current, { display: "none" });
-                }
-            });
-        }
-    }
-  }, [isOpen]);
-
-
-  return (
-      <aside ref={sidebarRef} className={`nav-side flex flex-col overflow-auto h-full`} style={{ width: isOpen ? minWidth : 0, minWidth: isOpen ? minWidth : 0 }}>
-          {children}
-      </aside>
-    )
-}
-
-
-const SideNavBrand = ({children, href}: NavLink) => {
-  return (
-    <Link href={href} className="flex items-center">{children}</Link>
-  )
-}
-
-const SideNavList = ({children}: Sidebar) => {
-  return (
-    <ul className="nav-list flex flex-col">{children}</ul>
-  )
-}
-
-
-const SideNavItem = ({children}: Sidebar) => {
-  return (
-    <li>{children}</li>
-  )
-}
-
-const SideNavLink = ({children, href}: NavLink) => {
-  
-    const pathname = usePathname();
-    const active = pathname === href;
-
-  return (
-    <Link href={href} className={`nav-link text-nowrap ${active ? "active" : ""}`}>{children}</Link>
-  )
-}
-
-
-export {
-  Sidebar,
-  SidebarProvider,
-  SidebarToggle,
-  SideNavBrand,
-  SideNavList,
-  SideNavItem,
-  SideNavLink
-}

package/app/templates/Sidebar/sidebar.css

@@ -1,4 +0,0 @@
-.nav-side{
-    background-color: var(--bg-card);
-    border-right: 1px solid var(--border-standard);
-}

package/app/templates/TOC/TOC.tsx

@@ -1,165 +0,0 @@
-"use client";
-import { usePathname } from "next/navigation";
-import { useEffect, useState } from "react";
-import gsap from "gsap";
-import { ScrollToPlugin } from "gsap/ScrollToPlugin";
-
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(ScrollToPlugin);
-}
-
-type Heading = {
-  id: string;
-  text: string;
-  level: number;
-};
-
-export default function TOC() {
-  const [headings, setHeadings] = useState<Heading[]>([]);
-  const [activeId, setActiveId] = useState<string>("");
-  const [mounted, setMounted] = useState(false);
-
-  const pathname = usePathname();
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (!mounted) return;
-
-    const timer = setTimeout(() => {
-      /**
-       * Document에서 읽히는 h1, h2, h3 태그를 array 형태로 정의
-       * */
-      const headingElements = Array.from(
-        document.querySelectorAll("h1, h2, h3")
-      ) as HTMLHeadingElement[];
-
-      const usedIds = new Set<string>();
-      const generatedHeadings: Heading[] = headingElements.map((heading) => {
-        let finalId = heading.id;
-
-        // ID가 없거나 중복된 경우 새로 생성
-        if (!finalId || usedIds.has(finalId)) {
-          const baseId =
-            heading.textContent
-              ?.toLowerCase()
-              .trim()
-              .replace(/\s+/g, "-")
-              .replace(/[^\w\-가-힣]+/g, "") || "heading";
-          
-          finalId = baseId;
-          let counter = 1;
-          while (usedIds.has(finalId)) {
-            finalId = `${baseId}-${counter}`;
-            counter++;
-          }
-          heading.id = finalId;
-        }
-
-        usedIds.add(finalId);
-
-        return {
-          id: finalId,
-          text: heading.textContent || "",
-          level: parseInt(heading.tagName.replace("H", "")),
-        };
-      });
-
-      setHeadings(generatedHeadings);
-    }, 100); // 딜레이를 약간 주어 DOM이 완전히 안정화된 후 실행
-
-    return () => clearTimeout(timer);
-  }, [pathname, mounted]); // 페이지 변경사항이 있거나 마운트된 경우 실행
-
-  useEffect(() => {
-    if (!mounted || headings.length === 0) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const visibleEntries = entries.filter((entry) => entry.isIntersecting);
-        
-        if (visibleEntries.length > 0) {
-          // 뷰포트 상단에 가장 가까운 요소를 찾아 활성화
-          const topVisible = visibleEntries.reduce((prev, curr) => 
-            curr.boundingClientRect.top < prev.boundingClientRect.top ? curr : prev
-          );
-          setActiveId(topVisible.target.id);
-        }
-      },
-      {
-        // 상단 10% ~ 20% 지점을 타겟으로 감지
-        rootMargin: "-10% 0% -80% 0%",
-        threshold: 0,
-      }
-    );
-
-    headings.forEach((heading) => {
-      const el = document.getElementById(heading.id);
-      if (el) observer.observe(el);
-    });
-
-    return () => observer.disconnect();
-  }, [headings, mounted]);
-
-  if (!mounted) {
-    return <nav className="space-y-2 flex flex-col min-h-[100px]" />;
-  }
-
-  return (
-    <nav className="flex flex-col space-y-1 border-l border-border-standard ml-2 py-1">
-      <div className="text-[10px] font-bold text-text-sub/60 uppercase tracking-widest mb-3 px-4">
-        On this page
-      </div>
-      {headings.length > 0 ? (
-        headings.map((heading, idx) => {
-          const isActive = activeId === heading.id;
-          return (
-            <a
-              key={`${heading.id}-${idx}`}
-              href={`#${heading.id}`}
-              style={{ paddingLeft: `${(heading.level - 1) * 12 + 16}px` }}
-              className={`text-xs py-1.5 pr-4 border-l-2 transition-all duration-200 ease-in-out ${
-                isActive
-                  ? "text-primary bg-primary/5 border-primary font-medium"
-                  : "text-text-sub border-transparent hover:text-primary hover:bg-primary/5 hover:border-primary/30"
-              }`}
-              onClick={(e) => {
-                e.preventDefault();
-                const element = document.getElementById(heading.id);
-                if (element) {
-                  // GSAP scrollTo를 사용하여 부드럽게 이동
-                  // element.closest('.overflow-auto') 등을 통해 스크롤 컨테이너를 찾습니다.
-                  const container = element.closest('.overflow-auto') || window;
-                  
-                  gsap.to(container, {
-                    duration: 0.8,
-                    scrollTo: {
-                      y: element,
-                      offsetY: 80, // 상단 여백
-                      autoKill: true
-                    },
-                    ease: "power2.inOut"
-                  });
-                  
-                  // 클릭 시 즉시 활성화 상태 업데이트
-                  setActiveId(heading.id);
-                  
-                  // URL 해시 업데이트
-                  window.history.pushState(null, "", `#${heading.id}`);
-                }
-              }}
-            >
-              {heading.text}
-            </a>
-          );
-        })
-      ) : (
-        <div className="px-4 text-[10px] text-text-sub/40 italic mt-2">
-          목차를 찾을 수 없습니다
-        </div>
-      )}
-    </nav>
-  );
-}