Merge pull request #64 from JECT-Study/chore/63-layout-390

seryoii · web-flow · commit 2f1c86caae79 · 2026-06-07T05:23:41.000+09:00
chore: mobile 레이아웃 추가, 설정 (#63)
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -37,7 +37,7 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${pretendard.className} ${alata.variable} h-full antialiased`}>
       {/* <body className="flex min-h-full flex-col"> */}
-      <body className="mx-auto min-h-screen w-full max-w-97.5 bg-white">
+      <body className="mobile:w-97.5 mx-auto min-h-screen w-full bg-white">
         <Providers>{children}</Providers>
         <Suspense fallback={null}>
           <ScrollManager />
diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -86,7 +86,7 @@ function Badge({ children, size = "medium" }: BadgeProps) {
 function MypageHeader() {
   return (
     <>
-      <header className="bg-bg-primary fixed top-0 right-0 left-0 z-10 flex h-14 w-full items-center justify-between px-5">
+      <header className="bg-bg-primary mobile:w-97.5 fixed top-0 left-1/2 z-10 flex h-14 w-full -translate-x-1/2 items-center justify-between px-5">
         <h1 className="text-headline-1 text-text-primary font-semibold">마이페이지</h1>
         <Link
           href="/mypage/settings"
diff --git a/src/app/mypage/settings/profile/page.tsx b/src/app/mypage/settings/profile/page.tsx
@@ -219,7 +219,7 @@ export default function MyPageProfileSettingsPage() {
       <Header title="회원정보 변경" showBack />
 
       <section className="fixed top-15 right-0 bottom-[82px] left-0 overflow-y-auto">
-        <div className="flex w-full flex-col gap-6 px-5 py-6">
+        <div className="mobile:w-97.5 mx-auto flex w-full flex-col gap-6 px-5 py-6">
           <ProfileImageInput
             initialImageUrl={meQuery.data?.profileImageUrl}
             onChange={file => {
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -39,6 +39,9 @@ const config: Config = {
         pretendard: ["var(--font-pretendard)", "sans-serif"],
         alata: ["var(--font-alata)", "sans-serif"],
       },
+      screens: {
+        mobile: "430px",
+      },
     },
   },
   plugins: [],
