style : 배너 스타일 깨짐 수정 (#393)

* style : 스크롤 깨짐 수정 * style : 레이아웃 수정 * style : 지도편지 작성 페이지 스타일 수정 * style : 배너 스타일 수정
prgrms-web-devcourse-final-project · Dec 9, 2024 · 18930a6 · 18930a6
1 parent 7bab79f
commit 18930a6
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 54 deletions.
diff --git a/src/components/Common/BackButtonContainer/BackButtonCotainer.tsx b/src/components/Common/BackButtonContainer/BackButtonCotainer.tsx
@@ -9,7 +9,7 @@ export const BackButtonCotainer = () => {
     };
 
     return (
-        <div className="w-full flex flex-row justify-start">
+        <div className="w-full flex flex-row justify-start sticky top-0 z-10 pb-[15px]">
             <BackButton onClick={handleBackClick} />
         </div>
     );

diff --git a/src/components/Common/Banner/Banner.tsx b/src/components/Common/Banner/Banner.tsx
@@ -8,7 +8,7 @@ type BannerProps = {
 export const Banner = ({ color, children }: BannerProps) => {
     return (
         <div
-            className={`flex h-[150px] rounded-lg overflow-hidden shadow transition-all ${color}`}
+            className={`flex overflow-hidden rounded-lg shadow transition-all ${color}`}
         >
             {children}
         </div>

diff --git a/src/components/Common/Container/Container.tsx b/src/components/Common/Container/Container.tsx
@@ -9,7 +9,7 @@ interface ContainerProps {
 export const Container: React.FC<ContainerProps> = ({ px = 0, children }) => {
     return (
         <div
-            className={`px-${px} py-6 w-full h-full overflow-auto scrollbar-hide`}
+            className={`relative flex flex-col px-${px} pt-3 py-6 w-full h-full`}
         >
             {children}
         </div>

diff --git a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx
@@ -44,8 +44,8 @@ export const MaplibreWithSearch = ({
 
     return (
         <div className="relative h-screen">
-            <TopBar handleBackClick={onBackClick} />
-            <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-10 left-1/2">
+            {/* <TopBar handleBackClick={onBackClick} /> */}
+            <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"
                     value={searchText}

diff --git a/src/components/MapPage/NavigateContainer/NavigateContainer.tsx b/src/components/MapPage/NavigateContainer/NavigateContainer.tsx
@@ -8,8 +8,8 @@ export const NavigateContainer: React.FC<NavigateContainerProps> = ({
     count
 }) => {
     return (
-        <div className="flex-center bg-gray-200 rounded-2xl shadow-md w-[300px] p-2">
-            <p className="text-lg font-bold text-gray-700  ">
+        <div className="flex-center bg-sample-blue rounded-2xl shadow-md w-[300px] p-2">
+            <p className="text-lg font-bold text-white  ">
                 반경 500m 내 {count}개
             </p>
         </div>

diff --git a/src/pages/Map/MapExplorerPage.tsx b/src/pages/Map/MapExplorerPage.tsx
@@ -11,6 +11,7 @@ import { useSearchStore } from '@/stores/useSearchStore';
 import { formatDate } from '@/util/formatDate';
 import { calculateDaysLeft } from '@/util/calculateDaysLeft';
 import { formatDistance } from '@/util/formatDistance';
+import { BackButtonCotainer } from '@/components/Common/BackButtonContainer/BackButtonCotainer';
 
 export const MapExplorerPage = () => {
     const { searchedLocation } = useSearchStore();
@@ -51,6 +52,8 @@ export const MapExplorerPage = () => {
         setQuery(event.target.value);
     };
 
+    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 border border-sample-blue w-52 rounded-2xl`;
+
     return (
         <div>
             <div className="relative">
@@ -76,23 +79,23 @@ export const MapExplorerPage = () => {
                     </div>
                 )}
             </div>
-            <div className="absolute transform -translate-x-1/2 bottom-20 left-1/2">
+            <div className="absolute transform -translate-x-1/2 bottom-[6rem] left-1/2">
                 {!isSearchFocused && (
                     <>
                         {selectedLetter ? (
                             <>
                                 {searchedLocation ? (
                                     <NavLink
-                                        to={`/letter/map/:${searchedLocation.lat}/:${searchedLocation.lon}/create`}
-                                        className="absolute gap-2 p-2 transform -translate-x-12 flex-center bottom-60 translate-y-7 left-1/2 btn-base w-52 rounded-2xl"
+                                        to={'/letter/create'}
+                                        className={CreateBtnStyle}
                                     >
                                         <HiOutlinePencilAlt />
                                         지도 편지 작성하기
                                     </NavLink>
                                 ) : (
                                     <NavLink
                                         to={'/letter/create'}
-                                        className="absolute gap-2 p-2 transform -translate-x-12 cursor-not-allowed flex-center bottom-60 translate-y-7 left-1/2 btn-base w-52 rounded-2xl"
+                                        className={CreateBtnStyle}
                                         onClick={(e) => e.preventDefault()}
                                     >
                                         <HiOutlinePencilAlt />
@@ -114,16 +117,16 @@ export const MapExplorerPage = () => {
                             <>
                                 {searchedLocation ? (
                                     <NavLink
-                                        to={`/letter/map/:${searchedLocation.lat}/:${searchedLocation.lon}/create`}
-                                        className="absolute gap-2 p-2 transform -translate-x-12 flex-center bottom-24 translate-y-7 left-1/2 btn-base w-52 rounded-2xl"
+                                        to={'/letter/create'}
+                                        className={CreateBtnStyle}
                                     >
                                         <HiOutlinePencilAlt />
                                         지도 편지 작성하기
                                     </NavLink>
                                 ) : (
                                     <NavLink
                                         to={'/letter/create'}
-                                        className="absolute gap-2 p-2 transform -translate-x-12 cursor-not-allowed flex-center bottom-24 translate-y-7 left-1/2 btn-base w-52 rounded-2xl"
+                                        className={CreateBtnStyle}
                                         onClick={(e) => e.preventDefault()}
                                     >
                                         <HiOutlinePencilAlt />

diff --git a/src/pages/Storage/StoragePage.tsx b/src/pages/Storage/StoragePage.tsx
@@ -22,33 +22,36 @@ export const StoragePage = ({ initialType }: StoragePageProps) => {
     const [storageType, setStorageType] = useState<storageType>(initialType);
 
     return (
-        <div className="">
-            <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={{
-                        transform: `translateX(${getTranslateX(storageType)})`
-                    }}
-                ></div>
-                <div
-                    className="flex items-center justify-center flex-1 h-full cursor-pointer"
-                    onClick={() => setStorageType('keyword')}
-                >
-                    <span>키워드 편지</span>
-                </div>
-                <div
-                    className="flex items-center justify-center flex-1 h-full cursor-pointer"
-                    onClick={() => setStorageType('map')}
-                >
-                    <span>내 지도 편지</span>
-                </div>
-                <div
-                    className="flex items-center justify-center flex-1 h-full cursor-pointer"
-                    onClick={() => setStorageType('bookmark')}
-                >
-                    <span>보관한 지도 편지</span>
+        <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="absolute bottom-0 w-1/3 h-[2px] transition-transform duration-500 ease-in-out bg-sample-blue"
+                        style={{
+                            transform: `translateX(${getTranslateX(storageType)})`
+                        }}
+                    ></div>
+                    <div
+                        className="flex items-center justify-center flex-1 h-full cursor-pointer"
+                        onClick={() => setStorageType('keyword')}
+                    >
+                        <span>키워드 편지</span>
+                    </div>
+                    <div
+                        className="flex items-center justify-center flex-1 h-full cursor-pointer"
+                        onClick={() => setStorageType('map')}
+                    >
+                        <span>내 지도 편지</span>
+                    </div>
+                    <div
+                        className="flex items-center justify-center flex-1 h-full cursor-pointer"
+                        onClick={() => setStorageType('bookmark')}
+                    >
+                        <span>보관한 지도 편지</span>
+                    </div>
                 </div>
             </div>
+
             <div className="flex flex-col gap-2 mt-[15px]">
                 <StorageList type={storageType} />
             </div>

diff --git a/src/pages/User/Profile/ProfilePage.tsx b/src/pages/User/Profile/ProfilePage.tsx
@@ -4,6 +4,7 @@ import { AccountInfoSection } from '@/components/Profile/AccountInfoSection';
 import { NicknameSection } from '@/components/Profile/NicknameSection';
 import { ProfileImageSection } from '@/components/Profile/ProfileImageSection';
 import { useState } from 'react';
+import { BackButtonCotainer } from '@/components/Common/BackButtonContainer/BackButtonCotainer';
 
 export const ProfilePage = () => {
     const navigate = useNavigate();
@@ -17,6 +18,7 @@ export const ProfilePage = () => {
 
     return (
         <div className="flex flex-col gap-10">
+            <BackButtonCotainer />
             <div className="flex flex-col items-center justify-center gap-5 ">
                 <ProfileImageSection
                     isEditing={isProfileImageEditing}

diff --git a/src/router.tsx b/src/router.tsx
@@ -71,6 +71,13 @@ const AuthLayout = () => (
     </div>
 );
 
+const MapLayout = () => (
+    <div>
+        <Outlet />
+        <NavigationBar />
+    </div>
+);
+
 export const router = createBrowserRouter([
     {
         path: '/',
@@ -137,21 +144,6 @@ export const router = createBrowserRouter([
             }
         ]
     },
-    {
-        path: '/',
-        element: (
-            <ProtectedRoute>
-                <SimpleLayout />
-            </ProtectedRoute>
-        ),
-        errorElement: <ErrorPage />,
-        children: [
-            {
-                path: '/mapexplorer',
-                element: <MapExplorerPage />
-            }
-        ]
-    },
     {
         path: '/letter',
         element: (
@@ -186,6 +178,21 @@ export const router = createBrowserRouter([
             }
         ]
     },
+    {
+        path: '/',
+        element: (
+            <PublicRoute>
+                <MapLayout />
+            </PublicRoute>
+        ),
+        errorElement: <ErrorPage />,
+        children: [
+            {
+                path: '/mapexplorer',
+                element: <MapExplorerPage />
+            }
+        ]
+    },
     {
         path: '/',
         element: (