feat: MemeQuizResult 컴포넌트의 위치 및 크기를 조정하여 반응형 디자인 개선

Author: Cllaude99

apps/web/src/pages/MemeQuizPage/components/MemeQuizResult/MemeQuizResult.styles.ts

@@ -9,7 +9,6 @@ const Container = styled(motion.div)`
   flex-direction: column;
   align-items: center;
   background-color: ${({ theme }) => theme.palette.common.black};
-  padding-bottom: 120px;
 `;
 
 const ResultCard = styled(motion.div)`
@@ -18,8 +17,8 @@ const ResultCard = styled(motion.div)`
   max-width: ${({ theme }) => theme.breakpoints.mobile};
   height: 45vh;
   min-height: 400px;
-  max-height: 450px;
-  margin-top: 6vh;
+  max-height: 481px;
+  margin-top: 10vh;
   border-radius: 14px;
   background: linear-gradient(
     135deg,
@@ -31,22 +30,21 @@ const ResultCard = styled(motion.div)`
   align-items: center;
   overflow: hidden;
 
-  @media screen and (max-width: ${({ theme }) => theme.breakpoints.mobile}) {
+  @media screen and (max-height: 700px) {
+    height: 50vh;
+    margin-top: 8vh;
+    min-height: 350px;
+  }
+
+  @media screen and (min-height: 800px) {
+    height: 40vh;
+    margin-top: 12vh;
+  }
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
     height: 35vh;
-    min-height: 320px;
-    max-height: 400px;
-    margin-top: 15vh;
-
-    @media screen and (max-height: 700px) {
-      height: 40vh;
-      margin-top: 10vh;
-      min-height: 300px;
-    }
-
-    @media screen and (min-height: 800px) {
-      height: 30vh;
-      margin-top: 20vh;
-    }
+    margin-top: 8vh;
+    max-height: 450px;
   }
 `;
 
@@ -131,8 +129,8 @@ const ButtonContainer = styled.div`
   flex-direction: column;
   gap: 14px;
   z-index: 10;
-  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
-  padding-top: 40px;
+  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
+  padding-top: 20px;
 `;
 
 const ShareButton = styled(motion.button)`

apps/web/src/pages/MemeQuizPage/components/MemeQuizResult/index.tsx

@@ -93,12 +93,10 @@ const MemeQuizResult = ({ rightCount }: MemeQuizResultPageProps) => {
         <motion.div
           style={{
             position: 'fixed',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
+            inset: 0,
             width: '100%',
             maxWidth: '425px',
-            height: '100vh',
+            margin: '0 auto',
             background: 'black',
             display: 'flex',
             flexDirection: 'column',