diff --git a/src/components/map/SearchBar.tsx b/src/components/map/SearchBar.tsx index 50f2c34..45a80d4 100644 --- a/src/components/map/SearchBar.tsx +++ b/src/components/map/SearchBar.tsx @@ -94,9 +94,9 @@ const SearchBar: React.FC = ({ bottomSheetClose }) => { } }; - const handleBackButtonClick = () => { - console.log('Back button clicked'); + const handleBackLinkClick = () => { setOverlayVisible(false); + clearInput(); window.history.pushState(null, '', '/'); }; @@ -111,9 +111,8 @@ const SearchBar: React.FC = ({ bottomSheetClose }) => { setSearchRestaurants([]); }; - // form 태그에서 나오는 e 값 타입 넣기 - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); + const handleSubmit = (e?: React.FormEvent) => { + e && e.preventDefault(); // searchText가 비어 있는 경우 refetch를 하지 않음 if (searchText.trim() !== '') { console.log('Submit button clicked'); @@ -126,7 +125,7 @@ const SearchBar: React.FC = ({ bottomSheetClose }) => { {isOverlayVisible && ( - + )} @@ -146,7 +145,10 @@ const SearchBar: React.FC = ({ bottomSheetClose }) => { - + setSearchText(historyQuery)} + /> ); }; diff --git a/src/components/map/SearchContents.tsx b/src/components/map/SearchContents.tsx index 425aaca..2e47830 100644 --- a/src/components/map/SearchContents.tsx +++ b/src/components/map/SearchContents.tsx @@ -9,6 +9,7 @@ import { searchRestaurantAtom } from '~/store/restaurants'; type SearchContentsProps = { $isVisible: boolean; + textSetter: (text: string) => void; }; const Overlay = styled.div<{ $isVisible: boolean }>` @@ -39,7 +40,10 @@ const HistoryWrapper = styled.ul` background-color: ${({ theme }) => theme.colors.white}; `; -const SearchContents: React.FC = ({ $isVisible }) => { +const SearchContents: React.FC = ({ + $isVisible, + textSetter, +}) => { const [histories, setHistories] = useState([]); const [searchRestaurants] = useAtom(searchRestaurantAtom); const { data } = useGetSearch(); @@ -66,6 +70,9 @@ const SearchContents: React.FC = ({ $isVisible }) => { {histories.map((history) => ( { + textSetter(history.query); + }} removeHistory={removeHistory} {...history} /> diff --git a/src/components/search/HistoryLine.tsx b/src/components/search/HistoryLine.tsx index 9830f12..6472cdf 100644 --- a/src/components/search/HistoryLine.tsx +++ b/src/components/search/HistoryLine.tsx @@ -3,6 +3,7 @@ import XIcon from '~/assets/icons/XIcon'; import useDelSearch from '~/hooks/api/search/useDelSearch'; type HistoryLineProps = { + setFn: () => void; id: number; removeHistory: (id: number) => void; query: string; @@ -13,6 +14,16 @@ const LineWarpper = styled.div` display: flex; justify-content: space-between; align-items: center; + gap: 20px; +`; + +const HistoryButton = styled.button` + border: none; + cursor: pointer; + background-color: transparent; + + flex: 1; + text-align: left; `; const Query = styled.h3` @@ -30,21 +41,28 @@ const DelButton = styled.button` `; const HistoryLine: React.FC = ({ + setFn, id, removeHistory, query, }) => { const { mutate: deleteSearch } = useDelSearch(); + const handleHistoryButton = () => { + console.log(`history #${id} button clicked`); + setFn(); + }; + const handleDelButton = () => { deleteSearch({ id }); - console.log(`${id} 삭제`); removeHistory(id); }; return ( - {query} + + {query} +