wafflestudio
diff --git a/‎package.json‎
Lines changed: 2 additions & 1 deletion b/‎package.json‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎src/app/providers/Providers.tsx‎
Lines changed: 2 additions & 3 deletions b/‎src/app/providers/Providers.tsx‎
Lines changed: 2 additions & 3 deletions
diff --git a/‎src/components/auth/LoginCard.tsx‎
Lines changed: 7 additions & 4 deletions b/‎src/components/auth/LoginCard.tsx‎
Lines changed: 7 additions & 4 deletions
diff --git a/‎src/components/post/CommentItem.tsx‎
Lines changed: 48 additions & 16 deletions b/‎src/components/post/CommentItem.tsx‎
Lines changed: 48 additions & 16 deletions
diff --git a/‎src/components/post/CommentMenuModal.tsx‎
Lines changed: 44 additions & 11 deletions b/‎src/components/post/CommentMenuModal.tsx‎
Lines changed: 44 additions & 11 deletions
@@ -26,6 +26,7 @@
     ]
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-separator": "^1.1.8",
@@ -59,8 +60,8 @@
     "@tanstack/router-plugin": "^1.145.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/user-event": "^14.6.1",
     "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
 
@@ -2,10 +2,9 @@ import type { PropsWithChildren } from 'react'
 import { ThemeProvider } from 'next-themes'
 import { SidebarProvider } from '@/shared/ui/sidebar'
 import { Toaster } from '@/shared/ui/sonner'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { AuthProvider } from '@/shared/auth/AuthProvider'
