아코디언 리스트 컴포넌트 구현

[hyosin-Jang]

Closes #188

💡 다음 이슈를 해결했어요.

• 아코디언 리스트 컴포넌트 추가했습니다.
• 사용처:
  • 설정 > 스터디원이 남긴 나의 리뷰
  • 설정 > 알림

Screen.Recording.2024-05-14.at.3.04.37.PM.mov

💡 이슈를 처리하면서 추가된 코드가 있어요.

• <Divider> 재사용하기 위해 width, height props로 받도록 수정했습니다.

    export const Divider = styled.div<{ height?: string | number; width?: string | number }>`
      height: ${({ height }) => (height ? (typeof height === 'number' ? `${height}px` : `${height}`) : '12px')};
      background: ${({ theme }) => theme.color.strokeDividerThick};
      max-width: ${({ width }) => (width ? (typeof width === 'number' ? `${width}px` : `${width}`) : '100%')};
    `;

💡 필요한 후속작업이 있어요.

• 타이포 브랜치 머지후, title 타이포 적용

✅ 셀프 체크리스트

• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• 커밋 메세지를 컨벤션에 맞추었습니다.
• 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• 변경 후 코드는 기존의 테스트를 통과합니다.
• 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

[SungHyun627]

아코디언 리스트 컴포넌트 구현하신 부분 확인했습니다. 수고하셨습니다!!👍

[abiriadev]

정말 수고하셨습니다! 특히 strokeDividerThick 색상을 통일해 주셔서 앞으로 디자인을 컴포넌트로 옮기는 게 더 쉬워질 것 같습니다. 👍