[feat/#513] ♻️ Refactor: 결과 페이지 반응형 적용

Team-WeQuiz · May 30, 2024 · caffc71 · caffc71
1 parent 31b7a3d
commit caffc71
Show file tree

Hide file tree

Showing 9 changed files with 185 additions and 71 deletions.
diff --git a/chatty-fe/src/app/(game)/mypage/page.tsx b/chatty-fe/src/app/(game)/mypage/page.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import * as styles from './page.css';
 import UserInfoForm from './_component/UserInfoForm/UserInfoForm';
 import UserQuizList from './_component/UserQuizList/UserQuizList';
-import Footer from '../../_components/Footer/Footer';
+import Footer from '@/app/_components/Footer/Footer';
 
 const MyPage = () => {
   const [tabIndex, setTabIndex] = useState<number>(0);

diff --git a/chatty-fe/src/app/(game)/result/[id]/_components/PercentageCircle/PercentageCircle.css.ts b/chatty-fe/src/app/(game)/result/[id]/_components/PercentageCircle/PercentageCircle.css.ts
@@ -21,7 +21,7 @@ export const CircleFill = style({
 });
 
 export const Percentage = style({
-  zIndex: 1000,
+  zIndex: 10,
   fontSize: 20,
   textAlign: 'center',
 });
diff --git a/...ty-fe/src/app/(game)/result/[id]/_components/PercentageCircle/PercentageCircle.stories.ts b/...ty-fe/src/app/(game)/result/[id]/_components/PercentageCircle/PercentageCircle.stories.ts
@@ -11,30 +11,35 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    color: '#FF0C0C',
     percentage: 0,
   },
 };
 
 export const Default1: Story = {
   args: {
+    color: '#FF0C0C',
     percentage: 25,
   },
 };
 
 export const Default2: Story = {
   args: {
+    color: '#77F359',
     percentage: 50,
   },
 };
 
 export const Default3: Story = {
   args: {
+    color: '#51A8FF',
     percentage: 75,
   },
 };
 
 export const Default4: Story = {
   args: {
+    color: '#51A8FF',
     percentage: 100,
   },
 };
