atomsystem 0.1.42 → 0.1.44

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/dist/index.js

@@ -41,7 +41,9 @@ var logger = {
 };
 
 // src/commands/add.ts
-var templateDir = path2.join(process.cwd(), "app", "templates");
+var isBuilt = path2.basename(__dirname) === "dist" || fs.existsSync(path2.join(__dirname, "index.js"));
+var baseDir = isBuilt ? path2.join(__dirname, "..") : path2.join(__dirname, "..", "..");
+var templateDir = path2.join(baseDir, "app", "templates");
 var components = [
   "Button",
   "Badge",
@@ -217,6 +219,15 @@ var init = new Command2().name("init").description("\uD504\uB85C\uC81D\uD2B8\uB9
         logger.error(err);
         return;
       }
+      const gsSpinner = ora("gsap Animation \uC124\uCE58 \uC911...").start();
+      try {
+        await execPromise("npm install gsap", { cwd: projectRoot });
+        gsSpinner.succeed("gsap Animation \uC124\uCE58 \uC644\uB8CC!");
+      } catch (err) {
+        gsSpinner.fail("gsap Animation \uC124\uCE58 \uC911 \uC624\uB958 \uBC1C\uC0DD");
+        logger.error(err);
+        return;
+      }
       try {
         const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf8"));
         packageJson.type = "module";
@@ -356,9 +367,11 @@ export default config;`
         }
       }
     }
-    const tokenFile = path3.join(__dirname, "..", "..", "tokens", "tokens.json");
-    const buildFile = path3.join(__dirname, "..", "..", "build", "build-tokens.js");
-    const textCssFile = path3.join(__dirname, "..", "..", "css", "text.css");
+    const isBuilt2 = path3.basename(__dirname) === "dist" || fs2.existsSync(path3.join(__dirname, "index.js"));
+    const baseDir2 = isBuilt2 ? path3.join(__dirname, "..") : path3.join(__dirname, "..", "..");
+    const tokenFile = path3.join(baseDir2, "tokens", "tokens.json");
+    const buildFile = path3.join(baseDir2, "build", "build-tokens.js");
+    const textCssFile = path3.join(baseDir2, "css", "text.css");
     copyFile(tokenFile, path3.join(projectRoot, "tokens", "tokens.json"));
     copyFile(buildFile, path3.join(projectRoot, "build", "build-tokens.js"));
     copyFile(textCssFile, path3.join(projectRoot, "css", "text.css"));

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "atomsystem",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "type": "module",
   "homepage": "https://system.atomground.com",
   "bin": {
     "atomsystem": "dist/index.js"
   },
   "files": [
+    "dist",
     "tokens",
     "tailwind.config.ts",
     "build",