[FE] 참여인원이 많을 때, 지출 내역 카드에서 멤버 칩의 레이아웃이 깨지는 문제

[Todari]

issue

• close [FE] 참여인원이 많을 때, 지출 내역 카드에서 멤버 칩의 레이아웃이 깨지는 문제 #625

구현 목적

위 사진처럼 일정 길이 이상으로 칩이 길어진다면 layout이 깨지는 현상이 발생합니다.
이를 해결해서 예상치 못한 화면이 유저에게 출력되지 않도록 하고자 합니다.

구현 내용

ChipGroup.tsx

export const chipGroupStyle = css({
  display: 'flex',
  gap: '0.25rem',
  flexWrap: 'wrap',
  overflow: 'hidden',
});

• chipGroupStyle에 flexWrap과 overflow 속성을 사용하여 예상된 길이보다 길어지지 않도록 설정

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-pdcdierwcn.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-bbwurehrsv.chromatic.com/

[jinhokim98]

꼼꼼한 확인 감사합니다~~

[jinhokim98]

flex wrap 좋아요.!

[soi-ha]

이전에 chip 깨지는 모양이 마치 일본 식당의 메뉴 간판(?) 같네요.
아름답게 수정해줘서 감샴댜

[pakxe]

또 버그를 줏어먹으셨군요. 역시 토달;;; 맛있는 것만 먹어야할텐데.... 사소한 부분이지만 제안하고 싶은게 있는데요..! 개선 결과 캡쳐본도 넣어주면 더 좋을 것 같아요 👍

[pakxe]

오!! 👍 이런 부분을 신경썼어야 했군요. 역시 css 신 씨신