style : 지도 페이지 스타일 수정

prgrms-web-devcourse-final-project · Dec 9, 2024 · e6f4f37 · e6f4f37
1 parent c359fea
commit e6f4f37
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/src/pages/Map/MapExplorerPage.tsx b/src/pages/Map/MapExplorerPage.tsx
@@ -51,6 +51,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">
@@ -69,30 +71,30 @@ export const MapExplorerPage = () => {
                         />
                         {error && <p>검색 오류: {error.message}</p>}
                         {!isLoading && !error && data?.length === 0 && (
-                            <p className="mt-40 flex-center">
+                            <p className="flex-center mt-40">
                                 검색 결과가 없습니다.
                             </p>
                         )}
                     </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 +116,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 />