From 1432fec809eb20ac33f07e0ca6237c91340a16db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=84=EA=B1=B4=EC=9A=B0?= <geonulim@gmail.com>
Date: Tue, 19 Mar 2024 13:23:59 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20fix:=20=EC=95=84=ED=8B=B0?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=A7=80=EB=8F=84=20=EB=B0=8F=20=ED=96=89?=
 =?UTF-8?q?=EC=82=AC=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[artistId]/_components/MobileTab.tsx      |  4 +-
 .../artist/[artistId]/_components/PcTab.tsx   | 70 -------------------
 .../[artistId]/_hooks/useArtistSheet.tsx      | 12 ++--
 app/(route)/artist/[artistId]/page.tsx        | 65 +++++++++++++----
 app/_hooks/useCustomMap.tsx                   |  8 ++-
 5 files changed, 66 insertions(+), 93 deletions(-)
 delete mode 100644 app/(route)/artist/[artistId]/_components/PcTab.tsx

diff --git a/app/(route)/artist/[artistId]/_components/MobileTab.tsx b/app/(route)/artist/[artistId]/_components/MobileTab.tsx
index 81ee8b15..28975a31 100644
--- a/app/(route)/artist/[artistId]/_components/MobileTab.tsx
+++ b/app/(route)/artist/[artistId]/_components/MobileTab.tsx
@@ -28,7 +28,7 @@ const MobileTab = ({ mapVar, mapCallback, image, name, status, setStatus, sort,
   return (
     <div
       ref={sheet}
-      className="absolute top-[calc(100vh-384px)] flex min-h-84 w-full flex-col gap-16 rounded-t-lg bg-white-black pt-28 shadow-2xl transition duration-150 ease-out tablet:hidden"
+      className="fixed top-[calc(100vh-384px)] flex min-h-84 w-full flex-col gap-16 overscroll-contain rounded-t-lg bg-white-black pt-28 shadow-2xl transition duration-150 ease-out tablet:hidden"
     >
       <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">
@@ -49,7 +49,7 @@ const MobileTab = ({ mapVar, mapCallback, image, name, status, setStatus, sort,
           인기순
         </SortButton>
       </div>
-      <div ref={content} className="max-h-[80rem] min-h-200 overflow-scroll pb-[70rem] scrollbar-none">
+      <div ref={content} className="max-h-[80rem] min-h-200 overflow-scroll overscroll-contain pb-[70rem] scrollbar-none">
         {isEmpty ? (
           <p className="flex-center w-full pt-20 text-14 font-500">행사가 없습니다.</p>
         ) : (
diff --git a/app/(route)/artist/[artistId]/_components/PcTab.tsx b/app/(route)/artist/[artistId]/_components/PcTab.tsx
deleted file mode 100644
index 67425a53..00000000
--- a/app/(route)/artist/[artistId]/_components/PcTab.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import SortButton from "@/(route)/search/_components/SortButton";
-import Image from "next/image";
-import { Dispatch, SetStateAction } from "react";
-import TimeFilter from "@/components/TimeFilter";
-import { MapCallbackType, MapVarType } from "@/hooks/useCustomMap";
-import { EventCardType } from "@/types/index";
-import SortIcon from "@/public/icon/sort.svg";
-import EventCard from "./EventCard";
-
-interface Props {
-  mapVar: MapVarType;
-  mapCallback: MapCallbackType;
-  image: string;
-  name: string;
-  status: number;
-  setStatus: Dispatch<SetStateAction<number>>;
-  sort: "최신순" | "인기순";
-  setSort: Dispatch<SetStateAction<"최신순" | "인기순">>;
-  eventData: EventCardType[];
-}
-
-const PcTab = ({ mapVar, mapCallback, image, name, status, setStatus, sort, setSort, eventData }: Props) => {
-  const isEmpty = eventData.length === 0;
-
-  return (
-    <>
-      {mapVar.toggleTab && (
-        <div className="tablet:rounded-none absolute bottom-0 top-0 hidden max-h-full min-h-84 w-360 flex-col gap-16 rounded-t-lg border border-gray-100 border-t-transparent bg-white-black pt-20 shadow-none tablet:flex pc:top-0 pc:h-[84rem] pc:w-400 pc:rounded-l-lg pc:border-t-gray-100 pc:py-20">
-          <div className="flex flex-row items-center justify-start gap-12 px-20 pc:w-full">
-            <div className="relative h-36 w-36 pc:h-64 pc:w-64">
-              <Image src={image ?? "/image/no-profile.png"} alt="아티스트 이미지" fill sizes="64px" className="rounded-full object-cover" />
-            </div>
-            <p className="text-16 leading-[2.4rem] text-gray-700">
-              <span className="font-600">{name}</span> 행사 보기
-            </p>
-          </div>
-          <TimeFilter setStatus={setStatus} status={status} />
-          <div className="flex items-center gap-8 px-20">
-            <SortIcon />
-            <SortButton onClick={() => setSort("최신순")} selected={sort === "최신순"}>
-              최신순
-            </SortButton>
-            <SortButton onClick={() => setSort("인기순")} selected={sort === "인기순"}>
-              인기순
-            </SortButton>
-          </div>
-          <div className="min-h-200 overflow-scroll scrollbar-none pc:h-[65rem]">
-            {isEmpty ? (
-              <p className="flex-center w-full pt-20 text-14 font-500">행사가 없습니다.</p>
-            ) : (
-              <div className="px-20">
-                {eventData.map((event) => (
-                  <EventCard
-                    key={event.id}
-                    data={event}
-                    isSelected={mapVar.selectedCard?.id === event.id}
-                    onCardClick={() => mapCallback.handleCardClick(event)}
-                    scrollRef={mapVar.selectedCard?.id === event.id ? mapCallback.scrollRefCallback : null}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default PcTab;
diff --git a/app/(route)/artist/[artistId]/_hooks/useArtistSheet.tsx b/app/(route)/artist/[artistId]/_hooks/useArtistSheet.tsx
index 67442906..13893a34 100644
--- a/app/(route)/artist/[artistId]/_hooks/useArtistSheet.tsx
+++ b/app/(route)/artist/[artistId]/_hooks/useArtistSheet.tsx
@@ -7,8 +7,8 @@ interface BottomSheetMetrics {
 }
 
 const SNAP = {
-  top: 280,
-  bottom: 670,
+  top: 260,
+  bottom: 650,
 };
 
 const useArtistSheet = () => {
@@ -39,14 +39,14 @@ const useArtistSheet = () => {
         const currentY = node.getBoundingClientRect().y;
 
         if (currentY > SNAP.bottom) {
-          node.style.setProperty("transform", `translateY(240px)`);
-          metrics.current.position = 240;
+          node.style.setProperty("transform", `translateY(220px)`);
+          metrics.current.position = 220;
         } else if (currentY < SNAP.bottom && currentY > SNAP.top) {
           node.style.setProperty("transform", "translateY(0px)");
           metrics.current.position = 0;
         } else if (currentY < SNAP.top) {
-          node.style.setProperty("transform", `translateY(-360px)`);
-          metrics.current.position = -360;
+          node.style.setProperty("transform", `translateY(-320px)`);
+          metrics.current.position = -320;
         }
 
         metrics.current.isContentAreaTouched = false;
diff --git a/app/(route)/artist/[artistId]/page.tsx b/app/(route)/artist/[artistId]/page.tsx
index ffab9a46..c7865e7f 100644
--- a/app/(route)/artist/[artistId]/page.tsx
+++ b/app/(route)/artist/[artistId]/page.tsx
@@ -1,24 +1,28 @@
 "use client";
 
+import SortButton from "@/(route)/search/_components/SortButton";
 import { useQuery } from "@tanstack/react-query";
 import Image from "next/image";
 import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import KakaoMap from "@/components/KakaoMap";
 import MetaTag from "@/components/MetaTag";
+import TimeFilter from "@/components/TimeFilter";
 import DottedLayout from "@/components/layout/DottedLayout";
 import { instance } from "@/api/api";
 import useCustomMap from "@/hooks/useCustomMap";
 import { getArtist, getGroup } from "@/utils/getArtist";
 import { Res_Get_Type } from "@/types/getResType";
 import { SORT, STATUS, SortItem } from "@/constants/eventStatus";
+import SortIcon from "@/public/icon/sort.svg";
+import EventCard from "./_components/EventCard";
 import MobileTab from "./_components/MobileTab";
-import PcTab from "./_components/PcTab";
+import useArtistSheet from "./_hooks/useArtistSheet";
 
 const SIZE = 9999;
 
 const ArtistIdPage = () => {
-  const { artistId } = useParams() as { artistId: string }; // artists -> 멤버, 솔로 // groupId -> 그룹명
+  const { artistId } = useParams() as { artistId: string };
 
   const group = getGroup(instance, artistId);
   const artist = getArtist(instance, artistId);
@@ -49,10 +53,12 @@ const ArtistIdPage = () => {
   }, [sort, status]);
 
   const { mapVar, mapCallback } = useCustomMap();
+  const { sheet, content } = useArtistSheet();
 
   if (!isSuccess) return;
 
   const eventData = artistData.eventList;
+  const isEmpty = eventData.length === 0;
 
   return (
     <>
@@ -70,18 +76,49 @@ const ArtistIdPage = () => {
           >
             <Image src="/icon/arrow-left.svg" width={20} height={20} alt="화살표" className={`${mapVar.toggleTab || "scale-x-[-1]"}`} />
           </button>
-          <PcTab mapVar={mapVar} mapCallback={mapCallback} eventData={eventData} name={name} image={image} sort={sort} setSort={setSort} status={status} setStatus={setStatus} />
-          <MobileTab
-            mapVar={mapVar}
-            mapCallback={mapCallback}
-            eventData={eventData}
-            name={name}
-            image={image}
-            sort={sort}
-            setSort={setSort}
-            status={status}
-            setStatus={setStatus}
-          />
+          {mapVar.toggleTab && (
+            <div
+              ref={sheet}
+              className="fixed top-[calc(100vh-384px)] flex min-h-84 w-full flex-col gap-16 rounded-t-lg bg-white-black pt-28 shadow-2xl tablet:absolute tablet:bottom-0 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">
+                <div className="relative h-36 w-36 pc:h-64 pc:w-64">
+                  <Image src={image ?? "/image/no-profile.png"} alt="아티스트 이미지" fill sizes="64px" className="rounded-full object-cover" />
+                </div>
+                <p className="text-16 leading-[2.4rem] text-gray-700">
+                  <span className="font-600">{name}</span> 행사 보기
+                </p>
+              </div>
+              <TimeFilter setStatus={setStatus} status={status} />
+              <div className="flex items-center gap-8 px-20">
+                <SortIcon />
+                <SortButton onClick={() => setSort("최신순")} selected={sort === "최신순"}>
+                  최신순
+                </SortButton>
+                <SortButton onClick={() => setSort("인기순")} selected={sort === "인기순"}>
+                  인기순
+                </SortButton>
+              </div>
+              <div className="max-h-[80rem] min-h-200 overflow-scroll pb-[70rem] scrollbar-none tablet:max-h-none tablet:pb-0 pc:h-[65rem]">
+                {isEmpty ? (
+                  <p className="flex-center w-full pt-20 text-14 font-500">행사가 없습니다.</p>
+                ) : (
+                  <div ref={content} className="px-20">
+                    {eventData.map((event) => (
+                      <EventCard
+                        key={event.id}
+                        data={event}
+                        isSelected={mapVar.selectedCard?.id === event.id}
+                        onCardClick={() => mapCallback.handleCardClick(event)}
+                        scrollRef={mapVar.selectedCard?.id === event.id ? mapCallback.scrollRefCallback : null}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
         </div>
       </DottedLayout>
     </>
diff --git a/app/_hooks/useCustomMap.tsx b/app/_hooks/useCustomMap.tsx
index febe3445..16f88f54 100644
--- a/app/_hooks/useCustomMap.tsx
+++ b/app/_hooks/useCustomMap.tsx
@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
 import { EventCardType } from "@/types/index";
+import useGetWindowWidth from "./useGetWindowWidth";
 
 const useCustomMap = () => {
   const [toggleTab, setToggleTab] = useState(true);
@@ -23,8 +24,13 @@ const useCustomMap = () => {
     scrollRef.current = el;
   };
 
+  const { isPc } = useGetWindowWidth();
   useEffect(() => {
-    scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    if (isPc) {
+      scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      return;
+    }
+    scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
   }, [selectedCard?.id, toggleTab]);
 
   const mapVar = {