REV-74/리뷰 리스트 컴포넌트 구현

[hyoribogo]

📑 구현 내용

리뷰 리스트 컴포넌트 구현했습니다.
(리뷰 아이템 컴포넌트가 없어서 예시 스크린샷은 없습니다!)

🚧 참고 사항

타입 관련

export interface InvitedReview {
  id: number
  title: string
  deadline_status: '진행중' | '마감' | '종료'
  survey_type: string
  is_completed: boolean
  created_at: string
}

export interface CreatedReview {
  id: number
  title: string
  deadline_status: '진행중' | '마감' | '종료'
  responser_count: number
  survey_type: string
  created_at: string
}

export interface ReceivedReview {
  id: number
  title: string
  created_at: string
}

• 각각의 리뷰 데이터에 대한 타입을 정의했는데, id 프로퍼티명이 각각 달라서 일단 id로 통일해놓았습니다. 추후에 api 연결하면 프로퍼티명을 정제하는 과정을 거치면 좋을 것 같습니다!
• ✨ id로 통일해야 하는 이유: 아래 코드에서 설명드리겠습니다.

interface ReviewListProps {
  reviews: InvitedReview[] | CreatedReview[] | ReceivedReview[]
  RenderComponent: (
    props: InvitedReview | CreatedReview | ReceivedReview,
  ) => JSX.Element
}

const ReviewList = ({ reviews, RenderComponent }: ReviewListProps) => {
  return (
    <>
      <ul className="grid-col-2 grid gap-4 sm:grid-cols-3 md:grid-cols-4">
        {reviews.map((review) => (
          <RenderComponent key={review.id} {...review} />  // key 값으로 고유한 id를 넣어주려고 함.
        ))}
      </ul>
    </>
  )
}

• key 값을 넣을 때 id라는 프로퍼티 값을 넣어주기 위해 정제 과정이 필요합니다!

사용 방법

• 나중에 InvitedReviewItem과 같은 컴포넌트를 구현할 때, props으로 reviews만 받고 적용해주면 됩니다.

  // 예시 작성법

  <ReviewList reviews={invited_reviews} RenderComponent={(review) => (
      <InvitedReviewItem {...review} />
    )}
  />

• 세 가지 타입의 리뷰 아이템 컴포넌트의 ui 구성이 제각각 달라서, 리스트 컴포넌트는 구현할 게 많이 없었네요 ..!

[khj0426]

엄청 고생하셨슴니다!! 👍 👍

[khj0426]

혹시..Reivew라는 공통된 타입을 뽑고 뽑은 타입을 상속받는 것은 어떨까요.?!
뭔가 코드의 중복을 피할 수 있을 것 같아서요..!

interface CommonReview {
  id: number
  title: string
  deadline_status: '진행중' | '마감' | '종료'
  survey_type: string
  created_at: string
}

export interface InvitedReview extends CommonReview {
  is_completed: boolean
}

export interface CreatedReview extends CommonReview {
  responser_count: number
}

export interface ReceivedReview {
  id: number
  title: string
  created_at: string
}

[hyoribogo]

처음에 이렇게 작성했는데 이러니까 읽는 사람 입장에서 더 보기 힘들더라구요 CreatedReview 보려면 CommonReview부터 봐야하는 번거로움 ..? 그래서 시원하게 다 적었습니다 !

[hayamaster]

고생하셨습니다 효리님!
코드 깔끔해서 너무 잘읽혀요!

프로퍼티 명 통일은 저도 생각했습니다! 너무 자세히 분류되어있어서 공통 컴포넌트를 여러 곳에 적용할때 어려움이 있을 것 같다고 생각되더라고요.
벡엔드 분들께 통일시켜 달라고 하기 보다는 그냥 저희가 데이터를 받아와서 정제하는 과정을 거치는 것이 낫겠죠?....

[hayamaster]

효리님! 저희 InvitedReview에서 상태는 '답변 전', '답변 완료' 두 가지 아닌가요??