Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dle234 merged 5 commits into from
Feb 23, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f2a977f
feat: isBlurred 타입 추가 및 조건부 블러 UI 적용
cho-in-sik Feb 18, 2026
f3ed6e9
feat: 블러코멘트 컴포넌트화
cho-in-sik Feb 18, 2026
18f4ef5
feat: 스마일 이모지 블러 상태에 따른 비활성화 처리
cho-in-sik Feb 18, 2026
79c3f73
fix: 불필요 래퍼 div 제거
cho-in-sik Feb 21, 2026
006d4a9
fix: 타입명 수정
cho-in-sik Feb 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions frontend/components/applicant/applicantNode/comment/BlurredComment.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const BlurredComment = () => {
return (
<div className="select-none blur-sm text-sm">
자신의 댓글만 조회할 수 있습니다.
</div>
);
};

export default BlurredComment;
46 changes: 29 additions & 17 deletions frontend/components/applicant/applicantNode/comment/CommentDetail.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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;
Copy link

@gemini-code-assist gemini-code-assist bot Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

이 인터페이스는 API 응답 객체의 타입을 정의하는 것으로 보입니다. ApplicantCommentReq라는 이름은 요청(Request) 객체로 오해될 수 있습니다. API 응답을 나타내므로 ApplicantCommentRes와 같이 명확한 이름으로 변경하는 것을 고려해 보세요. 더 좋은 방법은 frontend/src/apis/comment/index.ts에 정의된 CommentRes 타입을 import하여 사용하는 것입니다. 두 타입의 내용이 동일하므로, 중복을 제거하고 코드의 일관성을 유지할 수 있습니다.

Copy link
Collaborator

@dle234 dle234 Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ApplicantCommentReq -> ApplicantCommentRes 로만 변경해주시면 좋을것같아요!

}

interface ApplicantCommentDetailProps {
comment: ApplicantCommentReq;
comment: ApplicantCommentRes;
cardId: number;
generation: string;
}
Expand Down Expand Up @@ -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>
);
Expand Down
1 change: 1 addition & 0 deletions frontend/src/apis/comment/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface CommentRes {
isLike: boolean;
likeCount: number;
canEdit: boolean;
isBlurred: boolean;
}

export interface CommentReq {
Expand Down