Merge pull request #192 from han-kimm/fix/artistpage

⚡️fix & ♻️ refactor : ChipButtons 중복 삭제 및 이름 변경 / 지도 관련 변수들을 묶는 훅

app/(route)/artist/[artistId]/page.tsx

@@ -4,18 +4,18 @@ 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 ChipButtons from "./_components/ChipButtons";
 import EventCard from "./_components/EventCard";
 
 const SIZE = 9999;
@@ -67,26 +67,7 @@ const ArtistIdPage = () => {
     refetch();
   }, [sort, status]);
 
-  const [toggleTab, setToggleTab] = useState(true);
-
-  const handleButtonClick = () => {
-    setToggleTab((prev) => !prev);
-  };
-
-  const [selectedCard, setSelectedCard] = useState<EventCardType | null>(null);
-  const scrollRef = useRef<HTMLDivElement>();
-
-  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();
 
   if (!isSuccess) return;
 
@@ -97,17 +78,17 @@ const ArtistIdPage = () => {
     <DottedLayout size="wide">
       <div className="relative h-[calc(100vh-7.2rem)] w-full overflow-hidden pc:mb-128 pc:mt-48 pc:h-[84rem]">
         <div
-          className={`absolute left-0 top-0 z-zero h-full w-full ${toggleTab ? "tablet:pl-360 pc:pl-400" : ""} pb-344 tablet:pb-0 pc:h-[84rem] pc:rounded-lg pc:border pc:border-gray-100`}
+          className={`absolute left-0 top-0 z-zero h-full w-full ${mapVar.toggleTab ? "tablet:pl-360 pc:pl-400" : ""} pb-344 tablet:pb-0 pc:h-[84rem] pc:rounded-lg pc:border pc:border-gray-100`}
         >
-          <KakaoMap scheduleData={mapData} selectedCard={selectedCard} setSelectedCard={setSelectedCard} />
+          <KakaoMap scheduleData={mapData} {...mapVar} />
         </div>
         <button
-          onClick={handleButtonClick}
-          className={`tablet:flex-center absolute z-nav hidden h-60 w-24 rounded-r-sm border border-gray-100 bg-white-white tablet:top-44 pc:top-24 ${toggleTab ? "border-l-white-white tablet:left-360 pc:left-400" : "left-0"}`}
+          onClick={mapCallback.handleButtonClick}
+          className={`tablet:flex-center absolute z-nav hidden h-60 w-24 rounded-r-sm border border-gray-100 bg-white-white tablet:top-44 pc:top-24 ${mapVar.toggleTab ? "border-l-white-white tablet:left-360 pc:left-400" : "left-0"}`}
         >
-          <Image src="/icon/arrow-left.svg" width={20} height={20} alt="화살표" className={`${toggleTab || "scale-x-[-1]"}`} />
+          <Image src="/icon/arrow-left.svg" width={20} height={20} alt="화살표" className={`${mapVar.toggleTab || "scale-x-[-1]"}`} />
         </button>
-        {toggleTab && (
+        {mapVar.toggleTab && (
           <div className="absolute bottom-0 flex max-h-344 min-h-84 w-full flex-col gap-16 rounded-t-lg bg-white-black pt-28 shadow-2xl tablet:top-0 tablet:max-h-full tablet:w-360 tablet:rounded-none tablet:border tablet:border-gray-100 tablet:border-t-transparent tablet:pt-20 tablet:shadow-none pc:top-0 pc:h-[84rem] pc:w-400 pc:rounded-l-lg pc:border-t-gray-100 pc:py-20">
             <div className="absolute left-[calc((100%-64px)/2)] top-12 h-4 w-64 rounded-sm bg-gray-700 tablet:hidden" />
             <div className="flex flex-row items-center justify-start gap-12 px-20 pc:w-full">
@@ -118,7 +99,7 @@ const ArtistIdPage = () => {
                 <span className="font-600">{name}</span> 행사 보기
               </p>
             </div>
-            <ChipButtons setStatus={setStatus} status={status} />
+            <TimeFilter setStatus={setStatus} status={status} />
             <div className="flex items-center gap-8 px-20">
               <SortIcon />
               <SortButton onClick={() => setSort("최신순")} selected={sort === "최신순"}>
@@ -138,9 +119,9 @@ const ArtistIdPage = () => {
                       <EventCard
                         key={event.id}
                         data={event}
-                        isSelected={selectedCard?.id === event.id}
-                        onCardClick={() => 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}
                       />
                     )),
                   )}

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";

app/(route)/mypage/_components/tab/MyCalendarTab/index.tsx

@@ -4,33 +4,32 @@ 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";
 
 interface Props {
   userId: string;
 }
 
-type StatusType = "" | "예정" | "종료" | "진행중" | "종료제외";
-
 const MyCalendarTab = ({ userId }: Props) => {
   const [data, setData] = useState<EventCardType[] | []>([]);
   const [isFold, setIsFold] = useState(true);
-  const [status, setStatus] = useState<StatusType>("");
+  const [status, setStatus] = useState(3);
   const [calendarStyle, setCalendarStyle] = useState("");
   const [selectedDate, setSelectedDate] = useState<Date | null>(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) => {
         )}
       </div>
       <div className="w-full">
-        <ChipButtons setStatus={setStatus} status={status} />
+        <TimeFilter setStatus={setStatus} status={status} />
         <section>
           {data
             .filter(