[Component] 아코디언 배열 렌더링을 위한 재사용 컴포넌트 예시 코드

"use client";

import { Accordion, AccordionDetails, AccordionSummary, styled, Typography } from "@mui/material";
import React from "react";
import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";


type AccordionByCollegeType = {
    title : string;
    majors : string[];
}

const AccordionByCollege = ({title, majors}:AccordionByCollegeType) => {
  return (
    <div>
      <CollegeAccordion>
        <AccordionSummary expandIcon={<ExpandMoreOutlinedIcon />} aria-controls="panel1-content" id="panel1-header">
          <Typography component="span" sx={{ fontWeight: "bold" }}>
            {title}
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
            {majors.map((el)=><div>{el}</div>)}
        </AccordionDetails>
      </CollegeAccordion>
    </div>
  );
};

export default AccordionByCollege;

const CollegeAccordion = styled(Accordion)`
  width: 100%;
  border-radius: 8px;
  box-shadow: none !important;
  &::before {
    display: none;
  }
`;

컴포넌트

 

import AccordionByCollege from "./AccordionByCollege";
import Carousel from "./Carousel";

const MainContainer = () => {
  const colleges = [
    { title: "인문대학", majors: ["철학", "역사학", "문학", "언어학", "사회학"] },
    { title: "사회과학대학", majors: ["정치학", "경제학", "행정학", "국제학", "심리학"] },
    { title: "자연과학대학", majors: ["물리학", "화학", "생물학", "수학", "지구과학"] },
    { title: "공과대학", majors: ["기계공학", "전기전자공학", "컴퓨터공학", "화학공학", "토목공학"] },
    { title: "의과대학", majors: ["의학", "간호학", "의생명과학", "약학"] },
    { title: "법과대학", majors: ["법학", "경찰행정학", "사회복지학"] },
    { title: "예술대학", majors: ["미술", "음악", "무용", "연극", "디자인"] },
    { title: "경상대학", majors: ["경영학", "회계학", "마케팅", "금융학"] },
    { title: "교육대학", majors: ["초등교육", "유아교육", "특수교육"] },
    { title: "농업대학", majors: ["농업경제학", "농업생명과학", "환경농업"] },
    { title: "해양과학대학", majors: ["해양학", "해양공학", "해양경찰학"] },
    { title: "공공정책대학", majors: ["공공정책", "행정학", "복지학"] },
  ];

  return (
    <div>
      <Carousel />
      {colleges.map((el, idx) => (
        <AccordionByCollege key={idx} title={el.title} majors={el.majors} />
      ))}
    </div>
  );
};

export default MainContainer;

컴포넌트 사용 예시