♻️Refactor: 헤더 및 대시보드 수정 페이지 리팩토링

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

@@ -14,25 +14,26 @@ export default function DashBoardEditPage() {
   const router = useRouter()
 
   return (
-    <div className="BG-gray pb-16">
+    <div className="BG-gray px-4 pb-16 sm:px-8 md:px-16">
+      {/* 돌아가기 버튼 */}
       <button
-        className="flex cursor-pointer items-center gap-12 px-16 pt-16"
+        className="flex cursor-pointer items-center gap-12 pt-16"
         type="button"
         onClick={() => router.back()}
       >
         <Image src="/images/back.png" alt="돌아가기" width={6} height={4} />
         <p className="text-14">돌아가기</p>
       </button>
 
-      {/* 컨텐츠 박스: 기본 너비 500px, 화면 작으면 100% 최대 500px */}
-      <div className="mx-auto ml-16 flex flex-col gap-16 p-16 sm:max-w-full sm:px-4">
+      {/* 콘텐츠 영역 */}
+      <div className="mobile-sm:max-w-full mt-8 flex w-full flex-col gap-16 pl-16 sm:max-w-[460px] md:max-w-[500px]">
         <EditInfo />
         <EditMember />
         <EditInvitation />
       </div>
 
-      {/* 삭제 버튼 영역: 기본 너비 292px, 화면 작으면 100% 최대 292px, 좌측 margin 제거 */}
-      <div className="BG-white align-center Text-btn i8 ml-16 mt-8 flex max-w-292 justify-center rounded-md px-16 py-6">
+      {/* 삭제 버튼 영역 */}
+      <div className="BG-white Text-btn ml-18 mt-18 flex justify-center rounded-md py-6 sm:max-w-[292px]">
         <DeleteDashboardButton dashboardId={String(id)} />
       </div>
     </div>

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

@@ -10,7 +10,7 @@ export default function AboutLayout({
   return (
     <>
       <Sidebar />
-      <div className="pl-300">
+      <div className="pl-[300px] transition-all duration-300 mobile:pl-67 tablet:pl-[150px]">
         <Header />
         <main>{children}</main>
       </div>

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

@@ -3,6 +3,7 @@
 import api from '@lib/axios'
 import { showError, showSuccess } from '@lib/toast'
 import { useMutation } from '@tanstack/react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import axios from 'axios'
 import { useRouter } from 'next/navigation'
 import React from 'react'
@@ -16,6 +17,7 @@ export default function DeleteDashboardButton({
   dashboardId,
 }: DeleteDashboardButtonProps) {
   const router = useRouter()
+  const queryClient = useQueryClient()
 
   const mutation = useMutation<void, Error, void>({
     mutationFn: async () => {
@@ -27,7 +29,10 @@ export default function DeleteDashboardButton({
       )
     },
     onSuccess: () => {
-      router.push('/dashboard')
+      // 대시보드 삭제 후 사이드 바 대시보드 목록 쿼리 무효화
+      queryClient.invalidateQueries({ queryKey: ['dashboards'] })
+
+      router.push('/mydashboard')
       showSuccess('대시보드가 삭제되었습니다')
     },
     onError: (error) => {

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

@@ -32,7 +32,6 @@ export default function EditInvitation() {
 
   const dashboardId = params.id as string
   const queryClient = useQueryClient()
-
   const [currentPage, setCurrentPage] = useState(1)
 
   const {
@@ -53,7 +52,6 @@ export default function EditInvitation() {
     retry: false,
   })
 
-  // length가 0인 경우에도 최소 페이지 1로 보장
   const totalPages = Math.max(
     1,
     Math.ceil(invitations.length / INVITATION_SIZE),
@@ -86,7 +84,6 @@ export default function EditInvitation() {
   const handlePrev = () => setCurrentPage((p) => Math.max(p - 1, 1))
   const handleNext = () => setCurrentPage((p) => Math.min(p + 1, totalPages))
 
-  // 에러 메시지 정리
   const errorMessage =
     isError && axios.isAxiosError(error)
       ? error.response?.status === 403
@@ -98,37 +95,55 @@ export default function EditInvitation() {
 
   return (
     <div className="BG-white w-full max-w-584 overflow-x-auto whitespace-nowrap rounded-16 px-32 py-24">
-      <PaginationHeader
-        currentPage={currentPage}
-        totalPages={totalPages}
-        title="초대 내역"
-        onPrev={handlePrev}
-        onNext={handleNext}
-      >
+      {/* Header + 초대 버튼 영역 (데스크탑용) */}
+      <div className="mb-16 flex flex-col gap-12 md:flex-row md:items-center md:justify-between">
+        <PaginationHeader
+          currentPage={currentPage}
+          totalPages={totalPages}
+          title="초대 내역"
+          onPrev={handlePrev}
+          onNext={handleNext}
+        />
+
+        {/* 데스크탑에서만 보이는 초대 버튼 */}
         <button
           onClick={() => openModal('invite')}
-          className="BG-violet flex w-fit shrink-0 items-center gap-8 rounded-5 px-12 py-6"
+          className="BG-violet mb-24 hidden w-fit shrink-0 items-center gap-8 self-end rounded-5 px-12 py-6 md:flex"
         >
           <div className="relative flex size-12 shrink-0">
             <Image src="/images/invitation-white.png" fill alt="초대 버튼" />
           </div>
           <p className="text-14 text-white">초대하기</p>
         </button>
-      </PaginationHeader>
+      </div>
 
+      {/* 이메일 입력 및 모바일 전용 버튼 */}
       <form className="overflow-x-auto">
-        <label htmlFor="title" className="Text-black mb-8 block text-16">
-          이메일
-        </label>
+        <div className="mb-8 flex flex-row items-center justify-between gap-4 md:block">
+          <label htmlFor="title" className="Text-black block text-16">
+            이메일
+          </label>
+
+          {/* 모바일/태블릿에서만 보이는 초대 버튼 */}
+          <button
+            onClick={() => openModal('invite')}
+            type="button"
+            className="BG-violet mb-12 flex w-fit shrink-0 items-center gap-8 rounded-5 px-12 py-6 md:hidden"
+          >
+            <div className="relative flex size-12 shrink-0">
+              <Image src="/images/invitation-white.png" fill alt="초대 버튼" />
+            </div>
+            <p className="text-14 text-white">초대하기</p>
+          </button>
+        </div>
+
         <div className="flex flex-col gap-4">
           {isLoading && (
             <p className="Text-gray py-12 text-center">로딩 중...</p>
           )}
-
           {errorMessage && (
             <p className="Text-blue py-12 text-center">{errorMessage}</p>
           )}
-
           {!isLoading &&
             !errorMessage &&
             currentItems.map((member, index) => {
@@ -150,7 +165,6 @@ export default function EditInvitation() {
                       </Tooltip>
                     </div>
                   </div>
-
                   <button
                     type="button"
                     disabled={cancelMutation.isPending}

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

@@ -24,7 +24,7 @@ async function deleteMember(memberId: number): Promise<void> {
 export default function EditMember() {
   const queryClient = useQueryClient()
   const { id: dashboardId } = useParams()
-  const dashboardIdStr = String(dashboardId)
+  const dashboardIdNum = Number(dashboardId)
 
   const [currentPage, setCurrentPage] = useState(1)
 
@@ -33,9 +33,9 @@ export default function EditMember() {
     isLoading,
     isError,
   } = useQuery<Member[]>({
-    queryKey: ['members', dashboardIdStr],
-    queryFn: () => fetchMembers(dashboardIdStr),
-    enabled: !!dashboardIdStr,
+    queryKey: ['members', dashboardIdNum],
+    queryFn: () => fetchMembers(dashboardIdNum),
+    enabled: !!dashboardIdNum,
   })
 
   // 본인이 구성원으로 들어가기 때문에 0 페이지일 경우 X
@@ -55,7 +55,7 @@ export default function EditMember() {
     mutationFn: (memberId: number) => deleteMember(memberId),
     onSuccess: () => {
       showSuccess('삭제에 성공하였습니다.')
-      queryClient.invalidateQueries({ queryKey: ['members', dashboardIdStr] })
+      queryClient.invalidateQueries({ queryKey: ['members', dashboardIdNum] })
     },
     onError: () => {
       showError('삭제에 실패했습니다.')
@@ -64,7 +64,7 @@ export default function EditMember() {
 
   return (
     <div>
-      <div className="BG-white max-w-584 rounded-16 px-32 py-24">
+      <div className="BG-white max-w-584 overflow-x-auto rounded-16 px-32 py-24">
         <PaginationHeader
           currentPage={currentPage}
           totalPages={totalPages}

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

@@ -18,14 +18,13 @@ export function PaginationHeader({
   title,
   onPrev,
   onNext,
-  children,
 }: PaginationHeaderProps) {
   return (
-    <div className="mb-24 flex items-center justify-between whitespace-nowrap">
+    <div className="mb-20 flex max-w-500 items-center justify-between whitespace-nowrap">
       <h2 className="Text-black text-18 font-bold">{title}</h2>
 
       <div className="flex shrink-0 items-center">
-        <p className="Text-gray mr-16 shrink-0 text-12">
+        <p className="Text-gray mx-32 shrink-0 text-12">
           {totalPages} 페이지 중 {currentPage}
         </p>
         <button onClick={onPrev} disabled={currentPage === 1}>
@@ -52,7 +51,6 @@ export function PaginationHeader({
             height={36}
           />
         </button>
-        {children && <div className="ml-16">{children}</div>}
       </div>
     </div>
   )