feat: 검색 history 클릭시 검색창에 해당 문자열이 채워지는 기능

src/components/map/SearchBar.tsx

@@ -94,9 +94,9 @@ const SearchBar: React.FC<SearchBarProps> = ({ 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<SearchBarProps> = ({ bottomSheetClose }) => {
 		setSearchRestaurants([]);
 	};
 
-	// form 태그에서 나오는 e 값 타입 넣기
-	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
+	const handleSubmit = (e?: React.FormEvent<HTMLFormElement>) => {
+		e && e.preventDefault();
 		// searchText가 비어 있는 경우 refetch를 하지 않음
 		if (searchText.trim() !== '') {
 			console.log('Submit button clicked');
@@ -126,7 +125,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ bottomSheetClose }) => {
 			<SearchContainer>
 				<SearchForm onSubmit={handleSubmit}>
 					{isOverlayVisible && (
-						<NavBackLink onClick={handleBackButtonClick}>
+						<NavBackLink onClick={handleBackLinkClick}>
 							<NavBackIcon />
 						</NavBackLink>
 					)}
@@ -146,7 +145,10 @@ const SearchBar: React.FC<SearchBarProps> = ({ bottomSheetClose }) => {
 					</SubmitButton>
 				</SearchForm>
 			</SearchContainer>
-			<SearchContents $isVisible={isOverlayVisible} />
+			<SearchContents
+				$isVisible={isOverlayVisible}
+				textSetter={(historyQuery: string) => setSearchText(historyQuery)}
+			/>
 		</>
 	);
 };

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<SearchContentsProps> = ({ $isVisible }) => {
+const SearchContents: React.FC<SearchContentsProps> = ({
+	$isVisible,
+	textSetter,
+}) => {
 	const [histories, setHistories] = useState<History[]>([]);
 	const [searchRestaurants] = useAtom(searchRestaurantAtom);
 	const { data } = useGetSearch();
@@ -66,6 +70,9 @@ const SearchContents: React.FC<SearchContentsProps> = ({ $isVisible }) => {
 						{histories.map((history) => (
 							<HistoryLine
 								key={history.id}
+								setFn={() => {
+									textSetter(history.query);
+								}}
 								removeHistory={removeHistory}
 								{...history}
 							/>

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<HistoryLineProps> = ({
+	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 (
 		<LineWarpper>
-			<Query>{query}</Query>
+			<HistoryButton onClick={handleHistoryButton}>
+				<Query>{query}</Query>
+			</HistoryButton>
 			<DelButton onClick={handleDelButton}>
 				<XIcon />
 			</DelButton>