TIL : 최종프로젝트 7일차

오늘은 댓글CRUD에서 디테일한 작업을 진행했다.

• 삭제할 때, confirm 모달 창에서 삭제 눌러서 삭제하기
  => 모달 컴포넌트를 만들어 작업했으나, props로 넘겨주는 부분에서 오류가 해결이 되지 않았다. 이 부분은 컴포넌트를 사용하지 않고 작성하는 방법으로 해결할 수 있었다.

• 댓글을 입력하지 않거나, 로그인 안하면 버튼 비활성화하기

const submitRef = useRef<HTMLButtonElement | any>();

useEffect(() => {
    if (commentValue) {
      submitRef.current.disabled = false;
    }
    if (!commentValue || !authService.currentUser) {
      submitRef.current.disabled = true;
    }
  }, [comment]);

<button
   className="bg-blue-500 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
   ref={submitRef}
   disabled
> 등록 </button>

• 댓글 작성한 사람만 수정,삭제 할 수 있도록 하기

• 페이지에 해당 게시물의 댓글만 표시하기

const Comment = () => {
  const paramId = useParams().id;
  const { data } = useGetCommentDescQuery();
  return (
    <div>
      {data
        ?.filter((comment) => comment.postId === paramId)
        .map((comment) => {
          return <Comment key={comment.id} comment={comment} />;
        })}
    </div>
  );
};

• post하는 댓글에 user정보 넣기

• 댓글 작성한 시간남기기 ( 출처 : 블로그 )

const timeGap = (createTime: number) => {
    const miliSeconds = now - createTime;
    const beforeSeconds = miliSeconds / 1000;
    if (beforeSeconds < 60) return `방금 전`;
    const beforeMinutes = beforeSeconds / 60;
    if (beforeMinutes < 60) return `${Math.floor(beforeMinutes)}분 전`;
    const beforeHours = beforeMinutes / 60;
    if (beforeHours < 24) return `${Math.floor(beforeHours)}시간 전`;
    const beforeDays = beforeHours / 24;
    if (beforeDays < 32) return `${Math.floor(beforeDays)}일 전`;
    const beforeWeeks = beforeDays / 7;
    if (beforeWeeks < 5) return `${Math.floor(beforeWeeks)}주 전`;
    const beforeMonths = beforeDays / 30;
    if (beforeMonths < 12) return `${Math.floor(beforeMonths)}개월 전`;
    const beforeYears = beforeDays / 365;
    return `${Math.floor(beforeYears)}년 전`;
  };

const nowTime = timeGap(createdTime);

계속 기획내용 회의하느라 생각보다 작업내용이 없긴 하지만, 오늘 못했던 만큼 내일 또 열심히 해야겠다 !