atomsystem 0.1.48 → 0.1.50

package/app/templates/Select/Select.tsx

@@ -1,143 +0,0 @@
-"use client";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import "./select.css";
-
-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"
-        >
-          <span className="material-symbols-outlined">
-            <span className="text-base">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>
-  );
-};

package/app/templates/Select/select.css

@@ -1,47 +0,0 @@
-.select{
-    background: var(--color-bg-input-standard);
-    border: 1px solid var(--color-border-standard);   
-    color: var(--color-text-standard);
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    border-radius: var(--radius-common);
-    width: 100%;
-    outline: none;
-    cursor: pointer;
-}
-.select:focus{
-    border: 1px solid var(--color-border-active);   
-}
-
-.select:disabled{
-    background: var(--color-bg-input-disabled);
-    border: 1px solid var(--color-border-standard);   
-    color: var(--color-text-disabled);
-    cursor: not-allowed;
-}
-
-.select-menu {
-    border: 1px solid var(--color-border-active);   
-    border-radius: var(--radius-common);
-    overflow:hidden;
-    z-index: 9999;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    background: var(--color-bg-input-standard);
-}
-
-.select-menu .select-menu-item {
-    background: var(--color-bg-input-standard);   
-    color: var(--color-text-standard);
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    cursor:pointer;
-    list-style: none;
-}
-
-.select-menu .select-menu-item:hover {
-    background: var(--color-bg-input-hover);
-}
-
-.select-menu .select-menu-item:active,
-.select-menu .select-menu-item:focus  {
-    background: var(--color-primary);
-    color: var(--color-text-active);
-}

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

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