[게시글 상세] 게시글 상세 페이지 구조

사용자가 목록에서 읽고 싶은 게시글을 클릭하면 해당 게시글 상세 페이지로 이동한다.

 

[일반유저] 게시글 상세 페이지

[관리자] 상단에 추가된 채택 및 고정 버튼

 

백엔드에서 넘어오는 데이터는 다음과 같다.

• 게시글 id
• 게시글 카테고리
• 게시글 제목
• 작성자 멤버 id
• 게시글 작성자 닉네임
• 게시글 작성자 프로필 사진
• 게시글 작성 시간
• 좋아요 (눌렀으면 1, 아니면 0)
• 좋아요 개수
• 북마크 (눌렀으면 1, 아니면 0)
• 고정 (눌렀으면 1, 아니면 0)
• 태그
  • 태그 id
  • 태그
• 댓글
  • 댓글 id
  • 작성자 닉네임
  • 작성자 프로필 사진
  • 작성 시간
  • 내용
  • parent id

 

한번에 이 모든 데이터가 넘어오기 때문에, Post Detail이라는 전체를 조합하는 컴포넌트(페이지)에서 이 데이터를 받고 Props로 각 컴포넌트에 필요한 데이터를 내려주기로 했다.

페이지를 구성하는 큰 단위의 컴포넌트는 다음과 같다.

• Post Title: 최상단의 제목란, 게시글 제목과 각 버튼 및 작성자 정보, 작성 날짜, 좋아요와 댓글 총 개수
• Post Address: 작성자가 적은 주소
• Post Content: 게시글 내용
• Post Tags: 태그
• Post Buttons: 게시글 작성자 및 관리자에게만 보이는 게시글 수정 및 삭제 버튼과 해당 카테고리 게시글 목록으로 가는 버튼

<PostTitle
    boardId={post.boardId}
    title={post.title}
    now={post.now}
    pick={post.pick}
    pin={post.pin}
    likeCheck={post.likeCheck}
    likeCount={post.likeCount}
    bookmark={post.bookmark}
    nickName={post.nickName}
    userPhoto={post.userPhoto}
 />
 <PostAddress address={post.address} />
 <PostContent content={post.content} />
 <PostTags tags={post.tags} />
 <PostButtons
    memberId={post.memberId}
    handleDeletePost={handleDeletePost}
    boardId={post.boardId}
    category={post.category}
 />
 <CommentList boardId={post.boardId} />

 

 

회고

프로젝트 하면서 멘토님께 배운 건 인터페이스를 백엔드와 같이 짰어야 했다는 것이다.

API 명세서나 뭐나 다 백엔드 쪽! 우리는 할 거 없음! 으로 단순하게 생각하는 바람에, 백엔드에서 엔드포인트나 params가 어떤 이름으로 어떻게 넘어올 건지 대충 예상만 하면서 남는 시간 동안 디자인 중심 레이아웃을 먼저 짰다. 

그러다보니 컴포넌트들을 잘 세분화해서 나누지 못했던 것 같고, 특히나 나중에 댓글과 대댓글을 구현하는 부분에서 애를 먹었던 거 같다.

 

또 프로젝트 동안에는 이렇게 다량의 데이터가 넘어왔을 때 GraphQL로 필요한 데이터만 받아올 수 있다는 것을 생각하지 못했다. 리팩토링 advanced challenge로 도전해봐야겠다.