코딩 연습장

Public 폴더 하위 경로에 /images/ 폴더를 하나 만들고 그 아래에 이미지를 모은다.

image를 쓴다.

빌드 시 이런 모양으로 수정하기

app/images.ts 파일을 하나 만든다

static으로 빌드하면 out 폴더 아래에 이미지가 생겨있다.

static으로 빌드된 파일을 실행하려면 아래 코드 치기

npx serve@latest out

import

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

const MyComponent = () => {
    const boxRef = useRef(null);

    useEffect(() => {
        gsap.registerPlugin(ScrollTrigger);

        gsap.from(boxRef.current, {
            opacity: 0,
            y: 50,
            duration: 0.5,
            scrollTrigger: {
                trigger: boxRef.current,
                start: "top 80%",
                end: "bottom 20%",
                toggleActions: "play none none reverse",
            },
        });
    }, []);
    
        return (
        <section className="pt-2 pl-8 pr-5">
            <ul className="flex flex-wrap w-full justify-between">
                <li ref={boxRef} className="w-full lg:w-[49%] 2xl:w-[32.5%] bg-white mb-5 rounded-lg">
                    <MainCard />
                </li>
            </ul>
        </section>
    );
};

export default MyComponent;