atomsystem 0.1.41 → 0.1.42

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/package.json

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