📌 주요 기능

1. projectData를 불러와 슬라이드 형태로 보여줌
2. 좌우 버튼을 이용해 프로젝트를 넘길 수 있음
3. 해당 페이지 하단에 깃허브, 벨로그 연결한 푸터 구현함

슬라이드 상태 관리 및 버튼 로직

<aside> 💬

const [currentIndex, setCurrentIndex] = useState(0);

const handlePrev = () => {
    setCurrentIndex((prevIndex) =>
        prevIndex === 0 ? projectData.length - 1 : prevIndex - 1
    );
};

const handleNext = () => {
    setCurrentIndex((prevIndex) =>
        prevIndex === projectData.length - 1 ? 0 : prevIndex + 1
    );
};

</aside>

• 🔍

프로젝트 리스트 출력

<aside> 💬

<div
    className="flex transition-transform duration-500 ease-in-out"
    style={{
        transform: `translateX(-${currentIndex * 100}%)`,
        width: "100%",
    }}
>
    {projectData.map((project) => (
        <div
            key={project.id}
            className="w-full flex-shrink-0 px-4 flex justify-center"
        >
            <ProjectItem {...project} />
        </div>
    ))}
</div>

</aside>

• 🔍

슬라이드 하단 점(인디케이터)

<aside> 💬

<div className="flex space-x-2 mt-8">
    {projectData.map((_, index) => (
        <div
            key={index}
            className={`w-3 h-3 rounded-full transition-all duration-300 
                ${currentIndex === index ? "bg-[#68835E]" : "bg-[#FFEDD2] opacity-50"}`}
        ></div>
    ))}
</div>

</aside>

• 🔍