feat: gatherings 페이지 UI 작성 (미완성)

HMRyu commented 3 weeks ago

✏️ 작업 내용

gatherings 페이지 UI

📷 스크린샷

Desktop

Mobile

필터, 드롭다운

https://github.com/user-attachments/assets/8d7404f8-4fc0-487b-a1fc-a46f2a0a1096

탭 변경

https://github.com/user-attachments/assets/82da65df-5d57-4212-a02f-3bd5f62c01b2

✍️ 사용법

(main)/gatherings

auth 페이지와 분류하기 위해 main 으로 grouping 한 다음 gatherings 라는 엔드포인트를 지정하였습니다!

🎸 기타

FilterList, FilterSort 컴포넌트

Dropdown 컴포넌트와 합치기 위해 FilterList, FilterSort 컴포넌트에 로직을 추가하였습니다. Dropdown 을 열고 닫는 부분을 Filter... 컴포넌트에서 관리하도록 수정하였습니다.

확인 부탁드립니다.

날짜 선택 미완성

날짜 선택 부분은 아직 미완성입니다. 추후에 추가하도록 하겠습니다.

페이지 컴포넌트 분류

페이지 컴포넌트로 분류하는 부분은 API 연동 후에 진행하려고 합니다. 우선 UI 작업만 마무리 했습니다!

HMRyu commented 3 weeks ago

Filter 컴포넌트 수정 고생하셨습니다. 기본 dropdown 컴포넌트랑 ui 구성이 달라 보여서, 실제 구현 시에 유사 dropdown 만들면 되겠지 생각하고 넘겼는데 생각보다 다양한 페이지에서 활용되어서.... 그것까지 고려해서 컴포넌트를 만들었어야 했는데 일 떠넘긴 것 같아서 죄송해요 😥

궁금한 것만 추가로 달겠습니다. 태클 X 진짜 궁금 O

auth 페이지와 분류하기 위해 main 으로 grouping --> 단순히 영역에 대한 구분인지, UI 상 구분이 필요해서 나누신 건지 궁금합니다

Filter 의 state를 컴포넌트 내부에서 핸들링 한다면, props로 최초 default 상태를 상속해야 할까요?

Filter의 선택된 아이템이 다시 페이지로 전달되어야 할 텐데, 이 부분은 전역 상태관리 라이브러리를 통해 핸들링 해야 할까요?

영역에 대한 구분입니다! (auth) 부분과 구분하기 위해 grouping 하였습니다. 이 부분은 수정 가능하니 팀원들과 얘기해봐도 좋을 것 같아요!
네 props 로 default 상태를 상속하는게 좋을 것 같습니다! 처음 api 로 날아오는 데이터를 그대로 options 로 넘겨주고, 그 값을 default 값으로 사용하면 될 것 같다고 생각합니다..!
그 부분은 props 로 전달하는 방법이 가장 좋아 보입니다! 만약 props drilling 이 심하게 일어날 경우에는 전역 상태관리 라이브러리 사용해도 좋을 것 같습니다!

만약 자식 컴포넌트에서 부모 컴포넌트로 정보를 전달해야 하는 상황이라면, 부모에서 state setter 함수를 만들어서 자식에게 전달한 다음, 전달된 함수로 자식에서 state 를 변경하는 것이 좋을 것 같아요!

혹시 추가적으로 피드백 주실 사항 있으시면 말씀해주세요!

yunchaeney commented 3 weeks ago

답변 확인했습니다. 제가 만드는 UI랑 중복 부분이 많아 데이터 처리를 어떻게 해야 할지 고민하고 있었는데, 도움이 되었습니다. 감사합니다! 고생하셨어요 작성하신 코드는 제가 잘 가져다가 복붙해서 사용하겠습니다 🙄

INtiful / SootheWithMe