From 2e40c208cfffbcd1b9dcc61f061a5967d66fc478 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=98=9C=EC=A4=80?= Date: Mon, 30 Oct 2023 01:21:32 +0900 Subject: [PATCH 01/19] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/search/index.ts | 4 +- src/api/shop/entity.ts | 9 +- src/api/shop/index.ts | 15 +- src/assets/images/search/defaultImage.png | Bin 0 -> 19500 bytes src/assets/svg/search/phone.svg | 3 + .../components/Map/hooks/useFilterShops.ts | 1 + .../components/SearchBar/SearchInput.tsx | 4 +- src/pages/Search/hooks/useSearchingMode.ts | 5 +- src/pages/Search/index.tsx | 43 ++++- .../SearchDetails/SearchDetails.module.scss | 154 ++++++++++-------- .../SearchDetails/components/LoadingView.tsx | 2 +- .../SearchDetails/components/SearchItem.tsx | 50 +++--- .../hooks/useFetchAutoComplete.ts | 4 +- .../SearchDetails/hooks/useFetchShops.ts | 33 +++- src/pages/SearchDetails/index.tsx | 82 ++++++++-- src/pages/SearchDetails/static/mockup.ts | 2 +- src/utils/hooks/useDebounce.ts | 17 ++ yarn.lock | 28 ---- 18 files changed, 305 insertions(+), 151 deletions(-) create mode 100644 src/assets/images/search/defaultImage.png create mode 100644 src/assets/svg/search/phone.svg create mode 100644 src/utils/hooks/useDebounce.ts diff --git a/src/api/search/index.ts b/src/api/search/index.ts index f371927f..8cc159aa 100644 --- a/src/api/search/index.ts +++ b/src/api/search/index.ts @@ -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?.latitude, + lng: location?.longitude, }; return searchApi.post(url, requestBody); }; diff --git a/src/api/shop/entity.ts b/src/api/shop/entity.ts index 822c652d..0daf9785 100644 --- a/src/api/shop/entity.ts +++ b/src/api/shop/entity.ts @@ -26,7 +26,7 @@ export interface SearchQueryParams { export interface ShopsParams { keyword: string; - location: Coords; + location?: ShopsCoords; } export interface FetchShopsResponse { @@ -44,10 +44,15 @@ export interface Shop { ratingCount: number | null; photoToken: string; dist: number; - category: string; // 추후 카테고리 확인 필요 + category: string; } export interface Coords { lat: number | undefined; lng: number | undefined; } + +export interface ShopsCoords { + latitude: number, + longitude: number +} diff --git a/src/api/shop/index.ts b/src/api/shop/index.ts index d25fe010..102fea26 100644 --- a/src/api/shop/index.ts +++ b/src/api/shop/index.ts @@ -8,12 +8,17 @@ export const fetchTrendings = () => shopApi.get('/trendi export const fetchShop = (shopId: string) => shopApi.get(`/shop?place_id=${shopId}`); -export const fetchShops = (params: ShopsParams) => shopApi.post(`/shops?keyword=${params.keyword}`, { - lat: params.location?.lat, - lng: params.location?.lng, -}); - export const getfilterShops = (params: FilterShopsParams, location: Coords) => shopApi.post(`/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?.latitude, + lng: location?.longitude, + }; + return shopApi.post(url, requestBody); +}; diff --git a/src/assets/images/search/defaultImage.png b/src/assets/images/search/defaultImage.png new file mode 100644 index 0000000000000000000000000000000000000000..9af9296c1ccd94c78ee1aae6df607efaff062674 GIT binary patch literal 19500 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 literal 0 HcmV?d00001 diff --git a/src/assets/svg/search/phone.svg b/src/assets/svg/search/phone.svg new file mode 100644 index 00000000..f0179881 --- /dev/null +++ b/src/assets/svg/search/phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Home/components/Map/hooks/useFilterShops.ts b/src/pages/Home/components/Map/hooks/useFilterShops.ts index 8e8f46d7..3e3635f4 100644 --- a/src/pages/Home/components/Map/hooks/useFilterShops.ts +++ b/src/pages/Home/components/Map/hooks/useFilterShops.ts @@ -13,6 +13,7 @@ const useFilterShops = ({ const { location } = useGeolocation(OPTIONS); const auth = useAuth(); const enabled = !!(location) && !!auth; + const params: FilterShopsParams = { options_friend, options_nearby, options_scrap, }; diff --git a/src/pages/Search/components/SearchBar/SearchInput.tsx b/src/pages/Search/components/SearchBar/SearchInput.tsx index d8af1fac..cba6f528 100644 --- a/src/pages/Search/components/SearchBar/SearchInput.tsx +++ b/src/pages/Search/components/SearchBar/SearchInput.tsx @@ -6,9 +6,10 @@ import { useNavigate } from 'react-router-dom'; interface Props { text: string, onChange: (e: React.ChangeEvent) => void + onKeyDown: (e: React.KeyboardEvent) => void; } export default function SearchInput({ - text, onChange, + text, onChange, onKeyDown, }: Props) { const { isFetching, data: shops, refetch } = useFetchShops(text ?? ''); const navigate = useNavigate(); @@ -42,6 +43,7 @@ export default function SearchInput({ value={text} onChange={onChange} autoComplete="off" + onKeyDown={onKeyDown} /> diff --git a/src/pages/Search/hooks/useSearchingMode.ts b/src/pages/Search/hooks/useSearchingMode.ts index eb0b1aa9..bd7574ee 100644 --- a/src/pages/Search/hooks/useSearchingMode.ts +++ b/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; }; diff --git a/src/pages/Search/index.tsx b/src/pages/Search/index.tsx index 9d73c414..882a4f7c 100644 --- a/src/pages/Search/index.tsx +++ b/src/pages/Search/index.tsx @@ -1,6 +1,7 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import styles from 'pages/Search/Search.module.scss'; import useMediaQuery from 'utils/hooks/useMediaQuery'; +import SearchDetails from 'pages/SearchDetails'; import Recommendation from './components/SearchBar/Recommendation'; import SearchInput from './components/SearchBar/SearchInput'; import RollingBanner from './components/SearchBar/RollingBanner'; @@ -10,28 +11,60 @@ import useSearchingMode from './hooks/useSearchingMode'; const useSearchForm = () => { const [text, setText] = useState(''); + const [entered, setEntered] = useState(false); + const [submittedText, setSubmittedText] = useState(''); const handleChange = (e: React.ChangeEvent) => { setText(e.target.value); + setEntered(false); }; + const handleEnter = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && text) { + setSubmittedText(text); + setEntered(true); + } + }; + + useEffect(() => { + setEntered(false); + console.log('text', text); + console.log('entered', entered); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [text]); + return { text, handleChange, + handleEnter, + submittedText, + entered, }; }; export default function Search(): JSX.Element { - const { text, handleChange } = useSearchForm(); + const { + text, handleChange, handleEnter, entered, + } = useSearchForm(); const isSearching = useSearchingMode(); const { isMobile } = useMediaQuery(); + useEffect(() => { + console.log('isSearching', isSearching); + console.log('mobile', isMobile); + }, [text, isSearching, isMobile]); + return (
{isMobile && } - {isMobile ? !isSearching && : } - - {!isMobile && isSearching ? : } + {!entered && ( + (isMobile && !isSearching) || !isMobile + ) && } + {!isMobile && !entered + ? + : } + {!isMobile && isSearching && !entered && } + {!isMobile && !isSearching && !entered && }
diff --git a/src/pages/SearchDetails/SearchDetails.module.scss b/src/pages/SearchDetails/SearchDetails.module.scss index 0a68a61f..4329c30c 100644 --- a/src/pages/SearchDetails/SearchDetails.module.scss +++ b/src/pages/SearchDetails/SearchDetails.module.scss @@ -53,7 +53,6 @@ background-color: white; } -// 체크 박스 .container { display: block; position: relative; @@ -108,18 +107,42 @@ } .details { - height: 100vh; margin: 0 auto; - max-width: 1152px; + width: 100%; + display: flex; + flex-direction: column; + padding-top: 135px; + + @include media.media-breakpoint-up(mobile) { + max-width: 767px; + margin: 0 auto; + } + + &__search { + display: flex; + width: 1000px; + margin-bottom: 25px; + } + + &__result { + display: flex; + font-size: 18px; + color: #ff7f23; + margin-left: 35px; + } &__list { display: flex; - flex-wrap: wrap; + flex-direction: column; margin-top: 24px; + width: 926px; + } + + &__line { + border-bottom: solid 1px #eeeeee; } } -// 검색 결과 로딩 화면 .loading { text-align: center; width: 100%; @@ -128,12 +151,11 @@ font-size: 20px; } -// 검색 아이템 .item { display: flex; gap: 24px; border: none; - border-bottom: 1px solid #c4c4c4; + border-top: 1px solid #eeeeee; background-color: white; padding: 24px 31px 24px 17px; font-size: 16px; @@ -146,53 +168,47 @@ background-color: #eeeeee; } - .image { + &__header { display: flex; - cursor: pointer; - &__main { - width: 230px; - height: 230px; + &--title { + cursor: pointer; + font-size: 24px; + line-height: 30px; + margin-right: 8px; } - &__other { - display: flex; - flex-direction: column; - padding-left: 4px; - - &--second { - width: 77px; - height: 77px; - } - - &--third { - width: 77px; - height: 76px; - } - - &--fourth { - width: 77px; - height: 77px; - } + &--category { + cursor: pointer; + font-size: 16px; + line-height: 23px; + color: #666666; + padding-top: 8px; + font-weight: 400; } - } - &__title { - cursor: pointer; - font-size: 20px; - line-height: 20px; - } + &--address { + height: 16px; + font-weight: 400; + font-size: 16px; + padding-top: 8px; + line-height: 15px; + padding-right: 8px; + border-right: solid 1px #c4c4c4; + } - &__address { - cursor: pointer; - font-weight: 400; - font-size: 16px; - padding-top: 8px; - line-height: 15px; + &--dist { + font-size: 16px; + line-height: 20px; + color: #666666; + padding-top: 4px; + padding-left: 8px; + font-weight: 400; + } } &__content { - width: 100%; + width: 45%; display: flex; flex-direction: column; font-size: 16px; @@ -204,45 +220,55 @@ } &__status { - padding-top: 93px; + padding-top: 40px; &--open { font-weight: 400; font-size: 16px; line-height: 20px; - color: #ff7f23; + color: #ff0000; } &--closed { font-weight: 400; font-size: 16px; line-height: 20px; - color: #c4c4c4; + color: #ff0000; } } - &__closing { - font-weight: 400; - font-size: 16px; - line-height: 15px; - } - - &__distance { - font-weight: 400; - font-size: 16px; - line-height: 15px; - padding-top: 4px; - } - &__phone { - display: block; + flex-direction: row; + display: flex; font-weight: 400; font-size: 16px; - line-height: 15px; - white-space: pre-wrap; - padding-top: 20px; + line-height: 20px; + padding-top: 8px; text-decoration: none; color: black; + + &--text { + display: flex; + margin-left: 4px; + } + + &--image { + display: flex; + } + } + + .image { + display: flex; + cursor: pointer; + width: 615px; + height: 145px; + + &__item { + flex: 1; + width: 100%; + height: 100%; + object-fit: cover; + } } &__map { diff --git a/src/pages/SearchDetails/components/LoadingView.tsx b/src/pages/SearchDetails/components/LoadingView.tsx index 532ecf98..f10e646c 100644 --- a/src/pages/SearchDetails/components/LoadingView.tsx +++ b/src/pages/SearchDetails/components/LoadingView.tsx @@ -2,6 +2,6 @@ import styles from 'pages/SearchDetails/SearchDetails.module.scss'; export default function LoadingView() { return ( -
현재 위치에서 찾아보는 중이에요..
+
검색중...
); } diff --git a/src/pages/SearchDetails/components/SearchItem.tsx b/src/pages/SearchDetails/components/SearchItem.tsx index ca811ae2..ca8b0608 100644 --- a/src/pages/SearchDetails/components/SearchItem.tsx +++ b/src/pages/SearchDetails/components/SearchItem.tsx @@ -1,35 +1,43 @@ import styles from 'pages/SearchDetails/SearchDetails.module.scss'; import { useNavigate } from 'react-router-dom'; import { Shop } from 'api/shop/entity'; +import { ReactComponent as PhoneImg } from 'assets/svg/search/phone.svg'; import { getMockItem } from '../static/mockup'; interface Props { shop: Shop; } - export default function SearchItem({ shop }: Props) { const { - name, formattedAddress, photoToken, placeId, dist, openNow, + name, formattedAddress, photoToken, placeId, dist, openNow, category, } = shop; + const { - imageAlt, defaultImage, phoneNumber, image, + imageAlt, defaultImage, phoneNumber, } = getMockItem(); + const navigate = useNavigate(); + const distInKm = (dist / 1000).toFixed(1); return ( - ); } diff --git a/src/pages/SearchDetails/hooks/useFetchAutoComplete.ts b/src/pages/SearchDetails/hooks/useFetchAutoComplete.ts index 18587ecb..9c287935 100644 --- a/src/pages/SearchDetails/hooks/useFetchAutoComplete.ts +++ b/src/pages/SearchDetails/hooks/useFetchAutoComplete.ts @@ -4,10 +4,10 @@ import { fetchAutoComplete } from 'api/search'; import { FetchAutoCompleteParams } from 'api/search/entity'; const useFetchAutoComplete = (query: string) => { - const options = { + const OPTIONS = { maximumAge: 1000, }; - const { location } = useGeolocation(options); + const { location } = useGeolocation(OPTIONS); const params: FetchAutoCompleteParams = { query }; if (location) { diff --git a/src/pages/SearchDetails/hooks/useFetchShops.ts b/src/pages/SearchDetails/hooks/useFetchShops.ts index f21a9424..905cb91b 100644 --- a/src/pages/SearchDetails/hooks/useFetchShops.ts +++ b/src/pages/SearchDetails/hooks/useFetchShops.ts @@ -1,23 +1,42 @@ import useGeolocation from 'utils/hooks/useGeolocation'; +import useDebounce from 'utils/hooks/useDebounce'; import { useQuery } from 'react-query'; import { fetchShops } from 'api/shop'; import { ShopsParams } from 'api/shop/entity'; +import { useEffect, useMemo } from 'react'; -const useFetchShops = (keyword: string) => { - const options = { +const useFetchShops = (text: string) => { + const OPTIONS = { maximumAge: 1000, }; - const { location } = useGeolocation(options); - const params = { keyword }; + const { location } = useGeolocation(OPTIONS); + const debouncedText = useDebounce(text, 500); + + const params: ShopsParams = { keyword: debouncedText }; + if (location) { + params.location = location; + } const { isLoading, isError, data, refetch, - } = useQuery('shop', () => fetchShops(params as ShopsParams), { enabled: !!location }); + } = useQuery(['shop', location], () => fetchShops(params), { + enabled: !!location, + }); + + useEffect(() => { + refetch(); + }, [debouncedText, refetch]); const isFetching = isLoading || !(location); - const shops = data?.data.shopQueryResponseList; + const shops = useMemo(() => data?.data.shopQueryResponseList, [data]); + const count = useMemo(() => { + if (shops) { + return shops.filter((shop) => shop.name && shop.name.trim() !== '').length; + } + return 0; + }, [shops]); return { - isFetching, isError, data: shops, refetch, + isFetching, isError, data: shops, refetch, count, }; }; diff --git a/src/pages/SearchDetails/index.tsx b/src/pages/SearchDetails/index.tsx index 01968fe0..b5dafe9a 100644 --- a/src/pages/SearchDetails/index.tsx +++ b/src/pages/SearchDetails/index.tsx @@ -1,26 +1,84 @@ -import { useParams } from 'react-router-dom'; +// import { useParams } from 'react-router-dom'; import styles from 'pages/SearchDetails/SearchDetails.module.scss'; -import NavigationBar from 'pages/Search/components/NavigationBar'; +// import NavigationBar from 'pages/Search/components/NavigationBar'; +import SearchInput from 'pages/Search/components/SearchBar/SearchInput'; +import RelatedSearches from 'pages/Search/components/RelatedSearches'; +import { useState, useEffect } from 'react'; +import useSearchingMode from 'pages/Search/hooks/useSearchingMode'; +import useMediaQuery from 'utils/hooks/useMediaQuery'; +import { Shop } from 'api/shop/entity'; +import { useNavigate } from 'react-router-dom'; import LoadingView from './components/LoadingView'; import useFetchShops from './hooks/useFetchShops'; -import ControllBar from './components/ControllBar'; +// import ControllBar from './components/ControllBar'; import SearchItem from './components/SearchItem'; +const useSearchForm = () => { + const [text, setText] = useState(''); + const [entered, setEntered] = useState(false); + const [submittedText, setSubmittedText] = useState(''); + const handleChange = (e: React.ChangeEvent) => { + setText(e.target.value); + }; + + const handleEnter = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && text) { + setSubmittedText(text); + setEntered(true); + } + }; + + useEffect(() => { + setEntered(false); + }, [text]); + + return { + text, + handleChange, + handleEnter, + submittedText, + entered, + }; +}; + export default function SearchDetails() { - const { keyword } = useParams(); - const { isFetching, data: shops } = useFetchShops(keyword ?? ''); + const { + text, handleChange, handleEnter, entered, + } = useSearchForm(); + const isSearching = useSearchingMode(); + const { isMobile } = useMediaQuery(); + const { isFetching, data: shops, count } = useFetchShops(text ?? ''); + const navigate = useNavigate(); + + const renderShopsOrNotFound = () => { + if (isFetching) { + return ; + } + + if (count === 0 && shops === undefined) { + navigate('/search/not-found'); + return null; + } + + return (shops || []).map((shop: Shop) => ( +
+ +
+ )); + }; return (
- - +
+ +
+ {!isMobile && isSearching && !entered && } +
+ {`${count}개의 검색결과`} +
- {isFetching - ? - : shops && shops.map((shop) => ( - - ))} + {renderShopsOrNotFound()}
diff --git a/src/pages/SearchDetails/static/mockup.ts b/src/pages/SearchDetails/static/mockup.ts index 24330387..fd097ac7 100644 --- a/src/pages/SearchDetails/static/mockup.ts +++ b/src/pages/SearchDetails/static/mockup.ts @@ -1,4 +1,4 @@ -import defaultImage from 'assets/images/search/default-image.png'; +import defaultImage from 'assets/images/search/defaultImage.png'; export interface GetItemResponse { imageAlt: string, diff --git a/src/utils/hooks/useDebounce.ts b/src/utils/hooks/useDebounce.ts new file mode 100644 index 00000000..5726cb5a --- /dev/null +++ b/src/utils/hooks/useDebounce.ts @@ -0,0 +1,17 @@ +import { useState, useEffect } from 'react'; + +export default function useDebounce(value: string, delay : number) { + const [debouncedValue, setDebouncedValue] = useState(value); + + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedValue(value); + }, delay); + + return () => { + clearTimeout(handler); + }; + }, [value, delay]); + + return debouncedValue; +} diff --git a/yarn.lock b/yarn.lock index 30080dde..b5f1492b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1890,16 +1890,6 @@ "@types/qs" "*" "@types/range-parser" "*" -"@types/express-serve-static-core@^4.17.33": - version "4.17.36" - resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.36.tgz#baa9022119bdc05a4adfe740ffc97b5f9360e545" - integrity sha512-zbivROJ0ZqLAtMzgzIUC4oNqDG9iF0lSsAqpOD9kbs5xcIM3dTiyuHvBc7R8MtWBp3AAWGaovJa+wzWPjLYW7Q== - dependencies: - "@types/node" "*" - "@types/qs" "*" - "@types/range-parser" "*" - "@types/send" "*" - "@types/express@*", "@types/express@^4.17.13": version "4.17.13" resolved "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz" @@ -1910,16 +1900,6 @@ "@types/qs" "*" "@types/serve-static" "*" -"@types/express@^4.17.17": - version "4.17.17" - resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.17.tgz#01d5437f6ef9cfa8668e616e13c2f2ac9a491ae4" - integrity sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q== - dependencies: - "@types/body-parser" "*" - "@types/express-serve-static-core" "^4.17.33" - "@types/qs" "*" - "@types/serve-static" "*" - "@types/geojson@*": version "7946.0.10" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249" @@ -2083,14 +2063,6 @@ resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz" integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== -"@types/send@*": - version "0.17.1" - resolved "https://registry.yarnpkg.com/@types/send/-/send-0.17.1.tgz#ed4932b8a2a805f1fe362a70f4e62d0ac994e301" - integrity sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q== - dependencies: - "@types/mime" "^1" - "@types/node" "*" - "@types/serve-index@^1.9.1": version "1.9.1" resolved "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz" From b042d950b8a54c1c70a1eefe9cdd82dbad6fb7a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=98=9C=EC=A4=80?= Date: Mon, 30 Oct 2023 01:45:08 +0900 Subject: [PATCH 02/19] =?UTF-8?q?fix:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=98=EC=86=94=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SideNavigation/index.tsx | 4 ++-- src/pages/Search/index.tsx | 7 ------- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/common/SideNavigation/index.tsx b/src/components/common/SideNavigation/index.tsx index c0c50bac..6dedd175 100644 --- a/src/components/common/SideNavigation/index.tsx +++ b/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 ? (
  • 프로필 이미지 diff --git a/src/pages/Search/index.tsx b/src/pages/Search/index.tsx index 882a4f7c..cfbc930f 100644 --- a/src/pages/Search/index.tsx +++ b/src/pages/Search/index.tsx @@ -27,9 +27,6 @@ const useSearchForm = () => { useEffect(() => { setEntered(false); - console.log('text', text); - console.log('entered', entered); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [text]); return { @@ -47,10 +44,6 @@ export default function Search(): JSX.Element { } = useSearchForm(); const isSearching = useSearchingMode(); const { isMobile } = useMediaQuery(); - useEffect(() => { - console.log('isSearching', isSearching); - console.log('mobile', isMobile); - }, [text, isSearching, isMobile]); return (
    From 91c405f2a9b5879eeb6dc0026806beac15e2065c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=98=9C=EC=A4=80?= Date: Mon, 30 Oct 2023 02:07:46 +0900 Subject: [PATCH 03/19] =?UTF-8?q?refactor:=20=ED=95=A8=EC=88=98=EB=AA=85?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SearchDetails/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/SearchDetails/index.tsx b/src/pages/SearchDetails/index.tsx index b5dafe9a..dcb9dc6c 100644 --- a/src/pages/SearchDetails/index.tsx +++ b/src/pages/SearchDetails/index.tsx @@ -50,7 +50,7 @@ export default function SearchDetails() { const { isFetching, data: shops, count } = useFetchShops(text ?? ''); const navigate = useNavigate(); - const renderShopsOrNotFound = () => { + const componentsController = () => { if (isFetching) { return ; } @@ -78,7 +78,7 @@ export default function SearchDetails() { {`${count}개의 검색결과`}
    - {renderShopsOrNotFound()} + {componentsController()}
    From 5a7413e4a89a3a6dcf349da6e9ca7b475e9ffa32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=98=9C=EC=A4=80?= Date: Thu, 2 Nov 2023 00:16:01 +0900 Subject: [PATCH 04/19] =?UTF-8?q?refactor:=20return=EA=B0=92=20=EB=B6=84?= =?UTF-8?q?=EA=B8=B0=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SearchBar/SearchInput.tsx | 5 +- src/pages/Search/index.tsx | 51 +++++++++++------- src/pages/SearchDetails/index.tsx | 54 +++++++++---------- 3 files changed, 61 insertions(+), 49 deletions(-) diff --git a/src/pages/Search/components/SearchBar/SearchInput.tsx b/src/pages/Search/components/SearchBar/SearchInput.tsx index cba6f528..bd887cf4 100644 --- a/src/pages/Search/components/SearchBar/SearchInput.tsx +++ b/src/pages/Search/components/SearchBar/SearchInput.tsx @@ -2,6 +2,7 @@ import { ReactComponent as LensIcon } from 'assets/svg/search/lens.svg'; 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, @@ -38,11 +39,11 @@ export default function SearchInput({