feat: 찜한 모임 페이지 API 연동

yunchaeney commented 1 week ago

✏️ 작업 내용

찜한 모임 페이지 api 연동
로컬 스토리지 get, set 을 위한 context api 추가
기타 컴포넌트 수정

📷 스크린샷

Gatherings 에서 찜하기 후, Saved 페이지로 넘어갑니다~

https://github.com/user-attachments/assets/8cffedf0-cf2c-4e00-919d-431e2fe9e121

✍️ 사용법

interface SavedListProps {
  dataList: GatheringsListData[];
}

const SavedList = ({ dataList }: SavedListProps) => {
  // 로컬스토리지에 대한 Context
  const { savedGatherings, updateGathering } = useSavedGatheringList();

  // 모임 Id를 파라미터로 받아, 로컬스토리지에 저장되어 있는지 여부를 확인합니다.
  const isSaved = (id: number) => savedGatherings.includes(id);

  // CardList의 버튼 클릭 시 작동되는 함수입니다.
  // 모임 Id를 파라미터로 받아, 로컬스토리지를 업데이트 합니다. (추가 or 삭제)
  const handleButtonClick = (id: number) => {
    updateGathering(id);
  };

  return (
    <>
      {dataList.map((item) => (
        <CardList
          key={item.id}
          data={item}
          isSaved={isSaved(item.id)}
          handleButtonClick={handleButtonClick}
        />
      ))}
    </>
  );
};

🎸 기타

Check point

CardList 컴포넌트에서 HeartIcon 버튼 클릭 시 로컬스토리지에 저장 / 삭제 토글
로컬 스토리지 저장 및 삭제 시 GNB의 badge 숫자 반영
/saved 페이지에서 달램핏/워케이션 타입에 따라 data fetch
오피스 스트레칭/마인드풀니스 칩에 따라 필터링
지역에 따른 필터링
최신순, 마감임박순 등 정렬

Issue

필터링 된 상태에서 찜한 모임 삭제 시 필터 상태가 초기화
날짜 filter 안 됨

ToDo

Issue 해결
컴포넌트 분리 (상태관리, 비즈니스 로직 분리 등....)

아주 기본적인 기능만 완성한 상태로, 코드 수정 양이 많을 것 같아 중간동기화 겸 PR 올립니다! 현재 Page 컴포넌트 하나에 너무 많은 책임이 있어 분리할 예정인데, 아이디어 주시면 감사하겠습니다 로컬 스토리지 get, set 상태에서 자잘한 이슈가 많이 있을 것으로 예상됩니다. 피드백 주시면 반영하겠습니다!

close #84

yunchaeney commented 6 days ago

수정사항

CardList 컴포넌트 수정
- 컴포넌트에서 직접 로컬스토리지에 접근하지 않고, Props로 관련 내용을 받아 처리합니다.
- Props에 최초 찜한 상태 여부와 찜하기 버튼 클릭 핸들러를 추가하였습니다.
- 기존 CardList 사용하던 컴포넌트에서 에러를 예상하여 optional props로 만들었으나, 추후 필수 요소가 되어야 할 것 같다고 생각합니다.
- isSaved 는 최초 해당 모임이 찜한 모임인지 여부를 판단합니다. 빈값일 시 false가 됩니다.
- handleButtonClick 은 saved에 대한 toggle 및 취소된 모임에 대해서도 로컬스토리지를 update 합니다.
CardList 컴포넌트 테스트 코드 추가
- 기존 버튼 클릭에 대한 이벤트가 정의되어 있지 않았기 때문에, 버튼 클릭 시 모킹한 handleButtonClick 가 작동되는지에 대한 테스트 코드를 추가하였습니다.
savedList 컴포넌트 작성
- 데이터 리스트 컴포넌트를 추가로 작성하였습니다. CardList에 넘겨줄 isSaved와 버튼 클릭 핸들러가 정의되어 있습니다.
- PR 본문 사용법 참고