atomsystem 0.1.48 → 0.1.50

package/app/templates/Animations/Animation.tsx

@@ -1,282 +0,0 @@
-"use client";
-import { ReactNode, useEffect, useRef, useState } from "react";
-import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { ScrollToPlugin } from "gsap/ScrollToPlugin";
-import { useGSAP } from "@gsap/react";
-
-gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, useGSAP);
-
-export const UpAnimation = ({
-  children,
-  trigger,
-  toggleActions = "play none reverse none",
-  overflow = "overflow-hidden",
-  stagger,
-  className,
-  markers,
-  AnimationContainer,
-}: {
-  children: ReactNode;
-  trigger?: string | HTMLElement;
-  toggleActions?: string;
-  overflow?: string;
-  className?: string;
-  stagger?: boolean;
-  markers?: boolean;
-  AnimationContainer?: gsap.core.Animation | undefined;
-}) => {
-  const animationRef = useRef<HTMLDivElement>(null);
-
-  useGSAP(
-    () => {
-      if (!animationRef.current) return;
-
-      const target = stagger
-        ? animationRef.current.children
-        : animationRef.current;
-
-      gsap.set(target, { y: 500, opacity: 0 }); // 초기 상태 설정
-
-      gsap.fromTo(
-        target,
-        {
-          y: 500,
-          opacity: 0,
-        },
-        {
-          y: 0,
-          opacity: 1,
-          stagger: 0.2,
-          duration: 3,
-          ease: "power4.out",
-          scrollTrigger: {
-            trigger: trigger ? trigger : animationRef.current,
-            start: "top center",
-            end: "bottom bottom",
-            toggleActions: toggleActions,
-            markers: markers,
-            invalidateOnRefresh: true,
-            containerAnimation: AnimationContainer,
-          },
-        }
-      );
-    },
-    {
-      dependencies: [
-        trigger,
-        toggleActions,
-        markers,
-        stagger,
-        AnimationContainer,
-      ],
-    }
-  );
-
-  return stagger ? (
-    <div ref={animationRef} className={`${overflow} ${className}`}>
-      {children}
-    </div>
-  ) : (
-    <div className={`${overflow} ${className}`}>
-      <div ref={animationRef}>{children}</div>
-    </div>
-  );
-};
-
-export const MaskAnimation = ({
-  children,
-  trigger,
-  maskColor,
-  markers,
-}: {
-  children: ReactNode;
-  maskColor: string;
-  trigger?: string;
-  markers?: boolean;
-}) => {
-  const animationRef = useRef<HTMLDivElement>(null);
-  const [maskSize, setMaskSize] = useState<number>(0);
-
-  // 리사이즈 핸들러
-  const updateMaskSize = () => {
-    if (animationRef.current) {
-      setMaskSize(animationRef.current.offsetWidth);
-    }
-  };
-
-  useEffect(() => {
-    updateMaskSize(); // 초기 사이즈 설정
-
-    window.addEventListener("resize", updateMaskSize);
-    return () => {
-      window.removeEventListener("resize", updateMaskSize);
-    };
-  }, []);
-
-  useGSAP(
-    () => {
-      if (!animationRef.current) return;
-
-      setMaskSize(animationRef.current.offsetWidth);
-
-      gsap.fromTo(
-        animationRef.current,
-        {
-          left: 0,
-        },
-        {
-          left: -maskSize,
-          stagger: 0.2,
-          duration: 3,
-          ease: "power4.out",
-          scrollTrigger: {
-            trigger: trigger ? trigger : animationRef.current,
-            start: "top center",
-            end: "bottom bottom",
-            toggleActions: "play none none none",
-            markers: markers,
-            invalidateOnRefresh: true,
-          },
-        }
-      );
-    },
-    { dependencies: [maskSize, trigger] }
-  );
-
-  return (
-    <div className="relative overflow-hidden">
-      <div>{children}</div>
-      <div
-        ref={animationRef}
-        className={`absolute top-0 w-full h-full ${maskColor} z-20`}
-      ></div>
-    </div>
-  );
-};
-
-export const SlidAnimation = ({ children }: { children: React.ReactNode }) => {
-  const slideRef = useRef<HTMLDivElement>(null);
-  const [slideX, setSlideX] = useState(0);
-
-  useGSAP(
-    () => {
-      if (!slideRef.current) return;
-
-      if (!slideRef.current) return;
-      setSlideX(slideRef.current.offsetWidth / 2);
-
-      gsap.to(slideRef.current, {
-        x: -slideX,
-        duration: 40,
-        repeat: -1,
-        ease: "none",
-      });
-    },
-    { dependencies: [slideX], scope: slideRef }
-  );
-
-  return (
-    <div ref={slideRef} className="flex gap-0 flex-nowrap">
-      {children}
-      {children}
-    </div>
-  );
-};
-
-export const HorizonScroll = ({
-  children,
-  callbackTween,
-}: {
-  children: React.ReactNode;
-  callbackTween?: (tween: gsap.core.Tween) => void;
-}) => {
-  const horizonRef = useRef<HTMLDivElement>(null);
-  const horizonWrapperRef = useRef<HTMLDivElement>(null);
-
-  useGSAP(() => {
-    if (!horizonWrapperRef.current) return;
-    if (!horizonRef.current) return;
-
-    const isLarge = window.matchMedia("(min-width: 640px)").matches;
-    if (!isLarge) return; // lg 미만이면 애니메이션 적용 안 함
-
-    const horizonWrapper = horizonWrapperRef.current;
-    const horizon = horizonRef.current;
-
-    const horizonTween = gsap.to(horizon, {
-      x: () => -1 * (horizonWrapper.scrollWidth - innerWidth),
-      ease: "none",
-      scrollTrigger: {
-        trigger: horizonWrapperRef.current,
-        pin: true,
-        start: "top top",
-        scrub: 1,
-        end: () => "+=" + (horizon.scrollWidth - innerWidth),
-        invalidateOnRefresh: true,
-        // markers: true,
-      },
-    });
-
-    if (callbackTween && isLarge && horizonTween) {
-      callbackTween(horizonTween);
-    }
-  }, [callbackTween]);
-
-  return (
-    <div
-      ref={horizonWrapperRef}
-      className="w-full h-full relative overflow-hidden"
-    >
-      <div
-        className="flex flex-col sm:flex-row flex-nowrap translate-x-0 w-full"
-        ref={horizonRef}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export const HorizonScrollNav = ({
-  sections,
-  listClass,
-}: {
-  sections: { id: string; title: string }[];
-  listClass?: string;
-}) => {
-  const scrollToSection = (id: string) => {
-    const el = document.getElementById(id);
-    if (!el) return;
-
-    const index = sections.findIndex((section) => section.id === id);
-    if (index === -1) return;
-
-    const isLarge = window.matchMedia("(min-width: 640px)").matches;
-    const scrollPos = isLarge ? el.offsetLeft : el.offsetTop;
-
-    gsap.to(window, {
-      scrollTo: {
-        y: scrollPos,
-        autoKill: false,
-      },
-      duration: 1,
-    });
-  };
-  return (
-    <ul className={`${listClass}`}>
-      {sections.map((section, index) => {
-        return (
-          <li key={index}>
-            <button
-              className="cursor-pointer text-sm"
-              onClick={() => scrollToSection(section.id)}
-            >
-              {section.title}
-            </button>
-          </li>
-        );
-      })}
-    </ul>
-  );
-};

package/app/templates/Badge/Badge.tsx

@@ -1,28 +0,0 @@
-export const Badge = ({
-  children,
-  color,
-  type,
-}: {
-  children: React.ReactNode;
-  color: "primary" | "secondary" | "warning" | "danger";
-  type?: "default" | "tint";
-}) => {
-  switch (type) {
-    case "tint":
-      return (
-        <span
-          className={`badge-tint ${color}`}
-        >
-          {children}
-        </span>
-      );
-    default:
-      return (
-        <span
-          className={`badge ${color}`}
-        >
-          {children}
-        </span>
-      );
-  }
-};

package/app/templates/Badge/badge.css

@@ -1,28 +0,0 @@
-.badge,
-.badge-tint {
-    font-size: var(--text-sm);
-    padding: 0 var(--spacing-common-y);
-    border-radius: var(--radius-common);
-}
-
-
-
-.badge.primary { --badge-bg: var(--color-primary); }
-.badge.secondary { --badge-bg: var(--color-secondary); }
-.badge.warning { --badge-bg: var(--color-warning); }
-.badge.danger { --badge-bg: var(--color-danger); }
-
-.badge {
-    background-color: var(--badge-bg);
-    color: var(--color-white);
-}
-
-.badge-tint.primary { --badge-bg: var(--color-blue-100);  --text-color: var(--color-primary); }
-.badge-tint.secondary { --badge-bg: var(--color-indigo-100);  --text-color: var(--color-secondary); }
-.badge-tint.warning { --badge-bg: var(--color-yellow-100); --text-color: var(--color-warning); }
-.badge-tint.danger { --badge-bg: var(--color-red-100); --text-color: var(--color-danger); }
-
-.badge-tint {
-    background-color: var(--badge-bg);
-    color: var(--text-color);
-}

package/app/templates/Button/Button.tsx

@@ -1,31 +0,0 @@
-"use client";
-import clsx from "clsx";
-
-export const Button = ({
-  children,
-  type = "primary",
-  size = "md",
-  className,
-  style,
-  disabled,
-  onClick,
-}: {
-  children: React.ReactNode;
-  type?: "primary" | "secondary" | "success" | "warning" | "danger" | "gray" | "outline";
-  size?: "sm" | "md" | "lg";
-  className?: string;
-  style?: React.CSSProperties;
-  disabled?: boolean;
-  onClick?: () => void;
-}) => {
-  return (
-    <button
-      className={clsx("btn", type, size, className)}
-      style={style}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
-};

package/app/templates/Button/button.css

@@ -1,135 +0,0 @@
-.btn {
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    color: var(--color-white);
-    transition: all 0.2s;
-    cursor: pointer;
-    border-radius: var(--radius-common);
-    border: none;
-    font-family: var(--font-spoqaNeo);
-}
-
-.btn.primary { 
-    background-color: var(--color-primary);
-    color: var(--color-white);
-}
-.btn.primary:hover:not(:disabled) {
-    background-color: var(--color-blue-600);
-}
-.btn.primary:active:not(:disabled) {
-    background-color: var(--color-blue-700);
-}
-.btn.primary:disabled {
-    background-color: var(--button-primary-bg-disabled);
-    color: var(--button-primary-text-disabled);
-    border: 1px solid var(--button-primary-border-disabled);
-}
-
-.btn.secondary { 
-    background-color: var(--color-secondary);
-    color: var(--color-white);
-}
-.btn.secondary:hover:not(:disabled) {
-    background-color: var(--color-indigo-600);
-}
-.btn.secondary:active:not(:disabled) {
-    background-color: var(--color-indigo-700);
-}
-.btn.secondary:disabled {
-    background-color: var(--button-secondary-bg-disabled);
-    color: var(--button-secondary-text-disabled);
-    border: 1px solid var(--button-secondary-border-disabled);
-}
-
-.btn.success { 
-    background-color: var(--color-success);
-    color: var(--color-white);
-}
-.btn.success:hover:not(:disabled) {
-    background-color: var(--color-green-600);
-}
-.btn.success:active:not(:disabled) {
-    background-color: var(--color-green-700);
-}
-.btn.success:disabled {
-    background-color: var(--button-success-bg-disabled);
-    color: var(--button-success-text-disabled);
-    border: 1px solid var(--button-success-border-disabled);
-}
-
-.btn.warning { 
-    background-color: var(--color-warning);
-    color: var(--color-white);
-}
-.btn.warning:hover:not(:disabled) {
-    background-color: var(--color-yellow-600);
-}
-.btn.warning:active:not(:disabled) {
-    background-color: var(--color-yellow-700);
-}
-.btn.warning:disabled {
-    background-color: var(--button-warning-bg-disabled);
-    color: var(--button-warning-text-disabled);
-    border: 1px solid var(--button-warning-border-disabled);
-}
-
-.btn.danger { 
-    background-color: var(--color-danger);
-    color: var(--color-white);
-}
-.btn.danger:hover:not(:disabled) {
-    background-color: var(--color-red-600);
-}
-.btn.danger:active:not(:disabled) {
-    background-color: var(--color-red-700);
-}
-.btn.danger:disabled {
-    background-color: var(--button-danger-bg-disabled);
-    color: var(--button-danger-text-disabled);
-    border: 1px solid var(--button-danger-border-disabled);
-}
-
-.btn.gray { 
-    background-color: var(--color-gray-500);
-    color: var(--color-white);
-}
-.btn.gray:hover:not(:disabled) {
-    background-color: var(--color-gray-600);
-}
-.btn.gray:active:not(:disabled) {
-    background-color: var(--color-gray-700);
-}
-.btn.gray:disabled {
-    background-color: var(--button-gray-bg-disabled);
-    color: var(--button-gray-text-disabled);
-    border: 1px solid var(--button-gray-border-disabled);
-}
-
-.btn.outline {
-    background-color: transparent;
-    border: 1px solid var(--color-border-standard);
-    color: var(--color-text-body);
-}
-.btn.outline:hover:not(:disabled) {
-    background-color: var(--color-bg-hover);
-}
-.btn.outline:active:not(:disabled) {
-    background-color: var(--color-bg-input-standard);
-}
-
-.btn.sm {
-    padding: var(--spacing-sm-y) var(--spacing-common-x);
-    font-size: var(--text-sm);
-}
-.btn.md {
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    font-size: var(--text-body);
-}
-.btn.lg {
-    padding: var(--spacing-small) var(--spacing-common-x);
-    font-size: var(--text-h6);
-}
-
-.btn:disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
-}

package/app/templates/Card/Card.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-
-export const Card = ({
-  children,
-  className = "",
-  overflow = "overflow-auto",
-}: {
-  children: React.ReactNode;
-  className?: string;
-  type?: "standard" | "group";
-  overflow?: "overflow-auto" | "overflow-hidden" | "overflow-none";
-}) => {
-  return (
-    <div
-      className={`card ${className} ${overflow}`}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const CardHeader = ({
-  children,
-  noMargin,
-}: {
-  children: React.ReactNode;
-  noMargin?: boolean;
-}) => {
-  return <div className={`card-header ${noMargin ? "no-margin" : ""}`}>{children}</div>;
-};
-
-export const CardContent = ({
-  children,
-  noMargin,
-}: {
-  children: React.ReactNode;
-  noMargin?: boolean;
-}) => {
-  return <div className={`card-content ${noMargin ? "no-margin" : ""}`}>{children}</div>;
-};
-
-export const CardFooter = ({
-  children,
-  noMargin,
-}: {
-  children: React.ReactNode;
-  noMargin?: boolean;
-}) => {
-  return <div className={`card-footer ${noMargin ? "no-margin" : ""}`}>{children}</div>;
-};

package/app/templates/Card/card.css

@@ -1,17 +0,0 @@
-.card {
-  background-color: var(--color-bg-card);
-  border-radius: var(--radius-common);
-  border: 1px solid var(--border-standard);
-}
-
-.card-header,
-.card-content,
-.card-footer {
-  padding: var(--spacing-common-x);
-}
-
-.card-header.no-margin,
-.card-content.no-margin,
-.card-footer.no-margin {
-  padding: 0;
-}

package/app/templates/Checkbox/Checkbox.tsx

@@ -1,55 +0,0 @@
-"use client";
-import clsx from "clsx";
-import "./checkbox.css";
-
-export const Checkbox = ({
-  text,
-  onChange,
-  disabled,
-  required,
-  defaultChecked,
-}: {
-  text?: string;
-  className?: string;
-  onChange?: () => void;
-  disabled?: boolean;
-  required?: boolean;
-  defaultChecked?: boolean;
-}) => {
-  return (
-    <label className="checkbox-container gap-1.5">
-      <input
-        type="checkbox"
-        className="appearance-none hidden"
-        onChange={onChange}
-        disabled={disabled}
-        required={required}
-        defaultChecked={defaultChecked}
-      />
-      <span className="checkbox-box">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-4 w-4"
-          viewBox="0 0 20 20"
-          strokeWidth="1"
-        >
-          <path
-            fillRule="evenodd"
-            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-            clipRule="evenodd"
-          ></path>
-        </svg>
-      </span>
-      {text ? (
-        <span
-          className={clsx(
-            "text-text-standard text-nowrap select-none",
-            { "!text-text-disabled": disabled }
-          )}
-        >
-          {text}
-        </span>
-      ) : null}
-    </label>
-  );
-};

package/app/templates/Checkbox/checkbox.css

@@ -1,38 +0,0 @@
-.checkbox-container{
-  display: flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-}
-
-.checkbox-box {
-  width: var(--spacing-small);
-  height: var(--spacing-small);  
-  border: 1px solid var(--color-border-standard);
-  border-radius: var(--radius-common);
-  background: var(--color-bg-input-standard);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.checkbox-box svg {
-    color: transparent;
-    fill: transparent;
-}
-
-input:checked + .checkbox-box {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-}
-
-input:checked + .checkbox-box svg {
-    color: var(--color-text-active);
-    fill: var(--color-text-active);
-}
-
-input:disabled + .checkbox-box {
-    background: var(--color-bg-input-disabled);
-    cursor: not-allowed;
-}