♻️refactor: 최종 수정

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

@@ -4,7 +4,7 @@ export default function AboutLayout({
   children: React.ReactNode
 }) {
   return (
-    <div>
+    <div className="BG-gray min-h-screen px-20 sm:px-30">
       <main>{children}</main>
     </div>
   )

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

@@ -3,37 +3,27 @@
 import EditInfo from '@dashboard/components/edit/EditInfo'
 import EditInvitation from '@dashboard/components/edit/EditInvitation'
 import EditMember from '@dashboard/components/edit/EditMember'
-import Image from 'next/image'
 import { useParams } from 'next/navigation'
-import { useRouter } from 'next/navigation'
 
 import DeleteDashboardButton from '@/app/features/dashboard/components/edit/DeleteDashboardButton'
+import BackButton from '@/app/shared/components/common/BackButton/BackButton'
 
 export default function DashBoardEditPage() {
   const { id } = useParams()
-  const router = useRouter()
 
   return (
-    <div className="BG-gray px-4 pb-16 sm:px-8 md:px-16">
-      {/* 돌아가기 버튼 */}
-      <button
-        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>
+    <div>
+      <BackButton />
 
       {/* 콘텐츠 영역 */}
-      <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]">
+      <div className="relative z-10 flex max-w-full flex-col gap-16">
         <EditInfo />
         <EditMember />
         <EditInvitation />
       </div>
 
       {/* 삭제 버튼 영역 */}
-      <div className="BG-white Text-btn ml-18 mt-18 flex justify-center rounded-md py-6 sm:max-w-[292px]">
+      <div className="BG-white Text-btn mt-18 flex max-w-292 justify-center rounded-md py-6">
         <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-[300px] transition-all duration-300 mobile:pl-67 tablet:pl-[150px]">
+      <div className="pl-300 transition-all duration-300 mobile:pl-67 tablet:pl-150">
         <Header />
         <main className="pt-57">{children}</main>
       </div>

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

@@ -63,7 +63,7 @@ export default function DeleteDashboardButton({
       onClick={handleDelete}
       // isLoading -> isPending으로 수정됨
       disabled={mutation.isPending}
-      className={`Text-black my-8 whitespace-nowrap rounded-8 font-semibold transition-opacity ${
+      className={`Text-black my-8 whitespace-nowrap rounded-8 font-semibold transition-opacity mobile-sm:text-12 ${
         mutation.isPending
           ? 'cursor-not-allowed opacity-50'
           : 'hover:opacity-90'

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

@@ -16,8 +16,8 @@ export default function EditInfo() {
 
   return (
     <div>
-      <div className="BG-white max-w-584 rounded-16 px-32 py-24">
-        <h2 className="Text-black mb-24 text-18 font-bold">
+      <div className="BG-white relative z-0 max-w-584 rounded-16 px-32 py-24">
+        <h2 className="Text-black mb-24 text-18 font-bold mobile-sm:text-16">
           {selectedDashboard?.title || '대시보드 편집'}
         </h2>
 

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

@@ -94,46 +94,40 @@ export default function EditInvitation() {
         : null
 
   return (
-    <div className="BG-white w-full max-w-584 overflow-x-auto whitespace-nowrap rounded-16 px-32 py-24">
+    <div className="BG-white w-full max-w-584 overflow-x-auto rounded-16 px-32 py-24">
       {/* Header + 초대 버튼 영역 (데스크탑용) */}
-      <div className="mb-16 flex flex-col gap-12 md:flex-row md:items-center md:justify-between">
+      <div className="mb-20 flex items-center justify-between">
+        <h2 className="Text-black text-18 font-bold mobile-sm:text-14">
+          초대 내역
+        </h2>
         <PaginationHeader
           currentPage={currentPage}
           totalPages={totalPages}
-          title="초대 내역"
           onPrev={handlePrev}
           onNext={handleNext}
         />
-
-        {/* 데스크탑에서만 보이는 초대 버튼 */}
-        <button
-          onClick={() => openModal('invite')}
-          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>
       </div>
 
       {/* 이메일 입력 및 모바일 전용 버튼 */}
       <form className="overflow-x-auto">
-        <div className="mb-8 flex flex-row items-center justify-between gap-4 md:block">
-          <label htmlFor="title" className="Text-black block text-16">
+        <div className="mb-8 flex flex-row items-center justify-between gap-4">
+          <label
+            htmlFor="title"
+            className="Text-black block text-16 mobile-sm:text-12"
+          >
             이메일
           </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"
+            className="BG-violet flex w-fit shrink-0 items-center gap-8 rounded-5 px-12 py-6"
           >
             <div className="relative flex size-12 shrink-0">
               <Image src="/images/invitation-white.png" fill alt="초대 버튼" />
             </div>
-            <p className="text-14 text-white">초대하기</p>
+            <p className="text-14 text-white mobile-sm:text-12">초대하기</p>
           </button>
         </div>
 
@@ -145,21 +139,20 @@ export default function EditInvitation() {
             <p className="Text-blue py-12 text-center">{errorMessage}</p>
           )}
           {!isLoading &&
-            !errorMessage &&
             currentItems.map((member, index) => {
               const isLast = index === currentItems.length - 1
               return (
                 <div
                   key={member.id}
                   className={cn(
-                    'flex items-center justify-between gap-12 py-4',
+                    'flex items-center justify-between gap-12 py-12',
                     !isLast && 'Border-bottom',
                   )}
                 >
                   <div className="flex min-w-0 items-center gap-12">
                     <div className="flex min-w-0 flex-col">
                       <Tooltip content={member.invitee.nickname}>
-                        <p className="Text-black max-w-[200px] cursor-help truncate text-13">
+                        <p className="Text-black max-w-200 cursor-help truncate text-13">
                           {member.invitee.email}
                         </p>
                       </Tooltip>
@@ -169,7 +162,7 @@ export default function EditInvitation() {
                     type="button"
                     disabled={cancelMutation.isPending}
                     className={cn(
-                      'Text-btn Border-btn w-fit shrink-0 rounded-md px-16 py-2',
+                      'Text-btn Border-btn w-fit shrink-0 rounded-md px-16 py-2 mobile-sm:text-12',
                       cancelMutation.isPending &&
                         'cursor-not-allowed opacity-50',
                     )}

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

@@ -65,16 +65,23 @@ export default function EditMember() {
   return (
     <div>
       <div className="BG-white max-w-584 overflow-x-auto rounded-16 px-32 py-24">
-        <PaginationHeader
-          currentPage={currentPage}
-          totalPages={totalPages}
-          title="구성원"
-          onPrev={handlePrev}
-          onNext={handleNext}
-        />
+        <div className="mb-20 flex items-center justify-between">
+          <h2 className="Text-black text-18 font-bold mobile-sm:text-14">
+            구성원
+          </h2>
+          <PaginationHeader
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPrev={handlePrev}
+            onNext={handleNext}
+          />
+        </div>
 
         <form>
-          <label htmlFor="title" className="Text-black mb-8 block text-16">
+          <label
+            htmlFor="title"
+            className="Text-black mb-8 block text-16 mobile-sm:text-12"
+          >
             이름
           </label>
 
@@ -119,7 +126,7 @@ export default function EditMember() {
                       disabled={isDeleting}
                       onClick={() => removeMember(member.id)}
                       className={cn(
-                        'Text-btn Border-btn rounded-md px-16 py-2',
+                        'Text-btn Border-btn rounded-md px-16 py-2 mobile-sm:text-12',
                         isDeleting && 'cursor-not-allowed opacity-50',
                       )}
                     >

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

@@ -6,7 +6,6 @@ import React from 'react'
 type PaginationHeaderProps = {
   currentPage: number
   totalPages: number
-  title: string
   onPrev: () => void
   onNext: () => void
   children?: React.ReactNode
@@ -15,43 +14,45 @@ type PaginationHeaderProps = {
 export function PaginationHeader({
   currentPage,
   totalPages,
-  title,
   onPrev,
   onNext,
 }: PaginationHeaderProps) {
   return (
-    <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 max-w-500 items-center justify-center">
+      <p className="Text-gray mx-16 text-12 sm:mx-32 mobile-sm:text-10">
+        {totalPages} 페이지 중 {currentPage}
+      </p>
 
-      <div className="flex shrink-0 items-center">
-        <p className="Text-gray mx-32 shrink-0 text-12">
-          {totalPages} 페이지 중 {currentPage}
-        </p>
-        <button onClick={onPrev} disabled={currentPage === 1}>
-          <Image
-            src={
-              currentPage === 1
-                ? '/images/prev-disabled.png'
-                : '/images/prev.png'
-            }
-            alt="이전"
-            width={36}
-            height={36}
-          />
-        </button>
-        <button onClick={onNext} disabled={currentPage === totalPages}>
-          <Image
-            src={
-              currentPage === totalPages
-                ? '/images/next-disabled.png'
-                : '/images/next.png'
-            }
-            alt="다음"
-            width={36}
-            height={36}
-          />
-        </button>
-      </div>
+      <button
+        onClick={onPrev}
+        disabled={currentPage === 1}
+        className="relative mobile-sm:size-30"
+      >
+        <Image
+          src={
+            currentPage === 1 ? '/images/prev-disabled.png' : '/images/prev.png'
+          }
+          alt="이전"
+          width={36}
+          height={36}
+        />
+      </button>
+      <button
+        onClick={onNext}
+        disabled={currentPage === totalPages}
+        className="relative mobile-sm:size-30"
+      >
+        <Image
+          src={
+            currentPage === totalPages
+              ? '/images/next-disabled.png'
+              : '/images/next.png'
+          }
+          alt="다음"
+          width={36}
+          height={36}
+        />
+      </button>
     </div>
   )
 }

src/app/shared/components/common/Input/Input.tsx

@@ -20,14 +20,17 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <div className="flex flex-col gap-8">
-        <label htmlFor={name} className="Text-black text-base font-normal">
+        <label
+          htmlFor={name}
+          className="Text-black text-base font-normal mobile-sm:text-12"
+        >
           {labelName}
         </label>
 
         <input
           id={name}
           className={cn(
-            'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal',
+            'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal mobile-sm:text-14',
             hasError ? 'Border-error' : 'Border-btn',
             props.readOnly && 'Text-gray cursor-default',
           )}

src/app/shared/components/common/UserInfo.tsx

@@ -22,7 +22,9 @@ export function UserInfo({ nickname, imageUrl, size = 36 }: UserInfoProps) {
     <div className="flex items-center gap-4">
       {/* Avatar에 nickname, profileImageUrl 모두 넘겨줌 */}
       <Avatar size={size} name={displayNickname} imageUrl={displayImage} />
-      <span className="ml-4 text-sm font-semibold">{displayNickname}</span>
+      <span className="ml-4 text-sm font-semibold mobile-sm:text-12">
+        {displayNickname}
+      </span>
     </div>
   )
 }

src/app/shared/components/common/header/Collaborator/CollaboratorList.tsx

@@ -31,7 +31,7 @@ export default function CollaboratorList() {
   const extraCount = members.length - MAX_COLLABS
 
   return (
-    <div className="flex -space-x-10">
+    <div className="flex -space-x-10 mobile-sm:hidden">
       {visibleCollaborators.map((collab) => (
         <Tooltip key={collab.id} content={collab.nickname}>
           <div className="flex flex-col items-center text-xs">

src/app/shared/components/common/header/Header.tsx

@@ -9,22 +9,21 @@ import UserDropdown from './UserDropdown'
 
 export default function Header() {
   return (
-    //px-48
-    <header className="z-1 BG-white Border-bottom Text-black fixed inset-x-0 top-0 w-full overflow-x-auto border-b py-10 pl-320 pr-10 mobile-wide:pl-100 tablet-wide:pl-210">
-      <div className="flex w-full items-center justify-between pr-16 mobile-wide:justify-end tablet-wide:justify-between">
+    <header className="BG-white Border-bottom Text-black fixed inset-x-0 top-0 z-40 w-full overflow-x-auto border-b py-10 pl-360 pr-10 mobile-wide:pl-80 tablet-wide:pl-200">
+      <div className="flex w-full items-center justify-between pr-16 mobile-wide:justify-between tablet-wide:justify-between">
         {/* 좌측 대시보드명 */}
-        <div className="hidden lg:block">
+        <div className="hidden md:block">
           <LeftHeaderContent />
         </div>
 
         {/* 우측 사용자 정보/다크모드 */}
-        <div className="flex gap-16 whitespace-nowrap">
+        <div className="flex gap-8 whitespace-nowrap sm:gap-16">
           <RightHeaderNav />
           <CreateInvitationModal />
           {/* 협업자 목록 */}
           <CollaboratorList />
 
-          <div className="flex items-center gap-32 border-l pl-16">
+          <div className="flex items-center gap-16 border-l pl-8 sm:gap-32 sm:pl-16">
             {/* 사용자 정보 드롭다운 */}
             <UserDropdown />
             {/* 다크모드 토글 */}