Refactor/121/page inner

src/app/(after-login)/dashboard/[id]/edit/loading.tsx

@@ -1,7 +1,11 @@
+import { Page, PageInner } from '@/components/layout/Page';
+
 export default function loading() {
   return (
-    <div className='p-10'>
-      <div className='py-6 text-md text-gray-40'>대시보드 정보를 불러오는 중입니다.</div>
-    </div>
+    <Page>
+      <PageInner>
+        <span className='text-md text-gray-40'>대시보드 정보를 불러오는 중입니다.</span>
+      </PageInner>
+    </Page>
   );
 }

src/app/(after-login)/dashboard/[id]/edit/page.tsx

@@ -1,3 +1,4 @@
+import { Page, PageInner } from '@/components/layout/Page';
 import DetailModify from '@/components/dashboard/DetailModify';
 import DetailMembers from '@/components/dashboard/DetailMembers';
 import DetailInvited from '@/components/dashboard/DetailInvited';
@@ -18,23 +19,26 @@ export default async function DashboardEditPage({ params }: { params: Promise<{
   }
 
   return (
-    <div className='p-10'>
-      <div className='mb-8'>
-        <GoBackLink href={`/dashboard/${id}`} />
-      </div>
-      <div className='grid w-full max-w-[620px] gap-4'>
-        {/* 대시보드 정보 */}
-        <DetailModify data={dashboardDetail} />
+    <Page>
+      <PageInner>
+        <div className='mb-8'>
+          <GoBackLink href={`/dashboard/${id}`} />
+        </div>
 
-        {/* 구성원 리스트 */}
-        <DetailMembers />
+        <div className='grid gap-4'>
+          {/* 대시보드 정보 */}
+          <DetailModify data={dashboardDetail} />
 
-        {/* 초대내역 */}
-        <DetailInvited />
+          {/* 구성원 리스트 */}
+          <DetailMembers />
 
-        {/* 대시보드 삭제 */}
-        <DetailDelete />
-      </div>
-    </div>
+          {/* 초대내역 */}
+          <DetailInvited />
+
+          {/* 대시보드 삭제 */}
+          <DetailDelete />
+        </div>
+      </PageInner>
+    </Page>
   );
 }

src/app/(after-login)/mydashboard/page.tsx

@@ -1,15 +1,16 @@
 import MyDashboard from '@/components/dashboard/MyDashboard';
 import MyInvitedDashboardList from '@/components/dashboard/MyInvitedDashboardList';
+import { Page, PageInner } from '@/components/layout/Page';
 
 export default function MydashboardPage() {
   return (
-    <div className='p-10'>
-      <div className='w-full max-w-screen-lg'>
+    <Page>
+      <PageInner className='max-w-screen-lg'>
         <div className='grid gap-10'>
           <MyDashboard />
           <MyInvitedDashboardList />
         </div>
-      </div>
-    </div>
+      </PageInner>
+    </Page>
   );
 }

src/app/(after-login)/mypage/loading.tsx

@@ -1,7 +1,11 @@
+import { Page, PageInner } from '@/components/layout/Page';
+
 export default function loading() {
   return (
-    <div className='p-10'>
-      <div className='py-6 text-md text-gray-40'>내정보를 불러오는 중입니다.</div>
-    </div>
+    <Page>
+      <PageInner>
+        <span className='text-md text-gray-40'>내정보를 불러오는 중입니다.</span>
+      </PageInner>
+    </Page>
   );
 }

src/app/(after-login)/mypage/page.tsx

@@ -1,5 +1,6 @@
 import { redirect } from 'next/navigation';
 import { User, userSchema } from '@/apis/users/types';
+import { Page, PageInner } from '@/components/layout/Page';
 import PasswordEdit from '@/components/profile/PasswordEdit';
 import ProfileEdit from '@/components/profile/ProfileEdit';
 import GoBackLink from '@/components/ui/Link/GoBackLink';
@@ -15,17 +16,19 @@ export default async function MyPage() {
   }
 
   return (
-    <div className='p-10'>
-      <div className='mb-8'>
-        <GoBackLink href='/mydashboard' />
-      </div>
-      <div className='grid w-full max-w-[620px] gap-4'>
-        {/* 프로필 수정 */}
-        <ProfileEdit user={userData} />
+    <Page>
+      <PageInner>
+        <div className='mb-8'>
+          <GoBackLink href='/mydashboard' />
+        </div>
+        <div className='grid gap-4'>
+          {/* 프로필 수정 */}
+          <ProfileEdit user={userData} />
 
-        {/* 비밀번호 수정 */}
-        <PasswordEdit />
-      </div>
-    </div>
+          {/* 비밀번호 수정 */}
+          <PasswordEdit />
+        </div>
+      </PageInner>
+    </Page>
   );
 }

src/components/layout/Page.tsx

@@ -0,0 +1,12 @@
+import { cn } from '@/utils/helper';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+
+type PageProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+
+export function Page({ className, children }: PageProps) {
+  return <div className={cn('px-3 py-[15px] md:p-10', className)}>{children}</div>;
+}
+
+export function PageInner({ className, children }: PageProps) {
+  return <div className={cn('w-full max-w-[620px]', className)}>{children}</div>;
+}