Merge pull request #203 from gw-lim/fix/artist-drag

⚡️ fix: 아티스트 드래그 UI 수정
P1Z7 · Mar 19, 2024 · 1c9ca7b · 1c9ca7b
2 parents 3f9b8f1 + 689ddcf
commit 1c9ca7b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/app/(route)/artist/[artistId]/_hooks/useArtistSheet.tsx b/app/(route)/artist/[artistId]/_hooks/useArtistSheet.tsx
@@ -8,7 +8,7 @@ interface BottomSheetMetrics {
 
 const SNAP = {
   top: 260,
-  bottom: 650,
+  bottom: 630,
 };
 
 const useArtistSheet = () => {
@@ -45,8 +45,8 @@ const useArtistSheet = () => {
           node.style.setProperty("transform", "translateY(0px)");
           metrics.current.position = 0;
         } else if (currentY < SNAP.top) {
-          node.style.setProperty("transform", `translateY(-320px)`);
-          metrics.current.position = -320;
+          node.style.setProperty("transform", `translateY(${500 - window.innerHeight}px)`);
+          metrics.current.position = 500 - window.innerHeight;
         }
 
         metrics.current.isContentAreaTouched = false;

diff --git a/app/(route)/artist/[artistId]/page.tsx b/app/(route)/artist/[artistId]/page.tsx
@@ -79,7 +79,7 @@ const ArtistIdPage = () => {
           {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"
+              className="fixed top-[58%] 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">