feat: 모든 리뷰 페이지 기능 구현

yunchaeney commented 4 days ago

✏️ 작업 내용

리뷰 조회 API 연동
Server side rendering으로 최초 10개 데이터 fetching
무한스크롤로 데이터 fetching
컴포넌트 분리 및 커스텀 훅 사용

📷 스크린샷

데이터 정렬

https://github.com/user-attachments/assets/f6f70550-8c28-426d-9e3e-348b66353205

무한스크롤 (무한스크롤 예시를 위해 데이터를 2개씩 fetching 하였음)

https://github.com/user-attachments/assets/7b1c9d92-10ad-4831-80e4-c81c3dd97672

✍️ 사용법

🎸 기타

Issue

캘린더 컴포넌트가 기본적으로 지난 날짜는 선택 불가능하게 되어 있습니다. 그러나 '리뷰' 특성 상, 지난 날짜의 모임에 대한 리뷰를 조회하기 위해 해당 부분이 고쳐져야 할 것 같습니다. 캘린더 컴포넌트를 커스텀 컴포넌트로 만들어 사용하라는 멘토님의 의견도 있었으니, 해당 부분 리팩토링 시 지난 날짜 선택을 가능하게 할지/불가능하게 할지에 대한 옵션을 추가하면 좋을 것 같습니다.

캐싱 관련

Data fetching 코드에서, 데이터 캐싱을 막기 위해 일단 'cache-control': 'no-cache' 옵션을 추가했습니다. 다만 모든 요청마다 cache를 하지 않는 것은 적절하지 않다고 생각 되어 의견 나눠보면 좋겠습니다.

제가 생각한 방안은 아래와 같습니다.

revalidateTag 사용 Get 요청 시에 해당하는 태그를 삽입 (예 : gatherings, reviews ...) const res = await fetch(URL/reviews, { next: { tags: ['reviews'] } });

Post 요청 시 revalidateTag 사용 : 모임 목록 조회 시 revalidateTag('gatherings'), 리뷰 목록 조회 시 revalidateTag('reviews') ...

이렇게하면 새로운 모임 생성이나 새로운 리뷰 생성 시에만 캐시 초기화 하여 효율적이지 않을까 싶습니다.

revalidateTag 참고 : https://nextjs.org/docs/app/api-reference/functions/revalidateTag

close #85

BeMatthewsong commented 3 days ago

캘린더 이슈 확인했고 따로 이슈 만들어서 모임 만들기 기능이랑 로그인 관련 로직 이후에 반영하도록 하겠습니다!

BeMatthewsong commented 3 days ago

캐시 관련한 이슈는 revalidateTag를 사용하는 게 방법도 단순하여서 쓰는 거 찬성합니다.

yunchaeney commented 3 days ago

Conflict 해결을 위해 getReviewList.ts 파일의 쿼리스트링 부분을 아래와 같이 변경하였습니다.

    // TODO : 쿼리스트링 라이브러리 사용하여 리팩토링 (ex. qs, query-string)
    const queryParams = new URLSearchParams({
      limit: String(limit),
      offset: String(offset),
      ...rest,
    });

    // 값이 있을 경우에만 추가
    if (gatheringId) {
      queryParams.append('gatheringId', String(gatheringId));
    }
    if (userId) {
      queryParams.append('userId', String(userId));
    }

    const queryString = queryParams.toString();

HMRyu commented 3 days ago

저도 캐시 부분은 Tag 써서 관리하는 것 좋을 것 같습니다!

항상 path 만 사용했었는데, Tag 을 써서 관리하면 더 효율성이 좋을 것 같습니다 :)

INtiful / SootheWithMe