✨[Feat] 모임 메인 페이지 필터링 및 찜하기 구현 #264

[wynter24]

#️⃣연관된 이슈

#264

📝작업 내용

• 기능 구현: 찜하기, 인원수 및 신청 가능 필터
• 쿼리키 사용하여 모임 목록 조회
• 로딩 컴포넌트 적용

미리보기 및 결과물

2025-01-03.161713.mp4

기타 참고사항

• 일부 기능 동작 오류로 백엔드 수정 사항이 필요하며 현재 요청한 상태입니다.
• 아래는 발생한 문제입니다.
  • 인원수 필터의 경우 12명 이상 ( min: 12, max: 20 ) 만 정상적을 동작하지 않는 문제
  • 찜하기를 실행 했을 때 모임 목록 조회 데이터에서 isLike: true가 반영되지 않고 모임 상세 조회 데이터에만 반영되는 문제
  • 마감 임박(파라미터: order)이 내림차순으로 정렬되는 문제 (정상 동작: 오름차순)
• 신청 가능 필터의 경우, 프론트에서 filter 메서드를 사용하여 필터하고 있습니다.
  이 과정에서 다른 필터와 함께 정상적으로 작동하지 않는 문제가 발생하고 있어 해당 로직을 백엔드에서 처리하도록 요청하였습니다.
• 변경 요청 반영에 따라 필터 구현을 위해 사용했던 목록 데이터 상태 관리(useState) 코드와 useEffect 코드를 제거하고 모임 데이터를 직접 사용하도록 수정할 예정입니다.

const { data, isLoading, error } = useQuery({
    ...bookClubs.all(filters),
  });

// 제거할 코드
const [clubList, setClubList] = useState<BookClub[]>([]);
const [initialBookClubs, setInitialBookClubs] = useState<BookClub[]>([]);

useEffect(() => {
    if (clubInfo) {
      setClubList(clubInfo);
      setInitialBookClubs(clubInfo); // 초기 데이터 설정
    }
}, [clubInfo]);

// 모임 목록 데이터 바로 사용
const clubInfo = data?.data.bookClubs;

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bookco	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 3, 2025 0:06am

[cloud0406]

수고하셨습니다~.~