📌 구성 요소

1. StackSection → 전체 페이지
2. Stack → 개별 기술 스택 섹션 (예: "Frontend", "Tools")
3. FrontendIcons, ToolsIcons → 아이콘과 설명을 담은 데이터

제목 부분

<aside> 💬

<div className="mt-12 w-[70%] max-w-[150px] h-[50px] bg-main rounded-full flex flex-col items-center justify-center">
    <p className="text-[20px] sm:text-[20px] text-center text-text font-sans font-thin">
        {title}
    </p>
</div>

</aside>

• 🔍

기술 스택 아이템 렌더링

<aside> 💬

<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
    {icons.map((icon) => (
        <div
            key={icon.id}
            className="flex items-start gap-4 bg-black/50 p-4 rounded-lg shadow-xl hover:shadow-2xl transition-transform duration-200 transform hover:scale-105"
        >
            <img
                src={icon.src}
                alt={icon.alt}
                className="w-[50px] h-[50px] object-contain"
            />
            <div className="flex flex-col items-start w-[200px] h-[85px]">
                <h4 className="text-lg font-bold text-white">{icon.title}</h4>
                <p className="text-sm text-gray-300">{icon.description}</p>
            </div>
        </div>
    ))}
</div>

</aside>

• 🔍

StackList

<aside> 💬

const StackSection = () => {
	return (
		<section
			id="stack"
			className="w-full min-h-screen py-20 mx-auto flex flex-col justify-start items-center relative bg-[#68835E] overflow-hidden"
		>
	<p className="mt-4 text-[64px] sm:text-[48px] text-center font-thin font-abhaya decoration-[2px] text-text">
		TECH STACK
	</p>
	
	 <Stack title="Frontend" icons={FrontendIcons} />
     <br></br>
     <br></br>
		 <br></br>
   <Stack title="Tools" icons={ToolsIcons} />
        </section>
    );
};

</aside>

• 🔍

🔎 전체적인 동작 방식 정리

1. StackSection가 전체 페이지를 담당
2. Stack을 이용해 Frontend / Tools 두 개의 그룹을 표시
3. icons.map()을 이용해 각 기술 아이콘과 설명을 카드 형태로 출력
4. 그리드 시스템으로 반응형 배치