design : 내용이 screen 넘지 않을 때 스크롤 안 생기도록 레이아웃 수정

#666
KEEPER31337 · Oct 2, 2023 · f2e4e34 · f2e4e34
1 parent 65bae29
commit f2e4e34
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 9 deletions.
diff --git a/src/components/Layout/Container/FitContainer.tsx b/src/components/Layout/Container/FitContainer.tsx
@@ -3,8 +3,8 @@ import { Outlet } from 'react-router-dom';
 
 const FitContainer = () => {
   return (
-    <div className="mb-40 mt-14 flex w-full justify-center pt-10 sm:mt-header sm:pt-16">
-      <div className="w-full max-w-container px-2 2xl:px-0">
+    <div className="flex min-h-screen w-full justify-center pt-10 sm:pt-16">
+      <div className="mb-20 mt-header w-full max-w-container px-2 2xl:px-0">
         <Outlet />
       </div>
     </div>

diff --git a/src/components/Layout/Container/FullContainer.tsx b/src/components/Layout/Container/FullContainer.tsx
@@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom';
 
 const FullContainer = () => {
   return (
-    <div className="mt-14 flex h-full w-full justify-center bg-middleBlack sm:mt-header">
+    <div className="flex min-h-screen w-full justify-center bg-middleBlack pt-14 sm:pt-header">
       <Outlet />
     </div>
   );

diff --git a/src/components/Layout/MainLayout.tsx b/src/components/Layout/MainLayout.tsx
@@ -10,7 +10,7 @@ const MainLayout = () => {
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
 
   return (
-    <div className="flex">
+    <div className="flex min-h-screen">
       <CssBaseline />
       <Header setMobileSidebarOpen={setMobileSidebarOpen} />
       <Sidebar mobileSidebarOpen={mobileSidebarOpen} setMobileSidebarOpen={setMobileSidebarOpen} />

diff --git a/src/pages/NotFound/NotFound.tsx b/src/pages/NotFound/NotFound.tsx
@@ -19,7 +19,7 @@ const NotFound = ({ from }: NotFoundProps) => {
 
   return (
     <div
-      className="-mt-10 flex h-screen w-full items-center sm:mt-auto"
+      className="flex h-full w-full items-center"
       onMouseMove={(e) => {
         setPoint({ top: e.pageY, left: e.pageX });
       }}

diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
@@ -26,7 +26,7 @@ const Profile = () => {
   const [tab, setTab] = useState(0);
 
   return (
-    <div className="mb-40 mt-header flex w-full flex-col justify-start xl:flex-row xl:justify-center">
+    <div className="flex w-full flex-col justify-start sm:mb-40 sm:mt-header xl:flex-row xl:justify-center">
       <div className="flex w-full border border-subGray xl:h-full xl:w-80">
         <ProfileSection />
       </div>

diff --git a/src/pages/SignUp/SignUp.tsx b/src/pages/SignUp/SignUp.tsx
@@ -24,7 +24,7 @@ const SignUp = () => {
   };
 
   return (
-    <Container maxWidth="xs" className="-mt-10 !flex h-screen flex-col items-center justify-center sm:mt-auto">
+    <Container maxWidth="xs" className="!flex flex-col items-center justify-center">
       <Logo className="mb-9 w-48" />
       <Box className="h-[560px] w-full border border-pointBlue px-10 py-14 sm:h-[492px] sm:w-[690px] sm:px-24">
         <Stack className="relative h-full w-full">

diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
@@ -42,7 +42,7 @@ const Login = () => {
   };
 
   return (
-    <Container maxWidth="xs" className="-mt-14 !flex h-screen flex-col items-center justify-center sm:mt-auto">
+    <Container maxWidth="xs" className="!flex flex-col items-center justify-center">
       <Logo className="mb-9 w-48" />
       <Stack component="form" spacing={6} onSubmit={handleLoginClick} width={{ xs: '90%', sm: '100%' }}>
         <Stack spacing={1}>

diff --git a/src/pages/login/SearchAccount.tsx b/src/pages/login/SearchAccount.tsx
@@ -19,7 +19,7 @@ const SignUp = () => {
     setCurrentStep(newTab);
   };
   return (
-    <div className="mt-2 h-screen w-full place-content-center place-items-center sm:mt-0 sm:grid ">
+    <div className="mt-2 w-full place-content-center place-items-center sm:mt-0 sm:grid ">
       <Stack textAlign="center">
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tabs value={currentStep} onChange={handleChange}>