[feat/#510] ✨ Feat: 퀴즈 풀이방 반응형 적용

Team-WeQuiz · May 30, 2024 · b507049 · b507049
1 parent 70da3e6
commit b507049
Show file tree

Hide file tree

Showing 10 changed files with 308 additions and 69 deletions.
diff --git a/chatty-fe/src/app/(game)/quiz-room/[id]/_components/AnswerArea/AnswerArea.css.ts b/chatty-fe/src/app/(game)/quiz-room/[id]/_components/AnswerArea/AnswerArea.css.ts
@@ -9,6 +9,11 @@ export const Container = style({
   borderRadius: 20,
   backgroundColor: globals.color.blue_6,
   width: '100%',
+  '@media': {
+    '(max-width: 768px)': {
+      gap: 8,
+    },
+  },
 });
 
 export const Wrapper = style({
@@ -18,6 +23,11 @@ export const Wrapper = style({
 export const Answer = style({
   fontSize: 40,
   fontFamily: 'var(--bagel-font)',
+  '@media': {
+    '(max-width: 768px)': {
+      fontSize: 20,
+    },
+  },
 });
 
 export const RadioButtonWrapper = style({
@@ -27,7 +37,13 @@ export const RadioButtonWrapper = style({
   borderRadius: 12,
   background: '#fff',
   padding: 20,
+  "@media": {
+    "(max-width: 768px)": {
+      padding: 12,
+    },
+  },
 });
+
 export const LabelWrapper = style({
   display: 'flex',
   padding: 4,

diff --git a/chatty-fe/src/app/(game)/quiz-room/[id]/_components/QuestionArea/QuestionArea.css.ts b/chatty-fe/src/app/(game)/quiz-room/[id]/_components/QuestionArea/QuestionArea.css.ts
@@ -9,6 +9,11 @@ export const Container = style({
   borderRadius: 20,
   backgroundColor: globals.color.blue_6,
   width: '100%',
+  '@media': {
+    '(max-width: 768px)': {
+      gap: 8,
+    },
+  },
 });
 
 export const TextBox = style({
@@ -20,9 +25,19 @@ export const TextBox = style({
   borderRadius: 8,
   background: '#fff',
   lineHeight: 1.5,
+  '@media': {
+    '(max-width: 768px)': {
+      padding: 12,
+    },
+  },
 });
 
 export const Question = style({
   fontSize: 40,
   fontFamily: 'var(--bagel-font)',
+  '@media': {
+    '(max-width: 768px)': {
+      fontSize: 20,
+    },
+  },
 });
diff --git a/chatty-fe/src/app/(game)/quiz-room/[id]/_components/QuestionProgress/QuestionProgess.tsx b/chatty-fe/src/app/(game)/quiz-room/[id]/_components/QuestionProgress/QuestionProgess.tsx
@@ -25,8 +25,9 @@ export default function QuestionProgess({
                 key={index}
                 src="/images/progress_round_blue.svg"
                 alt="progress_round_grey"
-                width={52}
-                height={52}
+                width={50}
+                height={50}
+                className={styles.MobileRound}
               />
               <span className={styles.TextBlue}>{index + 1}</span>
             </>
@@ -36,8 +37,9 @@ export default function QuestionProgess({
                 key={index}
                 src="/images/progress_round_grey.svg"
                 alt="progress_round_grey"
-                width={52}
-                height={52}
+                width={50}
+                height={50}
+                className={styles.MobileRound}
               />
               <span className={styles.TextGrey}>{index + 1}</span>
             </>

diff --git a/chatty-fe/src/app/(game)/quiz-room/[id]/_components/QuestionProgress/QuestionProgress.css.ts b/chatty-fe/src/app/(game)/quiz-room/[id]/_components/QuestionProgress/QuestionProgress.css.ts
@@ -5,6 +5,11 @@ export const Wrapper = style({
   display: 'flex',
   gap: 36,
   alignItems: 'center',
+  "@media" : {
+    "(max-width: 768px)": {
+      gap: 12,
+    }
+  }
 });
 
 export const WrapperColumn = style({
@@ -19,6 +24,15 @@ export const Container = style({
   display: 'inline-block',
 });
 
+export const MobileRound = style({
+  '@media': {
+    '(max-width: 768px)': {
+      width: 25,
+      height: 25,
+    },
+  },
+});
+
 export const TextGrey = style({
   position: 'absolute',
   top: '45%',
@@ -29,6 +43,11 @@ export const TextGrey = style({
   fontFamily: 'var(--bagel-font)',
   WebkitTextStrokeWidth: 1,
   WebkitTextStrokeColor: '#fff',
+  '@media': {
+    '(max-width: 768px)': {
+      fontSize: 16,
+    },
+  },
 });
 
 export const TextBlue = style({
@@ -41,4 +60,9 @@ export const TextBlue = style({
   fontFamily: 'var(--bagel-font)',
   WebkitTextStrokeWidth: 1,
   WebkitTextStrokeColor: '#fff',
+  '@media': {
+    '(max-width: 768px)': {
+      fontSize: 16,
+    },
+  },
 });
diff --git a/chatty-fe/src/app/(game)/quiz-room/[id]/_components/UserGrid/UserGrid.css.ts b/chatty-fe/src/app/(game)/quiz-room/[id]/_components/UserGrid/UserGrid.css.ts
@@ -1,96 +1,94 @@
 import { globals } from '@/app/globals.css';
 import { style } from '@vanilla-extract/css';
 
-export const Container = style({
-  display: 'flex',
-  width: 434,
-  height: 516,
-  alignItems: 'flex-start',
-  padding: '0 14.5px',
-  gap: 14.5,
-  flexShrink: 0,
-  flexWrap: 'wrap',
-});
-
 export const UserContainer = style({
   display: 'flex',
   flexDirection: 'column',
   padding: 12,
-  width: 458,
-  height: 902,
+  width: '100%',
+  height: '100%',
   borderRadius: 20,
   background: globals.color.blue_6,
   gap: 30,
+  '@media': {
+    '(max-width: 768px)': {
+      flexDirection: 'row',
+      gap: 8,
+    },
+  },
 });
 
 export const MyImage = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  width: 180,
-  height: 180,
-  borderRadius: 100,
+  borderRadius: '50%',
   overflow: 'hidden',
   background: '#fff',
   border: `5px solid transparent`,
   boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
+  maxWidth: 160,
+  maxHeight: 160,
+  '@media': {
+    '(max-width: 768px)': {
+      maxWidth: 45,
+      maxHeight: 45,
+    },
+  },
 });
 
 export const SolvedMyImage = style([
   MyImage,
   {
-    border: `5px solid ${globals.color.blue_main}`,
+    border: `5px solid ${globals.color.blue_2}`,
+    '@media': {
+      '(max-width: 768px)': {
+        border: `3px solid ${globals.color.blue_2}`,
+      },
+    },
   },
 ]);
 
-export const UserImage = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: 120,
-  height: 120,
-  borderRadius: 100,
-  overflow: 'hidden',
-  background: '#fff',
-  border: `5px solid transparent`,
-  boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
-});
-
-export const SolvedUserImage = style([
-  UserImage,
-  {
-    border: `5px solid ${globals.color.blue_main}`,
-  },
-]);
-
-export const UserBox = style({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  gap: 8,
-});
-
 export const MyContainer = style({
-  width: 434,
-  height: 360,
+  width: '100%',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
   background: '#fff',
   gap: 10,
+  padding: '20px 12px',
+  borderRadius: 16,
+  '@media': {
+    '(max-width: 768px)': {
+      justifyContent: 'flex-end',
+      width: 100,
+      padding: '3px 5px',
+      gap: 2,
+    },
+  },
 });
 
 export const MyNickname = style({
   fontSize: 20,
+  '@media': {
+    '(max-width: 768px)': {
+      display: 'none',
+    },
+  },
 });
 
 export const EmojiContainer = style({
   display: 'flex',
   gap: 10,
   alignItems: 'center',
   justifyContent: 'center',
+  '@media': {
+    '(max-width: 768px)': {
+      gap: 3,
+      transform: 'scale(0.5)',
+    },
+  },
 });
 
 export const EmojiWrapper = style({
@@ -104,3 +102,69 @@ export const EmojiWrapper = style({
   boxShadow: '0 0 10px rgba(0, 0, 0, 0.4)',
   cursor: 'pointer',
 });
+
+export const Container = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  width: '100%',
+  height: '100%',
+  alignContent: 'flex-start',
+  alignItems: 'flex-start',
+  padding: '0 12px',
+  gap: 12,
+  flexShrink: 0,
+  '@media': {
+    '(max-width: 768px)': {
+      width: 'calc(100% - 108px)',
+      gap: 4,
+      padding: 0,
+      alignContent: 'space-around',
+      overflowX: 'auto',
+    },
+  },
+});
+
+export const UserImage = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  overflow: 'hidden',
+  background: '#fff',
+  border: `5px solid transparent`,
+  boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
+  '@media': {
+    '(max-width: 768px)': {
+      maxWidth: 40,
+      maxHeight: 40,
+    },
+  },
+});
+
+export const SolvedUserImage = style([
+  UserImage,
+  {
+    border: `5px solid ${globals.color.blue_2}`,
+    '@media': {
+      '(max-width: 768px)': {
+        border: `3px solid ${globals.color.blue_2}`,
+      },
+    },
+  },
+]);
+
+export const UserBox = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: 8,
+});
+
+export const UserNickname = style({
+  '@media': {
+    '(max-width: 768px)': {
+      display: 'none',
+    },
+  },
+});