댓글 컴포넌트

[Dinoryong]

No description provided.

[Dinoryong]

댓글목록 최상단에 본문이 나온다

[haeunkim428]

[haeunkim428]

type Comment = {
id: number;
author: User;
isLike: boolean;
likeLength: number;
replyLength: number;
created: Date;
};

[haeunkim428]

댓글 페이지

• nav bar : CommentNav.tsx
  • 뒤로가기 : 피드로 돌아감
  • 디엠전송 : 디엠으로 넘어감
• post 내용 : AuthorComment.tsx
  • 글쓴이 포스트 내용
  • 썸네일
    • onClick : (optional?) hover시 해당 글쓴이 정보창
  • displayId
  • content
  • 작성시간(지금으로부터 얼마나 지났는지) : 년, 월, 일, 시간
• comment item : CommentItem.tsx
• 댓글 개수 12개 초과 시, Icon의 Plus 버튼
  • Plus 버튼 : 12개씩 추가로 로드, 전부 로드되면 안보임
• 댓글 입력 칸 : CommentArea.tsx
  • 썸네일
  • Input
    • placeholder : 댓글 달기 ...
    • pressedEnter : 게시(post 요청), input 비우기, 배열에 추가
  • 게시 버튼 : 게시(post 요청), input 비우기, 배열에 제거

댓글 구성

• 썸네일 : CommentThumbnail.tsx
  • onClick : 대상자 피드(instagram.com/${displayId})로 이동
• displayId
  • onClick : 대상자 피드(instagram.com/${displayId})로 이동
• 작성시간(지금으로부터 얼마나 지났는지) : 년, 월, 일, 시간
• 댓글 좋아요 개수
  • 없을 때 : 아무것도 없음
  • 있을 때 : 좋아요 ?개
    • onClick : (optional?) 좋아요 누른 사람들 모달창
      • 썸네일
      • displayId
      • nickname
      • 나를 팔로우 할 때 : 회원님을 팔로우합니다
      • 나를 팔로우 하지 않을 때 : 문구 없음
      • 내가 팔로우 하지 않을 때 : 팔로우 버튼
      • 내가 팔로우 할 때 : 버튼 없음
      • clearbutton : 모달창 off
• 답글달기 버튼
  • onClick : 댓글작성창에 @ + 댓글작성자 displayId 채워짐
• 답글
  • 없을 때 : 아무것도 없음
  • 있을 때 && 안열었을 때 : 답글보기 ?개
    • onClick : 답글 3개 로딩
  • 있을 때 && 열었을 때 && 로딩 될 답글이 남았을 때 : 해당 개수의 답글 + 답글 보기 ?개
    • onClick : 답글 3개 로딩
  • 있을 때 && 열었을 때 && 로딩 될 답글이 남지 않았을 때 : 해당 개수의 답글 + 답글 숨기기
    • onClick : 답글보기 ?개
• longClick
  • 내가 작성한 글일 때 : 내가 작성한 댓글 & 남이 작성한 댓글 모두 모달창(신고, 삭제, 취소)
  • 남이 작성한 글일 때 && 내가 작성한 댓글일 때 : 모달창(신고, 삭제, 취소)
  • 남이 작성한 글일 때 && 남이 작성한 댓글일 때 : 모달창(신고, 취소)
  • 모달창 onClick
    • (optional?)신고하기
    • 삭제하기 : delete 요청, list에서 제거
    • 취소 : 모달 닫기
• 하트
  • 좋아요 누른 상태일 때 : filledheart
  • 좋아요 안누른 상태일 때 : emptyheart
  • onClick
    • 좋아요 누를 때 : post, state 변경, 아이콘 변경 emptyheart -> filledheart
    • 좋아요 취소할 때 : delete, state 변경, 아이콘 변경 filledheart -> emptyheart
• 데이터 타입

   id: comment.id,
   content: comment.content,
   author: {
     displayId: comment.displayId,
     nickname: comment.nickname,
     profileImageUrl: comment.profileImageUrl,
   },
   isLike: comment.isLike,
   likeLength: comment.likeLength,
   replyLength: comment.replyLength,
   created: comment.created
  

답글 구성

• 답글달기, 답글 제외 댓글 구성과 같음
• 데이터 타입 replyLength 제외 댓글과 같음

• 썸네일 : CommentThumbnail.tsx
  • onClick : 대상자 피드(instagram.com/${displayId})로 이동
• displayId
  • onClick : 대상자 피드(instagram.com/${displayId})로 이동
• 작성시간(지금으로부터 얼마나 지났는지) : 년, 월, 일, 시간
• 댓글 좋아요 개수
  • 없을 때 : 아무것도 없음
  • 있을 때 : 좋아요 ?개
    • onClick : (optional?) 좋아요 누른 사람들 모달창
      • 썸네일
      • displayId
      • nickname
      • 나를 팔로우 할 때 : 회원님을 팔로우합니다
      • 나를 팔로우 하지 않을 때 : 문구 없음
      • 내가 팔로우 하지 않을 때 : 팔로우 버튼
      • 내가 팔로우 할 때 : 버튼 없음
      • clearbutton : 모달창 off
• longClick
  • 내가 작성한 글일 때 : 내가 작성한 댓글 & 남이 작성한 댓글 모두 모달창(신고, 삭제, 취소)
  • 남이 작성한 글일 때 && 내가 작성한 댓글일 때 : 모달창(신고, 삭제, 취소)
  • 남이 작성한 글일 때 && 남이 작성한 댓글일 때 : 모달창(신고, 취소)
  • 모달창 onClick
    • (optional?)신고하기
    • 삭제하기 : delete 요청, list에서 제거
    • 취소 : 모달 닫기
• 하트
  • 좋아요 누른 상태일 때 : filledheart
  • 좋아요 안누른 상태일 때 : emptyheart
  • onClick
    • 좋아요 누를 때 : post 요청, state 변경, 아이콘 변경 emptyheart -> filledheart
    • 좋아요 취소할 때 : delete 요청, state 변경, 아이콘 변경 filledheart -> emptyheart
• 데이터 타입

  id: reply.id,
   content: reply.content,
   author: {
     displayId: reply.displayId,
     nickname: reply.nickname,
     profileImageUrl: reply.profileImageUrl,
   },
   isLike: reply.isLike,
   likeLength: reply.likeLength,
   created: reply.created
  

[haeunkim428]

• 내용 추가
• 댓글 작성 직후 : createdTime === 지금
• 이후 : 초, 분, 시, 일, 주, 달, 년 단위

[haeunkim428]

menu버튼 onClick -> longClick으로 변경