✨ feat(album): add delete album api

kimnamheeee · kimnamheeee · commit 243c5c683246 · 2026-02-06T15:30:17.000+09:00
diff --git a/src/features/create-post/ui/AlbumEditItem.tsx b/src/features/create-post/ui/AlbumEditItem.tsx
@@ -1,6 +1,8 @@
+import { useState } from 'react'
 import { Button } from '@/shared/ui/button'
 import { Input } from '@/shared/ui/input'
-import { Check, X } from 'lucide-react'
+import { Check, Trash2, X } from 'lucide-react'
+import { DeleteAlbumDialog } from './DeleteAlbumDialog'
 
 type AlbumEditItemProps = {
   title: string
@@ -9,6 +11,7 @@ type AlbumEditItemProps = {
   onTitleChange: (title: string) => void
   onUpdate: () => void
   onCancel: () => void
+  onDelete: () => void
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
 }
 
@@ -19,40 +22,61 @@ export function AlbumEditItem({
   onTitleChange,
   onUpdate,
   onCancel,
+  onDelete,
   onKeyDown,
 }: AlbumEditItemProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+
   return (
-    <div className="flex items-center gap-1.5 px-4 py-2.5">
-      <Input
-        ref={inputRef}
-        value={title}
-        onChange={(e) => onTitleChange(e.target.value)}
-        onKeyDown={onKeyDown}
-        placeholder="앨범 제목 입력..."
-        maxLength={50}
-        className="h-8 flex-1 border-none bg-zinc-50 text-sm focus-visible:ring-0"
-        disabled={isPending}
+    <>
+      <div className="flex items-center gap-1.5 px-4 py-2.5">
+        <Input
+          ref={inputRef}
+          value={title}
+          onChange={(e) => onTitleChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder="앨범 제목 입력..."
+          maxLength={50}
+          className="h-8 flex-1 border-none bg-zinc-50 text-sm focus-visible:ring-0"
+          disabled={isPending}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 shrink-0 border-none hover:bg-zinc-100"
+          onClick={onCancel}
+          disabled={isPending}
+        >
+          <X className="size-4 text-zinc-600" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 shrink-0 border-none hover:bg-zinc-100"
+          onClick={onUpdate}
+          disabled={!title.trim() || isPending}
+        >
+          <Check className="size-4 text-blue-500" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 shrink-0 border-none hover:bg-red-50"
+          onClick={() => setShowDeleteDialog(true)}
+          disabled={isPending}
+        >
+          <Trash2 className="size-4 text-red-500" />
+        </Button>
+      </div>
+
+      <DeleteAlbumDialog
+        open={showDeleteDialog}
+        onOpenChange={setShowDeleteDialog}
+        onDelete={onDelete}
       />
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className="h-8 w-8 shrink-0 border-none hover:bg-zinc-100"
-        onClick={onCancel}
-        disabled={isPending}
-      >
-        <X className="size-4 text-zinc-600" />
-      </Button>
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className="h-8 w-8 shrink-0 border-none hover:bg-zinc-100"
-        onClick={onUpdate}
-        disabled={!title.trim() || isPending}
-      >
-        <Check className="size-4 text-blue-500" />
-      </Button>
-    </div>
+    </>
   )
 }
diff --git a/src/features/create-post/ui/AlbumSelectDropdown.tsx b/src/features/create-post/ui/AlbumSelectDropdown.tsx
@@ -6,8 +6,10 @@ import {
   DropdownMenuTrigger,
 } from '@/shared/ui/dropdown-menu'
 import { Button } from '@/shared/ui/button'
+import { toast } from 'sonner'
 import { useCurrentUserId } from '@/shared/auth/useCurrentUser'
 import { useUserAlbumsQuery } from '@/entities/album/model/hooks/useUserAlbumsQuery'
+import { useDeleteAlbumMutation } from '@/entities/album/model/hooks/useDeleteAlbumMutation'
 import {
   useAlbumDropdownState,
   NO_ALBUM_VALUE,
@@ -78,13 +80,34 @@ export function AlbumSelectDropdown({
     onComplete: handleEditComplete,
   })
 
+  const deleteAlbumMutation = useDeleteAlbumMutation()
+
+  const handleDeleteAlbum = (albumId: number) => {
+    deleteAlbumMutation.mutate(
+      { albumId },
+      {
+        onSuccess: () => {
+          toast.success('앨범이 삭제되었습니다.')
+          handleEditCancel()
+          if (selectedAlbumId === albumId) {
+            onSelect(-1)
+          }
+        },
+        onError: () => {
+          toast.error('앨범 삭제에 실패했습니다.')
+        },
+      }
+    )
+  }
+
   const handleOpenChange = (open: boolean) => {
     if (
       !open &&
       (state.isAddingAlbum ||
         state.editingAlbumId !== null ||
         createAlbumMutation.isPending ||
-        updateAlbumTitleMutation.isPending)
+        updateAlbumTitleMutation.isPending ||
+        deleteAlbumMutation.isPending)
     ) {
       return
     }
@@ -117,7 +140,7 @@ export function AlbumSelectDropdown({
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align="start"
-        className="z-[130] w-80 border-none bg-white p-0 shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
+        className="z-60 w-80 border-none bg-white p-0 shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
       >
         <DropdownMenuRadioGroup
           value={state.value}
@@ -147,10 +170,14 @@ export function AlbumSelectDropdown({
                     key={album.albumId}
                     title={state.editingAlbumTitle}
                     inputRef={editInputRef}
-                    isPending={updateAlbumTitleMutation.isPending}
+                    isPending={
+                      updateAlbumTitleMutation.isPending ||
+                      deleteAlbumMutation.isPending
+                    }
                     onTitleChange={handleEditTitleChange}
                     onUpdate={handleUpdateAlbum}
                     onCancel={handleEditCancel}
+                    onDelete={() => handleDeleteAlbum(album.albumId)}
                     onKeyDown={(e) => handleEditKeyDown(e, handleEditCancel)}
                   />
                 ) : (
diff --git a/src/features/create-post/ui/DeleteAlbumDialog.tsx b/src/features/create-post/ui/DeleteAlbumDialog.tsx
@@ -0,0 +1,58 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from '@/shared/ui/dialog'
+
+type DeleteAlbumDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onDelete: () => void
+}
+
+export function DeleteAlbumDialog({
+  open,
+  onOpenChange,
+  onDelete,
+}: DeleteAlbumDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        overlayClassName="z-70"
+        className="z-70 w-[min(92vw,520px)] gap-0 overflow-hidden rounded-3xl bg-white p-0"
+      >
+        <div className="px-8 pt-10 pb-8 text-center">
+          <DialogTitle className="text-2xl leading-tight font-semibold">
+            앨범을 삭제하시겠어요?
+          </DialogTitle>
+          <DialogDescription className="mt-2 text-sm text-zinc-500">
+            앨범에 포함된 게시글은 삭제되지 않으며, '앨범 없음' 상태로
+            변경됩니다.
+          </DialogDescription>
+        </div>
+
+        <div className="h-px w-full bg-zinc-200" />
+
+        <button
+          type="button"
+          className="w-full px-6 py-5 text-center text-base font-semibold text-red-500 hover:bg-zinc-50"
+          onClick={onDelete}
+        >
+          삭제
+        </button>
+
+        <div className="h-px w-full bg-zinc-200" />
+
+        <button
+          type="button"
+          className="w-full px-6 py-5 text-center text-base font-medium hover:bg-zinc-50"
+          onClick={() => onOpenChange(false)}
+        >
+          취소
+        </button>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/routes/_app/$userId/albums.tsx b/src/routes/_app/$userId/albums.tsx
@@ -76,9 +76,24 @@ function RouteComponent() {
             />
           ))}
         </div>
+      ) : !selectedAlbum ? (
+        <div className="space-y-4">
+          <div className="flex w-full items-center justify-end">
+            <button
+              type="button"
+              onClick={handleBackToList}
+              className="text-sm font-medium text-blue-500 hover:underline"
+            >
+              ← 앨범 목록으로
+            </button>
+          </div>
+          <div className="flex h-96 flex-col items-center justify-center gap-2 text-sm text-gray-500">
+            <span>해당 앨범은 삭제되었습니다.</span>
+          </div>
+        </div>
       ) : (
         <div className="space-y-4">
-          {isAlbumLoading || !albumDetail || !selectedAlbum ? (
+          {isAlbumLoading || !albumDetail ? (
             <div className="flex justify-center text-sm text-gray-500">
               앨범을 불러오는 중입니다...
             </div>
