design : 어플리케이션 레이아웃 디자인 수정 (#448)

* design : container 컴포넌트 높이 스타일 수정 * design : 네비게이션 바 fixed 제거 * design : 전체 레이아웃 소폭 수정
prgrms-web-devcourse-final-project · Dec 30, 2024 · c180fbe · c180fbe
1 parent 4df6c86
commit c180fbe
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 17 deletions.
diff --git a/src/components/Common/Container/Container.tsx b/src/components/Common/Container/Container.tsx
@@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom';
 
 interface ContainerProps {
     px?: number;
+    pt?: number;
     pb?: number;
     children?: React.ReactNode;
 }
@@ -12,13 +13,18 @@ const gradientStyle = {
         'linear-gradient(to top, rgb(102, 177, 255), rgba(122, 208, 252, 0.3))'
 };
 
-export const Container: React.FC<ContainerProps> = ({ px = 0, children }) => {
+export const Container: React.FC<ContainerProps> = ({
+    px = 0,
+    pt = 0,
+    pb = 0,
+    children
+}) => {
     const location = useLocation();
     const isHomePage = location.pathname === '/';
 
     return (
         <div
-            className={`px-${px} py-6 w-full h-[100vh] overflow-auto scrollbar-hide`}
+            className={`flex-1 px-${px} pt-${pt} pb-${pb} w-full h-full overflow-auto scrollbar-hide`}
             style={isHomePage ? gradientStyle : {}}
         >
             {children}

diff --git a/src/components/Common/NavigationBar/NavigationBar.tsx b/src/components/Common/NavigationBar/NavigationBar.tsx
@@ -18,7 +18,7 @@ export const NavigationBar = () => {
     ];
 
     return (
-        <nav className="flex justify-around bg-white border-y p-3 max-w-[477px] fixed min-w-[375px] w-full bottom-0 z-[9999]">
+        <nav className="flex justify-around bg-white border-y p-3 max-w-[473px] min-w-[375px] w-full z-[9999]">
             {navItems.map((item) => (
                 <div className="flex justify-center flex-1" key={item.id}>
                     <NavigationItem

diff --git a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx
@@ -36,7 +36,7 @@ export const MaplibreWithSearch = ({
     const { nearbyLetters } = useNearbyLetters(currentLocation);
 
     return (
-        <div className="relative h-screen">
+        <div className="relative h-full">
             <div className="absolute z-10 flex items-center p-2 space-x-2 transform -translate-x-1/2 bg-white rounded-lg shadow-md top-[1rem] left-1/2">
                 <input
                     type="text"

diff --git a/src/index.css b/src/index.css
@@ -14,15 +14,21 @@
         @apply min-w-[375px] 
           max-w-[475px]          
           w-full             
-          bg-white               
-          border                
+          bg-white                           
+          h-screen  
           min-h-screen            
           text-sample-black
           flex                  
           flex-col;
         margin: auto;
         box-sizing: border-box;
     }
+
+    @media (min-width: 475px) {
+        #root {
+            @apply border-x;
+        }
+    }
 }
 
 @layer utilities {

diff --git a/src/pages/Map/MapExplorerPage.tsx b/src/pages/Map/MapExplorerPage.tsx
@@ -54,8 +54,8 @@ export const MapExplorerPage = () => {
     const CreateBtnStyle = `text-sample-blue absolute gap-2 p-2 transform -translate-x-12 flex-center bottom-[5rem] translate-y-7 left-[46%] bg-white  w-52 rounded-2xl`;
 
     return (
-        <div>
-            <div className="relative">
+        <div className="h-full">
+            <div className="relative h-full">
                 {!isSearchFocused && (
                     <MaplibreWithSearch
                         onFocus={onFocus}

diff --git a/src/pages/Storage/StoragePage.tsx b/src/pages/Storage/StoragePage.tsx
@@ -36,8 +36,8 @@ export const StoragePage = () => {
 
     return (
         <div className="flex flex-col h-full">
-            <div className="sticky top-0 bg-white z-10">
-                <div className="relative flex w-full overflow-hidden text-md align-middle h-[50px] text-sample-black ">
+            <div className="max-w-[473px] fixed min-w-[375px] w-full top-0 z-[9999] bg-white -ml-5">
+                <div className="relative flex w-full overflow-hidden text-md align-middle h-[50px] text-sample-black">
                     <div
                         className="absolute bottom-0 w-1/3 h-[2px] transition-transform duration-500 ease-in-out bg-sample-blue"
                         style={{
@@ -60,12 +60,12 @@ export const StoragePage = () => {
                         className="flex items-center justify-center flex-1 h-full cursor-pointer"
                         onClick={() => handleNavigate('bookmark')}
                     >
-                        <span>보관한 지도 편지</span>
+                        <span>보관함</span>
                     </div>
                 </div>
             </div>
 
-            <div className="flex flex-col gap-2 mt-[15px]">
+            <div className="flex flex-col gap-2 mt-[60px]">
                 <StorageList />
             </div>
         </div>

diff --git a/src/router.tsx b/src/router.tsx
@@ -50,10 +50,11 @@ export const PublicRoute = ({ children }: RouteProps) => {
 
 const CommonLayout = () => (
     <div className="flex flex-col h-full">
-        <Container px={6} pb={6}>
-            <Outlet />
+        <Container px={5}>
+            <div className="pb-4">
+                <Outlet />
+            </div>
         </Container>
-        <Margin bottom={78} />
         <NavigationBar />
     </div>
 );
@@ -73,8 +74,10 @@ const AuthLayout = () => (
 );
 
 const MapLayout = () => (
-    <div>
-        <Outlet />
+    <div className="flex flex-col h-full">
+        <Container>
+            <Outlet />
+        </Container>
         <NavigationBar />
     </div>
 );