Merge pull request #202 from P1Z7/develop

Ver 2.0 배포 7차 (아티스트 페이지 스크롤 버그 해결)
P1Z7 · Mar 19, 2024 · 60c8054 · 60c8054
2 parents 260abe4 + 3f9b8f1
commit 60c8054
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 93 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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 = {