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()}
>
-
- 지도 편지 작성하기
+
)}