✨feat: 대시보드 수정 페이지 API 연동

src/app/dashboard/[id]/edit/page.tsx

@@ -3,7 +3,6 @@
 import EditInfo from '@dashboard/components/edit/EditInfo'
 import EditInvitation from '@dashboard/components/edit/EditInvitation'
 import EditMember from '@dashboard/components/edit/EditMember'
-import { showError, showSuccess } from '@lib/toast'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
 import { useRouter } from 'next/navigation'
@@ -14,23 +13,15 @@ export default function DashBoardEditPage() {
   const { id } = useParams()
   const router = useRouter()
 
-  const handleSuccess = () => {
-    showSuccess('대시보드가 성공적으로 수정되었습니다.')
-  }
-
-  const handleError = () => {
-    showError('수정 중 오류가 발생했습니다.')
-  }
-
   return (
     <div className="BG-gray pb-16">
       <button
-        className="flex cursor-pointer items-center gap-12 p-16"
+        className="flex cursor-pointer items-center gap-12 px-16 pt-16"
         type="button"
         onClick={() => router.back()}
       >
-        <Image src="/images/back.png" alt="돌아가기" width={8} height={4} />
-        <p>돌아가기</p>
+        <Image src="/images/back.png" alt="돌아가기" width={6} height={4} />
+        <p className="text-14">돌아가기</p>
       </button>
       <div className="flex w-500 flex-col gap-16 p-16">
         <EditInfo />

src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx

@@ -1,9 +1,12 @@
 'use client'
 
 import api from '@lib/axios'
+import { showError, showSuccess } from '@lib/toast'
+import { useMutation } from '@tanstack/react-query'
 import axios from 'axios'
 import { useRouter } from 'next/navigation'
-import React, { useState } from 'react'
+import React from 'react'
+import { toast } from 'sonner'
 
 type DeleteDashboardButtonProps = {
   dashboardId: string
@@ -13,52 +16,52 @@ export default function DeleteDashboardButton({
   dashboardId,
 }: DeleteDashboardButtonProps) {
   const router = useRouter()
-  const [isDeleting, setIsDeleting] = useState(false)
-
-  console.log('DeleteDashboardButton 렌더됨:', dashboardId)
-
-  const handleDelete = async () => {
-    const confirmed = confirm(
-      '정말로 이 대시보드를 삭제하시겠습니까? 삭제 후 되돌릴 수 없습니다.',
-    )
-
-    if (!confirmed) return
-
-    try {
-      setIsDeleting(true)
 
+  const mutation = useMutation<void, Error, void>({
+    mutationFn: async () => {
       if (!process.env.NEXT_PUBLIC_TEAM_ID) {
         throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.')
       }
-
       await api.delete(
         `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards/${dashboardId}`,
       )
-
-      // 삭제 후 대시보드 목록 페이지로 이동
+    },
+    onSuccess: () => {
       router.push('/dashboard')
-    } catch (error: unknown) {
+      showSuccess('대시보드가 삭제되었습니다')
+    },
+    onError: (error) => {
       if (axios.isAxiosError(error)) {
         const message =
           error.response?.data?.message ||
           '대시보드 삭제 중 오류가 발생했습니다.'
-        console.error('대시보드 삭제 오류:', message)
-        alert(message) // 또는 showError(message) 등으로 사용자에게 표시
+        showError(message)
       } else {
-        console.error('대시보드 삭제 오류:', error)
-        alert('알 수 없는 오류가 발생했습니다.')
+        showError('알 수 없는 오류가 발생했습니다.')
       }
-    } finally {
-      setIsDeleting(false)
-    }
+    },
+  })
+
+  // sonner로 삭제 확인 토스트 구현
+  function handleDelete() {
+    toast('대시보드를 삭제하시겠습니까?', {
+      description: '삭제 후 되돌릴 수 없습니다.',
+      action: {
+        label: '삭제하기',
+        onClick: () => mutation.mutate(),
+      },
+    })
   }
 
   return (
     <button
       onClick={handleDelete}
-      disabled={isDeleting}
+      // isLoading -> isPending으로 수정됨
+      disabled={mutation.isPending}
       className={`Text-black my-8 rounded-8 font-semibold transition-opacity ${
-        isDeleting ? 'cursor-not-allowed opacity-50' : 'hover:opacity-90'
+        mutation.isPending
+          ? 'cursor-not-allowed opacity-50'
+          : 'hover:opacity-90'
       }`}
     >
       대시보드 삭제하기

src/app/features/dashboard/components/edit/EditInfo.tsx

@@ -1,165 +1,35 @@
 'use client'
 
-import api from '@lib/axios'
-import { useQueryClient } from '@tanstack/react-query'
-import axios from 'axios'
-import Image from 'next/image'
-import { useRouter } from 'next/navigation'
-import React, { useEffect, useState } from 'react'
-
-import { DASHBOARD_COLORS } from '@/app/shared/constants/colors'
-import { useSelectedDashboardStore } from '@/app/shared/store/useSelectedDashboardStore'
-import { CreateDashboardRequest } from '@/app/shared/types/dashboard'
+import DashboardForm from '@components/dashboard/DashboardForm'
+import { useDashboardForm } from '@hooks/useDashboardForm'
+import React from 'react'
 
 export default function EditInfo() {
-  const router = useRouter()
-  const { selectedDashboard, setSelectedDashboard } =
-    useSelectedDashboardStore()
-  const queryClient = useQueryClient()
-
-  const [formData, setFormData] = useState<CreateDashboardRequest>({
-    title: '',
-    color: DASHBOARD_COLORS[0],
-  })
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  // selectedDashboard가 있을 때 formData 초기화
-  useEffect(() => {
-    if (selectedDashboard) {
-      setFormData({
-        title: selectedDashboard.title,
-        color: selectedDashboard.color,
-      })
-    }
-  }, [selectedDashboard])
-
-  // 입력값 변경 핸들러
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }))
-  }
-
-  // 색상 선택 핸들러
-  const handleColorSelect = (color: string) => {
-    setFormData((prev) => ({ ...prev, color }))
-  }
-
-  // 제출 핸들러
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    if (!formData.title || !formData.color) return
-
-    try {
-      setIsSubmitting(true)
-
-      if (!process.env.NEXT_PUBLIC_TEAM_ID || !selectedDashboard?.id) {
-        throw new Error('필수 정보가 누락되었습니다.')
-      }
-
-      const response = await api.put(
-        `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards/${selectedDashboard.id}`,
-        formData,
-      )
-
-      const data = response.data
-
-      // 1. 상태 업데이트 (헤더, 수정정보 실시간 반영)
-      setSelectedDashboard(data)
-
-      // 2. react-query 캐시 무효화 → Sidebar 목록 재요청 유도
-      await queryClient.invalidateQueries({ queryKey: ['dashboards'] })
-
-      // 성공 시 상세 페이지 이동
-      router.push(`/dashboard/${data.id}/edit`)
-    } catch (error: unknown) {
-      if (axios.isAxiosError(error)) {
-        const message =
-          error.response?.data?.message ||
-          '대시보드 수정 중 오류가 발생했습니다.'
-        console.error('대시보드 수정 오류:', message)
-        alert(message)
-      } else {
-        console.error('대시보드 수정 오류:', error)
-        alert('알 수 없는 오류가 발생했습니다.')
-      }
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
+  const {
+    formData,
+    isSubmitting,
+    handleChange,
+    handleColorSelect,
+    handleSubmit,
+    selectedDashboard,
+  } = useDashboardForm('edit')
 
   return (
     <div>
-      {/* 컨테이너 */}
       <div className="BG-white h-300 w-584 rounded-16 px-32 py-24">
         <h2 className="Text-black mb-24 text-18 font-bold">
           {selectedDashboard?.title || '대시보드 편집'}
         </h2>
 
-        <form onSubmit={handleSubmit}>
-          {/* 제목 입력 */}
-          <div className="mb-16">
-            <label htmlFor="title" className="Text-black mb-8 block text-16">
-              대시보드 이름
-            </label>
-            <input
-              type="text"
-              id="title"
-              name="title"
-              value={formData.title}
-              onChange={handleChange}
-              placeholder="대시보드 이름을 입력해주세요."
-              className="Border-section w-512 rounded-8 px-12 py-10 text-16 outline-none"
-              required
-            />
-          </div>
-
-          {/* 색상 선택 */}
-          <div className="mb-30">
-            <div className="flex gap-8">
-              {DASHBOARD_COLORS.map((color) => (
-                <button
-                  key={color}
-                  type="button"
-                  onClick={() => handleColorSelect(color)}
-                  className="relative flex size-30 items-center justify-center rounded-full"
-                  style={{ backgroundColor: color }}
-                  aria-label={`색상 ${color}`}
-                >
-                  {/* 선택된 색상에 체크 표시 */}
-                  {formData.color === color && (
-                    <div className="relative size-24 items-center justify-center">
-                      <Image
-                        src="/images/check.svg"
-                        alt="check"
-                        fill
-                        className="object-contain"
-                      />
-                    </div>
-                  )}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* 하단 버튼 */}
-          <div>
-            <button
-              type="submit"
-              disabled={!formData.title || !formData.color || isSubmitting}
-              className={`BG-violet h-48 w-512 rounded-8 px-16 py-10 text-16 font-semibold text-white transition-opacity ${
-                !formData.title || !formData.color || isSubmitting
-                  ? 'cursor-not-allowed opacity-50'
-                  : 'hover:opacity-90'
-              }`}
-            >
-              변경
-            </button>
-          </div>
-        </form>
+        <DashboardForm
+          formData={formData}
+          onChange={handleChange}
+          onColorSelect={handleColorSelect}
+          onSubmit={handleSubmit}
+          isSubmitting={isSubmitting}
+          submitText="변경"
+          submitButtonWidth="w-516"
+        />
       </div>
     </div>
   )