diff --git a/src/components/LetterDetailPage/LetterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer.tsx b/src/components/LetterDetailPage/LetterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer.tsx index 8c9cd9ce..d40c8558 100644 --- a/src/components/LetterDetailPage/LetterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer.tsx +++ b/src/components/LetterDetailPage/LetterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer.tsx @@ -33,7 +33,6 @@ export const MapLetterArchieveDetailContainer = () => { letterId: dataType === 'REPLY_LETTER' ? Number(replyLetterId || letterId) : 0 }); - console.log(replyLetterId); useEffect(() => { const error = mapError || replyError; diff --git a/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx b/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx index 1779e3aa..3e530d71 100644 --- a/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx +++ b/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx @@ -28,7 +28,7 @@ export const LetterInfoContainer = ({ return (
-
+
diff --git a/src/components/MapPage/SearchFullScreen/SearchFullScreen.tsx b/src/components/MapPage/SearchFullScreen/SearchFullScreen.tsx index 89e33099..9c353061 100644 --- a/src/components/MapPage/SearchFullScreen/SearchFullScreen.tsx +++ b/src/components/MapPage/SearchFullScreen/SearchFullScreen.tsx @@ -32,10 +32,12 @@ export const SearchFullScreen = ({ loadRecentSearches(); }, [loadRecentSearches]); - const onBackClick = () => { - clearSearchedLocation(); - onClose(); - }; + useEffect(() => { + if (isOpen && inputRef.current) { + inputRef.current.focus(); + } + }, [isOpen]); + const onSearchClick = () => { const searchTerm = inputRef.current?.value.trim(); if (searchTerm) { @@ -45,14 +47,12 @@ export const SearchFullScreen = ({ }; const onKeyDown = (e: KeyboardEvent) => { - const searchTerm = inputRef.current?.value?.trim() || ''; - if (e.key === 'Enter' && searchTerm !== '') { - saveSearchTerm(searchTerm); - onClose(); + if (e.key === 'Enter') { + onSearchClick(); } }; - const onTermsClick = (searchTerm: string) => { + const onTermClick = (searchTerm: string) => { if (inputRef.current) { inputRef.current.value = searchTerm; saveSearchTerm(searchTerm); @@ -63,22 +63,19 @@ export const SearchFullScreen = ({ } }; - useEffect(() => { - if (inputRef.current) { - inputRef.current.focus(); - } - }, [isOpen]); - - if (!isOpen) { - return null; - } - const isInputNotEmpty = inputRef.current?.value.trim() !== ''; + if (!isOpen) return null; + return (
- + { + clearSearchedLocation(); + onClose(); + }} + /> onTermsClick(related)} + onClick={() => onTermClick(related)} + /> + )) + ) : recentSearches.length > 0 ? ( + recentSearches.map((history, index) => ( + onTermClick(history.place)} /> )) ) : ( - <> - {recentSearches.length > 0 ? ( - recentSearches.map((history, index) => ( - onTermsClick(history.place)} - /> - )) - ) : ( -

- 최근 검색어 내역이 없습니다. -

- )} - +

+ 최근 검색어 내역이 없습니다. +

)}
diff --git a/src/pages/Map/MapExplorerPage.tsx b/src/pages/Map/MapExplorerPage.tsx index 13563fab..c7bee803 100644 --- a/src/pages/Map/MapExplorerPage.tsx +++ b/src/pages/Map/MapExplorerPage.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import { LetterInfoContainer } from '@/components/MapPage/LetterInfoContainer/LetterInfoContainer'; import { NavigateContainer } from '@/components/MapPage/NavigateContainer/NavigateContainer'; import { MaplibreWithSearch } from '@/components/MapPage/Maplibre/MaplibreWithSearch'; -import { HiOutlinePencilAlt } from 'react-icons/hi'; +import { PiPencilSimpleLine } from 'react-icons/pi'; import { useSelectedLetterStore } from '@/stores/useSelectedLetterStore'; import { NavLink } from 'react-router-dom'; import { SearchFullScreen } from '@/components/MapPage/SearchFullScreen/SearchFullScreen'; @@ -51,7 +51,7 @@ 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 w-52 rounded-2xl`; + const CreateBtnStyle = `text-sample-blue absolute p-2 transform translate-x-64 flex-center bottom-[5rem] translate-y-7 bg-white w-10 rounded-2xl`; return (
@@ -86,19 +86,17 @@ const MapExplorerPage = () => { {searchedLocation ? ( - - 지도 편지 작성하기 + ) : ( e.preventDefault()} > - - 지도 편지 작성하기 + )} { to={`/letter/map/:${searchedLocation.lat}/:${searchedLocation.lon}/create`} className={CreateBtnStyle} > - - 지도 편지 작성하기 + ) : ( { className={`cursor-not-allowed ${CreateBtnStyle}`} onClick={(e) => e.preventDefault()} > - - 지도 편지 작성하기 + )}