feat: 밈 상세화면 상단 이미지 비율 수정

Author: Cllaude99

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

@@ -15,6 +15,12 @@ const ImageContainer = styled(motion.div)`
   position: sticky;
   top: 0;
   padding: 14px;
+  max-height: 70vh;
+
+  @media (max-width: 768px) {
+    padding: 10px;
+    max-height: 50vh;
+  }
 `;
 
 const Image = styled.img`
@@ -38,18 +44,35 @@ const ShareButton = styled(motion.button)`
   cursor: pointer;
   color: ${({ theme }) => theme.palette.common.white};
   width: fit-content;
+  min-width: 44px;
+  min-height: 44px;
+  justify-content: center;
+
+  @media (max-width: 768px) {
+    bottom: 16px;
+    padding: 8px 12px;
+  }
+`;
+
+const ShareTextWrapper = styled(motion.div)`
+  display: flex;
+  align-items: center;
 `;
 
-const ShareButtonText = styled(motion.span)`
+const ShareButtonText = styled.span`
   ${({ theme }) => theme.typography.body.body1};
   color: ${({ theme }) => theme.palette.common.white};
-  overflow: hidden;
   white-space: nowrap;
 `;
 
 const ContentContainer = styled.div`
   padding: 20px 14px;
   background-color: ${({ theme }) => theme.palette.gray['gray-10']};
+  margin-top: 40px;
+
+  @media (max-width: 768px) {
+    margin-top: 32px;
+  }
 `;
 
 const YearBadge = styled.div`
@@ -104,6 +127,7 @@ export {
   Image,
   ContentContainer,
   ShareButton,
+  ShareTextWrapper,
   ShareButtonText,
   YearBadge,
   YearText,

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

@@ -4,7 +4,7 @@ import { nativeBridge } from '@/utils/bridge';
 import * as S from './MemeDetailPage.styles';
 import { useTheme } from '@emotion/react';
 import { useRef } from 'react';
-import { useScroll, useTransform, useSpring } from 'motion/react';
+import { useScroll, useTransform, useSpring, anticipate } from 'motion/react';
 
 const DUMMY_DATA = {
   resultType: 'SUCCESS',
@@ -28,22 +28,27 @@ const MemeDetailPage = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { scrollY } = useScroll({ container: containerRef });
 
-  const height = useTransform(scrollY, [0, 100], [400, 10]);
+  const isMobile = window.innerWidth <= 768;
+  const heightRange = isMobile ? [300, 150] : [400, 200];
+  const scrollRange = isMobile ? [0, 50] : [0, 100];
+
+  const height = useTransform(scrollY, scrollRange, heightRange);
   const smoothHeight = useSpring(height, {
-    stiffness: 150,
-    damping: 50,
+    stiffness: 200,
+    damping: 30,
   });
 
-  const textWidth = useTransform(scrollY, [0, 10], [100, 0]);
-  const smoothTextWidth = useSpring(textWidth, {
-    stiffness: 150,
-    damping: 50,
+  const threshold = isMobile ? 15 : 30;
+
+  const isTextVisible = useTransform(scrollY, [0, threshold], [1, 0], {
+    clamp: true,
+    ease: anticipate,
   });
 
-  const padding = useTransform(scrollY, [0, 20], [10, 5]);
+  const padding = useTransform(scrollY, [0, threshold], [10, 5]);
   const smoothPadding = useSpring(padding, {
-    stiffness: 150,
-    damping: 50,
+    stiffness: 200,
+    damping: 30,
   });
 
   return (
@@ -68,9 +73,15 @@ const MemeDetailPage = () => {
             }}
           >
             <ShareIcon width={24} height={24} />
-            <S.ShareButtonText style={{ maxWidth: smoothTextWidth }}>
-              공유하기
-            </S.ShareButtonText>
+            <S.ShareTextWrapper
+              style={{
+                display: useTransform(isTextVisible, (v) =>
+                  v > 0.01 ? 'flex' : 'none',
+                ),
+              }}
+            >
+              <S.ShareButtonText>공유하기</S.ShareButtonText>
+            </S.ShareTextWrapper>
           </S.ShareButton>
         </S.ImageContainer>
         <S.ContentContainer>