더북(TheBook)

20.3 PostList 페이지 UI 구현

 

이번에는 PostList 페이지에서 필요한 유저 인터페이스를 구현하겠습니다. PostList 페이지에서는 포스트 목록과 관련된 컴포넌트들을 사용합니다. 이전에 공용으로 쓰던 컴포넌트를 common 디렉터리에 넣었던 것처럼 PostList에서 보이는 컴포넌트들을 list 디렉터리에 만들었습니다.

components 디렉터리에 list 디렉터리를 만들고, 내부에는 Generate new component 메뉴를 사용하여 다음 컴포넌트들을 만드세요.

ListWrapper: 페이지 내부의 컴포넌트들을 감싸 줍니다.

Pagination: 다음·이전 페이지로 이동합니다.

PostList: 포스트 목록을 보여 줍니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.