[DESIGN] 시간표 목록 화면에 적응형 그리드 적용

[i-meant-to-be]

🚩 연관 이슈

closed #147

📝 작업 내용

TableListPage 개선

• flex flex-wrap 스타일을 적용하여, 한 줄(가로줄)에 표시되는 아이템 개수가 유동적으로 바뀌도록 수정
• 헤더 스타일도 새롭게 정해진 컨벤션에 따라 지시형 제목으로 수정
• 이상 변경사항에 따른 테스트 코드 수정

이 개선 사항을 작업하면서는, 써니가 이 페이지는 아직 구현하지 말아달라고 적어둔 바 있어 디자인적 요소는 많이 고려하지 않았습니다. 따라서 디자인보다는 그리드를 구현하는 것에 집중했습니다. 추후 확정된 디자인 시안이 나오면 디자인적인 부분에 대한 개선도 필요할 것입니다.

그 외

• npm에서 일부 패키지에서 보안 취약점이 있다고 표시하여, 이 부분 해결 (npm audit fix)
• 위 수정 사항으로 인해 Storybook 관련 패키지 간 버전 호환성 문제 발생하여 이 부분 해결

🏞️ 스크린샷 (선택)

너비가 넓을 때 (한 줄에 3개)

너비가 좁을 때 (한 줄에 2개)

🗣️ 리뷰 요구사항 (선택)

없음

[jaeml06]

확인했습니다.