feat: /gatherings 컴포넌트 리팩토링 및 모든 모임 불러오기 api 연결

✏️ 작업 내용

/gatherings 컴포넌트 리팩트링
/{teamId}/gatherings api 연결

📷 스크린샷

server action 으로 불러온 데이터

탭 변경할 때마다 변경된 데이터 불러오기

https://github.com/user-attachments/assets/18758911-2a11-4a04-998f-04b3a05e8688

✍️ 사용법

gatherings 리팩토링

gatherings 를 여러 개의 컴포넌트로 분류하였습니다.

/gatherings 서버 컴포넌트

초기 데이터를 서버에서 렌더링하기 위해 gatherings 를 서버 컴포넌트로 만들었습니다. client side 에서 필요한 부분들도 존재하기 때문에 ClientSideGatherings 라는 컴포넌트를 추가하였습니다.

<div className='mx-auto max-w-[1200px]'>
  <div className='min-h-screen bg-var-gray-50 px-16 pt-24 md:px-24 md:pt-40 lg:px-100'>
    <Header />
    <ClientSideGatherings gatherings={gatherings} />
  </div>
</div>

server action

서버 컴포넌트에서 데이터를 받아오기 위해 server action 을 사용했습니다.

'use server' 키워드를 사용하였습니다.

baseURL

.env 파일에 baseURL 을 추가해 놓았습니다. teamId는 3-4 로 지정하여 받아왔습니다.

🎸 기타

CardList 컴포넌트

시간 chip - dateTime 관련해서 이슈가 있는 것 같습니다. 이 부분은 채현님과 커뮤니케이션 한 다음 수정하겠습니다.

이름

swagger 에는 모임 이름을 적는 부분이 없어서 추가하지 못했습니다. 추후에 POST 요청 시 모임 이름도 같이 적어보내면 될 것 같습니다.

환경변수

환경변수를 vercel 에 추가해주시면 CI 도 통과할 수 있을 것 같습니다!

filter

~~아직 데이터 filtering 은 되지 않습니다. 기능 추가하도록 하겠습니다.~~ => 기능 추가중입니다.

미완성

우선 컴포넌트를 많이 수정했기 때문에 PR 을 올렸습니다. 수정사항 변경한 다음 다시 말씀드리겠습니다.

확인 후 피드백 부탁드립니다!

INtiful / SootheWithMe