atomsystem 0.1.47 → 0.1.49

package/app/templates/Collapse/Collapse.tsx

@@ -1,207 +0,0 @@
-"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

@@ -1,24 +0,0 @@
-.collapse-item {
-  border-top: 1px solid var(--border-standard);
-  background-color: var(--color-bg-card);
-}
-
-.collapse-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  padding: var(--spacing-common-x);
-  color: var(--text-standard);
-  font-size: var(--text-body);
-}
-
-.collapse-icon {
-  color: var(--text-standard);
-  display: inline-block; /* 회전 중심을 위해 적용 */
-}
-
-.collapse-content {
-  color: var(--text-standard);
-  font-size: var(--text-body);
-}

package/app/templates/Dropdown/Dropdown.css

@@ -1,112 +0,0 @@
-.dropdown-container {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown-trigger {
-  cursor: pointer;
-  display: flex;
-}
-
-.dropdown-content {
-  position: absolute;
-  z-index: 100;
-  background-color: var(--bg-card);
-  border: 1px solid var(--border-standard);
-  border-radius: 12px;
-  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 15px -6px rgba(0, 0, 0, 0.08);
-  padding: 1rem;
-  min-width: 200px;
-  opacity: 0;
-  visibility: hidden;
-  transform: scale(0.95) translateY(10px);
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  pointer-events: none;
-  background-clip: padding-box;
-}
-
-.dropdown-content.is-open {
-  opacity: 1;
-  visibility: visible;
-  transform: scale(1) translateY(0);
-  pointer-events: auto;
-}
-
-/* Positions with directional scaling */
-.dropdown-content.bottom-right {
-  top: 100%;
-  right: 0;
-  margin-top: 12px;
-  transform-origin: top right;
-}
-
-.dropdown-content.bottom-left {
-  top: 100%;
-  left: 0;
-  margin-top: 12px;
-  transform-origin: top left;
-}
-
-.dropdown-content.top-right {
-  bottom: 100%;
-  right: 0;
-  margin-bottom: 12px;
-  transform-origin: bottom right;
-}
-
-.dropdown-content.top-left {
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 12px;
-  transform-origin: bottom left;
-}
-
-/* Premium Blur and Dark Mode Polish */
-@supports (backdrop-filter: blur(20px)) {
-  .dropdown-content {
-    background-color: rgba(var(--dropdown-bg, 255, 255, 255), 0.85);
-    backdrop-filter: blur(20px);
-  }
-}
-
-.dark .dropdown-content {
-  --dropdown-bg: 34, 34, 34;
-  background-color: rgba(34, 34, 34, 0.85);
-  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.4), 0 10px 20px -5px rgba(0, 0, 0, 0.3);
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-gap-small);
-  padding: var(--spacing-sm-y, 8px) var(--spacing-common-x);
-  border-radius: var(--radius-common);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: 1px solid transparent;
-  color: var(--text-standard);
-}
-
-
-.dropdown-item:hover {
-  background-color: var(--color-gray-100);
-  border-color: var(--color-gray-200);
-}
-
-.dark .dropdown-item:hover {
-  background-color: var(--color-dark-400);
-  border-color: var(--color-dark-500);
-}
-
-.dropdown-item:active {
-  background-color: var(--color-gray-200);
-  transform: scale(0.98);
-}
-
-.dark .dropdown-item:active {
-  background-color: var(--color-dark-500);
-}
-
-
-

package/app/templates/Dropdown/Dropdown.tsx

@@ -1,103 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import clsx from "clsx";
-import "./Dropdown.css";
-
-type DropdownPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
-
-interface DropdownProps {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  contentClassName?: string;
-  position?: DropdownPosition;
-  isOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}
-
-export const Dropdown = ({
-  trigger,
-  children,
-  className,
-  contentClassName,
-  position = "bottom-right",
-  isOpen: controlledIsOpen,
-  onOpenChange,
-}: DropdownProps) => {
-  const [internalIsOpen, setInternalIsOpen] = useState(false);
-  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
-  
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const toggle = () => {
-    const nextValue = !isOpen;
-    if (controlledIsOpen === undefined) {
-      setInternalIsOpen(nextValue);
-    }
-    onOpenChange?.(nextValue);
-  };
-
-  const close = () => {
-    if (controlledIsOpen === undefined) {
-      setInternalIsOpen(false);
-    }
-    onOpenChange?.(false);
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        close();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-
-  return (
-    <div className={clsx("dropdown-container", className)} ref={dropdownRef}>
-      <div className="dropdown-trigger" onClick={toggle}>
-        {trigger}
-      </div>
-      <div
-        className={clsx(
-          "dropdown-content",
-          position,
-          isOpen && "is-open",
-          contentClassName
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export const DropdownItem = ({
-  children,
-  className,
-  onClick,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  onClick?: () => void;
-}) => {
-  return (
-    <div 
-      className={clsx("dropdown-item", className)} 
-      onClick={onClick}
-    >
-      {children}
-    </div>
-  );
-};
-