feat: 밈 상세 화면 비율 수정

Author: Cllaude99

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

@@ -2,7 +2,10 @@ 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;
   }
@@ -14,13 +17,9 @@ const ImageContainer = styled(motion.div)`
   width: 100%;
   position: sticky;
   top: 0;
+  z-index: 10;
   padding: 14px;
-  max-height: 70vh;
-
-  @media (max-width: 768px) {
-    padding: 10px;
-    max-height: 50vh;
-  }
+  background-color: ${({ theme }) => theme.palette.gray['gray-10']};
 `;
 
 const Image = styled.img`
@@ -43,36 +42,18 @@ const ShareButton = styled(motion.button)`
   border-radius: 10px;
   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.span`
+const ShareButtonText = styled(motion.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`
@@ -127,7 +108,6 @@ export {
   Image,
   ContentContainer,
   ShareButton,
-  ShareTextWrapper,
   ShareButtonText,
   YearBadge,
   YearText,

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

@@ -1,10 +1,10 @@
 import Layout from '@/components/Layout';
-import { ShareIcon, SymbolTwoIcon, SymbolThreeIcon } from '@/assets/icons';
+import { ShareIcon, 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 { useScroll, useTransform, useSpring, anticipate } from 'motion/react';
+import { useScroll, useTransform, useSpring } from 'motion/react';
 
 const DUMMY_DATA = {
   resultType: 'SUCCESS',
@@ -28,33 +28,31 @@ const MemeDetailPage = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { scrollY } = useScroll({ container: containerRef });
 
-  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 height = useTransform(scrollY, [0, 200], [400, 200]);
   const smoothHeight = useSpring(height, {
     stiffness: 200,
-    damping: 30,
+    damping: 20,
+    mass: 0.5,
   });
 
-  const threshold = isMobile ? 15 : 30;
-
-  const isTextVisible = useTransform(scrollY, [0, threshold], [1, 0], {
-    clamp: true,
-    ease: anticipate,
+  const textWidth = useTransform(scrollY, [0, 50], [100, 0]);
+  const smoothTextWidth = useSpring(textWidth, {
+    stiffness: 300,
+    damping: 30,
   });
 
-  const padding = useTransform(scrollY, [0, threshold], [10, 5]);
+  const padding = useTransform(scrollY, [0, 50], [16, 10]);
   const smoothPadding = useSpring(padding, {
-    stiffness: 200,
+    stiffness: 300,
     damping: 30,
   });
 
   return (
     <Layout
       layoutStyle={{
         backgroundColor: theme.palette.gray['gray-10'],
+        height: '100vh',
+        overflow: 'hidden',
       }}
     >
       <S.Container ref={containerRef}>
@@ -73,15 +71,9 @@ const MemeDetailPage = () => {
             }}
           >
             <ShareIcon width={24} height={24} />
-            <S.ShareTextWrapper
-              style={{
-                display: useTransform(isTextVisible, (v) =>
-                  v > 0.01 ? 'flex' : 'none',
-                ),
-              }}
-            >
-              <S.ShareButtonText>공유하기</S.ShareButtonText>
-            </S.ShareTextWrapper>
+            <S.ShareButtonText style={{ maxWidth: smoothTextWidth }}>
+              공유하기
+            </S.ShareButtonText>
           </S.ShareButton>
         </S.ImageContainer>
         <S.ContentContainer>
@@ -98,7 +90,7 @@ const MemeDetailPage = () => {
           </S.SectionTitle>
           <S.SectionText>{DUMMY_DATA.success.usage}</S.SectionText>
           <S.SectionTitle>
-            <SymbolThreeIcon width={18} height={18} />
+            <SymbolTwoIcon width={18} height={18} />
             유래
           </S.SectionTitle>
           <S.SectionText>{DUMMY_DATA.success.origin}</S.SectionText>