diff --git a/chatty-fe/src/app/(game)/result/[id]/_components/PercentageCircle/PercentageCircle.tsx b/chatty-fe/src/app/(game)/result/[id]/_components/PercentageCircle/PercentageCircle.tsx
@@ -1,23 +1,16 @@
 import * as styles from './PercentageCircle.css';
 
 export default function PercentageCircle({
+  color,
   percentage,
 }: {
+  color: string;
   percentage: number;
 }) {
   const size = 200;
   const calcDeg = (percentage: number) => {
     return Number((360 * percentage) / 100);
   };
-  const selectColor = (percentage: number) => {
-    if (percentage <= 30) {
-      return '#FF0C0C';
-    } else if (percentage <= 60) {
-      return '#77F359';
-    } else {
-      return '#51A8FF';
-    }
-  };
 
   return (
     <div
@@ -26,14 +19,14 @@ export default function PercentageCircle({
       <div
         className={styles.CircleBase}
         style={{
-          background: `conic-gradient(${selectColor(percentage)} 0deg ${calcDeg(percentage)}deg, white ${calcDeg(percentage)}deg ${360}deg)`,
+          background: `conic-gradient(${color} 0deg ${calcDeg(percentage)}deg, white ${calcDeg(percentage)}deg ${360}deg)`,
         }}
       >
         <div className={styles.CircleFill} />
         <span
           className={styles.Percentage}
           style={{
-            color: `${selectColor(percentage)}`,
+            color: `${color}`,
           }}
         >
           정답률

diff --git a/chatty-fe/src/app/(game)/result/[id]/_components/ResultPageModal/ResultPageModal.css.ts b/chatty-fe/src/app/(game)/result/[id]/_components/ResultPageModal/ResultPageModal.css.ts
@@ -159,9 +159,8 @@ export const ImageWrapper = style({
   alignItems: 'center',
   width: 40,
   height: 40,
-  borderRadius: 100,
-  background: '#fff',
-  overflow: 'hidden',
+  borderRadius: '50%',
+  border: `1px solid ${globals.color.blue_2}`,
 });
 
 export const nickname = style({
@@ -172,5 +171,4 @@ export const answer = style({
   width: '100%',
   wordWrap: 'break-word',
   overflowWrap: 'break-word',
-
 });
diff --git a/chatty-fe/src/app/(game)/result/[id]/_components/ResultPageModal/ResultPageModal.stories.ts b/chatty-fe/src/app/(game)/result/[id]/_components/ResultPageModal/ResultPageModal.stories.ts
@@ -11,6 +11,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    isOpen: true,
     results: [
       {
         quizNumber: 1,
@@ -23,19 +24,20 @@ export const Default: Story = {
             nickname: 'test',
             playerAnswer: 'test',
             marking: true,
-            profileImage: null
+            profileImage: null,
           },
           {
             playerId: 2,
             nickname: 'test',
             playerAnswer: 'test',
             marking: false,
-            profileImage: null
+            profileImage: null,
           },
         ],
         correctRate: 45,
       },
     ],
     currentQuizNumber: 1,
+    closeModal: () => {},
   },
 };
diff --git a/chatty-fe/src/app/(game)/result/[id]/_components/ResultPageModal/ResultPageModal.tsx b/chatty-fe/src/app/(game)/result/[id]/_components/ResultPageModal/ResultPageModal.tsx
@@ -142,7 +142,7 @@ export default function ResultPageModal({
                 <div className={styles.ProfileWrapper}>
                   <div className={styles.ImageWrapper}>
                     <Image
-                      src={answer.profileImage || '/images/logo.svg'}
+                      src={answer.profileImage || '/images/person.svg'}
                       alt="profile"
                       width={40}
                       height={40}

diff --git a/chatty-fe/src/app/(game)/result/[id]/page.css.ts b/chatty-fe/src/app/(game)/result/[id]/page.css.ts
@@ -4,13 +4,13 @@ import { style } from '@vanilla-extract/css';
 export const Container = style({
   display: 'flex',
   width: '100%',
+  maxWidth: 1124,
   flexDirection: 'column',
-  alignItems: 'center',
+  gap: 36,
 });
 
 export const Wrapper = style({
   width: '100%',
-  maxWidth: 1124,
 });
 
 export const ContentsBox = style({
@@ -20,9 +20,7 @@ export const ContentsBox = style({
   gap: 60,
   borderRadius: 20,
   backgroundColor: globals.color.blue_7,
-  minHeight: '100vh',
-  padding: '40px 0',
-  overflow: 'visible',
+  padding: 24,
 });
 
 export const ContentsWrapper = style({
@@ -36,30 +34,103 @@ export const ContentsWrapper = style({
 export const ContentsCard = style({
   display: 'flex',
   padding: 24,
-  justifyContent: 'space-around',
   gap: 24,
   borderRadius: 20,
-  width: '80%',
+  width: '100%',
   backgroundColor: globals.color.blue_6,
+  '@media': {
+    '(max-width: 768px)': {
+      flexDirection: 'column',
+      gap: 16,
+    },
+  },
+});
+
+export const CardHeader = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const MobileStatsArea = style({
+  display: 'none',
+  '@media': {
+    '(max-width: 768px)': {
+      display: 'flex',
+      width: 'calc(100% - 45px)',
+      alignItems: 'center',
+      marginTop: 5,
+      justifyContent: 'space-between',
+    },
+  },
+});
+
+export const MobileRateText = style({
+  fontSize: 18,
+});
+
+export const MobileModalButton = style({
+  display: 'flex',
+  marginTop: 3,
+  cursor: 'pointer',
+  fontSize: 12,
+  color: globals.color.blue_main,
+  ':active': {
+    transform: 'scale(0.99)',
+  },
+});
+
+export const StatsArea = style({
+  display: 'flex',
+  gap: 24,
+  '@media': {
+    '(max-width: 768px)': {
+      display: 'none',
+    },
+  },
 });
 
 export const Number = style({
-  width: 80,
+  width: 58,
   height: 58,
   fontFamily: 'var(--bagel-font)',
   fontSize: 40,
+  '@media': {
+    '(max-width: 768px)': {
+      width: 45,
+      height: 40,
+      fontSize: 28,
+    },
+  },
+});
+
+export const CardsWrapper = style({
+  width: 'calc(100% - 410px)',
+  display: 'flex',
+  gap: 24,
+  '@media': {
+    '(max-width: 992px)': {
+      flexDirection: 'column',
+    },
+    '(max-width: 768px)': {
+      width: '100%',
+    },
+  },
 });
 
 export const QuestionCard = style({
   display: 'flex',
-  width: '35%',
+  width: 'calc(50% - 12px)',
   height: '100%',
   padding: 16,
   gap: 10,
   backgroundColor: '#fff',
   borderRadius: 20,
   fontSize: 20,
-  wordBreak: 'keep-all',
+  '@media': {
+    '(max-width: 992px)': {
+      width: '100%',
+    },
+  },
 });
 
 export const QuestionMark = style({
@@ -98,7 +169,7 @@ export const ModalButton = style({
   display: 'flex',
   flexDirection: 'column',
   width: 80,
-  height: '100%',
+  height: 200,
   padding: '57px 10px',
   justifyContent: 'center',
   alignItems: 'center',
@@ -112,3 +183,10 @@ export const ModalButton = style({
     transform: 'scale(0.99)',
   },
 });
+
+export const SpanText = style({
+  width: 'calc(100% - 25px)',
+  wordWrap: 'break-word',
+  overflowWrap: 'break-word',
+  marginTop: 5,
+});