SUI 프로젝트 - 아코디언 개발하기

채연·2023년 6월 28일

SUI

목록 보기

4/6

아코디언 개발

고민

MUI 같은 곳에선 AccordionSummary, AccordionDetail로 나눠서 진행이 되는데 이와 같이 진행을 시킬지, 아니면 Accordion 컴포넌트 하나만 제공할지 고민이 되었다.

Accordion 컴포넌트를 하나만 제공한다면 사용자가 훨씬 커스텀하기는 불편할 것이다.

또한 AccordionSummary, AccordionDetail 등 여러 가지 제공한다면 편리하게 쓰는 것이 불편할 것이다.

디자인 시스템이라고 하면 획일화된 디자인을 추구하니 Accordion 컴포넌트가 맞다고 생각하긴 하는데, 예외사항이 무조건 있을 것 같은 느낌이라 일단은 만들어놓을까.. 라는 생각이 계속 들었다.

결론

결국 나의 선택은 둘다 하는 것이었다..!

그렇게 많은 시간이 들 것 같지도 않았고, 해놓으면 나중에 번거로울 일이 없어질 것 같았다! 🤗

// 커스텀 아코디언
<Accordion color="secondary" className="w-96 mb-4" value={open2}>
   <AccordionSummary
        color="secondary"
        onClick={() => setOpen2(!open2)}
        value={open2}
        text={'아코디언'}
   />
   <AccordionDetail value={open2}>아코디언입니다.</AccordionDetail>
</Accordion>

// 자동 아코디언
<Accordion
     color="secondary"
     auto
     className="w-96 mb-4"
     text="자동 아코디언"
     >
       아코디언입니다.
</Accordion>

커스텀 아코디언은 각각에 value 값을 넣어주는 것으로 구현했고, 자동 아코디언은 value를 넣어주지 않고도 구현이 가능!

또한 자동 아코디언은 Accordion 하나의 컴포넌트만 쓰고, 커스텀 아코디언은 Accordion, AccordionSummary, AccordionDetail 세 개의 컴포넌트를 사용한다.

-> 편리를 위하면 무조건 자동 아코디언! 속성으로 auto를 넣어주면 된다

코드 뜯어보기

아코디언

export const Accordion = ({
  className,
  children,
  text,
  auto,
  value,
  color = 'primary',
  disabled,
  ...props
}: AccordionProps) => {
  const [open, setOpen] = useState(false);

  const accordionClass = disabled
    ? clsx(className, 'min-w-fit', disabledSyles)
    : clsx(className, 'min-w-fit', colorStyles[color]);

  return (
    <div className={accordionClass} {...props}>
      {auto ? (
        <>
          <AccordionSummary
            text={text}
            color={color}
            onClick={() => setOpen(!open)}
            value={open}
          />
          <AccordionDetail value={open}>{children}</AccordionDetail>
        </>
      ) : (
        children
      )}
    </div>
  );
};