#38 (#68)

* [#38] feat:: 삭제된 댓글 Username 지정

* feat:: 게시글 댓글 익명성에 따른 ui 반영

* fix:: isAuthor 인자 추가하기

* [#38] feat:: 삭제된 댓글 Username 지정

* feat:: 게시글 댓글 익명성에 따른 ui 반영

* fix:: isAuthor 인자 추가하기

package.json

@@ -32,7 +32,7 @@
     "html2canvas": "^1.4.1",
     "iso-3166-1-ts": "^0.2.2",
     "jotai": "^2.8.0",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.441.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.2.0",

src/api/types/community.ts

@@ -43,6 +43,7 @@ export interface PostCommentResponse {
   isDeleted: boolean
   createdAt: Date
   updatedAt: Date
+  isAuthor: boolean
   isMyComment: boolean
   content: string
   user: User

src/components/community/post/Comment.tsx

@@ -2,13 +2,15 @@ import { css } from '@styled-system/css'
 import { reactionButton } from '@styled-system/recipes'
 import { useAtomValue } from 'jotai'
 import { Cookie, MessageCircle } from 'lucide-react'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 
 import { usePostCommentLike } from '@/api/hooks/community'
 import CommentHeader from '@/components/community/post/CommentHeader'
 import NoticeModal from '@/components/ui/modal/NoticeModal'
 import { POST_MESSAGES } from '@/lib/messages/community'
 import { postAtom } from '@/lib/store/post'
+import { getCommentUsername } from '@/util/getCommentUsername'
+import { isAuthorMatchingPostAnonymity } from '@/util/isAuthorMatchingPostAnonymity'
 import { useModal } from '@/util/useModal'
 
 interface CommentProps {
@@ -18,6 +20,7 @@ interface CommentProps {
 }
 const Comment = memo(({ isOpen, currentIndex, handleClick }: CommentProps) => {
   const post = useAtomValue(postAtom)
+  const isPostAuthorAnonymous = post.user.isAnonymous
   const comment = post.comments[currentIndex]
   const { isOpen: modalOpen, handleOpen } = useModal(true)
 
@@ -26,6 +29,11 @@ const Comment = memo(({ isOpen, currentIndex, handleClick }: CommentProps) => {
     if (comment.isMyComment) return handleOpen()
     mutateLike({ postId: post.id, commentId: comment.id, isReply: false })
   }, [comment.isMyComment, comment.id, handleOpen, mutateLike, post.id])
+
+  const username = useMemo(
+    () => getCommentUsername({ comment, isPostAuthorAnonymous }),
+    [comment, isPostAuthorAnonymous],
+  )
   return (
     <div
       className={css({
@@ -37,10 +45,15 @@ const Comment = memo(({ isOpen, currentIndex, handleClick }: CommentProps) => {
       })}
     >
       <CommentHeader
-        username={comment.user.isAnonymous ? 'Anonymous' : comment.user.username}
+        username={username}
         date={comment.createdAt}
         isMyComment={comment.isMyComment}
         commentId={comment.id}
+        isAuthorMatchingPostAnonymity={isAuthorMatchingPostAnonymity({
+          isAuthor: comment.isAuthor,
+          isPostAuthorAnonymous,
+          isAnonymous: comment.user.isAnonymous,
+        })}
       />
       <p
         className={css({
@@ -52,7 +65,7 @@ const Comment = memo(({ isOpen, currentIndex, handleClick }: CommentProps) => {
           smDown: { fontSize: 14 },
         })}
       >
-        {comment.content}
+        {comment.content || 'This comment has been deleted.'}
       </p>
       <div className={css({ display: 'flex', alignItems: 'center', gap: 2.5 })}>
         <button aria-pressed={isOpen} className={reactionButton()} onClick={handleClick}>

src/components/community/post/CommentHeader.tsx

@@ -1,6 +1,7 @@
 import { css } from '@styled-system/css'
 import { boardTag } from '@styled-system/recipes'
 import { isAxiosError } from 'axios'
+import { User, UserPen } from 'lucide-react'
 import { useCallback } from 'react'
 
 import { useReportComment } from '@/api/hooks/community'
@@ -15,8 +16,15 @@ interface CommentHeaderProps {
   date: Date
   isMyComment: boolean
   commentId: number
+  isAuthorMatchingPostAnonymity?: boolean
 }
-const CommentHeader = ({ isMyComment, username, date, commentId }: CommentHeaderProps) => {
+const CommentHeader = ({
+  isMyComment,
+  username,
+  date,
+  commentId,
+  isAuthorMatchingPostAnonymity,
+}: CommentHeaderProps) => {
   const { modalRef, isOpen, handleOpen, handleLayoutClose, handleButtonClose } = useModal()
   const { mutate: mutateReportComment } = useReportComment()
   const handleReportConfirm = useCallback(() => {
@@ -45,7 +53,14 @@ const CommentHeader = ({ isMyComment, username, date, commentId }: CommentHeader
       })}
     >
       <div className={css({ display: 'flex', alignItems: 'center', gap: 2.5 })}>
-        <div className={boardTag({ variant: isMyComment ? 'red' : 'small' })}>{isMyComment ? 'Author' : username}</div>
+        <div className={boardTag({ variant: isAuthorMatchingPostAnonymity ? 'red' : 'small' })}>
+          {isAuthorMatchingPostAnonymity ? (
+            <UserPen size={16} />
+          ) : (
+            isMyComment && !isAuthorMatchingPostAnonymity && <User size={16} />
+          )}
+          {username}
+        </div>
         <p className={css({ fontSize: 18, fontWeight: 500, color: 'darkGray.2' })}>{getFormattedTimeString(date)}</p>
       </div>
       <UtilButton isComment isMine={isMyComment} isEditable={false} handleReport={handleOpen} />

src/components/community/post/CommentReply.tsx

@@ -2,14 +2,16 @@ import { css } from '@styled-system/css'
 import { reactionButton } from '@styled-system/recipes'
 import { useAtomValue } from 'jotai'
 import { Cookie, Forward } from 'lucide-react'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 
 import { usePostCommentLike } from '@/api/hooks/community'
 import CommentHeader from '@/components/community/post/CommentHeader'
 import NoticeModal from '@/components/ui/modal/NoticeModal'
 import { POST_MESSAGES } from '@/lib/messages/community'
 import { postAtom } from '@/lib/store/post'
 import { CommentProps } from '@/types/community'
+import { getCommentUsername } from '@/util/getCommentUsername'
+import { isAuthorMatchingPostAnonymity } from '@/util/isAuthorMatchingPostAnonymity'
 import { useModal } from '@/util/useModal'
 
 interface CommentReplyProps {
@@ -18,12 +20,18 @@ interface CommentReplyProps {
 }
 const CommentReply = ({ reply, parentId }: CommentReplyProps) => {
   const post = useAtomValue(postAtom)
+  const isPostAuthorAnonymous = post.user.isAnonymous
   const { mutate: mutateLike } = usePostCommentLike()
   const { isOpen, handleOpen } = useModal(true)
   const handleLikeClick = useCallback(() => {
     if (reply.isMyComment) return handleOpen()
     mutateLike({ postId: post.id, commentId: reply.id, parentCommentId: parentId, isReply: true })
   }, [handleOpen, mutateLike, parentId, post.id, reply.id, reply.isMyComment])
+
+  const username = useMemo(
+    () => getCommentUsername({ comment: reply as CommentProps, isPostAuthorAnonymous }),
+    [reply, isPostAuthorAnonymous],
+  )
   return (
     <div className={css({ display: 'flex', w: 'full', maxW: 756, alignItems: 'flex-start', gap: 5 })}>
       <Forward className={css({ color: 'darkGray.2', transform: 'scale(1,-1)' })} size={24} />
@@ -38,10 +46,15 @@ const CommentReply = ({ reply, parentId }: CommentReplyProps) => {
         })}
       >
         <CommentHeader
-          username={reply.user.isAnonymous ? 'Anonymous' : reply.user.username}
+          username={username}
           date={reply.createdAt}
           isMyComment={reply.isMyComment}
           commentId={reply.id}
+          isAuthorMatchingPostAnonymity={isAuthorMatchingPostAnonymity({
+            isAuthor: reply.isAuthor,
+            isPostAuthorAnonymous,
+            isAnonymous: reply.user.isAnonymous,
+          })}
         />
         <p
           className={css({

src/types/community.ts

@@ -42,6 +42,7 @@ export interface CommentProps {
   createdAt: Date
   updatedAt: Date
   isMyComment: boolean
+  isAuthor: boolean
   content: string
   user: User
   likeCount: number

src/util/getCommentUsername.ts

@@ -0,0 +1,11 @@
+import { CommentProps } from '@/types/community'
+
+interface CommentUsernameProps {
+  comment: CommentProps
+  isPostAuthorAnonymous: boolean
+}
+export const getCommentUsername = ({ comment, isPostAuthorAnonymous }: CommentUsernameProps) => {
+  if (comment.isDeleted) return 'Unknown'
+  if (comment.isAuthor && isPostAuthorAnonymous && comment.user.isAnonymous) return 'Anonymous'
+  return comment.user.username
+}

src/util/isAuthorMatchingPostAnonymity.ts

@@ -0,0 +1,13 @@
+import { match } from 'ts-pattern'
+
+interface IsAuthorMatchingPostAnonymity {
+  isPostAuthorAnonymous: boolean
+  isAnonymous: boolean
+  isAuthor: boolean
+}
+export const isAuthorMatchingPostAnonymity = (props: IsAuthorMatchingPostAnonymity) => {
+  return match(props)
+    .with({ isAuthor: true, isPostAuthorAnonymous: true, isAnonymous: true }, () => true)
+    .with({ isAuthor: true, isPostAuthorAnonymous: false, isAnonymous: false }, () => true)
+    .otherwise(() => false)
+}

yarn.lock

@@ -3459,10 +3459,10 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lucide-react@^0.378.0:
-  version "0.378.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.378.0.tgz#232acb99c6baedfa90959a2c0dd11327b058bde8"
-  integrity sha512-u6EPU8juLUk9ytRcyapkWI18epAv3RU+6+TC23ivjR0e+glWKBobFeSgRwOIJihzktILQuy6E0E80P2jVTDR5g==
+lucide-react@^0.441.0:
+  version "0.441.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.441.0.tgz#afc0d76c5ffb5bdac7adf0c9626217a5451b1af1"
+  integrity sha512-0vfExYtvSDhkC2lqg0zYVW1Uu9GsI4knuV9GP9by5z0Xhc4Zi5RejTxfz9LsjRmCyWVzHCJvxGKZWcRyvQCWVg==
 
 [email protected]:
   version "0.30.8"