atomsystem 0.1.41 → 0.1.43

package/app/templates/Collapse/Collapse.tsx

@@ -1,115 +1,207 @@
-"use client";
-
-import { useState } from "react";
-
-export const Collapse = ({
-  type = "collapse",
-  collapses,
-}: {
-  type?: "accordion" | "collapse";
-  collapses: { title: string; content: string }[];
-}) => {
-  const [activeIndex, setActiveIndex] = useState<number | number[] | null>(
-    type === "collapse" ? [] : null
-  );
-
-  const toggleContent = (idx: number) => {
-    if (type === "accordion") {
-      setActiveIndex((prev) => (prev === idx ? null : idx));
-    } else {
-      setActiveIndex((prev) => {
-        const current = prev as number[];
-        return current.includes(idx)
-          ? current.filter((i) => i !== idx) // 닫기
-          : [...current, idx]; // 열기
-      });
-    }
-  };
-
-  const isActive = (idx: number) => {
-    return type === "accordion"
-      ? activeIndex === idx
-      : (activeIndex as number[]).includes(idx);
-  };
-
-  return (
-    <>
-      {collapses.map((collapse, idx) => (
-        <div key={idx} className="collapse-item">
-          <label className="collapse-header">
-            {collapse.title}
-            <button
-              onClick={() => toggleContent(idx)}
-              className={`material-symbols-outlined collapse-icon ${
-                isActive(idx) ? "open" : "closed"
-              }`}
-            >
-              keyboard_arrow_right
-            </button>
-          </label>
-          {isActive(idx) && (
-            <div className="collapse-content">
-              {collapse.content}
-            </div>
-          )}
-        </div>
-      ))}
-    </>
-  );
-};
-
-export const NodeCollapse = ({
-  type = "collapse",
-  collapses,
-}: {
-  type?: "accordion" | "collapse";
-  collapses: { title: React.ReactNode; content: React.ReactNode }[];
-}) => {
-  const [activeIndex, setActiveIndex] = useState<number | number[] | null>(
-    type === "collapse" ? [] : null
-  );
-
-  const toggleContent = (idx: number) => {
-    if (type === "accordion") {
-      setActiveIndex((prev) => (prev === idx ? null : idx));
-    } else {
-      setActiveIndex((prev) => {
-        const current = prev as number[];
-        return current.includes(idx)
-          ? current.filter((i) => i !== idx) // 닫기
-          : [...current, idx]; // 열기
-      });
-    }
-  };
-
-  const isActive = (idx: number) => {
-    return type === "accordion"
-      ? activeIndex === idx
-      : (activeIndex as number[]).includes(idx);
-  };
-
-  return (
-    <>
-      {collapses.map((collapse, idx) => (
-        <div key={idx} className="collapse-item">
-          <label className="collapse-header">
-            {collapse.title}
-            <button
-              onClick={() => toggleContent(idx)}
-              className={`material-symbols-outlined collapse-icon ${
-                isActive(idx) ? "open" : "closed"
-              }`}
-            >
-              keyboard_arrow_right
-            </button>
-          </label>
-          {isActive(idx) && (
-            <div className="collapse-content">
-              {collapse.content}
-            </div>
-          )}
-        </div>
-      ))}
-    </>
-  );
-};
+"use client";
+
+import { createContext, useContext, useState, ReactNode, useRef } from "react";
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+
+gsap.registerPlugin(useGSAP);
+
+// Types
+export interface CollapseProps {
+  children: ReactNode;
+  type?: "accordion" | "collapse";
+  defaultActiveKeys?: (string | number)[];
+}
+
+interface CollapseContextValue {
+  type: "accordion" | "collapse";
+  activeKeys: Set<string | number>;
+  toggle: (key: string | number) => void;
+}
+
+const CollapseContext = createContext<CollapseContextValue | undefined>(undefined);
+
+const useCollapseContext = () => {
+  const context = useContext(CollapseContext);
+  if (!context) {
+    return { type: "collapse" as const, activeKeys: new Set<string | number>(), toggle: () => {} };
+  }
+  return context;
+};
+
+// Provider
+const CollapseProvider = ({ 
+  children, 
+  type = "collapse", 
+  defaultActiveKeys = [] 
+}: CollapseProps) => {
+  const [activeKeys, setActiveKeys] = useState<Set<string | number>>(new Set(defaultActiveKeys));
+
+  const toggle = (key: string | number) => {
+    setActiveKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        if (type === "accordion") {
+          next.clear();
+        }
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <CollapseContext.Provider value={{ type, activeKeys, toggle }}>
+      {children}
+    </CollapseContext.Provider>
+  );
+};
+
+// Root Container
+const Collapse = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return <div className={`collapse-group ${className || ""}`}>{children}</div>;
+};
+
+// Item Context for child components
+const ItemContext = createContext<{ value: string | number } | undefined>(undefined);
+const useItemContext = () => {
+  const context = useContext(ItemContext);
+  if (!context) throw new Error("Collapse sub-components must be used within CollapseItem");
+  return context;
+};
+
+const CollapseItem = ({ 
+  value, 
+  children, 
+  className 
+}: { 
+  value: string | number; 
+  children: ReactNode; 
+  className?: string;
+}) => {
+  const { activeKeys } = useCollapseContext();
+  const isOpen = activeKeys.has(value);
+
+  return (
+    <ItemContext.Provider value={{ value }}>
+      <div 
+        className={`collapse-item ${isOpen ? "open" : "closed"} ${className || ""}`}
+        data-state={isOpen ? "open" : "closed"}
+      >
+        {children}
+      </div>
+    </ItemContext.Provider>
+  );
+};
+
+const CollapseHeader = ({ 
+  children, 
+  className 
+}: { 
+  children: ReactNode; 
+  className?: string;
+}) => {
+  const { value } = useItemContext();
+  const { activeKeys, toggle } = useCollapseContext();
+  const isOpen = activeKeys.has(value);
+  const iconRef = useRef<HTMLSpanElement>(null);
+
+  useGSAP(() => {
+    if (iconRef.current) {
+      gsap.to(iconRef.current, {
+        rotation: isOpen ? 90 : 0,
+        duration: 0.4,
+        ease: "power2.inOut",
+        overwrite: true
+      });
+    }
+  }, [isOpen]);
+
+  return (
+    <div 
+      className={`collapse-header cursor-pointer flex items-center justify-between ${className || ""}`} 
+      onClick={() => toggle(value)}
+    >
+      {children}
+      <span
+        ref={iconRef}
+        className="material-symbols-outlined collapse-icon"
+      >
+        keyboard_arrow_right
+      </span>
+    </div>
+  );
+};
+
+const CollapseContent = ({ 
+  children, 
+  className 
+}: { 
+  children: ReactNode; 
+  className?: string;
+}) => {
+  const { value } = useItemContext();
+  const { activeKeys } = useCollapseContext();
+  const isOpen = activeKeys.has(value);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(() => {
+    if (!contentRef.current) return;
+
+    if (isOpen) {
+      // 열기: 현재 높이가 0이거나 display: none인 상태에서도 부드럽게 시작할 수 있도록 처리
+      gsap.fromTo(contentRef.current, 
+        { height: 0, opacity: 0, display: "block" },
+        {
+          height: "auto",
+          opacity: 1,
+          duration: 0.4,
+          ease: "power2.out",
+          overwrite: true,
+          onComplete: () => {
+            // 애니메이션 완료 후 height를 auto로 고정하여 반응형 대응
+            if (contentRef.current) {
+              gsap.set(contentRef.current, { clearProps: "height" });
+            }
+          }
+        }
+      );
+    } else {
+      // 닫기
+      gsap.to(contentRef.current, {
+        height: 0,
+        opacity: 0,
+        duration: 0.3,
+        ease: "power2.inOut",
+        overwrite: true,
+        onComplete: () => {
+          if (contentRef.current && !isOpen) {
+            gsap.set(contentRef.current, { display: "none" });
+          }
+        }
+      });
+    }
+  }, [isOpen]);
+
+  return (
+    <div 
+      ref={contentRef}
+      className={`collapse-content overflow-hidden ${className || ""}`}
+      style={{ height: 0, opacity: 0, display: "none" }}
+    >
+      <div style={{ padding: "var(--spacing-common-x)" }}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export {
+  Collapse,
+  CollapseProvider,
+  CollapseItem,
+  CollapseHeader,
+  CollapseContent
+};

package/app/templates/Collapse/collapse.css

@@ -14,20 +14,11 @@
 }
 
 .collapse-icon {
-  transition: transform 0.3s ease;
   color: var(--text-standard);
-}
-
-.collapse-icon.open {
-  transform: rotate(90deg);
-}
-
-.collapse-icon.closed {
-  transform: rotate(0deg);
+  display: inline-block; /* 회전 중심을 위해 적용 */
 }
 
 .collapse-content {
-  padding: var(--spacing-common-x);
   color: var(--text-standard);
   font-size: var(--text-body);
 }

package/app/templates/TOC/TOC.tsx

@@ -1,6 +1,12 @@
 "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;
@@ -10,10 +16,18 @@ type Heading = {
 
 export default function TOC() {
   const [headings, setHeadings] = useState<Heading[]>([]);
+  const [activeId, setActiveId] = useState<string>("");
+  const [mounted, setMounted] = useState(false);
 
-  const pathname = usePathname(); // ✅ 페이지 경로 추적
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   useEffect(() => {
+    if (!mounted) return;
+
     const timer = setTimeout(() => {
       /**
        * Document에서 읽히는 h1, h2, h3 태그를 array 형태로 정의
@@ -22,42 +36,130 @@ export default function TOC() {
         document.querySelectorAll("h1, h2, h3")
       ) as HTMLHeadingElement[];
 
+      const usedIds = new Set<string>();
       const generatedHeadings: Heading[] = headingElements.map((heading) => {
-        // id가 없으면 자동 생성
-        if (!heading.id) {
-          heading.id =
+        let finalId = heading.id;
+
+        // ID가 없거나 중복된 경우 새로 생성
+        if (!finalId || usedIds.has(finalId)) {
+          const baseId =
             heading.textContent
               ?.toLowerCase()
+              .trim()
               .replace(/\s+/g, "-")
-              .replace(/[^\w\-가-힣]+/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: heading.id,
+          id: finalId,
           text: heading.textContent || "",
           level: parseInt(heading.tagName.replace("H", "")),
         };
       });
 
       setHeadings(generatedHeadings);
-    }, 50);
+    }, 100); // 딜레이를 약간 주어 DOM이 완전히 안정화된 후 실행
 
     return () => clearTimeout(timer);
-  }, [pathname]); // 페이지 변경사항이 있다면 목차 재정의
+  }, [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="space-y-2 flex flex-col">
-      {headings.map((heading, idx) => {
-        return (
-          <a
-            key={`${heading.id}-${idx}`}
-            href={`#${heading.id}`}
-            style={{ marginLeft: `${(heading.level - 1) * 8}px` }}
-          >
-            {heading.text}
-          </a>
-        );
-      })}
+    <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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atomsystem",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "type": "module",
   "homepage": "https://system.atomground.com",
   "bin": {