[FE] refactor: 리뷰 목록 페이지에서 변경된 API 연동

[soosoo22]

• resolves [FE] 리뷰 목록 페이지에서 변경된 API를 연동한다. #273

---

🚀 어떤 기능을 구현했나요 ?

• 리뷰 목록 페이지에서 변경된 API를 연동했습니다.

🔥 어떻게 해결했나요 ?

변경된 API에 맞게 인터페이스와 코드를 수정했습니다.

// types/review.ts
export interface ReviewInfo {
  reviewId: number; // id를 reviewId로 변경
  createdAt: string;
  contentPreview: string;
  categories: Category[]; // keywords를 categories로 변경
}

export interface Category {
  optionId: number; // id를 optionId로 변경
  content: string;
}

// ReviewListPage/components/PageContents/index.tsx
   <S.ReviewSection>
          {data.reviews.map((review) => (
            <div key={review.reviewId} onClick={() => handleReviewClick(review.reviewId)}> // reviewId로 변경
              <ReviewCard
                projectName={data.projectName}
                createdAt={review.createdAt}
                contentPreview={review.contentPreview}
                categories={review.categories} // categories로 변경
              />
            </div>
          ))}
        </S.ReviewSection>

목 데이터도 같이 수정했습니다.

import { ReviewList } from '@/types';
export const REVIEW_LIST: ReviewList = {
  revieweeName: '쑤쑤',
  projectName: 'review-me',
  reviews: [
    {
      reviewId: 5,
      createdAt: '2024-07-24',
      contentPreview: `물론 시중에 출간되어 있는 책들로 공부하는 것도 큰 장점이지만 더 깊은 공부를 하고 싶을 때 공식 문서를 확인해보는 것이 좋기 때문에, 저 개인적인 생각으로는 언어 공부를 아예 처음 입문하시는 분들은 한국에서 출간된 개발 서적으로 공부를 시작하시다가 모르는 부분이.....`,
      categories: [
        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
        { optionId: 5, content: '🌱 성장 마인드셋' },
      ],
    },
// ....
  ],
};

📝 어떤 부분에 집중해서 리뷰해야 할까요?

api 관련 코드만 소소하게~ 변경돼서 살짝 편안하게 봐도 될 듯 합니다😊
아하! 그리고 리뷰 목록 페이지 코드를 보니 무한스크롤 관련 코드가 여러군데서 주석처리가 되어있는데, 이 부분은 추후에 리팩하면서 개선해 나가겠습니다!

Q. 검색창의 필요성 유무
검색창을 만들었던 의도가 특정 레포를 검색하면 관련 리뷰를 확인할 수 있게 하는 거였는데, 점점 기능이 불필요하게 느껴져서요. 다들 어떻게 생각하시나요?

📚 참고 자료, 할 말

리뷰미 여러분... 너무 멋있습니다!😋

[ImxYJL]

카공 고생했어요 ㅋㅋㅋ

[chysis]

변경사항 확인 완료!! 🔥🔥

[BadaHertz52]

고생했어!!!