✨feat: 헤더 API 연동

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

@@ -1,19 +1,11 @@
-import Header from '@components/common/header/Header'
-
-import Sidebar from '@/app/shared/components/common/sidebar/Sidebar'
-
 export default function AboutLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <>
-      <Sidebar />
-      <div className="pl-300">
-        <Header />
-        <main>{children}</main>
-      </div>
-    </>
+    <div>
+      <main>{children}</main>
+    </div>
   )
 }

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

@@ -5,8 +5,15 @@ 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'
+
+import DeleteDashboardButton from '@/app/features/dashboard/components/edit/DeleteDashboardButton'
 
 export default function DashBoardEditPage() {
+  const { id } = useParams()
+  const router = useRouter()
+
   const handleSuccess = () => {
     showSuccess('대시보드가 성공적으로 수정되었습니다.')
   }
@@ -16,22 +23,25 @@ export default function DashBoardEditPage() {
   }
 
   return (
-    <div className="BG-gray">
-      <div
+    <div className="BG-gray pb-16">
+      <button
         className="flex cursor-pointer items-center gap-12 p-16"
-        onClick={() => window.history.back()}
+        type="button"
+        onClick={() => router.back()}
       >
         <Image src="/images/back.png" alt="돌아가기" width={8} height={4} />
         <p>돌아가기</p>
-      </div>
+      </button>
       <div className="flex w-500 flex-col gap-16 p-16">
         <EditInfo />
         <EditMember />
         <EditInvitation />
       </div>
-      <button className="Text-btn Border-btn ml-16 rounded-md px-64 py-12">
-        대시보드 삭제하기
-      </button>
+
+      {/* 삭제 버튼 영역 */}
+      <div className="BG-white align-center Text-btn i8 ml-16 flex w-292 justify-center rounded-md px-64 py-6">
+        <DeleteDashboardButton dashboardId={String(id)} />
+      </div>
     </div>
   )
 }

src/app/dashboard/[id]/layout.tsx

@@ -8,10 +8,12 @@ export default function AboutLayout({
   children: React.ReactNode
 }) {
   return (
-    <div>
-      {/* <Sidebar /> */}
-      <Header />
-      <div>{children}</div> {/* 여기에 page.tsx 내용이 들어옴 */}
-    </div>
+    <>
+      <Sidebar />
+      <div className="pl-300">
+        <Header />
+        <main>{children}</main>
+      </div>
+    </>
   )
 }

src/app/features/auth/store/useAuthStore.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
+
 import { AuthState } from '../types/auth.type'
 
 export const useAuthStore = create<AuthState>()(

src/app/features/dashboard/api/invitation.ts

@@ -0,0 +1,17 @@
+// src/app/features/dashboard/api/invitation.ts
+import api from '@lib/axios'
+
+type InvitationRequest = {
+  email: string
+  dashboardId: number | string
+}
+
+export const inviteUser = async ({ email, dashboardId }: InvitationRequest) => {
+  const response = await api.post(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards/${dashboardId}/invitations`,
+    {
+      email,
+    },
+  )
+  return response.data
+}

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

@@ -0,0 +1,67 @@
+'use client'
+
+import api from '@lib/axios'
+import axios from 'axios'
+import { useRouter } from 'next/navigation'
+import React, { useState } from 'react'
+
+type DeleteDashboardButtonProps = {
+  dashboardId: string
+}
+
+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)
+
+      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}`,
+      )
+
+      // 삭제 후 대시보드 목록 페이지로 이동
+      router.push('/dashboard')
+    } catch (error: unknown) {
+      if (axios.isAxiosError(error)) {
+        const message =
+          error.response?.data?.message ||
+          '대시보드 삭제 중 오류가 발생했습니다.'
+        console.error('대시보드 삭제 오류:', message)
+        alert(message) // 또는 showError(message) 등으로 사용자에게 표시
+      } else {
+        console.error('대시보드 삭제 오류:', error)
+        alert('알 수 없는 오류가 발생했습니다.')
+      }
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleDelete}
+      disabled={isDeleting}
+      className={`Text-black my-8 rounded-8 font-semibold transition-opacity ${
+        isDeleting ? 'cursor-not-allowed opacity-50' : 'hover:opacity-90'
+      }`}
+    >
+      대시보드 삭제하기
+    </button>
+  )
+}

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

@@ -1,56 +1,91 @@
+'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'
 
 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
-    }
+    if (!formData.title || !formData.color) return
+
     try {
       setIsSubmitting(true)
 
-      if (!process.env.NEXT_PUBLIC_TEAM_ID) {
-        throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.')
+      if (!process.env.NEXT_PUBLIC_TEAM_ID || !selectedDashboard?.id) {
+        throw new Error('필수 정보가 누락되었습니다.')
       }
 
-      const response = await api.post(
-        `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards`,
+      const response = await api.put(
+        `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards/${selectedDashboard.id}`,
         formData,
       )
 
       const data = response.data
 
-      // 성공 시 대시보드 상세 페이지로 이동
-      router.push(`/dashboard/${data.id}`)
-    } catch (error) {
-      console.error('대시보드 생성 오류:', error)
+      // 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)
     }
@@ -60,7 +95,9 @@ export default function EditInfo() {
     <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">새로운 대시보드</h2>
+        <h2 className="Text-black mb-24 text-18 font-bold">
+          {selectedDashboard?.title || '대시보드 편집'}
+        </h2>
 
         <form onSubmit={handleSubmit}>
           {/* 제목 입력 */}
@@ -92,7 +129,7 @@ export default function EditInfo() {
                   style={{ backgroundColor: color }}
                   aria-label={`색상 ${color}`}
                 >
-                  {/* 선택된 색상 체크 */}
+                  {/* 선택된 색상에 체크 표시 */}
                   {formData.color === color && (
                     <div className="relative size-24 items-center justify-center">
                       <Image