-
-const queryClient = new QueryClient()
+import { queryClient } from '@/shared/api/queryClient'
 
 export function Providers({ children }: PropsWithChildren) {
   return (
 
@@ -3,8 +3,9 @@ import { useNavigate } from '@tanstack/react-router'
 import instagramLogo from '../../assets/instagram-logo.svg'
 import { instance } from '../../shared/api/ky'
 import { MessageCircle } from 'lucide-react'
+import { useInvalidateCurrentUser } from '@/shared/auth/useCurrentUser'
 
-interface FloatingInputProps {
+type FloatingInputProps = {
   label: string
   value: string
   onChange: (value: string) => void
@@ -19,7 +20,6 @@ interface LoginResponse {
   message: string
   data: {
     accessToken: string
-    refreshToken: string
   } | null
 }
 
@@ -75,6 +75,7 @@ const LoginCard = () => {
   const [showPw, setShowPw] = useState(false)
   const [errorMsg, setErrorMsg] = useState('')
   const navigate = useNavigate()
+  const invalidateCurrentUser = useInvalidateCurrentUser()
 
   const isValid = id.length > 0 && pw.length >= 6
 
@@ -84,15 +85,17 @@ const LoginCard = () => {
 
     try {
       const res = await instance
-        .post('api/v1/auth/login', {
+        .post('auth/login', {
           json: { loginId: id, password: pw },
         })
         .json<LoginResponse>()
 
       if (res.isSuccess && res.data) {
         localStorage.setItem('accessToken', res.data.accessToken)
-        localStorage.setItem('refreshToken', res.data.refreshToken)
+        await invalidateCurrentUser()
         navigate({ to: '/' })
+      } else {
+        setErrorMsg(res.message || '로그인에 실패했습니다.')
       }
     } catch {
       setErrorMsg('잘못된 이메일 또는 비밀번호입니다. 다시 입력해주세요.')
 
@@ -2,35 +2,45 @@ import { useMemo, useState } from 'react'
 import { Heart, MoreHorizontal } from 'lucide-react'
 import { formatRelativeTime } from '../../utils/date.ts'
 import CommentMenuModal from './CommentMenuModal'
+import { Avatar, AvatarFallback, AvatarImage } from '@/shared/ui/avatar.tsx'
+import { useDeleteCommentMutation } from '@/entities/post/model/hooks/useDeleteCommentMutation'
 
 interface Comment {
   id: number
+  postId: number
   userId: number
   nickname: string
   content: string
   profileImageUrl: string
   createdAt: string
+  updatedAt: string
+  parentId: number | null
   likeCount: number
   liked: boolean
+  likedUserIds: number[]
 }
 
 interface CommentItemProps {
   comment: Comment
-  isReply?: boolean
   isLiked: boolean
   onDoubleClick: (id: number) => void
   onHeartClick: (id: number, e: React.MouseEvent) => void
+  onDeleteSuccess?: (commentId: number) => void
+  onEditClick: (comment: Comment) => void
 }
 
 export default function CommentItem({
   comment,
-  isReply = false,
   isLiked,
   onDoubleClick,
   onHeartClick,
+  onDeleteSuccess,
+  onEditClick,
 }: CommentItemProps) {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const currentUserId = 999
+  const deleteMutation = useDeleteCommentMutation(comment.postId)
+
+  const isEdited = comment.createdAt !== comment.updatedAt
 
   const timeDisplay = useMemo(
     () => formatRelativeTime(comment.createdAt),
@@ -43,6 +53,25 @@ export default function CommentItem({
   }
 
   const handleDelete = () => {
+    deleteMutation.mutate(comment.id, {
+      onSuccess: () => {
+        if (onDeleteSuccess) {
+          onDeleteSuccess(comment.id)
+        }
+      },
+    })
+    setIsMenuOpen(false)
+  }
+
+  const handleHide = () => {
+    if (onDeleteSuccess) {
+      onDeleteSuccess(comment.id)
+    }
+    setIsMenuOpen(false)
+  }
+
+  const handleEdit = () => {
+    onEditClick(comment)
     setIsMenuOpen(false)
   }
 
@@ -55,30 +84,30 @@ export default function CommentItem({
         onDoubleClick={() => onDoubleClick(comment.id)}
       >
         <div className="flex flex-1 items-start gap-3">
-          <img
-            src={comment.profileImageUrl}
-            className={`${isReply ? 'h-6 w-6' : 'h-8 w-8'} mt-0.5 shrink-0 rounded-full object-cover`}
-            alt=""
-          />
+          <Avatar className="mt-0.5 h-8 w-8 shrink-0">
+            <AvatarImage
+              src={comment.profileImageUrl}
+              alt={comment.nickname}
+              className="object-cover"
+            />
+            <AvatarFallback>{comment.nickname[0]}</AvatarFallback>
+          </Avatar>
           <div className="text-sm leading-tight">
             <span className="mr-2 font-semibold text-black">
               {comment.nickname}
             </span>
             <span className="break-all text-black">{comment.content}</span>
 
             <div className="mt-[7px] flex h-4 items-center gap-3 text-xs font-semibold text-gray-500">
-              <span className="font-normal">{timeDisplay}</span>
+              <span className="font-normal">
+                {timeDisplay}
+                {isEdited && ' (수정됨)'}
+              </span>
               {displayLikeCount > 0 && (
                 <span className="font-semibold text-gray-500">
                   좋아요 {displayLikeCount}개
                 </span>
               )}
-              <button
-                className="hover:text-gray-900"
-                onClick={(e) => e.stopPropagation()}
-              >
-                답글 달기
-              </button>
               <button
                 className="p-1 opacity-0 transition-opacity group-hover:opacity-100"
                 onClick={handleMenuClick}
@@ -110,7 +139,10 @@ export default function CommentItem({
         <CommentMenuModal
           onClose={() => setIsMenuOpen(false)}
           onDelete={handleDelete}
-          isMine={comment.userId === currentUserId}
+          onEdit={handleEdit}
+          onHide={handleHide}
+          authorId={comment.userId}
+          nickname={comment.nickname}
         />
       )}
     </>
 
@@ -1,51 +1,84 @@
 import { useState, useEffect } from 'react'
+import { useCurrentUser } from '@/shared/auth/useCurrentUser'
+import ReportModal from './ReportModal'
 
-interface CommentMenuModalProps {
+type CommentMenuModalProps = {
   onClose: () => void
   onDelete?: () => void
-  isMine: boolean
+  onEdit?: () => void
+  onHide: () => void
+  authorId: number
+  nickname: string
 }
 
 export default function CommentMenuModal({
   onClose,
   onDelete,
-  isMine,
+  onEdit,
+  onHide,
+  authorId,
+  nickname,
 }: CommentMenuModalProps) {
   const [isVisible, setIsVisible] = useState(false)
+  const [isReportOpen, setIsReportOpen] = useState(false)
+  const { data: currentUser } = useCurrentUser()
+  const isMine = currentUser?.userId === authorId
 
   useEffect(() => {
     const frame = requestAnimationFrame(() => setIsVisible(true))
     return () => cancelAnimationFrame(frame)
   }, [])
 
+  if (isReportOpen) {
+    return (
+      <ReportModal
+        onClose={onClose}
+        onHideComment={onHide}
+        nickname={nickname}
+      />
+    )
+  }
+
   return (
     <div
       className={`fixed inset-0 z-[100] flex items-center justify-center bg-black/50 transition-opacity duration-200 ${
         isVisible ? 'opacity-100' : 'opacity-0'
       }`}
+      onClick={onClose}
     >
       <div
-        className={`w-full max-w-[560px] overflow-hidden rounded-[24px] bg-white transition-all duration-200 ease-out ${
+        className={`w-full max-w-[400px] overflow-hidden rounded-[12px] bg-white transition-all duration-200 ease-out ${
           isVisible ? 'scale-100 opacity-100' : 'scale-110 opacity-0'
         }`}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex flex-col text-center">
           {isMine ? (
+            <>
+              <button
+                onClick={onDelete}
+                className="w-full border-b border-gray-200 py-3.5 text-[14px] font-bold text-[#ED4956] active:bg-gray-100"
+              >
+                삭제
+              </button>
+              <button
+                onClick={onEdit}
+                className="w-full border-b border-gray-200 py-3.5 text-[14px] font-normal text-black active:bg-gray-100"
+              >
+                수정
+              </button>
+            </>
+          ) : (
             <button
-              onClick={onDelete}
-              className="w-full border-b border-gray-200 py-4 text-[14px] font-bold text-[#ED4956] active:bg-gray-100"
+              onClick={() => setIsReportOpen(true)}
+              className="w-full border-b border-gray-200 py-3.5 text-[14px] font-bold text-[#ED4956] active:bg-gray-100"
             >
-              삭제
-            </button>
-          ) : (
-            <button className="w-full border-b border-gray-200 py-4 text-[14px] font-bold text-[#ED4956] active:bg-gray-100">
               신고
             </button>
           )}
           <button
             onClick={onClose}
-            className="w-full py-4 text-[14px] font-normal text-black active:bg-gray-100"
+            className="w-full py-3.5 text-[14px] font-normal text-black active:bg-gray-100"
           >
             취소
           </button>