[SEARCH] 검색 결과 페이지 구현

src/api/search/entity.ts

@@ -8,7 +8,7 @@ export interface SearchQueryParams {
 
 export interface ShopsParams {
   keyword: string;
-  location: Coords;
+  location?: Coords;
 }
 
 export interface FetchShopsResponse {
@@ -27,8 +27,8 @@ interface Shop {
 }
 
 export interface Coords {
-  latitude: number,
-  longitude: number
+  lng: number;
+  lat: number;
 }
 
 export interface FetchAutoCompleteParams {

src/api/search/index.ts

@@ -15,8 +15,8 @@ export const fetchShops = (params: ShopsParams) => {
   const { keyword, location } = params;
   const url = `/shops?keyword=${keyword}`;
   const requestBody = {
-    x: location?.latitude,
-    y: location?.longitude,
+    x: location?.lat,
+    y: location?.lng,
   };
 
   return searchApi.post<FetchShopsResponse>(url, requestBody);
@@ -26,8 +26,8 @@ export const fetchAutoComplete = (params: FetchAutoCompleteParams) => {
   const { query, location } = params;
   const url = `/shops/auto-complete?query=${query}`;
   const requestBody = {
-    x: location?.latitude,
-    y: location?.longitude,
+    lat: location?.lat,
+    lng: location?.lng,
   };
   return searchApi.post<FetchAutoCompleteResponse>(url, requestBody);
 };

src/api/shop/entity.ts

@@ -26,7 +26,11 @@ export interface SearchQueryParams {
 
 export interface ShopsParams {
   keyword: string;
-  location: Coords;
+  location?: Coords;
+}
+export interface Coords {
+  lat: number | undefined;
+  lng: number | undefined;
 }
 
 export interface FetchShopsResponse {
@@ -44,10 +48,5 @@ export interface Shop {
   ratingCount: number | null;
   photoToken: string;
   dist: number;
-  category: string; // 추후 카테고리 확인 필요
-}
-
-export interface Coords {
-  lat: number | undefined;
-  lng: number | undefined;
+  category: string;
 }

src/api/shop/index.ts

@@ -8,12 +8,21 @@ export const fetchTrendings = () => shopApi.get<FetchTrendingsResponse>('/trendi
 
 export const fetchShop = (shopId: string) => shopApi.get(`/shop?place_id=${shopId}`);
 
-export const fetchShops = (params: ShopsParams) => shopApi.post<FetchShopsResponse>(`/shops?keyword=${params.keyword}`, {
-  lat: params.location?.lat,
-  lng: params.location?.lng,
-});
+export const getfilterShops = (params: FilterShopsParams, location: Coords) => {
+  const url = `/shops/maps?options_friend=${params.options_friend}&options_nearby=${params.options_nearby}&options_scrap=${params.options_scrap}`;
+  const requestBody = {
+    lat: location.lat,
+    lng: location.lng,
+  };
+  return shopApi.post<FilterShopsListResponse>(url, requestBody);
+};
 
-export const getfilterShops = (params: FilterShopsParams, location: Coords) => shopApi.post<FilterShopsListResponse>(`/shops/maps?options_friend=${params.options_friend}&options_nearby=${params.options_nearby}&options_scrap=${params.options_scrap}`, {
-  lat: location.lat,
-  lng: location.lng,
-});
+export const fetchShops = (params: ShopsParams) => {
+  const { location, keyword } = params;
+  const url = `/shops?keyword=${keyword}`;
+  const requestBody = {
+    lat: location?.lat,
+    lng: location?.lng,
+  };
+  return shopApi.post<FetchShopsResponse>(url, requestBody);
+};

src/components/common/SideNavigation/index.tsx

@@ -4,7 +4,7 @@ import { ReactComponent as BookMarkIcon } from 'assets/svg/home/bookmark.svg';
 import { ReactComponent as GroupIcon } from 'assets/svg/home/group.svg';
 import { useAuth, useClearAuth } from 'store/auth';
 import cn from 'utils/ts/classNames';
-import defaultImage from 'assets/images/follow/default-image.png';
+// import defaultImage from 'assets/images/follow/default-image.png';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import { Link, useLocation } from 'react-router-dom';
 import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter';
@@ -91,7 +91,7 @@ export default function SideNavigation(): JSX.Element {
           {auth ? (
             <li>
               <img
-                src={auth.profileImage?.url || `${defaultImage}`}
+                // src={auth.profileImage?.url || `${defaultImage}`}
                 alt="프로필 이미지"
                 className={styles['bottom-navigation__profile-image']}
               />

src/pages/Home/components/Map/hooks/useFilterShops.ts

@@ -13,14 +13,15 @@ const useFilterShops = ({
   const { location } = useGeolocation(OPTIONS);
   const auth = useAuth();
   const enabled = !!(location) && !!auth;
+
   const params: FilterShopsParams = {
     options_friend, options_nearby, options_scrap,
   };
   const {
     isLoading, isError, data, refetch,
   } = useQuery('filterShops', () => getfilterShops(params, {
-    lat: location?.latitude,
-    lng: location?.longitude,
+    lat: location?.lat,
+    lng: location?.lng,
   }), {
     enabled,
   });

src/pages/Home/components/Map/index.tsx

@@ -14,7 +14,7 @@ import useCluster from './hooks/useCluster';
 export default function Map(): JSX.Element {
   const { isMobile } = useMediaQuery();
   const { location } = useLocation();
-  const map = useNaverMap(location?.latitude, location?.longitude);
+  const map = useNaverMap(location?.lat, location?.lng);
   const { filterFriendState } = useFilterFriend();
   const { filterScrapState } = useFilterScrap();
   const { filterNearbyState } = useFilterNearby();

src/pages/Search/components/RelatedSearches/RelatedSearches.module.scss

@@ -48,6 +48,10 @@
       border-radius: 24px;
       color: #ff7f23;
     }
+
+    @include media.media-breakpoint-down(mobile) {
+      max-width: 343px;
+    }
   }
 
   &__title {

src/pages/Search/components/SearchBar/SearchBar.module.scss

@@ -24,6 +24,7 @@
       max-width: 767px;
       padding-top: 64px;
       margin: 0 auto;
+      font-size: 35px;
     }
   }
 }
@@ -35,14 +36,26 @@
   border: none;
   height: 62px;
   width: 875px;
-  align-items: center;
   margin-top: 34px;
   margin-right: 16px;
   margin-left: 16px;
   background: #ffffff;
   box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%);
   padding-left: 15px;
-  z-index: 6;
+  z-index: 3;
+
+  @include media.media-breakpoint-down(mobile) {
+    max-width: 343px;
+    height: 48px;
+    font-size: 16px;
+  }
+
+  &__form {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
 
   &__input {
     width: 100%;
@@ -63,6 +76,7 @@
   }
 
   &__icon {
+    display: flex;
     width: 34px;
     height: 34px;
     padding: 20px;
@@ -130,6 +144,11 @@
         transform: translate3d(-100%, 0, 0);
       }
     }
+
+    @include media.media-breakpoint-down(mobile) {
+      max-width: 343px;
+      font-size: 16px;
+    }
   }
 
   &__tag {

src/pages/Search/components/SearchBar/SearchInput.tsx

@@ -2,32 +2,34 @@
 import styles from 'pages/Search/components/SearchBar/SearchBar.module.scss';
 import useFetchShops from 'pages/SearchDetails/hooks/useFetchShops';
 import { useNavigate } from 'react-router-dom';
+// import RelatedSearches from '../RelatedSearches';
 
 interface Props {
   text: string,
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
 }
 export default function SearchInput({
-  text, onChange,
+  text, onChange, onSubmit,
 }: Props) {
   const { isFetching, data: shops, refetch } = useFetchShops(text ?? '');
   const navigate = useNavigate();
 
   const handleSearchClick = async () => {
     if (!text) {
       console.log('Please enter a keyword to search.');
       return;
     }
 
     await refetch();
 
     if (isFetching) {
       console.log('Fetching shops...');
     } else {
       console.log('Shops fetched.');
       console.log(shops);
       if (shops === undefined) {
         console.log('No shops found.');
         navigate('/search/not-found');
       }
     }
@@ -35,15 +37,17 @@
 
   return (
     <label title="검색어 입력" className={styles['search-bar']} htmlFor="searchBarInput">
-      <input
-        className={styles['search-bar__input']}
-        id="searchBarInput"
-        placeholder="검색어를 입력해주세요."
-        value={text}
-        onChange={onChange}
-        autoComplete="off"
-      />
-      <LensIcon title="검색" className={styles['search-bar__icon']} onClick={handleSearchClick} />
+      <form onSubmit={onSubmit} className={styles['search-bar__form']}>
+        <input
+          className={styles['search-bar__input']}
+          placeholder="검색어를 입력해주세요."
+          id="searchBarInput"
+          autoComplete="off"
+          value={text}
+          onChange={onChange}
+        />
+        <LensIcon title="검색" className={styles['search-bar__icon']} onClick={handleSearchClick} />
+      </form>
     </label>
   );
 }

src/pages/Search/hooks/useSearchingMode.ts

@@ -6,7 +6,8 @@ const useSearchingMode = () => {
   const changeMode = useCallback((event: MouseEvent) => {
     if ((event.target as Element).id === 'searchBarInput') {
       setIsSearching(true);
-    } else if ((event.target as Element).id === 'root') {
+      event.stopPropagation();
+    } else {
       setIsSearching(false);
     }
   }, []);
@@ -17,7 +18,7 @@ const useSearchingMode = () => {
     return () => {
       document.removeEventListener('click', changeMode);
     };
-  }, [changeMode, isSearching]);
+  }, [changeMode]);
 
   return isSearching;
 };

src/pages/Search/index.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import styles from 'pages/Search/Search.module.scss';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
+import SearchDetails from 'pages/SearchDetails';
+import useBooleanState from 'utils/hooks/useBooleanState';
 import Recommendation from './components/SearchBar/Recommendation';
 import SearchInput from './components/SearchBar/SearchInput';
 import RollingBanner from './components/SearchBar/RollingBanner';
@@ -10,30 +12,69 @@ import useSearchingMode from './hooks/useSearchingMode';
 
 const useSearchForm = () => {
   const [text, setText] = useState('');
+  const [isEnter,,,toggle] = useBooleanState(false);
+  const [submittedText, setSubmittedText] = useState('');
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setText(e.target.value);
   };
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (text) {
+      setSubmittedText(text);
+      toggle();
+    }
+  };
 
   return {
     text,
     handleChange,
+    handleSubmit,
+    submittedText,
+    isEnter,
+    toggle,
   };
 };
 
 export default function Search(): JSX.Element {
-  const { text, handleChange } = useSearchForm();
+  const {
+    text, handleChange, handleSubmit, isEnter,
+  } = useSearchForm();
   const isSearching = useSearchingMode();
   const { isMobile } = useMediaQuery();
-  return (
-    <div>
+
+  if (isMobile) {
+    return (
       <div className={styles.search}>
         <section>
-          {isMobile && <NavigationBar />}
-          {isMobile ? !isSearching && <Recommendation /> : <Recommendation />}
-          <SearchInput onChange={handleChange} text={text} />
-          {!isMobile && isSearching ? <RelatedSearches text={text} /> : <RollingBanner />}
+          <NavigationBar />
+          <Recommendation />
+          <SearchInput
+            onChange={handleChange}
+            onSubmit={handleSubmit}
+            text={text}
+          />
+          {isSearching ? <RelatedSearches text={text} /> : <RollingBanner />}
         </section>
       </div>
+    );
+  }
+  return (
+    <div className={styles.search}>
+      <section>
+        {isEnter
+          ? <SearchDetails />
+          : (
+            <>
+              <Recommendation />
+              <SearchInput
+                onChange={handleChange}
+                onSubmit={handleSubmit}
+                text={text}
+              />
+              {isSearching ? <RelatedSearches text={text} /> : <RollingBanner />}
+            </>
+          )}
+      </section>
     </div>
   );
 }