Merge pull request #1 from Nexters/fix/meme-detail-scroll

fix: 밈 상세 페이지 스크롤 애니메이션 개선

Author: Cllaude99

apps/web/src/pages/MemeDetailPage/MemeDetailPage.styles.ts

@@ -2,29 +2,18 @@ import styled from '@emotion/styled';
 import { motion } from 'motion/react';
 
 const Container = styled.div`
-  width: 100%;
-  height: 100%;
   overflow-y: auto;
-  background-color: ${({ theme }) => theme.palette.gray['gray-10']};
   &::-webkit-scrollbar {
     display: none;
   }
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
-  position: relative;
 `;
 
 const ImageContainer = styled(motion.div)`
-  width: 100%;
   position: sticky;
   top: 0;
-  z-index: 10;
-  background-color: ${({ theme }) => theme.palette.gray['gray-10']};
-  display: flex;
-  flex-direction: column;
   padding: 14px;
-  overflow: visible;
-  position: relative;
 `;
 
 const Image = styled.img`
@@ -36,39 +25,27 @@ const Image = styled.img`
 
 const ShareButton = styled(motion.button)`
   position: absolute;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 8px;
+  gap: 4px;
   background-color: rgba(0, 0, 0, 0.5);
   left: 50%;
   transform: translateX(-50%);
   bottom: 26px;
   border: 1px solid ${({ theme }) => theme.palette.common.white};
   border-radius: 10px;
-  height: 44px;
-  min-width: 44px;
-  padding: 0 12px;
   cursor: pointer;
   color: ${({ theme }) => theme.palette.common.white};
-  transition: all 0.2s ease;
-  z-index: 20;
-  white-space: nowrap;
+  padding: 10px 12px;
 `;
 
 const ShareButtonText = styled(motion.span)`
   ${({ theme }) => theme.typography.body.body1};
   color: ${({ theme }) => theme.palette.common.white};
-  display: block;
 `;
 
 const ContentContainer = styled.div`
-  padding: 0 14px 20px;
-  background-color: ${({ theme }) => theme.palette.gray['gray-10']};
-  margin-top: -20px;
-  position: relative;
-  z-index: 20;
-  border-radius: 20px 20px 0 0;
+  padding: 20px 14px;
 `;
 
 const YearBadge = styled.div`
@@ -107,7 +84,7 @@ const SectionTitle = styled.h2`
   align-items: center;
   gap: 4px;
   width: max-content;
-  padding: 4px 10px;
+  padding: 6px 10px;
   border-radius: 6px;
 `;
 
@@ -130,4 +107,4 @@ export {
   HashTags,
   SectionTitle,
   SectionText,
-};
+};

apps/web/src/pages/MemeDetailPage/index.tsx

@@ -3,7 +3,7 @@ import { ShareIcon, SymbolThreeIcon, SymbolTwoIcon } from '@/assets/icons';
 import { nativeBridge } from '@/utils/bridge';
 import * as S from './MemeDetailPage.styles';
 import { useTheme } from '@emotion/react';
-import { useRef } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { useScroll, useTransform, useSpring } from 'motion/react';
 
 const DUMMY_DATA = {
@@ -28,31 +28,20 @@ const MemeDetailPage = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { scrollY } = useScroll({ container: containerRef });
 
-  const height = useTransform(scrollY, [0, 200], [400, 250]);
+  const height = useTransform(scrollY, [0, 60], [400, 175]);
   const smoothHeight = useSpring(height, {
-    stiffness: 100,
-    damping: 20,
+    stiffness: 300,
+    damping: 50,
   });
 
-  // 공유하기 버튼 애니메이션
-  const buttonWidth = useTransform(scrollY, [0, 50], [116, 44]);
-  const textOpacity = useTransform(scrollY, [0, 30], [1, 0]);
-  const textWidth = useTransform(scrollY, [0, 30], [68, 0]);
+  const [isTextVisible, setIsTextVisible] = useState(true);
 
-  const smoothButtonWidth = useSpring(buttonWidth, {
-    stiffness: 400,
-    damping: 40,
-  });
-
-  const smoothTextWidth = useSpring(textWidth, {
-    stiffness: 400,
-    damping: 40,
-  });
-
-  const smoothTextOpacity = useSpring(textOpacity, {
-    stiffness: 400,
-    damping: 40,
-  });
+  useEffect(() => {
+    const unsubscribe = scrollY.on('change', (latest) => {
+      setIsTextVisible(latest < 1);
+    });
+    return () => unsubscribe();
+  }, [scrollY]);
 
   return (
     <Layout
@@ -67,9 +56,6 @@ const MemeDetailPage = () => {
             alt={DUMMY_DATA.success.title}
           />
           <S.ShareButton
-            style={{
-              width: smoothButtonWidth,
-            }}
             onClick={() => {
               nativeBridge.shareMeme({
                 title: DUMMY_DATA.success.title,
@@ -78,15 +64,7 @@ const MemeDetailPage = () => {
             }}
           >
             <ShareIcon width={24} height={24} />
-            <S.ShareButtonText
-              style={{
-                opacity: smoothTextOpacity,
-                width: smoothTextWidth,
-                overflow: 'hidden',
-              }}
-            >
-              공유하기
-            </S.ShareButtonText>
+            {isTextVisible && <S.ShareButtonText>공유하기</S.ShareButtonText>}
           </S.ShareButton>
         </S.ImageContainer>
         <S.ContentContainer>
@@ -113,4 +91,4 @@ const MemeDetailPage = () => {
   );
 };
 
-export default MemeDetailPage;
+export default MemeDetailPage;