From 7f1fa86436e00e301a3fa7415327af3c985fd874 Mon Sep 17 00:00:00 2001 From: Haneul-Kim <4188989@naver.com> Date: Mon, 18 Mar 2024 10:46:37 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20ChipButton?= =?UTF-8?q?s=20=EC=A4=91=EB=B3=B5=20=EC=82=AD=EC=A0=9C,=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EB=B3=80=EA=B2=BD(TimeFilter)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[artistId]/_components/ArtistMap.tsx | 81 ---------- app/(route)/artist/[artistId]/page.tsx | 10 +- .../tab/MyCalendarTab/ChipButtons.tsx | 37 ----- .../tab/MyCalendarTab/MyCalendar.tsx | 1 - .../_components/tab/MyCalendarTab/index.tsx | 13 +- .../tab/MyLocationTab/FilteringButton.tsx | 25 ---- .../tab/MyLocationTab/MapInfoBox.tsx | 47 ------ .../tab/MyLocationTab/MyKaKaoMap.tsx | 139 ------------------ .../_components/tab/MyLocationTab/index.tsx | 4 +- .../TimeFilter.tsx} | 4 +- 10 files changed, 17 insertions(+), 344 deletions(-) delete mode 100644 app/(route)/artist/[artistId]/_components/ArtistMap.tsx delete mode 100644 app/(route)/mypage/_components/tab/MyCalendarTab/ChipButtons.tsx delete mode 100644 app/(route)/mypage/_components/tab/MyLocationTab/FilteringButton.tsx delete mode 100644 app/(route)/mypage/_components/tab/MyLocationTab/MapInfoBox.tsx delete mode 100644 app/(route)/mypage/_components/tab/MyLocationTab/MyKaKaoMap.tsx rename app/{(route)/artist/[artistId]/_components/ChipButtons.tsx => _components/TimeFilter.tsx} (89%) diff --git a/app/(route)/artist/[artistId]/_components/ArtistMap.tsx b/app/(route)/artist/[artistId]/_components/ArtistMap.tsx deleted file mode 100644 index 357bbebf..00000000 --- a/app/(route)/artist/[artistId]/_components/ArtistMap.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { useEffect } from "react"; -import { EventCardType } from "@/types/index"; - -interface Props { - scheduleData: EventCardType[]; - setLocationInfo: (data: EventCardType) => void; - setSelectedCardId: (id: string | null) => void; -} - -const ArtistMap = ({ scheduleData, setLocationInfo, setSelectedCardId }: Props) => { - useEffect(() => { - if (window.kakao) { - window.kakao.maps.load(() => { - const mapContainer = document.getElementById("map"); - const mapOption = { - center: new window.kakao.maps.LatLng(37.566826, 126.9786567), - level: 9, - }; - const map = new window.kakao.maps.Map(mapContainer, mapOption); - const geocoder = new window.kakao.maps.services.Geocoder(); - - const myMarker = (data: EventCardType) => { - const { address, placeName } = data; - - geocoder.addressSearch(address, (result: any, status: any) => { - if (status === window.kakao.maps.services.Status.OK) { - const coords = new window.kakao.maps.LatLng(result[0].y, result[0].x); - - const imageSrc = "/icon/marker.svg"; - const imageSize = new window.kakao.maps.Size(20, 20); - const markerImage = new window.kakao.maps.MarkerImage(imageSrc, imageSize); - - const marker = new window.kakao.maps.Marker({ - map: map, - position: coords, - image: markerImage, - }); - marker.setMap(map); - - const content = - '
' + - placeName + - '
' + - '' + - "
" + - "
"; - - const customOverlay = new window.kakao.maps.CustomOverlay({ - position: coords, - content: content, - yAnchor: 1.9, - }); - - window.kakao.maps.event.addListener(marker, "mouseover", () => { - customOverlay.setMap(map); - }); - window.kakao.maps.event.addListener(marker, "mouseout", () => { - customOverlay.setMap(null); - }); - - window.kakao.maps.event.addListener(marker, "click", () => { - setLocationInfo(data); - setSelectedCardId(data.id); - }); - - map.setCenter(coords); - } - }); - }; - - for (let i = 0; i < scheduleData.length; i++) { - myMarker(scheduleData[i]); - } - }); - } - }, [scheduleData]); - - return
; -}; - -export default ArtistMap; diff --git a/app/(route)/artist/[artistId]/page.tsx b/app/(route)/artist/[artistId]/page.tsx index 365c4476..ae94e37b 100644 --- a/app/(route)/artist/[artistId]/page.tsx +++ b/app/(route)/artist/[artistId]/page.tsx @@ -6,6 +6,7 @@ import Image from "next/image"; import { useParams } from "next/navigation"; import { useEffect, useRef, useState } from "react"; import KakaoMap from "@/components/KakaoMap"; +import TimeFilter from "@/components/TimeFilter"; import DottedLayout from "@/components/layout/DottedLayout"; import { instance } from "@/api/api"; import useInfiniteScroll from "@/hooks/useInfiniteScroll"; @@ -15,7 +16,6 @@ import { Res_Get_Type } from "@/types/getResType"; import { EventCardType } from "@/types/index"; import { SORT, STATUS, SortItem } from "@/constants/eventStatus"; import SortIcon from "@/public/icon/sort.svg"; -import ChipButtons from "./_components/ChipButtons"; import EventCard from "./_components/EventCard"; const SIZE = 9999; @@ -71,6 +71,10 @@ const ArtistIdPage = () => { const handleButtonClick = () => { setToggleTab((prev) => !prev); + + if (toggleTab) { + setSelectedCard(null); + } }; const [selectedCard, setSelectedCard] = useState(null); @@ -82,7 +86,7 @@ const ArtistIdPage = () => { useEffect(() => { scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }); - }, [selectedCard?.id]); + }, [selectedCard?.id, toggleTab]); const handleCardClick = (select: EventCardType) => { setSelectedCard(select.id === selectedCard?.id ? null : select); @@ -118,7 +122,7 @@ const ArtistIdPage = () => { {name} 행사 보기

- +
setSort("최신순")} selected={sort === "최신순"}> diff --git a/app/(route)/mypage/_components/tab/MyCalendarTab/ChipButtons.tsx b/app/(route)/mypage/_components/tab/MyCalendarTab/ChipButtons.tsx deleted file mode 100644 index affb7946..00000000 --- a/app/(route)/mypage/_components/tab/MyCalendarTab/ChipButtons.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import ChipButton from "@/components/chip/ChipButton"; - -type StatusType = "" | "예정" | "종료" | "진행중" | "종료제외"; - -interface Props { - status: string; - setStatus: (status: StatusType) => void; -} - -const ChipButtons = ({ status, setStatus }: Props) => { - const handleChipClick = (label: StatusType) => { - switch (label) { - case status: - setStatus(""); - break; - case "예정": - setStatus(label); - break; - case "종료": - setStatus(label); - break; - case "진행중": - setStatus(label); - break; - } - }; - - return ( -
- handleChipClick("예정")} selected={status === "예정"} /> - handleChipClick("진행중")} selected={status === "진행중"} /> - handleChipClick("종료")} selected={status === "종료"} /> -
- ); -}; - -export default ChipButtons; diff --git a/app/(route)/mypage/_components/tab/MyCalendarTab/MyCalendar.tsx b/app/(route)/mypage/_components/tab/MyCalendarTab/MyCalendar.tsx index 31d44365..902c10f0 100644 --- a/app/(route)/mypage/_components/tab/MyCalendarTab/MyCalendar.tsx +++ b/app/(route)/mypage/_components/tab/MyCalendarTab/MyCalendar.tsx @@ -1,4 +1,3 @@ -import { useMemo } from "react"; import Calendar from "react-calendar"; import { getCalendarTime } from "@/utils/getCalendarTime"; import { sortEvents } from "@/utils/sortEventList"; diff --git a/app/(route)/mypage/_components/tab/MyCalendarTab/index.tsx b/app/(route)/mypage/_components/tab/MyCalendarTab/index.tsx index e50d8b1f..4a28a75c 100644 --- a/app/(route)/mypage/_components/tab/MyCalendarTab/index.tsx +++ b/app/(route)/mypage/_components/tab/MyCalendarTab/index.tsx @@ -4,13 +4,14 @@ import FadingDot from "@/(route)/signin/_components/FadingDot"; import { useQuery } from "@tanstack/react-query"; import { useEffect, useState } from "react"; import "react-calendar/dist/Calendar.css"; +import TimeFilter from "@/components/TimeFilter"; import HorizontalEventCard from "@/components/card/HorizontalEventCard"; import { instance } from "@/api/api"; import { getCalendarTime } from "@/utils/getCalendarTime"; import { EventCardType } from "@/types/index"; import { MYPAGE_CALENDAR_STYLE } from "@/constants/calendarStyle"; +import { STATUS } from "@/constants/eventStatus"; import NoContent from "../../NoContent"; -import ChipButtons from "./ChipButtons"; import FoldButton from "./FoldButton"; import MyCalendar from "./MyCalendar"; @@ -18,19 +19,17 @@ interface Props { userId: string; } -type StatusType = "" | "예정" | "종료" | "진행중" | "종료제외"; - const MyCalendarTab = ({ userId }: Props) => { const [data, setData] = useState([]); const [isFold, setIsFold] = useState(true); - const [status, setStatus] = useState(""); + const [status, setStatus] = useState(3); const [calendarStyle, setCalendarStyle] = useState(""); const [selectedDate, setSelectedDate] = useState(null); const { data: myEventsData, isSuccess } = useQuery({ - queryKey: ["events", status], + queryKey: ["events", STATUS[status]], queryFn: async () => { - return instance.get(`/event/${userId}/like`, { status }); + return instance.get(`/event/${userId}/like`, { status: STATUS[status] }); }, }); @@ -77,7 +76,7 @@ const MyCalendarTab = ({ userId }: Props) => { )}
- +
{data .filter( diff --git a/app/(route)/mypage/_components/tab/MyLocationTab/FilteringButton.tsx b/app/(route)/mypage/_components/tab/MyLocationTab/FilteringButton.tsx deleted file mode 100644 index 5b6737c3..00000000 --- a/app/(route)/mypage/_components/tab/MyLocationTab/FilteringButton.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import CheckIcon from "@/public/icon/check.svg"; - -const ButtonColor = { - checked: "bg-sub-pink text-white-white", - notChecked: "bg-white-white border border-gray-100 text-gray-900", -}; - -interface Props { - setIsChecked: (inChecked: boolean) => void; - isChecked: boolean; -} - -const FilteringButton = ({ setIsChecked, isChecked }: Props) => { - return ( - - ); -}; - -export default FilteringButton; diff --git a/app/(route)/mypage/_components/tab/MyLocationTab/MapInfoBox.tsx b/app/(route)/mypage/_components/tab/MyLocationTab/MapInfoBox.tsx deleted file mode 100644 index 6ea5c776..00000000 --- a/app/(route)/mypage/_components/tab/MyLocationTab/MapInfoBox.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { SyntheticEvent } from "react"; -import HorizontalEventCard from "@/components/card/HorizontalEventCard"; -import { openToast } from "@/utils/toast"; -import { EventCardType } from "@/types/index"; -import { TOAST_MESSAGE } from "@/constants/toast"; -import MapIcon from "@/public/icon/map.svg"; - -const getPlaceId = async (address: string, placeName: string) => { - const data = await fetch(`https://dapi.kakao.com/v2/local/search/keyword.json?query=${address}${placeName}`, { - headers: { Authorization: `KakaoAK ${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}` }, - }); - const ret = await data.json(); - if (!ret.documents?.[0]) return; - return ret.documents?.[0].id; -}; - -const MapInfoBox = ({ locationInfo, closeMapBox }: { locationInfo: EventCardType | undefined; closeMapBox: (close: false) => void }) => { - if (!locationInfo) { - return

위치 정보를 찾을 수 없습니다

; - } - - const handleRedirectToMap = async () => { - const placeId = await getPlaceId(locationInfo.address, locationInfo.placeName); - if (!placeId) { - openToast.error(TOAST_MESSAGE.kakaoMap); - return; - } - window.open(`https://map.kakao.com/link/map/${placeId}`); - }; - - return ( -
closeMapBox(false)} className="fixed bottom-0 left-0 z-popup flex h-full w-full flex-col items-end justify-end gap-4 pt-16 pc:absolute pc:px-[3.8rem]"> -
e.stopPropagation()} - className="flex max-h-[55.6rem] w-full transform animate-slideUp flex-col overflow-hidden border-t bg-white-black px-20 transition duration-150 ease-out pc:px-8" - > - - -
-
- ); -}; - -export default MapInfoBox; diff --git a/app/(route)/mypage/_components/tab/MyLocationTab/MyKaKaoMap.tsx b/app/(route)/mypage/_components/tab/MyLocationTab/MyKaKaoMap.tsx deleted file mode 100644 index ec1f4de3..00000000 --- a/app/(route)/mypage/_components/tab/MyLocationTab/MyKaKaoMap.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import { useState } from "react"; -import useKakaoMap from "@/hooks/useKakaoMap"; -import { EventCardType } from "@/types/index"; - -interface Props { - scheduleData: EventCardType[]; - setLocationInfo: (data: EventCardType) => void; - openMapBox: (open: true) => void; -} - -const MyKakaoMap = ({ scheduleData, setLocationInfo, openMapBox }: Props) => { - const [mapInstance, setMapInstance] = useState(null); - - const onLoadKakaoMap = () => { - const kakaoMap = window.kakao.maps; - kakaoMap.load(() => { - this; - const mapContainer = document.getElementById("map"); - const mapOption = { - center: new kakaoMap.LatLng(37.566826, 126.9786567), - level: 7, - }; - const map = new kakaoMap.Map(mapContainer, mapOption); - setMapInstance(map); - - const geocoder = new kakaoMap.services.Geocoder(); - - const myMarker = (data: EventCardType) => { - const { address, placeName, eventType } = data; - - geocoder.addressSearch(address, (result: any, status: any) => { - if (status === kakaoMap.services.Status.OK) { - const coords = new kakaoMap.LatLng(result[0].y, result[0].x); - - const imageSrc = IMAGE_EVENT[eventType]; - const imageSize = new kakaoMap.Size(48, 48); - const markerImage = new kakaoMap.MarkerImage(imageSrc, imageSize); - - const marker = new kakaoMap.Marker({ - map: map, - position: coords, - image: markerImage, - }); - marker.setMap(map); - - const content = - '
' + - placeName + - '
' + - '' + - "
" + - "
"; - - const customOverlay = new kakaoMap.CustomOverlay({ - position: coords, - content: content, - yAnchor: 2.5, - }); - - kakaoMap.event.addListener(marker, "mouseover", () => { - customOverlay.setMap(map); - }); - kakaoMap.event.addListener(marker, "mouseout", () => { - customOverlay.setMap(null); - }); - - kakaoMap.event.addListener(marker, "click", () => { - setLocationInfo(data); - openMapBox(true); - }); - - map.setCenter(coords); - - clusterer.addMarker(marker); - } - }); - }; - - const clusterer = new kakaoMap.MarkerClusterer({ - map: map, - gridSize: 60, - averageCenter: true, - minLevel: 3, - minClusterSize: 3, - styles: [ - { - width: "48px", - height: "48px", - display: "flex", - justifyContent: "center", - alignItems: "center", - background: "url(cluster.png) no-repeat", - color: "#fff", - fontSize: "24px", - backgroundColor: "#FF50AA", - border: "solid 4px #fff", - borderRadius: "9999px", - lineHeight: "48px", - filter: "drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25))", - }, - ], - }); - - for (let i = 0; i < scheduleData.length; i++) { - myMarker(scheduleData[i]); - } - }); - }; - - useKakaoMap({ callbackFn: onLoadKakaoMap, deps: [scheduleData] }); - - const zoom = (scale: number) => () => { - const level = mapInstance.getLevel(); - mapInstance.setLevel(level + scale); - }; - - return ( -
-
- - -
- ); -}; - -export default MyKakaoMap; - -const IMAGE_EVENT = { - 카페: "/image/marker-cafe.png", - 꽃집: "/image/marker-flower.png", - 팬광고: "/image/marker-ads.png", - 포토부스: "/image/marker-photo.png", - 상영회: "/image/marker-screen.png", - 기타: "/image/marker-etc.png", -}; diff --git a/app/(route)/mypage/_components/tab/MyLocationTab/index.tsx b/app/(route)/mypage/_components/tab/MyLocationTab/index.tsx index 4526696b..e0345608 100644 --- a/app/(route)/mypage/_components/tab/MyLocationTab/index.tsx +++ b/app/(route)/mypage/_components/tab/MyLocationTab/index.tsx @@ -1,11 +1,11 @@ "use client"; -import ChipButtons from "@/(route)/artist/[artistId]/_components/ChipButtons"; import EventCard from "@/(route)/artist/[artistId]/_components/EventCard"; import { useQuery } from "@tanstack/react-query"; import Image from "next/image"; import { useEffect, useRef, useState } from "react"; import KakaoMap from "@/components/KakaoMap"; +import TimeFilter from "@/components/TimeFilter"; import { instance } from "@/api/api"; import { EventCardType } from "@/types/index"; import { STATUS } from "@/constants/eventStatus"; @@ -63,7 +63,7 @@ const MyLocationTab = ({ userId }: Props) => { {toggleTab && (
- +
{isEmpty ? (

행사가 없습니다.

diff --git a/app/(route)/artist/[artistId]/_components/ChipButtons.tsx b/app/_components/TimeFilter.tsx similarity index 89% rename from app/(route)/artist/[artistId]/_components/ChipButtons.tsx rename to app/_components/TimeFilter.tsx index 4b7dbfa5..60be9a9b 100644 --- a/app/(route)/artist/[artistId]/_components/ChipButtons.tsx +++ b/app/_components/TimeFilter.tsx @@ -6,7 +6,7 @@ interface Props { setStatus: (status: number) => void; } -const ChipButtons = ({ status, setStatus }: Props) => { +const TimeFilter = ({ status, setStatus }: Props) => { return (
setStatus(status === 1 ? 1 : status === 3 ? status - 1 : (status % 4) + 1)} selected={status === 1 || status === 3} /> @@ -16,4 +16,4 @@ const ChipButtons = ({ status, setStatus }: Props) => { ); }; -export default ChipButtons; +export default TimeFilter; From e5bdc6b586b3c535198d2ef9918a1927ae87784a Mon Sep 17 00:00:00 2001 From: Haneul-Kim <4188989@naver.com> Date: Mon, 18 Mar 2024 11:21:45 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20=EC=A7=80?= =?UTF-8?q?=EB=8F=84=20=EA=B4=80=EB=A0=A8=20=EB=B3=80=EC=88=98=EB=93=A4?= =?UTF-8?q?=EC=9D=84=20=ED=95=9C=EB=B2=88=EC=97=90=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=ED=95=98=EB=8A=94=20useCustomMap=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(route)/artist/[artistId]/page.tsx | 47 +++++------------ .../_components/tab/MyLocationTab/index.tsx | 52 +++++++------------ app/_hooks/useCustomMap.tsx | 46 ++++++++++++++++ 3 files changed, 76 insertions(+), 69 deletions(-) create mode 100644 app/_hooks/useCustomMap.tsx diff --git a/app/(route)/artist/[artistId]/page.tsx b/app/(route)/artist/[artistId]/page.tsx index ae94e37b..8455a1d6 100644 --- a/app/(route)/artist/[artistId]/page.tsx +++ b/app/(route)/artist/[artistId]/page.tsx @@ -4,16 +4,16 @@ import SortButton from "@/(route)/search/_components/SortButton"; import { useInfiniteQuery } from "@tanstack/react-query"; import Image from "next/image"; import { useParams } from "next/navigation"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useState } from "react"; import KakaoMap from "@/components/KakaoMap"; import TimeFilter from "@/components/TimeFilter"; import DottedLayout from "@/components/layout/DottedLayout"; import { instance } from "@/api/api"; +import useCustomMap from "@/hooks/useCustomMap"; import useInfiniteScroll from "@/hooks/useInfiniteScroll"; import { getSession } from "@/store/session/cookies"; import { getArtist, getGroup } from "@/utils/getArtist"; import { Res_Get_Type } from "@/types/getResType"; -import { EventCardType } from "@/types/index"; import { SORT, STATUS, SortItem } from "@/constants/eventStatus"; import SortIcon from "@/public/icon/sort.svg"; import EventCard from "./_components/EventCard"; @@ -67,30 +67,7 @@ const ArtistIdPage = () => { refetch(); }, [sort, status]); - const [toggleTab, setToggleTab] = useState(true); - - const handleButtonClick = () => { - setToggleTab((prev) => !prev); - - if (toggleTab) { - setSelectedCard(null); - } - }; - - const [selectedCard, setSelectedCard] = useState(null); - const scrollRef = useRef(); - - const scrollRefCallback = (el: HTMLDivElement) => { - scrollRef.current = el; - }; - - useEffect(() => { - scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }); - }, [selectedCard?.id, toggleTab]); - - const handleCardClick = (select: EventCardType) => { - setSelectedCard(select.id === selectedCard?.id ? null : select); - }; + const { mapVar, mapCallback } = useCustomMap(); if (!isSuccess) return; @@ -101,17 +78,17 @@ const ArtistIdPage = () => {
- +
- {toggleTab && ( + {mapVar.toggleTab && (
@@ -142,9 +119,9 @@ const ArtistIdPage = () => { handleCardClick(event)} - scrollRef={selectedCard?.id === event.id ? scrollRefCallback : null} + isSelected={mapVar.selectedCard?.id === event.id} + onCardClick={() => mapCallback.handleCardClick(event)} + scrollRef={mapVar.selectedCard?.id === event.id ? mapCallback.scrollRefCallback : null} /> )), )} diff --git a/app/(route)/mypage/_components/tab/MyLocationTab/index.tsx b/app/(route)/mypage/_components/tab/MyLocationTab/index.tsx index e0345608..7519a1e3 100644 --- a/app/(route)/mypage/_components/tab/MyLocationTab/index.tsx +++ b/app/(route)/mypage/_components/tab/MyLocationTab/index.tsx @@ -1,14 +1,15 @@ "use client"; import EventCard from "@/(route)/artist/[artistId]/_components/EventCard"; -import { useQuery } from "@tanstack/react-query"; -import Image from "next/image"; -import { useEffect, useRef, useState } from "react"; +import { instance } from "@/api/api"; import KakaoMap from "@/components/KakaoMap"; import TimeFilter from "@/components/TimeFilter"; -import { instance } from "@/api/api"; -import { EventCardType } from "@/types/index"; import { STATUS } from "@/constants/eventStatus"; +import useCustomMap from "@/hooks/useCustomMap"; +import { EventCardType } from "@/types/index"; +import { useQuery } from "@tanstack/react-query"; +import Image from "next/image"; +import { useState } from "react"; interface Props { userId: string; @@ -24,26 +25,7 @@ const MyLocationTab = ({ userId }: Props) => { }, }); - const [toggleTab, setToggleTab] = useState(true); - - const handleButtonClick = () => { - setToggleTab((prev) => !prev); - }; - - const [selectedCard, setSelectedCard] = useState(null); - const scrollRef = useRef(); - - const scrollRefCallback = (el: HTMLDivElement) => { - scrollRef.current = el; - }; - - useEffect(() => { - scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }); - }, [selectedCard?.id]); - - const handleCardClick = (select: EventCardType) => { - setSelectedCard(select.id === selectedCard?.id ? null : select); - }; + const { mapVar, mapCallback } = useCustomMap(); const isEmpty = myEventsData?.length === 0; @@ -51,16 +33,18 @@ const MyLocationTab = ({ userId }: Props) => {
-
- +
+
- {toggleTab && ( + {mapVar.toggleTab && (
@@ -73,9 +57,9 @@ const MyLocationTab = ({ userId }: Props) => { handleCardClick(event)} - scrollRef={selectedCard?.id === event.id ? scrollRefCallback : null} + isSelected={mapVar.selectedCard?.id === event.id} + onCardClick={() => mapCallback.handleCardClick(event)} + scrollRef={mapVar.selectedCard?.id === event.id ? mapCallback.scrollRefCallback : null} /> ))}
diff --git a/app/_hooks/useCustomMap.tsx b/app/_hooks/useCustomMap.tsx new file mode 100644 index 00000000..5fa0473c --- /dev/null +++ b/app/_hooks/useCustomMap.tsx @@ -0,0 +1,46 @@ +import { useEffect, useRef, useState } from "react"; +import { EventCardType } from "@/types/index"; + +const useCustomMap = () => { + const [toggleTab, setToggleTab] = useState(true); + const [selectedCard, setSelectedCard] = useState(null); + + const handleCardClick = (select: EventCardType) => { + setSelectedCard(select.id === selectedCard?.id ? null : select); + }; + + const handleButtonClick = () => { + setToggleTab((prev) => !prev); + + if (toggleTab) { + setSelectedCard(null); + } + }; + + const scrollRef = useRef(); + + const scrollRefCallback = (el: HTMLDivElement) => { + scrollRef.current = el; + }; + + useEffect(() => { + scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }); + }, [selectedCard?.id, toggleTab]); + + const mapVar = { + toggleTab, + setToggleTab, + selectedCard, + setSelectedCard, + }; + + const mapCallback = { + handleCardClick, + handleButtonClick, + scrollRefCallback, + }; + + return { mapVar, mapCallback }; +}; + +export default useCustomMap;