feat: 312-comment-blur(#312)

feat: 코멘트 블러처리 기능 추가

Author: dle234

frontend/components/applicant/applicantNode/comment/BlurredComment.component.tsx

@@ -0,0 +1,9 @@
+const BlurredComment = () => {
+  return (
+    <div className="select-none blur-sm text-sm">
+      자신의 댓글만 조회할 수 있습니다.
+    </div>
+  );
+};
+
+export default BlurredComment;

frontend/components/applicant/applicantNode/comment/CommentDetail.component.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import ApplicantCommentEditorOrViewer from "./EditorOrViewer.component";
+import BlurredComment from "./BlurredComment.component";
 import { deleteComment } from "@/src/apis/comment";
 import { postCommentsLike } from "@/src/apis/comment";
 import Icon from "@/components/common/Icon";
@@ -34,18 +35,19 @@ const CommentDeleteButton = ({
   return <button onClick={() => onDelete()}>삭제</button>;
 };
 
-interface ApplicantCommentReq {
+interface ApplicantCommentRes {
   id: string;
   content: string;
   createdAt: string;
   interviewerName: string;
   isLike: boolean;
   likeCount: number;
   canEdit: boolean;
+  isBlurred: boolean;
 }
 
 interface ApplicantCommentDetailProps {
-  comment: ApplicantCommentReq;
+  comment: ApplicantCommentRes;
   cardId: number;
   generation: string;
 }
@@ -78,29 +80,39 @@ const ApplicantCommentDetail = ({
             {new Date(+comment.createdAt).toLocaleDateString()}
           </div>
         </div>
-        <button onClick={() => heartToggle()} className="flex gap-2 items-end">
+        <button
+          onClick={() => heartToggle()}
+          className="flex gap-2 items-end"
+          disabled={comment.isBlurred}
+        >
           <Icon icon={comment.isLike ? "faceSmilingFill" : "faceSmiling"} />
           <span className="text-xs text-secondary-200">
             {comment.likeCount}
           </span>
         </button>
       </div>
-      <ApplicantCommentEditorOrViewer
-        isEdit={isEdit}
-        content={comment.content}
-        commentId={comment.id}
-        setIsEdit={setIsEdit}
-      />
-      {comment.canEdit && (
-        <div className="flex text-sm gap-2 text-secondary-200 items-center">
-          <button onClick={() => setIsEdit((prev) => !prev)}>수정</button>
-          <div className="border-x-[0.5px] h-4 !w-0 border-secondary-200"></div>
-          <CommentDeleteButton
+      {comment.isBlurred ? (
+        <BlurredComment />
+      ) : (
+        <>
+          <ApplicantCommentEditorOrViewer
+            isEdit={isEdit}
+            content={comment.content}
             commentId={comment.id}
-            cardId={cardId}
-            generation={generation}
+            setIsEdit={setIsEdit}
           />
-        </div>
+          {comment.canEdit && (
+            <div className="flex text-sm gap-2 text-secondary-200 items-center">
+              <button onClick={() => setIsEdit((prev) => !prev)}>수정</button>
+              <div className="border-x-[0.5px] h-4 !w-0 border-secondary-200"></div>
+              <CommentDeleteButton
+                commentId={comment.id}
+                cardId={cardId}
+                generation={generation}
+              />
+            </div>
+          )}
+        </>
       )}
     </div>
   );

frontend/src/apis/comment/index.ts

@@ -8,6 +8,7 @@ export interface CommentRes {
   isLike: boolean;
   likeCount: number;
   canEdit: boolean;
+  isBlurred: boolean;
 }
 
 export interface CommentReq {