• 리스트 페이지로 이동하는 이벤트 ( 경로 : “/list”)

• 크게 4가지 컴포넌트가 있습니다.

1. 링크 컴포넌트 : “/” 로 이동

1. 답변하러 가기 버튼 : 페이지 이동 → post/{id}/answer/ 페이지로 이동

답변하러 가기 버튼 : AnswerPage

1. 카드 리스트 컴포넌트

• 먼저 /subjects/ api에서 get 요청 정보를 받습니다.
• 그럼 질문 받기 버튼을 통해 post를 보냈던 내용을 다시금 획득합니다.

{
  "count": 24,
  "next": "<https://openmind-api.vercel.app/0-4/subjects/?limit=5&offset=15&sort=name>",
  "previous": "<https://openmind-api.vercel.app/0-4/subjects/?limit=5&offset=5&sort=name>",
  "results": [
    {
      "id": 19,
      "name": "이윤수",
      "imageSource": "<https://fastly.picsum.photos/id/432/200/200.jpg?hmac=b4-kxXh_oTpvCBH9hueJurvHDdhy0eYNNba-mO9Q8bU>",
      "questionCount": 7,
      "createdAt": "2023-10-23T05:08:04.781558Z"
    },
    {
      "id": 20,
      "name": "손동욱",
      "imageSource": "<https://fastly.picsum.photos/id/432/200/200.jpg?hmac=b4-kxXh_oTpvCBH9hueJurvHDdhy0eYNNba-mO9Q8bU>",
      "questionCount": 2,
      "createdAt": "2023-10-23T05:08:05.825279Z"
    },
    {
      "id": 21,
      "name": "이영준",
      "imageSource": "<https://fastly.picsum.photos/id/432/200/200.jpg?hmac=b4-kxXh_oTpvCBH9hueJurvHDdhy0eYNNba-mO9Q8bU>",
      "questionCount": 0,
      "createdAt": "2023-10-23T05:08:06.914207Z"
    },
    ...
  ]
}

• 배열 엘리먼트 렌더링을 통해, 카드 컴포넌트를 다수 호출합니다. (”count” 가 카드 개수)
• 각 카드 컴포넌트는 “name”, “questionCount” “imageSource”가 props로 받게 됩니다.

( 카드 리스트 컴포넌트 (부모) > 카드 컴포넌트 (자식))

• 각 카드 컴포넌트를 클릭하면 → 다른 페이지로 이동합니다. → 페이지 이름: post page

PostPage: 도메인 컴포넌트

1. 이름순 vs 시간순 컴포넌트