wafflestudio
diff --git a/‎src/components/post/EditPostModal.tsx‎
Lines changed: 163 additions & 0 deletions b/‎src/components/post/EditPostModal.tsx‎
Lines changed: 163 additions & 0 deletions
diff --git a/‎src/components/post/PostDetail.tsx‎
Lines changed: 2 additions & 2 deletions b/‎src/components/post/PostDetail.tsx‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/components/post/PostInfoSection.tsx‎
Lines changed: 18 additions & 2 deletions b/‎src/components/post/PostInfoSection.tsx‎
Lines changed: 18 additions & 2 deletions
diff --git a/‎src/components/post/PostMenuModal.tsx‎
Lines changed: 33 additions & 3 deletions b/‎src/components/post/PostMenuModal.tsx‎
Lines changed: 33 additions & 3 deletions
diff --git a/‎src/entities/album/ui/AlbumSummaryCard.tsx‎
Lines changed: 4 additions & 4 deletions b/‎src/entities/album/ui/AlbumSummaryCard.tsx‎
Lines changed: 4 additions & 4 deletions
diff --git a/‎src/entities/post/model/hooks/useUpdatePostMutation.ts‎
Lines changed: 24 additions & 0 deletions b/‎src/entities/post/model/hooks/useUpdatePostMutation.ts‎
Lines changed: 24 additions & 0 deletions
@@ -0,0 +1,163 @@
+import { useCallback, useState, useMemo } from 'react'
+import { Dialog, DialogContent } from '@/shared/ui/dialog'
+import { CheckCircle2, Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { instance } from '@/shared/api/ky'
+import { useQueryClient } from '@tanstack/react-query'
+
+import { CreateModalHeader } from '@/features/create-post/ui/CreateModalHeader'
+import { PreviewPane } from '@/features/create-post/ui/PreviewPane'
+import { PostDetailsPane } from '@/features/create-post/ui/PostDetailsPane'
+import { useImageCarousel } from '@/features/create-post/model/hooks/useImageCarousel'
+import { useUpdatePostMutation } from '@/entities/post/model/hooks/useUpdatePostMutation'
+import type { PostData } from './PostDetail'
+
+type EditPostModalProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  initialData: PostData
+  onSuccess?: (updatedData: PostData) => void
+}
+
+export function EditPostModal({
+  open,
+  onOpenChange,
+  initialData,
+  onSuccess,
+}: EditPostModalProps) {
+  const [caption, setCaption] = useState(initialData.content)
+  const [selectedAlbumId, setSelectedAlbumId] = useState<number>(
+    initialData.albumId ?? -1
+  )
+  const [isSyncing, setIsSyncing] = useState(false)
+  const [isSuccessState, setIsSuccessState] = useState(false)
+
+  const queryClient = useQueryClient()
+  const updatePost = useUpdatePostMutation(initialData.id)
+  const carousel = useImageCarousel(initialData.images.length)
+
+  const isDirty = useMemo(() => {
+    return (
+      caption !== initialData.content ||
+      selectedAlbumId !== (initialData.albumId ?? -1)
+    )
+  }, [caption, selectedAlbumId, initialData])
+
+  const handleUpdate = useCallback(async () => {
+    if (!isDirty) return
+    setIsSyncing(true)
+
+    try {
+      let updatedData: PostData = { ...initialData }
+
+      if (caption !== initialData.content) {
+        const result = await updatePost.mutateAsync({
+          content: caption,
+          albumId: initialData.albumId ?? null,
+          imageUrls: initialData.images.map((img) => img.url),
+        })
+        updatedData = { ...updatedData, content: result.content }
+      }
+
+      if (selectedAlbumId !== (initialData.albumId ?? -1)) {
+        if (selectedAlbumId === -1) {
+          await instance.delete(
+            `api/v1/albums/${initialData.albumId}/posts/${initialData.id}`
+          )
+          updatedData = { ...updatedData, albumId: null as unknown as number }
+        } else {
+          await instance.post(
+            `api/v1/albums/${selectedAlbumId}/posts/${initialData.id}`
+          )
+          updatedData = { ...updatedData, albumId: selectedAlbumId }
+        }
+      }
+
+      setIsSuccessState(true)
+
+      setTimeout(() => {
+        queryClient.invalidateQueries({ queryKey: ['posts'] })
+        queryClient.invalidateQueries({ queryKey: ['albums'] })
+
+        onSuccess?.(updatedData)
+        onOpenChange(false)
+      }, 500)
+    } catch {
+      toast.error('정보 수정에 실패했습니다.')
+    } finally {
+      setIsSyncing(false)
+    }
+  }, [
+    caption,
+    selectedAlbumId,
+    isDirty,
+    updatePost,
+    onOpenChange,
+    initialData,
+    onSuccess,
+    queryClient,
+  ])
+
+  const activePreviewUrl = initialData.images[carousel.activeIndex]?.url
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        overlayClassName="z-[110]"
+        className="z-[120] flex flex-col gap-0 overflow-hidden rounded-4xl bg-white p-0 sm:w-[calc(80vh-51px+340px)] sm:max-w-[849px]"
+      >
+        <CreateModalHeader
+          isUploaded={true}
+          step="details"
+          title="정보 수정"
+          onBack={() => onOpenChange(false)}
+          onShare={handleUpdate}
+          isShareDisabled={!isDirty || isSyncing}
+          isSharing={isSyncing}
+          isShareSuccess={isSuccessState}
+        />
+        <div className="h-px w-full bg-zinc-200" />
+
+        {isSyncing ? (
+          <div className="flex aspect-square w-full items-center justify-center sm:h-[calc(80vh-51px)] sm:max-h-[509px]">
+            <Loader2 className="size-16 animate-spin text-zinc-400" />
+          </div>
+        ) : isSuccessState ? (
+          <div className="flex aspect-square w-full flex-col items-center justify-center gap-4 sm:h-[calc(80vh-51px)] sm:max-h-[509px]">
+            <CheckCircle2 className="size-24 text-green-500" />
+            <p className="text-lg font-medium text-zinc-700">
+              정보가 수정되었습니다.
+            </p>
+          </div>
+        ) : (
+          <div className="flex min-h-0 flex-1 flex-col sm:flex-row">
+            <div className="flex aspect-square w-full sm:h-[calc(80vh-51px)] sm:max-h-[509px] sm:w-[calc(80vh-51px)] sm:max-w-[509px] sm:flex-none">
+              <PreviewPane
+                activePreviewUrl={activePreviewUrl}
+                filesCount={initialData.images.length}
+                activeIndex={carousel.activeIndex}
+                canGoPrev={carousel.canGoPrev}
+                canGoNext={carousel.canGoNext}
+                dots={carousel.dots}
+                goPrev={carousel.goPrev}
+                goNext={carousel.goNext}
+              />
+            </div>
+
+            <div className="min-h-0 flex-1 sm:w-[340px] sm:shrink-0">
+              <PostDetailsPane
+                profileName={initialData.nickname}
+                profileImageUrl={initialData.profileImageUrl}
+                caption={caption}
+                onCaptionChange={setCaption}
+                selectedAlbumId={selectedAlbumId}
+                onAlbumSelect={setSelectedAlbumId}
+              />
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
@@ -54,7 +54,7 @@ export default function PostDetail() {
           .json<{ data: PostData; isSuccess: boolean }>()
 
         if (res.isSuccess) {
-          setPostData(res.data)
+          setPostData({ ...res.data })
         }
       } catch {
         console.error('Failed to fetch post')
@@ -105,7 +105,7 @@ export default function PostDetail() {
   }
 
   const handlePostDataChange = (newData: PostData) => {
-    setPostData(newData)
+    setPostData({ ...newData })
   }
 
   return (
 
@@ -56,7 +56,9 @@ const PostInfoSection = forwardRef<PostInfoSectionRef, PostInfoSectionProps>(
     const commentInputRef = useRef<HTMLInputElement>(null)
 
     useEffect(() => {
-      setPostData(initialData)
+      if (initialData) {
+        setPostData({ ...initialData })
+      }
     }, [initialData])
 
     useImperativeHandle(ref, () => ({
@@ -294,6 +296,12 @@ const PostInfoSection = forwardRef<PostInfoSectionRef, PostInfoSectionProps>(
       }, 0)
     }
 
+    const handleUpdateSuccess = (updatedData: PostData) => {
+      const clonedData = { ...updatedData }
+      setPostData(clonedData)
+      onDataChange?.(clonedData)
+    }
+
     const formattedFullDate = postData?.createdAt
       ? new Date(postData.createdAt).toLocaleDateString('ko-KR', {
           year: 'numeric',
@@ -302,6 +310,12 @@ const PostInfoSection = forwardRef<PostInfoSectionRef, PostInfoSectionProps>(
         })
       : ''
 
+    const isEdited =
+      postData?.updatedAt &&
+      postData?.createdAt &&
+      new Date(postData.updatedAt).getTime() >
+        new Date(postData.createdAt).getTime() + 1000
+
     return (
       <div className="flex h-full flex-col bg-white">
         <div className="flex shrink-0 items-center justify-between border-b border-gray-200 px-4 py-3">
@@ -368,7 +382,7 @@ const PostInfoSection = forwardRef<PostInfoSectionRef, PostInfoSectionProps>(
               <span className="whitespace-pre-wrap">{postData?.content}</span>
               <div className="mt-2 text-xs font-normal text-gray-500">
                 {postData?.createdAt
-                  ? formatRelativeTime(postData.createdAt)
+                  ? `${formatRelativeTime(postData.createdAt)}${isEdited ? ' • 수정됨' : ''}`
                   : ''}
               </div>
             </div>
@@ -411,6 +425,8 @@ const PostInfoSection = forwardRef<PostInfoSectionRef, PostInfoSectionProps>(
             nickname={postData?.nickname || ''}
             authorId={postData?.userId || 0}
             profileImageUrl={postData?.profileImageUrl || null}
+            initialPostData={postData ?? undefined}
+            onUpdateSuccess={handleUpdateSuccess}
           />
         )}
       </div>
 
@@ -3,17 +3,21 @@ import { useNavigate } from '@tanstack/react-router'
 import ReportModal from './ReportModal'
 import AccountInfoModal from './AccountInfoModal'
 import EmbedModal from './EmbedModal'
+import { EditPostModal } from './EditPostModal'
 import { useCurrentUserId } from '@/shared/auth/useCurrentUser'
 import { useFollowing } from '@/features/follow-user/model/useFollowing'
 import { useToggleFollow } from '@/features/follow-user/model/useToggleFollow'
 import { instance } from '@/shared/api/ky'
+import type { PostData } from './PostDetail'
 
 interface PostMenuModalProps {
   onClose: () => void
   nickname: string
   authorId: number
   postId: number
   profileImageUrl: string | null
+  initialPostData?: PostData
+  onUpdateSuccess?: (updatedData: PostData) => void
 }
 
 export default function PostMenuModal({
@@ -22,9 +26,11 @@ export default function PostMenuModal({
   authorId,
   postId,
   profileImageUrl,
+  initialPostData,
+  onUpdateSuccess,
 }: PostMenuModalProps) {
   const [activeModal, setActiveModal] = useState<
-    'menu' | 'report' | 'account' | 'embed' | 'delete_confirm'
+    'menu' | 'report' | 'account' | 'embed' | 'delete_confirm' | 'edit'
   >('menu')
   const [showToast, setShowToast] = useState(false)
   const navigate = useNavigate()
@@ -68,14 +74,24 @@ export default function PostMenuModal({
 
       if (response.isSuccess) {
         onClose()
-        // 삭제 후 내 프로필 페이지나 홈으로 이동
         navigate({ to: `/${authorId}` })
       }
     } catch (err) {
       console.error('게시글 삭제 실패:', err)
     }
   }
 
+  const handleEditSuccess = (updatedData: PostData) => {
+    if (onUpdateSuccess && initialPostData) {
+      const finalData = {
+        ...initialPostData,
+        ...updatedData,
+      }
+      onUpdateSuccess(finalData)
+    }
+    onClose()
+  }
+
   if (activeModal === 'report') {
     return (
       <ReportModal
@@ -101,6 +117,17 @@ export default function PostMenuModal({
     return <EmbedModal onClose={onClose} postId={postId} nickname={nickname} />
   }
 
+  if (activeModal === 'edit' && initialPostData) {
+    return (
+      <EditPostModal
+        open={true}
+        onOpenChange={(open) => !open && onClose()}
+        initialData={initialPostData}
+        onSuccess={handleEditSuccess}
+      />
+    )
+  }
+
   if (activeModal === 'delete_confirm') {
     return (
       <div
@@ -154,7 +181,10 @@ export default function PostMenuModal({
               >
                 삭제
               </button>
-              <button className="w-full border-b border-gray-200 py-3 active:bg-gray-100">
+              <button
+                onClick={() => setActiveModal('edit')}
+                className="w-full border-b border-gray-200 py-3 active:bg-gray-100"
+              >
                 수정
               </button>
             </>
 
@@ -34,13 +34,13 @@ export function AlbumSummaryCard({
         <CardTitle className="text-base font-semibold">{title}</CardTitle>
       </CardHeader>
 
-      <CardContent className="aspect-square px-0 pb-0">
-        <div className="relative h-full overflow-hidden rounded-b-2xl">
+      <CardContent className="px-0 pb-0">
+        <div className="relative aspect-square w-full overflow-hidden rounded-b-2xl">
           <LazyImage
             src={thumbnailImageUrl}
             alt={title}
-            wrapperClassName="h-full w-full"
-            className="h-full w-full"
+            wrapperClassName="absolute inset-0"
+            className="h-full w-full object-cover"
           />
 
           <div className="pointer-events-none absolute inset-0 h-full w-full bg-linear-to-t from-black/35 via-black/5 to-transparent" />
 
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { instance } from '@/shared/api/ky'
+import type { PostData } from '@/components/post/PostDetail'
+
+export function useUpdatePostMutation(postId: number) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: {
+      content: string
+      albumId: number | null
+      imageUrls: string[]
+    }) => {
+      const response = await instance
+        .put(`api/v1/posts/${postId}`, { json: payload })
+        .json<{ data: PostData; isSuccess: boolean }>()
+      return response.data
+    },
+    onSuccess: (updatedData) => {
+      queryClient.setQueryData(['post', postId], updatedData)
+      queryClient.invalidateQueries({ queryKey: ['posts'] })
+    },
+  })
+}
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ export default function PostDetail() {`
`54`	`54`	`.json<{ data: PostData; isSuccess: boolean }>()`
`55`	`55`
`56`	`56`	`if (res.isSuccess) {`
`57`		`- setPostData(res.data)`
	`57`	`+ setPostData({ ...res.data })`
`58`	`58`	`}`
`59`	`59`	`} catch {`
`60`	`60`	`console.error('Failed to fetch post')`
`@@ -105,7 +105,7 @@ export default function PostDetail() {`
`105`	`105`	`}`
`106`	`106`
`107`	`107`	`const handlePostDataChange = (newData: PostData) => {`
`108`		`- setPostData(newData)`
	`108`	`+ setPostData({ ...newData })`
`109`	`109`	`}`
`110`	`110`
`111`	`111`	`return (`