From 727496f3d57b9d604bc1c2a345c54718b7482504 Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Sat, 3 Feb 2024 21:44:14 +0900 Subject: [PATCH 01/19] =?UTF-8?q?fix:=20FilterShopsResponse=20=ED=83=80?= =?UTF-8?q?=EC=9D=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/shop/entity.ts | 15 +++++---------- .../Map/components/MarkerHtml/index.tsx | 8 ++++---- src/pages/Home/components/Map/hooks/useMarker.ts | 5 ++--- 3 files changed, 11 insertions(+), 17 deletions(-) diff --git a/src/api/shop/entity.ts b/src/api/shop/entity.ts index 1c57024d..73db833e 100644 --- a/src/api/shop/entity.ts +++ b/src/api/shop/entity.ts @@ -5,11 +5,8 @@ export interface FilterShopsParams { location?: Coords; } -export interface FilterShopsResponse { - coordinate: Coords; - name: string; - photo: string; - placeId: string; +interface FilterShopsResponse extends Omit { + photos: string[] | null; } export type FilterShopsListResponse = FilterShopsResponse[]; @@ -35,14 +32,12 @@ export interface Shop { placeId: string; name: string; formattedAddress: string; - lat: number; - lng: number; + simpleFormattedAddress: string; + coordinate: Coords; openNow: boolean | null; - totalRating: number | null; - ratingCount: number | null; photoToken: string | null; dist: number; - category: string; // 추후 카테고리 확인 필요 + category: string; } export type Period = { diff --git a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx index b7ac40f0..2de7183e 100644 --- a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx +++ b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx @@ -2,13 +2,13 @@ import defaultImage from 'assets/svg/common/favicon.svg'; import styles from './MarkerHtml.module.scss'; -export function MarkerHtml(src:string | null, name:string) { +export function MarkerHtml(src:string[] | string | null, name:string) { return `
- 음식점 사진 + 음식점 사진
${name}
@@ -16,13 +16,13 @@ export function MarkerHtml(src:string | null, name:string) { `; } -export function ClickedMarkerHtml(src: string | null, name: string, placeId: string) { +export function ClickedMarkerHtml(src: string[] | null, name: string, placeId: string) { return `
- 음식점 사진 + 음식점 사진
${name}
diff --git a/src/pages/Home/components/Map/hooks/useMarker.ts b/src/pages/Home/components/Map/hooks/useMarker.ts index 373e788a..0a94bccc 100644 --- a/src/pages/Home/components/Map/hooks/useMarker.ts +++ b/src/pages/Home/components/Map/hooks/useMarker.ts @@ -27,11 +27,10 @@ function useMarker({ map, filterShops }: MarkerProps) { map, zIndex: filterShops.length - index, icon: { - content: MarkerHtml(shop.photo, shop.name), + content: MarkerHtml(shop.photos, shop.name), anchor: new naver.maps.Point(30, 62), }, }); - naver.maps.Event.addListener(marker, 'click', () => { const clickedPlaceId = shop.placeId; newMarkers.forEach((m, idx) => { @@ -43,7 +42,7 @@ function useMarker({ map, filterShops }: MarkerProps) { }); marker.setIcon({ - content: ClickedMarkerHtml(shop.photo, shop.name, shop.placeId), + content: ClickedMarkerHtml(shop.photos, shop.name, shop.placeId), anchor: new naver.maps.Point(30, 62), }); marker.setZIndex(10000); From 93e78c20cc9b1b9fc26e81c23e4798030965b61c Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Sun, 4 Feb 2024 01:04:55 +0900 Subject: [PATCH 02/19] =?UTF-8?q?fix:=20=EB=B3=84=EC=A0=90=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/shop/entity.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/api/shop/entity.ts b/src/api/shop/entity.ts index 73db833e..aeef2946 100644 --- a/src/api/shop/entity.ts +++ b/src/api/shop/entity.ts @@ -7,6 +7,7 @@ export interface FilterShopsParams { interface FilterShopsResponse extends Omit { photos: string[] | null; + rate: ShopRateResponse; } export type FilterShopsListResponse = FilterShopsResponse[]; From 20fc938497454019988e17744610e404957fb904 Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Sun, 4 Feb 2024 01:05:43 +0900 Subject: [PATCH 03/19] =?UTF-8?q?fix:=20SideNavigation=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20filterShops=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SideNavigation/index.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/common/SideNavigation/index.tsx b/src/components/common/SideNavigation/index.tsx index 0e46c5f1..e8ddd50e 100644 --- a/src/components/common/SideNavigation/index.tsx +++ b/src/components/common/SideNavigation/index.tsx @@ -11,8 +11,8 @@ import SpriteSvg from 'components/common/SpriteSvg'; import { useAuth, useClearAuth } from 'store/auth'; import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter'; import useLocationActive from 'store/locationActive'; -import { useSelected } from 'store/placeId'; import useBooleanState from 'utils/hooks/useBooleanState'; +import useFilterShops from 'utils/hooks/useFilterShops'; import cn from 'utils/ts/classNames'; import styles from './SideNavigation.module.scss'; @@ -26,10 +26,15 @@ export default function SideNavigation(): JSX.Element { const { filterFriendState, setFilterFriend } = useFilterFriend(); const { filterScrapState, setFilterScrap } = useFilterScrap(); const { filterNearbyState, setFilterNearby } = useFilterNearby(); + + const { data: filterShops } = useFilterShops({ + options_friend: filterFriendState ? 1 : 0, + options_scrap: filterScrapState ? 1 : 0, + options_nearby: filterNearbyState ? 1 : 0, + }); const { state: isActive, } = useLocationActive(); - const { selected } = useSelected(); const TABS = [ { @@ -194,7 +199,7 @@ export default function SideNavigation(): JSX.Element {
{(filterNearbyState || filterScrapState || filterFriendState) - && selected && } + && filterShops && } ); From b7f30c5d8aa37d73546ece512c276f346c67ee80 Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Sun, 4 Feb 2024 02:30:31 +0900 Subject: [PATCH 04/19] =?UTF-8?q?feat:=20=ED=95=80=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/SideNavigation/Pin/Pin.module.scss | 74 ++++++++++++ .../common/SideNavigation/Pin/index.tsx | 108 ++++++++++++++---- 2 files changed, 158 insertions(+), 24 deletions(-) diff --git a/src/components/common/SideNavigation/Pin/Pin.module.scss b/src/components/common/SideNavigation/Pin/Pin.module.scss index b50cb847..fa78323e 100644 --- a/src/components/common/SideNavigation/Pin/Pin.module.scss +++ b/src/components/common/SideNavigation/Pin/Pin.module.scss @@ -5,6 +5,80 @@ gap: 5px; } +.shops { + display: flex; + flex-direction: column; + padding: 0 10px; +} + +.shop { + display: flex; + flex-direction: column; + text-align: left; + border-bottom: 0.5px solid #eeeeee; + padding: 10px 0; + + &:last-child { + border-bottom: none; + } +} + +.detail { + display: flex; + gap: 5px; + align-items: center; + font-size: 16px; + + &__name { + font-weight: 700; + font-size: 24px; + } + + &__category { + color: #979797; + } + + &__dist, + &__rate { + display: flex; + align-items: center; + gap: 5px; + color: #666666; + } + + &__open { + color: #ff0101; + } +} + +.empty-photos { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 153px; + width: 100%; + gap: 5px; + font-size: 12px; + color: #979797; +} + +.photos { + display: grid; + width: 530px; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + gap: 5px; + list-style: none; +} + +.photo { + img { + width: 100%; + height: 153px; + object-fit: fill; + } +} + .info { display: flex; align-items: flex-end; diff --git a/src/components/common/SideNavigation/Pin/index.tsx b/src/components/common/SideNavigation/Pin/index.tsx index 5139bcdb..8b69b36f 100644 --- a/src/components/common/SideNavigation/Pin/index.tsx +++ b/src/components/common/SideNavigation/Pin/index.tsx @@ -1,36 +1,95 @@ -import { useNavigate } from 'react-router-dom'; - -import { ReactComponent as PencilkIcon } from 'assets/svg/home/pencil.svg'; +// import { useNavigate } from 'react-router-dom'; +import { FilterShopsListResponse } from 'api/shop/entity'; +import defaultImage from 'assets/svg/common/favicon.svg'; import { ReactComponent as StarIcon } from 'assets/svg/post/star.svg'; -import { ReactComponent as BookMarkIcon } from 'assets/svg/shop/book-mark.svg'; -import useLatestDate from 'components/common/SideNavigation/hooks/useLatestDate'; +import { ReactComponent as NotFoundImageIcon } from 'assets/svg/shop/not-found.svg'; import usePin from 'components/common/SideNavigation/hooks/usePin'; -import ReviewList from 'components/common/SideNavigation/Pin/components'; -import ImageCarousel from 'components/ImageCarousel'; -import useRate from 'utils/hooks/useRate'; -import useScrap from 'utils/hooks/useScrap'; -import useScrapId from 'utils/hooks/useScrapId'; +import { useSelected } from 'store/placeId'; +// import { ReactComponent as PencilkIcon } from 'assets/svg/home/pencil.svg'; +// import { ReactComponent as BookMarkIcon } from 'assets/svg/shop/book-mark.svg'; +// import useLatestDate from 'components/common/SideNavigation/hooks/useLatestDate'; +// import ReviewList from 'components/common/SideNavigation/Pin/components'; +// import ImageCarousel from 'components/ImageCarousel'; +// import useRate from 'utils/hooks/useRate'; +// import useScrap from 'utils/hooks/useScrap'; +// import useScrapId from 'utils/hooks/useScrapId'; import styles from './Pin.module.scss'; interface PinProps { - placeId: string; + filterShops:FilterShopsListResponse; } -export default function Pin({ placeId }:PinProps): JSX.Element { - const { data } = usePin(String(placeId)); - const navigate = useNavigate(); - const { scrapId } = useScrapId(String(placeId)); - const { rate } = useRate(placeId); - const { latestDate } = useLatestDate(placeId); - const onClick = () => { - navigate(`/post/${placeId}`, { state: { placeId } }); - }; +const newAddress = (address:string) => { + const firstCommaIndex = address.indexOf(','); + return address.substring(0, firstCommaIndex); +}; +export default function Pin({ filterShops }:PinProps): JSX.Element { + const { selected, setSelected } = useSelected(); + const { data } = usePin(selected as string); + + // const navigate = useNavigate(); + // const { scrapId } = useScrapId(String(placeId)); + // const { rate } = useRate(placeId); + // const { latestDate } = useLatestDate(placeId); + // const onClick = () => { + // navigate(`/post/${placeId}`, { state: { placeId } }); + // }; - const { toggleScrap, isPending } = useScrap(String(placeId), Number(scrapId)); + // const { toggleScrap, isPending } = useScrap(String(placeId), Number(scrapId)); return (
- +
+ {filterShops.map((shop) => ( + + ))} +
+ {selected && data &&
선택된 가게: {data?.name}
} + {/*
  • {data?.name} @@ -48,7 +107,8 @@ export default function Pin({ placeId }:PinProps): JSX.Element {
  • {rate}.0 - {latestDate?.lastDate === null ? ' 마지막 리뷰 없음' : ` 마지막 리뷰 ${latestDate?.lastDate.replaceAll('-', '/')}`} + {latestDate?.lastDate === null ? ' 마지막 리뷰 없음' : ` + // 마지막 리뷰 ${latestDate?.lastDate.replaceAll('-', '/')}`}
@@ -58,7 +118,7 @@ export default function Pin({ placeId }:PinProps): JSX.Element { type="button" className={styles.post} >리뷰 작성하기 - + */}
); } From 9b89b640054c7b0b11b5a15837e253c6f18dd8c7 Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Sun, 4 Feb 2024 03:19:50 +0900 Subject: [PATCH 05/19] =?UTF-8?q?feat:=20selected=20=EC=82=BC=ED=95=AD=20?= =?UTF-8?q?=EC=97=B0=EC=82=B0=EC=9E=90=20=EC=B6=94=EA=B0=80,=20=EC=BF=BC?= =?UTF-8?q?=EB=A6=AC=20=EC=88=98=EC=A0=95,=20selected=20=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=ED=99=94=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/SideNavigation/Pin/index.tsx | 194 +++++++++--------- .../common/SideNavigation/index.tsx | 8 +- src/utils/hooks/useFilterShops.ts | 2 +- 3 files changed, 104 insertions(+), 100 deletions(-) diff --git a/src/components/common/SideNavigation/Pin/index.tsx b/src/components/common/SideNavigation/Pin/index.tsx index 8b69b36f..3d4bf922 100644 --- a/src/components/common/SideNavigation/Pin/index.tsx +++ b/src/components/common/SideNavigation/Pin/index.tsx @@ -1,18 +1,19 @@ -// import { useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; + import { FilterShopsListResponse } from 'api/shop/entity'; import defaultImage from 'assets/svg/common/favicon.svg'; +import { ReactComponent as PencilkIcon } from 'assets/svg/home/pencil.svg'; import { ReactComponent as StarIcon } from 'assets/svg/post/star.svg'; +import { ReactComponent as BookMarkIcon } from 'assets/svg/shop/book-mark.svg'; import { ReactComponent as NotFoundImageIcon } from 'assets/svg/shop/not-found.svg'; +import useLatestDate from 'components/common/SideNavigation/hooks/useLatestDate'; import usePin from 'components/common/SideNavigation/hooks/usePin'; +import ReviewList from 'components/common/SideNavigation/Pin/components'; +import ImageCarousel from 'components/ImageCarousel'; import { useSelected } from 'store/placeId'; -// import { ReactComponent as PencilkIcon } from 'assets/svg/home/pencil.svg'; -// import { ReactComponent as BookMarkIcon } from 'assets/svg/shop/book-mark.svg'; -// import useLatestDate from 'components/common/SideNavigation/hooks/useLatestDate'; -// import ReviewList from 'components/common/SideNavigation/Pin/components'; -// import ImageCarousel from 'components/ImageCarousel'; -// import useRate from 'utils/hooks/useRate'; -// import useScrap from 'utils/hooks/useScrap'; -// import useScrapId from 'utils/hooks/useScrapId'; +import useRate from 'utils/hooks/useRate'; +import useScrap from 'utils/hooks/useScrap'; +import useScrapId from 'utils/hooks/useScrapId'; import styles from './Pin.module.scss'; @@ -28,97 +29,98 @@ export default function Pin({ filterShops }:PinProps): JSX.Element { const { selected, setSelected } = useSelected(); const { data } = usePin(selected as string); - // const navigate = useNavigate(); - // const { scrapId } = useScrapId(String(placeId)); - // const { rate } = useRate(placeId); - // const { latestDate } = useLatestDate(placeId); - // const onClick = () => { - // navigate(`/post/${placeId}`, { state: { placeId } }); - // }; + const navigate = useNavigate(); + const { scrapId } = useScrapId(selected as string); + const { rate } = useRate(selected as string); + const { latestDate } = useLatestDate(selected as string); + const { toggleScrap, isPending } = useScrap(selected as string, scrapId?.scrapId as number); - // const { toggleScrap, isPending } = useScrap(String(placeId), Number(scrapId)); return (
-
- {filterShops.map((shop) => ( - - ))} -
- {selected && data &&
선택된 가게: {data?.name}
} - {/* -
    -
  • - {data?.name} - {data?.category} - -
    • -
  • -
    - {rate}.0 - {latestDate?.lastDate === null ? ' 마지막 리뷰 없음' : ` - // 마지막 리뷰 ${latestDate?.lastDate.replaceAll('-', '/')}`} -
    -
    • -
- - */} + {shop.photos === null ? ( +
+ +
등록된 사진이 없습니다.
+
+ ) : ( +
    + {shop.photos.slice(0, 3).map((photo) => ( +
  • + + + 가게 이미지 + +
    • + ))} +
+ )} + + ))} +
+ ) + : ( + <> + +
    +
  • + {data?.name} + {data?.category} + +
    • +
  • +
    + {rate}.0 + {latestDate?.lastDate === null ? ' 마지막 리뷰 없음' : `마지막 리뷰 ${latestDate?.lastDate.replaceAll('-', '/')}`} +
    +
    • +
+ + + + )} ); } diff --git a/src/components/common/SideNavigation/index.tsx b/src/components/common/SideNavigation/index.tsx index e8ddd50e..0d7b4589 100644 --- a/src/components/common/SideNavigation/index.tsx +++ b/src/components/common/SideNavigation/index.tsx @@ -11,6 +11,7 @@ import SpriteSvg from 'components/common/SpriteSvg'; import { useAuth, useClearAuth } from 'store/auth'; import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter'; import useLocationActive from 'store/locationActive'; +import { useSelected } from 'store/placeId'; import useBooleanState from 'utils/hooks/useBooleanState'; import useFilterShops from 'utils/hooks/useFilterShops'; import cn from 'utils/ts/classNames'; @@ -26,6 +27,7 @@ export default function SideNavigation(): JSX.Element { const { filterFriendState, setFilterFriend } = useFilterFriend(); const { filterScrapState, setFilterScrap } = useFilterScrap(); const { filterNearbyState, setFilterNearby } = useFilterNearby(); + const { setSelected } = useSelected(); const { data: filterShops } = useFilterShops({ options_friend: filterFriendState ? 1 : 0, @@ -169,7 +171,7 @@ export default function SideNavigation(): JSX.Element { [styles['side-pannel__search-button']]: true, [styles['side-pannel__search-button--clicked']]: filterNearbyState === true, })} - onClick={() => { setFilterNearby(!filterNearbyState); }} + onClick={() => { setFilterNearby(!filterNearbyState); setSelected(null); }} > 가까운 음식점 @@ -180,7 +182,7 @@ export default function SideNavigation(): JSX.Element { [styles['side-pannel__search-button']]: true, [styles['side-pannel__search-button--clicked']]: filterScrapState === true, })} - onClick={() => { setFilterScrap(!filterScrapState); }} + onClick={() => { setFilterScrap(!filterScrapState); setSelected(null); }} > 북마크 음식점 @@ -191,7 +193,7 @@ export default function SideNavigation(): JSX.Element { [styles['side-pannel__search-button']]: true, [styles['side-pannel__search-button--clicked']]: filterFriendState === true, })} - onClick={() => { setFilterFriend(!filterFriendState); }} + onClick={() => { setFilterFriend(!filterFriendState); setSelected(null); }} > 친구 음식점 diff --git a/src/utils/hooks/useFilterShops.ts b/src/utils/hooks/useFilterShops.ts index 8c70e83a..e1f650c7 100644 --- a/src/utils/hooks/useFilterShops.ts +++ b/src/utils/hooks/useFilterShops.ts @@ -20,7 +20,7 @@ const useFilterShops = ({ const { isLoading, isError, data, refetch, } = useQuery({ - queryKey: ['filterShops'], + queryKey: ['filterShops', params, location?.lat, location?.lng], queryFn: () => getFilterShops(params, { lat: location?.lat, lng: location?.lng, From 00467e8aba19cec8741b9ddbf96a90bd4ee9a402 Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Sun, 4 Feb 2024 04:51:35 +0900 Subject: [PATCH 06/19] =?UTF-8?q?feat:=20=EC=A1=B0=EA=B1=B4=EB=B3=84=20?= =?UTF-8?q?=ED=95=80=20=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=A5=BC=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=ED=95=98=EB=8A=94=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/SideNavigation/Pin/index.tsx | 3 +- .../SideNavigation/SideNavigation.module.scss | 25 ++++++++++++++ .../common/SideNavigation/index.tsx | 34 +++++++++++++++++-- src/utils/hooks/useFilterShops.ts | 2 +- 4 files changed, 58 insertions(+), 6 deletions(-) diff --git a/src/components/common/SideNavigation/Pin/index.tsx b/src/components/common/SideNavigation/Pin/index.tsx index 3d4bf922..d0c19b91 100644 --- a/src/components/common/SideNavigation/Pin/index.tsx +++ b/src/components/common/SideNavigation/Pin/index.tsx @@ -26,10 +26,9 @@ const newAddress = (address:string) => { return address.substring(0, firstCommaIndex); }; export default function Pin({ filterShops }:PinProps): JSX.Element { + const navigate = useNavigate(); const { selected, setSelected } = useSelected(); const { data } = usePin(selected as string); - - const navigate = useNavigate(); const { scrapId } = useScrapId(selected as string); const { rate } = useRate(selected as string); const { latestDate } = useLatestDate(selected as string); diff --git a/src/components/common/SideNavigation/SideNavigation.module.scss b/src/components/common/SideNavigation/SideNavigation.module.scss index 4dd92a94..6e7093e8 100644 --- a/src/components/common/SideNavigation/SideNavigation.module.scss +++ b/src/components/common/SideNavigation/SideNavigation.module.scss @@ -252,3 +252,28 @@ } } } + +.loading { + display: flex; + height: 100%; + align-items: center; +} + +.filterShops-empty { + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + align-items: center; + gap: 10px; + + div:last-child { + font-size: 14px; + color: #666666; + } + + img { + margin: 50px 0 10px; + width: 80%; + } +} diff --git a/src/components/common/SideNavigation/index.tsx b/src/components/common/SideNavigation/index.tsx index 0d7b4589..347d2630 100644 --- a/src/components/common/SideNavigation/index.tsx +++ b/src/components/common/SideNavigation/index.tsx @@ -2,10 +2,12 @@ import { useEffect } from 'react'; import { Link, useLocation, useNavigate } from 'react-router-dom'; import defaultImage from 'assets/images/follow/default-image.png'; +import filterShopsEmpty from 'assets/images/search/not-found-img.jpeg'; import { ReactComponent as BookMarkIcon } from 'assets/svg/home/bookmark.svg'; import { ReactComponent as GroupIcon } from 'assets/svg/home/group.svg'; import { ReactComponent as NearbyIcon } from 'assets/svg/home/nearby.svg'; import { ReactComponent as SearchIcon } from 'assets/svg/search/lens.svg'; +import LoadingSpinner from 'components/common/LoadingSpinner'; import Pin from 'components/common/SideNavigation/Pin/index'; import SpriteSvg from 'components/common/SpriteSvg'; import { useAuth, useClearAuth } from 'store/auth'; @@ -29,11 +31,38 @@ export default function SideNavigation(): JSX.Element { const { filterNearbyState, setFilterNearby } = useFilterNearby(); const { setSelected } = useSelected(); - const { data: filterShops } = useFilterShops({ + const { isLoading, data: filterShops } = useFilterShops({ options_friend: filterFriendState ? 1 : 0, options_scrap: filterScrapState ? 1 : 0, options_nearby: filterNearbyState ? 1 : 0, }); + + const renderingPin = () => { + if (isLoading) { + return ( +
+ +
+ ); + } + + if (auth === null || (filterShops && filterShops.length === 0) + || (!filterNearbyState && !filterScrapState && !filterFriendState)) { + return ( +
+
아쉽게도 현재 관련 음식점이 없습니다.
+
원하는 음식점을 북마크로 저장해보세요.
+ 음식점 없음 +
친구를 팔로우하면 친구가 북마크한 음식점을 볼 수 있어요!
+
+ ); + } + + if (filterShops && filterShops.length > 0) { + return ; + } + return null; + }; const { state: isActive, } = useLocationActive(); @@ -200,8 +229,7 @@ export default function SideNavigation(): JSX.Element { - {(filterNearbyState || filterScrapState || filterFriendState) - && filterShops && } + {renderingPin()} ); diff --git a/src/utils/hooks/useFilterShops.ts b/src/utils/hooks/useFilterShops.ts index e1f650c7..9d664c9f 100644 --- a/src/utils/hooks/useFilterShops.ts +++ b/src/utils/hooks/useFilterShops.ts @@ -32,7 +32,7 @@ const useFilterShops = ({ const filterShops = data?.data; return { - isFetching, isError, data: filterShops, refetch, + isLoading, isFetching, isError, data: filterShops, refetch, }; }; From ea76bf68e1de57600a29d03ea5d7a3fba1f77fba Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Sun, 4 Feb 2024 05:38:55 +0900 Subject: [PATCH 07/19] =?UTF-8?q?feat:=20=EC=98=B5=EC=85=94=EB=84=90=20?= =?UTF-8?q?=EC=B2=B4=EC=9D=B4=EB=8B=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SideNavigation/Pin/components/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/SideNavigation/Pin/components/index.tsx b/src/components/common/SideNavigation/Pin/components/index.tsx index eac8701d..9ae61138 100644 --- a/src/components/common/SideNavigation/Pin/components/index.tsx +++ b/src/components/common/SideNavigation/Pin/components/index.tsx @@ -97,7 +97,7 @@ export default function ReviewList({ placeId }: { placeId: string }) {
  • {`${review.userReviewResponse.nickname}의
    From 55dd8769eca7739a07e64569f3c87773ee89cfd0 Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Sun, 4 Feb 2024 17:51:38 +0900 Subject: [PATCH 08/19] =?UTF-8?q?fix:=20=EC=A7=80=EB=8F=84=20=EC=98=B5?= =?UTF-8?q?=EC=85=98=20=EB=B0=8F=20props=20=ED=83=80=EC=9E=85=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/components/Map/hooks/useMarker.ts | 2 +- src/pages/Home/components/Map/hooks/useNaverMap.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Home/components/Map/hooks/useMarker.ts b/src/pages/Home/components/Map/hooks/useMarker.ts index 0a94bccc..86413bdb 100644 --- a/src/pages/Home/components/Map/hooks/useMarker.ts +++ b/src/pages/Home/components/Map/hooks/useMarker.ts @@ -8,7 +8,7 @@ import { useSelected } from 'store/placeId'; interface MarkerProps { map: naver.maps.Map | null; - filterShops: FilterShopsListResponse | undefined; + filterShops: FilterShopsListResponse | null; } function useMarker({ map, filterShops }: MarkerProps) { diff --git a/src/pages/Home/components/Map/hooks/useNaverMap.ts b/src/pages/Home/components/Map/hooks/useNaverMap.ts index 4636d6a1..c6d546bb 100644 --- a/src/pages/Home/components/Map/hooks/useNaverMap.ts +++ b/src/pages/Home/components/Map/hooks/useNaverMap.ts @@ -10,7 +10,7 @@ function useNaverMap(latitude: number | undefined, longitude: number | undefined const newMaps = new naver.maps.Map('map', { center: new naver.maps.LatLng(latitude, longitude), zoomControl: false, - zoom: 15, + zoom: 17, scaleControl: false, mapDataControl: false, }); From b54be1edbc0ebf9a8ec687ec3b1d3b93c554c1fc Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Sun, 4 Feb 2024 18:11:21 +0900 Subject: [PATCH 09/19] =?UTF-8?q?fix:=20useFilterShops=20=ED=9B=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/shop/entity.ts | 1 - .../common/SideNavigation/index.tsx | 35 +++++++----- .../Home/components/Map/hooks/useCluster.ts | 2 +- src/pages/Home/components/Map/index.tsx | 17 +++--- src/utils/hooks/useFilterShops.ts | 53 ++++++++++++------- 5 files changed, 67 insertions(+), 41 deletions(-) diff --git a/src/api/shop/entity.ts b/src/api/shop/entity.ts index aeef2946..23bd2217 100644 --- a/src/api/shop/entity.ts +++ b/src/api/shop/entity.ts @@ -2,7 +2,6 @@ export interface FilterShopsParams { options_friend: 0 | 1; options_nearby: 0 | 1; options_scrap: 0 | 1; - location?: Coords; } interface FilterShopsResponse extends Omit { diff --git a/src/components/common/SideNavigation/index.tsx b/src/components/common/SideNavigation/index.tsx index 347d2630..793130c8 100644 --- a/src/components/common/SideNavigation/index.tsx +++ b/src/components/common/SideNavigation/index.tsx @@ -26,19 +26,24 @@ export default function SideNavigation(): JSX.Element { const location = useLocation(); const navigate = useNavigate(); const [visible, , , toggle, setVisible] = useBooleanState(false); + const { filterFriendState, setFilterFriend } = useFilterFriend(); const { filterScrapState, setFilterScrap } = useFilterScrap(); const { filterNearbyState, setFilterNearby } = useFilterNearby(); const { setSelected } = useSelected(); - const { isLoading, data: filterShops } = useFilterShops({ - options_friend: filterFriendState ? 1 : 0, - options_scrap: filterScrapState ? 1 : 0, - options_nearby: filterNearbyState ? 1 : 0, - }); + const { isPending, filterShops, filterButtons } = useFilterShops(); + + useEffect(() => { + filterButtons({ + options_nearby: filterNearbyState ? 1 : 0, + options_friend: filterFriendState ? 1 : 0, + options_scrap: filterScrapState ? 1 : 0, + }); + }, [filterNearbyState, filterFriendState, filterScrapState, filterButtons]); const renderingPin = () => { - if (isLoading) { + if (isPending) { return (
    @@ -198,9 +203,11 @@ export default function SideNavigation(): JSX.Element { type="button" className={cn({ [styles['side-pannel__search-button']]: true, - [styles['side-pannel__search-button--clicked']]: filterNearbyState === true, + [styles['side-pannel__search-button--clicked']]: filterNearbyState, })} - onClick={() => { setFilterNearby(!filterNearbyState); setSelected(null); }} + onClick={() => { + setFilterNearby(!filterNearbyState); setSelected(null); + }} > 가까운 음식점 @@ -209,9 +216,11 @@ export default function SideNavigation(): JSX.Element { type="button" className={cn({ [styles['side-pannel__search-button']]: true, - [styles['side-pannel__search-button--clicked']]: filterScrapState === true, + [styles['side-pannel__search-button--clicked']]: filterScrapState, })} - onClick={() => { setFilterScrap(!filterScrapState); setSelected(null); }} + onClick={() => { + setFilterScrap(!filterScrapState); setSelected(null); + }} > 북마크 음식점 @@ -220,9 +229,11 @@ export default function SideNavigation(): JSX.Element { type="button" className={cn({ [styles['side-pannel__search-button']]: true, - [styles['side-pannel__search-button--clicked']]: filterFriendState === true, + [styles['side-pannel__search-button--clicked']]: filterFriendState, })} - onClick={() => { setFilterFriend(!filterFriendState); setSelected(null); }} + onClick={() => { + setFilterFriend(!filterFriendState); setSelected(null); + }} > 친구 음식점 diff --git a/src/pages/Home/components/Map/hooks/useCluster.ts b/src/pages/Home/components/Map/hooks/useCluster.ts index 9a4667e7..667b4a35 100644 --- a/src/pages/Home/components/Map/hooks/useCluster.ts +++ b/src/pages/Home/components/Map/hooks/useCluster.ts @@ -21,7 +21,7 @@ function useCluster({ markerArray, map } : ClusterProps) { const markerList = markerArray.map((_marker) => _marker); const cluster = new MarkerClustering({ minClusterSize: 2, - maxZoom: 14, + maxZoom: 21, map, markers: markerList.filter((marker) => marker), disableClickZoom: false, diff --git a/src/pages/Home/components/Map/index.tsx b/src/pages/Home/components/Map/index.tsx index a3238e76..42f03819 100644 --- a/src/pages/Home/components/Map/index.tsx +++ b/src/pages/Home/components/Map/index.tsx @@ -21,17 +21,18 @@ export default function Map({ className }: { className?: string }): JSX.Element const { filterFriendState } = useFilterFriend(); const { filterScrapState } = useFilterScrap(); const { filterNearbyState } = useFilterNearby(); - const { data: filterShops, refetch } = useFilterShops({ - options_friend: filterFriendState ? 1 : 0, - options_scrap: filterScrapState ? 1 : 0, - options_nearby: filterNearbyState ? 1 : 0, - }); - const { markerArray } = useMarker({ map, filterShops }); + const { filterShops, filterButtons } = useFilterShops(); useEffect(() => { - refetch(); - }, [filterFriendState, filterScrapState, filterNearbyState, refetch]); + filterButtons({ + options_nearby: filterNearbyState ? 1 : 0, + options_friend: filterFriendState ? 1 : 0, + options_scrap: filterScrapState ? 1 : 0, + }); + }, [filterNearbyState, filterFriendState, filterScrapState, filterButtons]); + + const { markerArray } = useMarker({ map, filterShops }); const { cluster } = useCluster({ markerArray, map }); diff --git a/src/utils/hooks/useFilterShops.ts b/src/utils/hooks/useFilterShops.ts index 9d664c9f..7e6e75fb 100644 --- a/src/utils/hooks/useFilterShops.ts +++ b/src/utils/hooks/useFilterShops.ts @@ -1,38 +1,53 @@ -import { useQuery } from '@tanstack/react-query'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import axios from 'axios'; import { getFilterShops } from 'api/shop'; -import { FilterShopsParams } from 'api/shop/entity'; +import { FilterShopsListResponse, FilterShopsParams } from 'api/shop/entity'; import { useAuth } from 'store/auth'; +import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter'; import useGeolocation from 'utils/hooks/useGeolocation'; +import makeToast from 'utils/ts/makeToast'; const OPTIONS = { maximumAge: 1000 }; -const useFilterShops = ({ - options_friend, options_nearby, options_scrap, -}: FilterShopsParams) => { +const useFilterShops = () => { const { location } = useGeolocation(OPTIONS); + const navigate = useNavigate(); + const queryClient = useQueryClient(); + const { setFilterFriend } = useFilterFriend(); + const { setFilterScrap } = useFilterScrap(); + const { setFilterNearby } = useFilterNearby(); + const [filterShops, setfilterShops] = useState(null); const auth = useAuth(); - const enabled = !!(location) && !!auth; - - const params: FilterShopsParams = { - options_friend, options_nearby, options_scrap, - }; const { - isLoading, isError, data, refetch, - } = useQuery({ - queryKey: ['filterShops', params, location?.lat, location?.lng], - queryFn: () => getFilterShops(params, { + isPending, isError, mutate: filterButtons, + } = useMutation({ + mutationFn: (param: FilterShopsParams) => getFilterShops(param, { lat: location?.lat, lng: location?.lng, }), - enabled, + onSuccess: (res) => { + if (auth) { + queryClient.invalidateQueries({ queryKey: ['filterShops'] }); + setfilterShops(res.data); + } + }, + onError: (error) => { + if (axios.isAxiosError(error) && error.response?.status === 401) { + makeToast('error', '로그인 후 이용해 보세요'); + navigate('/login'); + setFilterFriend(true); + setFilterScrap(true); + setFilterNearby(true); + } + }, }); - const isFetching = isLoading || !(location); - const filterShops = data?.data; - return { - isLoading, isFetching, isError, data: filterShops, refetch, + isPending, isError, filterShops, filterButtons, }; }; From 50c88f86f2feb932d15cf1a83058c522cca4234e Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Mon, 5 Feb 2024 13:20:24 +0900 Subject: [PATCH 10/19] =?UTF-8?q?fix:=20placeId=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EC=82=AC=EC=9D=B4=EB=93=9C=20?= =?UTF-8?q?=EB=84=A4=EB=B9=84=20=EB=84=88=EB=B9=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ImageCarousel/ImageCarousel.module.scss | 18 +++++------ .../common/SideNavigation/Pin/Pin.module.scss | 11 +++++-- .../common/SideNavigation/Pin/index.tsx | 12 ++++---- .../SideNavigation/SideNavigation.module.scss | 30 ++++++++++--------- .../common/SideNavigation/index.tsx | 12 ++++---- src/store/placeId.ts | 2 +- 6 files changed, 46 insertions(+), 39 deletions(-) diff --git a/src/components/ImageCarousel/ImageCarousel.module.scss b/src/components/ImageCarousel/ImageCarousel.module.scss index a09720ba..5f452f37 100644 --- a/src/components/ImageCarousel/ImageCarousel.module.scss +++ b/src/components/ImageCarousel/ImageCarousel.module.scss @@ -81,7 +81,7 @@ button { .pin { &__container { - width: 550px; + width: 480px; position: relative; margin-top: 15px; @@ -96,8 +96,8 @@ button { flex-direction: column; align-items: center; justify-content: center; - width: 550px; - height: 350px; + width: 480px; + height: 310px; background-color: #eeeeee; gap: 10px; font-size: 11px; @@ -123,8 +123,8 @@ button { img { object-fit: contain; - width: 550px; - height: 350px; + width: 480px; + height: 310px; @include media.media-breakpoint-down(mobile) { width: 573px; @@ -142,8 +142,8 @@ button { position: absolute; background: #000; opacity: 0.7; - width: 50px; - height: 350px; + width: 30px; + height: 310px; svg { width: 80%; @@ -158,8 +158,8 @@ button { position: absolute; background: #000; opacity: 0.7; - width: 50px; - height: 350px; + width: 30px; + height: 310px; svg { width: 80%; diff --git a/src/components/common/SideNavigation/Pin/Pin.module.scss b/src/components/common/SideNavigation/Pin/Pin.module.scss index fa78323e..62843dd2 100644 --- a/src/components/common/SideNavigation/Pin/Pin.module.scss +++ b/src/components/common/SideNavigation/Pin/Pin.module.scss @@ -65,8 +65,8 @@ .photos { display: grid; - width: 530px; - grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + width: 100%; + grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 5px; list-style: none; } @@ -86,7 +86,12 @@ &__name { font-weight: 700; - font-size: 28px; + font-size: 24px; + max-width: 70%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + word-break: break-all; } &__category { diff --git a/src/components/common/SideNavigation/Pin/index.tsx b/src/components/common/SideNavigation/Pin/index.tsx index d0c19b91..f7e290ff 100644 --- a/src/components/common/SideNavigation/Pin/index.tsx +++ b/src/components/common/SideNavigation/Pin/index.tsx @@ -28,15 +28,15 @@ const newAddress = (address:string) => { export default function Pin({ filterShops }:PinProps): JSX.Element { const navigate = useNavigate(); const { selected, setSelected } = useSelected(); - const { data } = usePin(selected as string); - const { scrapId } = useScrapId(selected as string); - const { rate } = useRate(selected as string); - const { latestDate } = useLatestDate(selected as string); - const { toggleScrap, isPending } = useScrap(selected as string, scrapId?.scrapId as number); + const { data } = usePin(selected); + const { scrapId } = useScrapId(selected); + const { rate } = useRate(selected); + const { latestDate } = useLatestDate(selected); + const { toggleScrap, isPending } = useScrap(selected, scrapId?.scrapId as number); return (
    - {selected === null ? ( + {selected === '' ? (
    {filterShops.map((shop) => (
    Date: Mon, 5 Feb 2024 20:16:16 +0900 Subject: [PATCH 13/19] =?UTF-8?q?fix:=20=EB=A6=AC=EB=B7=B0=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=ED=95=98=EA=B8=B0=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ImageCarousel/ImageCarousel.module.scss | 9 ++++----- .../common/SideNavigation/Pin/Pin.module.scss | 15 +++++++++++---- .../Pin/components/ReviewList.module.scss | 6 +++--- .../common/SideNavigation/Pin/index.tsx | 4 ++-- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/src/components/ImageCarousel/ImageCarousel.module.scss b/src/components/ImageCarousel/ImageCarousel.module.scss index 5f452f37..af799730 100644 --- a/src/components/ImageCarousel/ImageCarousel.module.scss +++ b/src/components/ImageCarousel/ImageCarousel.module.scss @@ -83,7 +83,6 @@ button { &__container { width: 480px; position: relative; - margin-top: 15px; @include media.media-breakpoint-down(mobile) { width: 100%; @@ -97,7 +96,7 @@ button { align-items: center; justify-content: center; width: 480px; - height: 310px; + height: 300px; background-color: #eeeeee; gap: 10px; font-size: 11px; @@ -124,7 +123,7 @@ button { img { object-fit: contain; width: 480px; - height: 310px; + height: 300px; @include media.media-breakpoint-down(mobile) { width: 573px; @@ -143,7 +142,7 @@ button { background: #000; opacity: 0.7; width: 30px; - height: 310px; + height: 300px; svg { width: 80%; @@ -159,7 +158,7 @@ button { background: #000; opacity: 0.7; width: 30px; - height: 310px; + height: 300px; svg { width: 80%; diff --git a/src/components/common/SideNavigation/Pin/Pin.module.scss b/src/components/common/SideNavigation/Pin/Pin.module.scss index 62843dd2..545f59c1 100644 --- a/src/components/common/SideNavigation/Pin/Pin.module.scss +++ b/src/components/common/SideNavigation/Pin/Pin.module.scss @@ -125,15 +125,22 @@ border: 1px solid #c4c4c4; font-size: 14px; font-weight: 500; + color: #666666; box-shadow: 2px 3px 12px 1px rgb(0 0 0 / 10%); background-color: #ffffff; - width: 150px; - height: 40px; + width: 120px; + height: 30px; border-radius: 20px; align-items: center; justify-content: center; position: absolute; - margin: 0 auto; - left: calc((100% - 150px) / 2); bottom: 40px; + right: 50%; + transform: translateX(50%); + gap: 2px; + opacity: 0.7; + + &:hover { + opacity: 1; + } } diff --git a/src/components/common/SideNavigation/Pin/components/ReviewList.module.scss b/src/components/common/SideNavigation/Pin/components/ReviewList.module.scss index c4113023..c49416c8 100644 --- a/src/components/common/SideNavigation/Pin/components/ReviewList.module.scss +++ b/src/components/common/SideNavigation/Pin/components/ReviewList.module.scss @@ -27,9 +27,9 @@ .review-data { display: flex; flex-direction: column; - margin: 12px 16px; + padding: 12px 16px; list-style: none; - max-height: 200px; + max-height: 415px; overflow-y: auto; &__button { @@ -60,7 +60,7 @@ &__empty { display: flex; gap: 3px; - margin-top: 30px; + margin: 30px 0 65px; flex-direction: column; align-items: center; font-size: 14px; diff --git a/src/components/common/SideNavigation/Pin/index.tsx b/src/components/common/SideNavigation/Pin/index.tsx index f7e290ff..0556610b 100644 --- a/src/components/common/SideNavigation/Pin/index.tsx +++ b/src/components/common/SideNavigation/Pin/index.tsx @@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom'; import { FilterShopsListResponse } from 'api/shop/entity'; import defaultImage from 'assets/svg/common/favicon.svg'; -import { ReactComponent as PencilkIcon } from 'assets/svg/home/pencil.svg'; +import { ReactComponent as PencilIcon } from 'assets/svg/home/pencil.svg'; import { ReactComponent as StarIcon } from 'assets/svg/post/star.svg'; import { ReactComponent as BookMarkIcon } from 'assets/svg/shop/book-mark.svg'; import { ReactComponent as NotFoundImageIcon } from 'assets/svg/shop/not-found.svg'; @@ -116,7 +116,7 @@ export default function Pin({ filterShops }:PinProps): JSX.Element { onClick={() => navigate(`/post/${selected}`)} type="button" className={styles.post} - >리뷰 작성하기 + >리뷰 작성하기 )} From 17bce141b0db16df10cdae350534a37bf631e6cf Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Mon, 5 Feb 2024 21:29:42 +0900 Subject: [PATCH 14/19] =?UTF-8?q?refactor:=20Home=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Home.module.scss | 9 ----- .../Home/{components => }/Map/Map.module.scss | 3 -- .../LocationSelectButton.module.scss | 0 .../components/LocationSelectButton/index.tsx | 0 .../LocationSelectModal.module.scss | 0 .../components/LocationSelectModal/index.tsx | 4 +- .../MarkerHtml/MarkerHtml.module.scss | 0 .../Map/components/MarkerHtml/index.tsx | 0 .../MobileOptions/MobileOptions.module.scss | 0 .../Map/components/MobileOptions/index.tsx | 0 .../{components => }/Map/hooks/useCluster.ts | 2 +- .../{components => }/Map/hooks/useHome.ts | 0 .../{components => }/Map/hooks/useMarker.ts | 5 ++- .../{components => }/Map/hooks/useNaverMap.ts | 0 src/pages/Home/{components => }/Map/index.tsx | 27 +++++--------- src/pages/Home/index.tsx | 6 +-- src/pages/Home/static/marker.ts | 37 ------------------- src/pages/ShopDetail/components/Map/index.tsx | 2 +- 18 files changed, 19 insertions(+), 76 deletions(-) rename src/pages/Home/{components => }/Map/Map.module.scss (94%) rename src/pages/Home/{components => }/Map/components/LocationSelectButton/LocationSelectButton.module.scss (100%) rename src/pages/Home/{components => }/Map/components/LocationSelectButton/index.tsx (100%) rename src/pages/Home/{components => }/Map/components/LocationSelectModal/LocationSelectModal.module.scss (100%) rename src/pages/Home/{components => }/Map/components/LocationSelectModal/index.tsx (94%) rename src/pages/Home/{components => }/Map/components/MarkerHtml/MarkerHtml.module.scss (100%) rename src/pages/Home/{components => }/Map/components/MarkerHtml/index.tsx (100%) rename src/pages/Home/{components => }/Map/components/MobileOptions/MobileOptions.module.scss (100%) rename src/pages/Home/{components => }/Map/components/MobileOptions/index.tsx (100%) rename src/pages/Home/{components => }/Map/hooks/useCluster.ts (93%) rename src/pages/Home/{components => }/Map/hooks/useHome.ts (100%) rename src/pages/Home/{components => }/Map/hooks/useMarker.ts (93%) rename src/pages/Home/{components => }/Map/hooks/useNaverMap.ts (100%) rename src/pages/Home/{components => }/Map/index.tsx (64%) delete mode 100644 src/pages/Home/static/marker.ts diff --git a/src/pages/Home/Home.module.scss b/src/pages/Home/Home.module.scss index 0dac03b2..a9d3945b 100644 --- a/src/pages/Home/Home.module.scss +++ b/src/pages/Home/Home.module.scss @@ -9,12 +9,3 @@ margin: 0; } } - -.map-component { - position: absolute; - margin: 0 auto; -} - -.modal-component { - position: absolute; -} diff --git a/src/pages/Home/components/Map/Map.module.scss b/src/pages/Home/Map/Map.module.scss similarity index 94% rename from src/pages/Home/components/Map/Map.module.scss rename to src/pages/Home/Map/Map.module.scss index c344a118..5e0e858a 100644 --- a/src/pages/Home/components/Map/Map.module.scss +++ b/src/pages/Home/Map/Map.module.scss @@ -45,9 +45,6 @@ .loading { background-color: transparent; - width: 100vw; - height: 100vh; - display: flex; position: absolute; top: 50%; left: 50%; diff --git a/src/pages/Home/components/Map/components/LocationSelectButton/LocationSelectButton.module.scss b/src/pages/Home/Map/components/LocationSelectButton/LocationSelectButton.module.scss similarity index 100% rename from src/pages/Home/components/Map/components/LocationSelectButton/LocationSelectButton.module.scss rename to src/pages/Home/Map/components/LocationSelectButton/LocationSelectButton.module.scss diff --git a/src/pages/Home/components/Map/components/LocationSelectButton/index.tsx b/src/pages/Home/Map/components/LocationSelectButton/index.tsx similarity index 100% rename from src/pages/Home/components/Map/components/LocationSelectButton/index.tsx rename to src/pages/Home/Map/components/LocationSelectButton/index.tsx diff --git a/src/pages/Home/components/Map/components/LocationSelectModal/LocationSelectModal.module.scss b/src/pages/Home/Map/components/LocationSelectModal/LocationSelectModal.module.scss similarity index 100% rename from src/pages/Home/components/Map/components/LocationSelectModal/LocationSelectModal.module.scss rename to src/pages/Home/Map/components/LocationSelectModal/LocationSelectModal.module.scss diff --git a/src/pages/Home/components/Map/components/LocationSelectModal/index.tsx b/src/pages/Home/Map/components/LocationSelectModal/index.tsx similarity index 94% rename from src/pages/Home/components/Map/components/LocationSelectModal/index.tsx rename to src/pages/Home/Map/components/LocationSelectModal/index.tsx index 2b57fa99..90907f0d 100644 --- a/src/pages/Home/components/Map/components/LocationSelectModal/index.tsx +++ b/src/pages/Home/Map/components/LocationSelectModal/index.tsx @@ -2,8 +2,8 @@ import { useEffect, useRef } from 'react'; // import { ReactComponent as TargetIcon } from 'assets/svg/home/point.svg'; // import { ReactComponent as LensIcon } from 'assets/svg/home/search.svg'; -import LocationSelectButton from 'pages/Home/components/Map/components/LocationSelectButton'; -import useHome from 'pages/Home/components/Map/hooks/useHome'; +import LocationSelectButton from 'pages/Home/Map/components/LocationSelectButton'; +import useHome from 'pages/Home/Map/hooks/useHome'; import styles from './LocationSelectModal.module.scss'; diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/Map/components/MarkerHtml/MarkerHtml.module.scss similarity index 100% rename from src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss rename to src/pages/Home/Map/components/MarkerHtml/MarkerHtml.module.scss diff --git a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx b/src/pages/Home/Map/components/MarkerHtml/index.tsx similarity index 100% rename from src/pages/Home/components/Map/components/MarkerHtml/index.tsx rename to src/pages/Home/Map/components/MarkerHtml/index.tsx diff --git a/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss b/src/pages/Home/Map/components/MobileOptions/MobileOptions.module.scss similarity index 100% rename from src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss rename to src/pages/Home/Map/components/MobileOptions/MobileOptions.module.scss diff --git a/src/pages/Home/components/Map/components/MobileOptions/index.tsx b/src/pages/Home/Map/components/MobileOptions/index.tsx similarity index 100% rename from src/pages/Home/components/Map/components/MobileOptions/index.tsx rename to src/pages/Home/Map/components/MobileOptions/index.tsx diff --git a/src/pages/Home/components/Map/hooks/useCluster.ts b/src/pages/Home/Map/hooks/useCluster.ts similarity index 93% rename from src/pages/Home/components/Map/hooks/useCluster.ts rename to src/pages/Home/Map/hooks/useCluster.ts index 667b4a35..11995d15 100644 --- a/src/pages/Home/components/Map/hooks/useCluster.ts +++ b/src/pages/Home/Map/hooks/useCluster.ts @@ -2,7 +2,7 @@ /* eslint-disable react-hooks/exhaustive-deps */ import { useEffect, useState } from 'react'; -import { ClusterHtml } from 'pages/Home/components/Map/components/MarkerHtml/index'; +import { ClusterHtml } from 'pages/Home/Map/components/MarkerHtml/index'; import MarkerClustering from 'utils/js/MarkerClustering'; interface ClusterProps { diff --git a/src/pages/Home/components/Map/hooks/useHome.ts b/src/pages/Home/Map/hooks/useHome.ts similarity index 100% rename from src/pages/Home/components/Map/hooks/useHome.ts rename to src/pages/Home/Map/hooks/useHome.ts diff --git a/src/pages/Home/components/Map/hooks/useMarker.ts b/src/pages/Home/Map/hooks/useMarker.ts similarity index 93% rename from src/pages/Home/components/Map/hooks/useMarker.ts rename to src/pages/Home/Map/hooks/useMarker.ts index 86413bdb..a4991d6d 100644 --- a/src/pages/Home/components/Map/hooks/useMarker.ts +++ b/src/pages/Home/Map/hooks/useMarker.ts @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'; import { FilterShopsListResponse } from 'api/shop/entity'; -import { ClickedMarkerHtml, MarkerHtml } from 'pages/Home/components/Map/components/MarkerHtml/index'; +import { ClickedMarkerHtml, MarkerHtml } from 'pages/Home/Map/components/MarkerHtml/index'; import { useSelected } from 'store/placeId'; interface MarkerProps { @@ -16,6 +16,7 @@ function useMarker({ map, filterShops }: MarkerProps) { const { setSelected } = useSelected(); useEffect(() => { if (!map || !filterShops) return; + const newMarkers = filterShops.map((shop, index) => { const lat = shop?.coordinate?.lat; const lng = shop?.coordinate?.lng; @@ -33,7 +34,7 @@ function useMarker({ map, filterShops }: MarkerProps) { }); naver.maps.Event.addListener(marker, 'click', () => { const clickedPlaceId = shop.placeId; - newMarkers.forEach((m, idx) => { + newMarkers?.forEach((m, idx) => { m?.setIcon({ content: MarkerHtml(m.getTitle(), m.getTitle()), anchor: new naver.maps.Point(30, 62), diff --git a/src/pages/Home/components/Map/hooks/useNaverMap.ts b/src/pages/Home/Map/hooks/useNaverMap.ts similarity index 100% rename from src/pages/Home/components/Map/hooks/useNaverMap.ts rename to src/pages/Home/Map/hooks/useNaverMap.ts diff --git a/src/pages/Home/components/Map/index.tsx b/src/pages/Home/Map/index.tsx similarity index 64% rename from src/pages/Home/components/Map/index.tsx rename to src/pages/Home/Map/index.tsx index 42f03819..ddcce628 100644 --- a/src/pages/Home/components/Map/index.tsx +++ b/src/pages/Home/Map/index.tsx @@ -1,11 +1,11 @@ -import { useEffect, useState } from 'react'; +import { useEffect } from 'react'; import { Overlay } from 'react-naver-maps'; import { ReactComponent as LoadingIcon } from 'assets/svg/home/map-loading.svg'; -import MobileOptions from 'pages/Home/components/Map/components/MobileOptions'; -import useCluster from 'pages/Home/components/Map/hooks/useCluster'; -import useMarker from 'pages/Home/components/Map/hooks/useMarker'; -import useNaverMap from 'pages/Home/components/Map/hooks/useNaverMap'; +import MobileOptions from 'pages/Home/Map/components/MobileOptions'; +import useCluster from 'pages/Home/Map/hooks/useCluster'; +import useMarker from 'pages/Home/Map/hooks/useMarker'; +import useNaverMap from 'pages/Home/Map/hooks/useNaverMap'; import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter'; import { useLocation } from 'store/location'; import useFilterShops from 'utils/hooks/useFilterShops'; @@ -13,10 +13,9 @@ import useMediaQuery from 'utils/hooks/useMediaQuery'; import styles from './Map.module.scss'; -export default function Map({ className }: { className?: string }): JSX.Element { +export default function Map(): JSX.Element { const { isMobile } = useMediaQuery(); const { location } = useLocation(); - const [loading, setLoading] = useState(true); const map = useNaverMap(location?.lat, location?.lng); const { filterFriendState } = useFilterFriend(); const { filterScrapState } = useFilterScrap(); @@ -33,21 +32,13 @@ export default function Map({ className }: { className?: string }): JSX.Element }, [filterNearbyState, filterFriendState, filterScrapState, filterButtons]); const { markerArray } = useMarker({ map, filterShops }); - const { cluster } = useCluster({ markerArray, map }); - useEffect(() => { - if (location) { - setLoading(false); - } - }, [location]); - return ( -
    -
    - {loading ?
    : null } + <> + {location === undefined ?
    :
    } {cluster && null, getMap: () => null }} />} {isMobile && } -
    + ); } diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index f9962057..54cd739e 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,5 +1,5 @@ -import LocationSelectModal from 'pages/Home/components/Map/components/LocationSelectModal/index'; -import Map from 'pages/Home/components/Map/index'; +import LocationSelectModal from 'pages/Home/Map/components/LocationSelectModal/index'; +import Map from 'pages/Home/Map/index'; import useMediaQuery from 'utils/hooks/useMediaQuery'; import styles from './Home.module.scss'; @@ -9,7 +9,7 @@ export default function Home(): JSX.Element { return (
    - + {!isMobile && }
    ); diff --git a/src/pages/Home/static/marker.ts b/src/pages/Home/static/marker.ts deleted file mode 100644 index facc396d..00000000 --- a/src/pages/Home/static/marker.ts +++ /dev/null @@ -1,37 +0,0 @@ -const MARKER = [ - { - geometry: { - location: { - lat: 37.5085007, - lng: 127.0243059, - }, - }, - name: '삼촌네고깃집2', - photo: 'null', - placeId: 'nmap-119FC9E2-1E6F-4920-8734-0D82644CFFBF', - }, - { - geometry: { - location: { - lat: 37.5018927, - lng: 127.0360738, - }, - }, - name: '멕시카나 치킨2', - photo: 'null', - placeId: 'nmarker-3DC43A25-00E4-485E-B823-C87666B8B4A0', - }, - { - geometry: { - location: { - lat: 37.5030426, - lng: 127.041588, - }, - }, - name: '아라미즈2', - photo: 'null', - placeId: 'nmarker-B8FB8547-EFB9-416B-BA20-02749D239706', - }, -]; - -export default MARKER; diff --git a/src/pages/ShopDetail/components/Map/index.tsx b/src/pages/ShopDetail/components/Map/index.tsx index 43342269..58a585e5 100644 --- a/src/pages/ShopDetail/components/Map/index.tsx +++ b/src/pages/ShopDetail/components/Map/index.tsx @@ -1,4 +1,4 @@ -import useNaverMap from 'pages/Home/components/Map/hooks/useNaverMap'; +import useNaverMap from 'pages/Home/Map/hooks/useNaverMap'; import SectionHeader from 'pages/ShopDetail/components/SectionHeader/index'; import styles from './Map.module.scss'; From 2846e8df9a2f7b1f42dd94eb7a2f3097e0401a2a Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Mon, 5 Feb 2024 22:10:29 +0900 Subject: [PATCH 15/19] =?UTF-8?q?fix:=20=ED=98=84=EC=9E=AC=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=ED=91=9C=EC=8B=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LocationSelectModal/LocationSelectModal.module.scss | 3 ++- src/pages/Home/Map/index.tsx | 3 ++- src/pages/Home/index.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/Home/Map/components/LocationSelectModal/LocationSelectModal.module.scss b/src/pages/Home/Map/components/LocationSelectModal/LocationSelectModal.module.scss index 7b288c01..85f453eb 100644 --- a/src/pages/Home/Map/components/LocationSelectModal/LocationSelectModal.module.scss +++ b/src/pages/Home/Map/components/LocationSelectModal/LocationSelectModal.module.scss @@ -1,8 +1,9 @@ .container { - position: relative; + position: absolute; width: 100%; height: 100vh; pointer-events: none; + z-index: 1; & > * { pointer-events: auto; diff --git a/src/pages/Home/Map/index.tsx b/src/pages/Home/Map/index.tsx index ddcce628..e1a32eed 100644 --- a/src/pages/Home/Map/index.tsx +++ b/src/pages/Home/Map/index.tsx @@ -36,7 +36,8 @@ export default function Map(): JSX.Element { return ( <> - {location === undefined ?
    :
    } + {location === undefined ?
    : null} +
    {cluster && null, getMap: () => null }} />} {isMobile && } diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 54cd739e..6be92165 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -9,8 +9,8 @@ export default function Home(): JSX.Element { return (
    - {!isMobile && } +
    ); } From a0597cadc83369173b937413367e99fe90bde73d Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Mon, 5 Feb 2024 23:24:28 +0900 Subject: [PATCH 16/19] =?UTF-8?q?refactor:=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EB=B0=8F=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/DefaultLayout/index.tsx | 3 --- .../LocationSelectModal/LocationSelectModal.module.scss | 0 .../LocationSelectButton/LocationSelectButton.module.scss | 0 .../components/LocationSelectButton/index.tsx | 0 .../Home/{Map/components => }/LocationSelectModal/index.tsx | 2 +- src/pages/Home/index.tsx | 2 +- 6 files changed, 2 insertions(+), 5 deletions(-) rename src/pages/Home/{Map/components => }/LocationSelectModal/LocationSelectModal.module.scss (100%) rename src/pages/Home/{Map => LocationSelectModal}/components/LocationSelectButton/LocationSelectButton.module.scss (100%) rename src/pages/Home/{Map => LocationSelectModal}/components/LocationSelectButton/index.tsx (100%) rename src/pages/Home/{Map/components => }/LocationSelectModal/index.tsx (96%) diff --git a/src/layout/DefaultLayout/index.tsx b/src/layout/DefaultLayout/index.tsx index e8328685..267669f5 100644 --- a/src/layout/DefaultLayout/index.tsx +++ b/src/layout/DefaultLayout/index.tsx @@ -4,13 +4,10 @@ import BottomNavigation from 'components/common/BottomNavigation'; import SideNavigation from 'components/common/SideNavigation'; import useMediaQuery from 'utils/hooks/useMediaQuery'; -import styles from './DefaultLayout.module.scss'; - export default function DefaultLayout(): JSX.Element { const { isMobile } = useMediaQuery(); return ( <> - {!isMobile && } {!isMobile && } {isMobile && } diff --git a/src/pages/Home/Map/components/LocationSelectModal/LocationSelectModal.module.scss b/src/pages/Home/LocationSelectModal/LocationSelectModal.module.scss similarity index 100% rename from src/pages/Home/Map/components/LocationSelectModal/LocationSelectModal.module.scss rename to src/pages/Home/LocationSelectModal/LocationSelectModal.module.scss diff --git a/src/pages/Home/Map/components/LocationSelectButton/LocationSelectButton.module.scss b/src/pages/Home/LocationSelectModal/components/LocationSelectButton/LocationSelectButton.module.scss similarity index 100% rename from src/pages/Home/Map/components/LocationSelectButton/LocationSelectButton.module.scss rename to src/pages/Home/LocationSelectModal/components/LocationSelectButton/LocationSelectButton.module.scss diff --git a/src/pages/Home/Map/components/LocationSelectButton/index.tsx b/src/pages/Home/LocationSelectModal/components/LocationSelectButton/index.tsx similarity index 100% rename from src/pages/Home/Map/components/LocationSelectButton/index.tsx rename to src/pages/Home/LocationSelectModal/components/LocationSelectButton/index.tsx diff --git a/src/pages/Home/Map/components/LocationSelectModal/index.tsx b/src/pages/Home/LocationSelectModal/index.tsx similarity index 96% rename from src/pages/Home/Map/components/LocationSelectModal/index.tsx rename to src/pages/Home/LocationSelectModal/index.tsx index 90907f0d..5fe29fb2 100644 --- a/src/pages/Home/Map/components/LocationSelectModal/index.tsx +++ b/src/pages/Home/LocationSelectModal/index.tsx @@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'; // import { ReactComponent as TargetIcon } from 'assets/svg/home/point.svg'; // import { ReactComponent as LensIcon } from 'assets/svg/home/search.svg'; -import LocationSelectButton from 'pages/Home/Map/components/LocationSelectButton'; +import LocationSelectButton from 'pages/Home/LocationSelectModal/components/LocationSelectButton'; import useHome from 'pages/Home/Map/hooks/useHome'; import styles from './LocationSelectModal.module.scss'; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 6be92165..eb4573a3 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,4 +1,4 @@ -import LocationSelectModal from 'pages/Home/Map/components/LocationSelectModal/index'; +import LocationSelectModal from 'pages/Home/LocationSelectModal/index'; import Map from 'pages/Home/Map/index'; import useMediaQuery from 'utils/hooks/useMediaQuery'; From 0eb878430dbdd0f42de7e1831584c31e3a9c4b1d Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Tue, 6 Feb 2024 12:04:20 +0900 Subject: [PATCH 17/19] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=8B=9C=20=EC=A0=84=EC=97=AD=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EA=B0=92=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SideNavigation/index.tsx | 10 +++++++++- src/pages/Setting/Mobile/MobileLogoutModal.tsx | 18 +++++++++++++++++- src/pages/Setting/PC/LogoutModal.tsx | 17 ++++++++++++++++- src/pages/Setting/PC/PasswordSuccessModal.tsx | 18 +++++++++++++++++- 4 files changed, 59 insertions(+), 4 deletions(-) diff --git a/src/components/common/SideNavigation/index.tsx b/src/components/common/SideNavigation/index.tsx index ddae3240..243bb110 100644 --- a/src/components/common/SideNavigation/index.tsx +++ b/src/components/common/SideNavigation/index.tsx @@ -161,7 +161,15 @@ export default function SideNavigation(): JSX.Element { alt="프로필 이미지" className={styles['bottom-navigation__profile-image']} /> - + { + clearAuth(); setSelected(''); + setFilterFriend(true); + setFilterNearby(true); + setFilterScrap(true); + }} + >
    로그아웃
    • diff --git a/src/pages/Setting/Mobile/MobileLogoutModal.tsx b/src/pages/Setting/Mobile/MobileLogoutModal.tsx index 97911f72..7770a2e6 100644 --- a/src/pages/Setting/Mobile/MobileLogoutModal.tsx +++ b/src/pages/Setting/Mobile/MobileLogoutModal.tsx @@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'; import { ReactComponent as Favicon } from 'assets/svg/common/favicon.svg'; import { useClearAuth } from 'store/auth'; +import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter'; +import { useSelected } from 'store/placeId'; import cn from 'utils/ts/classNames'; import styles from '../PC/PasswordSuccessModal.module.scss'; @@ -14,6 +16,11 @@ interface Props { export default function MobileLogoutModal({ children, setIsShowModal }: Props) { const root = document.body; const clearAuth = useClearAuth(); + + const { setFilterFriend } = useFilterFriend(); + const { setFilterScrap } = useFilterScrap(); + const { setFilterNearby } = useFilterNearby(); + const { setSelected } = useSelected(); return createPortal(
    @@ -33,7 +40,16 @@ export default function MobileLogoutModal({ children, setIsShowModal }: Props) { > 취소 - + { + clearAuth(); setSelected(''); + setFilterFriend(true); + setFilterNearby(true); + setFilterScrap(true); + }} + > +
    diff --git a/src/pages/Setting/PC/LogoutModal.tsx b/src/pages/Setting/PC/LogoutModal.tsx index 48dbbc14..b6170391 100644 --- a/src/pages/Setting/PC/LogoutModal.tsx +++ b/src/pages/Setting/PC/LogoutModal.tsx @@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'; import { ReactComponent as Favicon } from 'assets/svg/common/favicon.svg'; import { useClearAuth } from 'store/auth'; +import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter'; +import { useSelected } from 'store/placeId'; import styles from './PasswordSuccessModal.module.scss'; @@ -13,6 +15,10 @@ interface Props { export default function LogoutModal({ children, closeModal }: Props) { const root = document.body; const clearAuth = useClearAuth(); + const { setFilterFriend } = useFilterFriend(); + const { setFilterScrap } = useFilterScrap(); + const { setFilterNearby } = useFilterNearby(); + const { setSelected } = useSelected(); return createPortal(
    @@ -23,7 +29,16 @@ export default function LogoutModal({ children, closeModal }: Props) { 로그아웃을 진행하실건가요?
    {children}
    - + { + clearAuth(); setSelected(''); + setFilterFriend(true); + setFilterNearby(true); + setFilterScrap(true); + }} + > +
    , root, diff --git a/src/pages/Setting/PC/PasswordSuccessModal.tsx b/src/pages/Setting/PC/PasswordSuccessModal.tsx index a758b5c9..78183ba6 100644 --- a/src/pages/Setting/PC/PasswordSuccessModal.tsx +++ b/src/pages/Setting/PC/PasswordSuccessModal.tsx @@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'; import { ReactComponent as Favicon } from 'assets/svg/common/favicon.svg'; import { useClearAuth } from 'store/auth'; +import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter'; +import { useSelected } from 'store/placeId'; import styles from './PasswordSuccessModal.module.scss'; @@ -12,12 +14,26 @@ interface Props { export default function PasswordSuccessModal({ children }: Props) { const root = document.body; const clearAuth = useClearAuth(); + const { setFilterFriend } = useFilterFriend(); + const { setFilterScrap } = useFilterScrap(); + const { setFilterNearby } = useFilterNearby(); + const { setSelected } = useSelected(); return createPortal(
    - +
    비밀번호 변경을 완료했습니다.
    From a3baff86b821a17b06247ac4944cb43f4f921b95 Mon Sep 17 00:00:00 2001 From: Daeeui Kim Date: Tue, 6 Feb 2024 12:08:04 +0900 Subject: [PATCH 18/19] =?UTF-8?q?fix:=20=EC=9D=8C=EC=8B=9D=EC=A0=90=20?= =?UTF-8?q?=EC=82=AC=EC=A7=84=20=EC=A9=9D=EB=B0=95=20=EB=A1=9C=EA=B3=A0?= =?UTF-8?q?=EB=A1=9C=20=EB=8C=80=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Map/components/MarkerHtml/index.tsx | 14 ++++---------- src/pages/Home/Map/hooks/useMarker.ts | 6 +++--- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/src/pages/Home/Map/components/MarkerHtml/index.tsx b/src/pages/Home/Map/components/MarkerHtml/index.tsx index 2de7183e..387b18c2 100644 --- a/src/pages/Home/Map/components/MarkerHtml/index.tsx +++ b/src/pages/Home/Map/components/MarkerHtml/index.tsx @@ -2,28 +2,22 @@ import defaultImage from 'assets/svg/common/favicon.svg'; import styles from './MarkerHtml.module.scss'; -export function MarkerHtml(src:string[] | string | null, name:string) { +export function MarkerHtml(name:string) { return `
    - - - 음식점 사진 - + 음식점
    ${name}
    `; } -export function ClickedMarkerHtml(src: string[] | null, name: string, placeId: string) { +export function ClickedMarkerHtml(name: string, placeId: string) { return `
    - - - 음식점 사진 - + 음식점
    ${name}
     diff --git a/src/pages/Home/Map/hooks/useMarker.ts b/src/pages/Home/Map/hooks/useMarker.ts index a4991d6d..137bb779 100644 --- a/src/pages/Home/Map/hooks/useMarker.ts +++ b/src/pages/Home/Map/hooks/useMarker.ts @@ -28,7 +28,7 @@ function useMarker({ map, filterShops }: MarkerProps) { map, zIndex: filterShops.length - index, icon: { - content: MarkerHtml(shop.photos, shop.name), + content: MarkerHtml(shop.name), anchor: new naver.maps.Point(30, 62), }, }); @@ -36,14 +36,14 @@ function useMarker({ map, filterShops }: MarkerProps) { const clickedPlaceId = shop.placeId; newMarkers?.forEach((m, idx) => { m?.setIcon({ - content: MarkerHtml(m.getTitle(), m.getTitle()), + content: MarkerHtml(m.getTitle()), anchor: new naver.maps.Point(30, 62), }); m?.setZIndex(filterShops.length - idx); }); marker.setIcon({ - content: ClickedMarkerHtml(shop.photos, shop.name, shop.placeId), + content: ClickedMarkerHtml(shop.name, shop.placeId), anchor: new naver.maps.Point(30, 62), }); marker.setZIndex(10000); From 172f8f30839abb72df4c5c9454e026c035323b95 Mon Sep 17 00:00:00 2001 From: Kim Daeeui Date: Tue, 6 Feb 2024 23:57:59 +0900 Subject: [PATCH 19/19] Update LINT_CHECK.yml MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit node 버전 수정 --- .github/workflows/LINT_CHECK.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/LINT_CHECK.yml b/.github/workflows/LINT_CHECK.yml index d849fc46..862bf163 100644 --- a/.github/workflows/LINT_CHECK.yml +++ b/.github/workflows/LINT_CHECK.yml @@ -20,7 +20,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: - node-version: 18 + node-version: 21 registry-url: https://registry.npmjs.org/ - name: Install package run: yarn