[Playground] Add Events components

[Capella87]

Resolves: #181

Changes

• /events/ 경로 아래에 Events 페이지 추가
• 최대 4개의 로그인한 유저가 참여한 이벤트를 보여주는 Grid 기반의 EventListComponent 추가
• 이벤트 제목과 summary를 보여주는 이벤트 컴포넌트인 EventItemComponent 추가

Description

EventItemComponent의 색은 임의로 넣었습니다.

Tasks

• 테스트 코드

궁금한 점

• Playwright로 프론트앤드의 어떤 것을 테스트 할 수 있나요?
• 컴포넌트를 구현하는 과정에서 CSS를 많이 사용했는데 style property가 너무 길어져서 별도의 CSS에 옮기는 게 나을까요?

테스트 코드는 아직 미완성입니다.

[Capella87]

테스트 부분도 구현했습니다.

추가 변경점

테스트

• 유저에게 보여지는 event item이 4개를 넘지 않는지 검증
• EventListComponent가 Events 컴포넌트에서 제대로 로드되었는지 검증

기능

• 추가적으로 사용자가 현재 참여하는 이벤트가 없을 경우 참여한 이벤트가 없다는 메시지를 출력
• 로드할 때 Progressbar ring 추가

[justinyoo]

코드에 생각이 너무 많은 것 같아요. 단순하게 볼 수 있는 방법이 있을 겁니다.

[Capella87]

헤더, summary 존재여부와 클릭 가능 여부를 테스트하는 코드도 추가했습니다.

[justinyoo]

고생하셨습니다! LGTM!