fix: map page qa (#109)

* refactor: update toast message when no store data

* chore: update ui when no search history data

* feat: add search execution when clicking recent search item

* refactor: temporarily sync filter button and bottom sheet height

* chore: add use client

Author: soosoo22

web/src/app/(main)/map/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect } from "react";
+import { useState } from "react";
 import {
   useLocation,
   useMapCoordinate,
@@ -20,7 +20,6 @@ import {
 } from "@/features/map/ui";
 import { SearchBar } from "@/features/search";
 import { CUSTOM_EVENTS, useGATimeSpent } from "@/shared/lib";
-import { useToast } from "@/shared/lib/hooks";
 import { useFilterStore } from "@/shared/store";
 import { TransitionLayout } from "@/shared/ui";
 
@@ -39,10 +38,11 @@ export default function MapPage() {
     3,
   );
 
-  const { storeList, isFetching, isSearchMode } = useStoreListData({ bounds, center });
+  const { storeList, isFetching } = useStoreListData({ bounds, center });
   const { isFilterOpen, filters, openFilter, closeFilter, setFilters } = useFilterStore();
 
-  const { showToast } = useToast();
+  // TODO: 임시 구현, 나중에 Observer로 자동 감지 개선 예정
+  const [bottomSheetHeight, setBottomSheetHeight] = useState(0);
 
   const levelDisplayValue =
     filters.honbobLevel.length > 1 ? "커스텀" : `레벨${filters.honbobLevel[0] || 1}`;
@@ -52,12 +52,6 @@ export default function MapPage() {
     resetDragging();
   };
 
-  useEffect(() => {
-    if (!isSearchMode && !isFetching && storeList.length === 0) {
-      showToast({ message: "현재는 강남·역삼 지역만 이용할 수 있어요." });
-    }
-  }, [isSearchMode, isFetching, storeList.length, showToast]);
-
   return (
     <TransitionLayout>
       <Link href="/search">
@@ -74,11 +68,12 @@ export default function MapPage() {
       >
         <LevelFilterButton honbobLevel={levelDisplayValue} onClick={openFilter} />
       </div>
-      <CurrentLocationButton onClick={requestLocation} />
+      <CurrentLocationButton bottomOffset={bottomSheetHeight} onClick={requestLocation} />
       <StoreBottomSheet
         storeList={storeList || []}
         isCollapsed={isDragging}
         onStationChange={() => updateCoordinate(map)}
+        onHeightChange={setBottomSheetHeight}
       />
       <FilterBottomSheet
         isOpen={isFilterOpen}

web/src/app/(stack)/search/page.tsx

@@ -6,23 +6,28 @@ import {
   SEARCH_BAR_HEIGHT,
   SearchBar,
   useSearchHistoryAdapter,
+  useSearchNavigation,
 } from "@/features/search";
 import { TransitionLayout } from "@/shared/ui";
 
 export default function SearchPage() {
   const { searchHistory, isLoading, removeHistory, clearHistory } = useSearchHistoryAdapter();
+  const { executeSearch } = useSearchNavigation();
+
+  const hasSearchHistory = searchHistory.length > 0;
 
   return (
     <TransitionLayout>
-      <SearchBar />
+      <SearchBar onSubmit={executeSearch} />
       <div
         className="flex flex-col gap-3"
         style={{ paddingTop: `calc(${SEARCH_BAR_HEIGHT}px + 17px)` }}
       >
-        <RecentSearchHeader onDelete={clearHistory} />
+        <RecentSearchHeader hasSearchHistory={hasSearchHistory} onDelete={clearHistory} />
         <RecentSearchList
           searchHistory={searchHistory}
           isLoading={isLoading}
+          onSearch={executeSearch}
           onRemove={removeHistory}
         />
       </div>

web/src/features/map/lib/hooks/useStoreListData.ts

@@ -4,6 +4,7 @@ import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { type Bounds, type Center, useStoreListQuery } from "@/features/map/lib";
 import { useStoreSearch } from "@/features/search";
+import { useToast } from "@/shared/lib/hooks";
 import { useFilterStore } from "@/shared/store";
 
 interface UseStoreListDataParams {
@@ -13,37 +14,47 @@ interface UseStoreListDataParams {
 
 /**
  * 지도에 표시할 가게 리스트 데이터 관리
- * 검색 모드와 일반 모드 통합 관리
+ *
+ * 두 가지 모드 지원:
+ * 1. 기본 모드: 지도 영역 기반 가게 목록 조회
+ * 2. 검색 모드: 검색어 기반 가게 목록 조회
  */
 export function useStoreListData({ bounds, center }: UseStoreListDataParams) {
   const searchParams = useSearchParams();
-  const query = searchParams.get("query");
+  const searchQuery = searchParams.get("query");
+  const isSearchMode = !!searchQuery;
 
   const { filters } = useFilterStore();
 
-  // 일반 모드: 지도 기반 스토어 목록
-  const { storeList: baseStoreList, isFetching: isBaseFetching } = useStoreListQuery({
+  const { showToast } = useToast();
+
+  // 기본 모드: 지도 기반 스토어 목록
+  const { storeList: mapStoreList, isFetching: isMapFetching } = useStoreListQuery({
     filters,
     center,
     bounds,
     limit: 30,
-    enabled: !query,
+    enabled: !isSearchMode,
   });
 
   // 검색 모드: 검색어 기반 스토어 목록
   const { searchStoreList, isPending, searchStores } = useStoreSearch();
 
   useEffect(() => {
-    if (query) {
-      searchStores({ query });
+    if (isSearchMode) {
+      searchStores({ query: searchQuery });
     }
-  }, [query, searchStores]);
+  }, [isSearchMode, searchQuery, searchStores]);
 
-  const isSearchMode = !!query;
+  useEffect(() => {
+    if (!isSearchMode && !isMapFetching && mapStoreList.length === 0) {
+      showToast({ message: "아직 이 지역은 준비 중이에요." });
+    }
+  }, [isSearchMode, isMapFetching, mapStoreList.length, showToast]);
 
   return {
-    storeList: isSearchMode ? searchStoreList : baseStoreList,
-    isFetching: isSearchMode ? isPending : isBaseFetching,
+    storeList: isSearchMode ? searchStoreList : mapStoreList,
+    isFetching: isSearchMode ? isPending : isMapFetching,
     isSearchMode,
   };
 }

web/src/features/map/ui/CurrentLocationButton.tsx

@@ -1,13 +1,22 @@
+import { BOTTOM_NAV_HEIGHT } from "@/shared/config";
 import { Icon } from "@/shared/ui";
 
-export function CurrentLocationButton({ onClick }: { onClick: () => void }) {
+interface CurrentLocationButtonProps {
+  bottomOffset: number;
+  onClick: () => void;
+}
+
+export function CurrentLocationButton({ bottomOffset, onClick }: CurrentLocationButtonProps) {
+  // TODO: 임시 구현, 나중에 Observer로 개선 예정
+  const totalBottomOffset = (bottomOffset > 0 ? bottomOffset : BOTTOM_NAV_HEIGHT) + 20;
+
   return (
     <button
       type="button"
       onClick={onClick}
-      className="fixed right-5 z-40 flex items-center justify-center h-9 w-9 cursor-pointer rounded-full bg-gray0 shadow-fab"
+      className="fixed right-5 z-40 flex items-center justify-center h-9 w-9 cursor-pointer rounded-full bg-gray0 shadow-fab transition-all duration-300"
       style={{
-        bottom: "calc(330px + var(--safe-area-inset-bottom))",
+        bottom: `calc(${totalBottomOffset}px + env(safe-area-inset-bottom))`,
       }}
     >
       <Icon name="location" size={24} color="gray800" />

web/src/features/map/ui/StoreBottomSheet.tsx

@@ -17,16 +17,21 @@ interface StoreBottomSheetProps {
   storeList: StoreListResponseData[];
   isCollapsed: boolean;
   onStationChange: () => void;
+  onHeightChange: (height: number) => void;
 }
 
 export function StoreBottomSheet({
   storeList,
   isCollapsed,
   onStationChange,
+  onHeightChange,
 }: StoreBottomSheetProps) {
   const { selectedStoreId } = useMapStore();
   const [safeBottom, setSafeBottom] = useState(0);
 
+  // 바텀시트 높이: 마커 선택(245px) | 드래그 중(95px) | 기본(310px) + Safe Area
+  const height = (selectedStoreId ? 245 : isCollapsed ? 95 : 310) + safeBottom;
+
   const selectedStoreInfo = selectedStoreId
     ? storeList.find((store) => store.id === selectedStoreId)
     : null;
@@ -38,8 +43,15 @@ export function StoreBottomSheet({
     setSafeBottom(parseFloat(value));
   }, []);
 
-  // 바텀시트 높이: 마커 선택(245px) | 드래그 중(95px) | 기본(310px) + Safe Area
-  const height = (selectedStoreId ? 245 : isCollapsed ? 95 : 310) + safeBottom;
+  // TODO: 임시 구현, 나중에 Observer로 개선 예정
+  useEffect(() => {
+    if (storeList.length === 0) {
+      onHeightChange(0);
+      return;
+    }
+
+    onHeightChange(height);
+  }, [height, onHeightChange, storeList.length]);
 
   const renderStoreContent = () => {
     if (selectedStoreInfo) {

web/src/features/search/index.ts

@@ -7,6 +7,7 @@ export * from "./config/searchBarConfig";
 // Hooks
 export * from "./lib/hooks/useLocalSearchHistory";
 export * from "./lib/hooks/useSearchHistoryAdapter";
+export * from "./lib/hooks/useSearchNavigation";
 
 // Queries
 export * from "./lib/queries/useServerSearchHistory";

web/src/features/search/lib/hooks/useSearchNavigation.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useSearchHistoryAdapter } from "@/features/search";
+
+export function useSearchNavigation() {
+  const router = useRouter();
+  const { addHistory } = useSearchHistoryAdapter();
+
+  const executeSearch = (query: string) => {
+    if (!query) return;
+
+    // 검색 기록에 추가
+    addHistory?.(query);
+
+    // 지도 페이지로 이동
+    router.push(`/map?query=${encodeURIComponent(query)}`);
+  };
+
+  return { executeSearch };
+}

web/src/features/search/ui/RecentSearchHeader.tsx

@@ -1,10 +1,17 @@
-export function RecentSearchHeader({ onDelete }: { onDelete: () => void }) {
+interface RecentSearchHeaderProps {
+  hasSearchHistory: boolean;
+  onDelete: () => void;
+}
+
+export function RecentSearchHeader({ hasSearchHistory, onDelete }: RecentSearchHeaderProps) {
   return (
     <div className="flex items-center justify-between px-5">
       <span className="text-body3-semibold text-gray900">최근 검색</span>
-      <button type="button" onClick={onDelete} className="text-body3-regular text-gray600">
-        전체 삭제
-      </button>
+      {hasSearchHistory && (
+        <button type="button" onClick={onDelete} className="text-body3-regular text-gray600">
+          전체 삭제
+        </button>
+      )}
     </div>
   );
 }

web/src/features/search/ui/RecentSearchItem.tsx

@@ -5,30 +5,39 @@ import { Icon } from "@/shared/ui";
 
 interface RecentSearchItemProps {
   search: SearchHistoryResponse;
+  onSearch: (query: string) => void;
   onRemove: (id: number) => void;
 }
 
-export function RecentSearchItem({ search, onRemove }: RecentSearchItemProps) {
+export function RecentSearchItem({ search, onRemove, onSearch }: RecentSearchItemProps) {
   const formattedDate = formatToMonthDay(search.updateAt);
 
+  const handleSearch = () => {
+    onSearch(search.query);
+  };
+
   const handleRemove = (e: React.MouseEvent) => {
     e.stopPropagation();
 
     onRemove(search.id);
   };
 
   return (
-    <div className="flex items-center w-full py-3 px-5">
-      <div className="flex items-center gap-2 flex-1 min-w-0">
+    <div className="flex items-center w-full py-3 px-5 hover:bg-gray50 active:bg-gray100 transition-colors">
+      <button
+        type="button"
+        onClick={handleSearch}
+        className="flex items-center gap-2 flex-1 min-w-0"
+      >
         <Icon name="clock" size={24} color="gray500" className="shrink-0" />
-        <span className="text-body1-regular text-gray800 truncate">{search.query}</span>
-      </div>
+        <span className="text-body1-regular text-gray800 truncate text-left">{search.query}</span>
+      </button>
       <div className="flex items-center gap-3 shrink-0">
         <span className="text-body2-regular text-gray600">{formattedDate}</span>
         <button
           type="button"
           onClick={handleRemove}
-          className="flex items-center justify-center"
+          className="flex items-center justify-center p-1 hover:bg-gray200 rounded"
           aria-label="검색어 삭제"
         >
           <Icon name="close" size={20} color="gray600" />

web/src/features/search/ui/RecentSearchList.tsx

@@ -6,27 +6,31 @@ import { RecentSearchItem } from "./RecentSearchItem";
 interface RecentSearchListProps {
   searchHistory: SearchHistoryResponse[];
   isLoading?: boolean;
+  onSearch: (query: string) => void;
   onRemove: (id: number) => void;
 }
 
-export function RecentSearchList({ searchHistory, isLoading, onRemove }: RecentSearchListProps) {
+export function RecentSearchList({
+  searchHistory,
+  isLoading,
+  onSearch,
+  onRemove,
+}: RecentSearchListProps) {
   if (isLoading) {
     return <div className="px-5 py-4 text-center text-body2-regular text-gray600">로딩 중...</div>;
   }
 
   if (searchHistory.length === 0) {
     return (
-      <div className="px-5 py-4 text-center text-body2-regular text-gray600">
-        최근 검색 내역이 없습니다
-      </div>
+      <div className="px-5 py-3 text-body1-regular text-gray800">최근 검색 내역이 없습니다</div>
     );
   }
 
   return (
     <ul className="flex flex-col">
       {searchHistory.map((search) => (
         <li key={search.id}>
-          <RecentSearchItem search={search} onRemove={onRemove} />
+          <RecentSearchItem search={search} onSearch={onSearch} onRemove={onRemove} />
         </li>
       ))}
     </ul>