@@ -118,7 +99,7 @@ const ArtistIdPage = () => {
{name} 행사 보기
-
+
setSort("최신순")} selected={sort === "최신순"}>
@@ -138,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/MyCalendarTab/ChipButtons.tsx b/app/(route)/mypage/_components/tab/MyCalendarTab/CalendarTimeFilter.tsx
similarity index 84%
rename from app/(route)/mypage/_components/tab/MyCalendarTab/ChipButtons.tsx
rename to app/(route)/mypage/_components/tab/MyCalendarTab/CalendarTimeFilter.tsx
index affb7946..cfa16091 100644
--- a/app/(route)/mypage/_components/tab/MyCalendarTab/ChipButtons.tsx
+++ b/app/(route)/mypage/_components/tab/MyCalendarTab/CalendarTimeFilter.tsx
@@ -1,13 +1,12 @@
import ChipButton from "@/components/chip/ChipButton";
-
-type StatusType = "" | "예정" | "종료" | "진행중" | "종료제외";
+import { StatusType } from "@/types/index";
interface Props {
status: string;
setStatus: (status: StatusType) => void;
}
-const ChipButtons = ({ status, setStatus }: Props) => {
+const CalendarTimeFilter = ({ status, setStatus }: Props) => {
const handleChipClick = (label: StatusType) => {
switch (label) {
case status:
@@ -34,4 +33,4 @@ const ChipButtons = ({ status, setStatus }: Props) => {
);
};
-export default ChipButtons;
+export default CalendarTimeFilter;
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..3b7d0692 100644
--- a/app/(route)/mypage/_components/tab/MyCalendarTab/index.tsx
+++ b/app/(route)/mypage/_components/tab/MyCalendarTab/index.tsx
@@ -1,5 +1,6 @@
"use client";
+import CalendarTimeFilter from "@/(route)/mypage/_components/tab/MyCalendarTab/CalendarTimeFilter";
import FadingDot from "@/(route)/signin/_components/FadingDot";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
@@ -7,10 +8,9 @@ import "react-calendar/dist/Calendar.css";
import HorizontalEventCard from "@/components/card/HorizontalEventCard";
import { instance } from "@/api/api";
import { getCalendarTime } from "@/utils/getCalendarTime";
-import { EventCardType } from "@/types/index";
+import { EventCardType, StatusType } from "@/types/index";
import { MYPAGE_CALENDAR_STYLE } from "@/constants/calendarStyle";
import NoContent from "../../NoContent";
-import ChipButtons from "./ChipButtons";
import FoldButton from "./FoldButton";
import MyCalendar from "./MyCalendar";
@@ -18,8 +18,6 @@ interface Props {
userId: string;
}
-type StatusType = "" | "예정" | "종료" | "진행중" | "종료제외";
-
const MyCalendarTab = ({ userId }: Props) => {
const [data, setData] = useState([]);
const [isFold, setIsFold] = useState(true);
@@ -77,7 +75,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"
- >
-
-
-
-
' +
- placeName +
- '
' +
- '
' +
- "
" +
- "
-
-
+
+
- {toggleTab && (
+ {mapVar.toggleTab && (
-
+
{isEmpty ? (
행사가 없습니다.
@@ -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/_components/KakaoMap.tsx b/app/_components/KakaoMap.tsx
index 04a27a7e..8c5dbd50 100644
--- a/app/_components/KakaoMap.tsx
+++ b/app/_components/KakaoMap.tsx
@@ -14,8 +14,8 @@ const KakaoMap = ({ scheduleData, toggleTab, setToggleTab, selectedCard, setSele
const [mapInstance, setMapInstance] = useState
(null);
const onLoadKakaoMap = useCallback(() => {
- const kakaoMap = window.kakao.maps;
- kakaoMap.load(() => {
+ const kakaoMap = window.kakao?.maps;
+ kakaoMap?.load(() => {
const mapContainer = document.getElementById("map");
const mapOption = {
center: new kakaoMap.LatLng(37.566826, 126.9786567),
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;
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;