From ccd8b0c8aa0f579614f1855c06e0c2a7edc01fcd Mon Sep 17 00:00:00 2001 From: Woorim Kim Date: Fri, 31 May 2024 03:01:10 +0900 Subject: [PATCH] =?UTF-8?q?[feat/#510]=20:sparkles:=20Feat:=20=ED=80=B4?= =?UTF-8?q?=EC=A6=88=20=ED=92=80=EC=9D=B4=EB=B0=A9=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/AnswerArea/AnswerArea.css.ts | 16 ++ .../QuestionArea/QuestionArea.css.ts | 15 ++ .../QuestionProgress/QuestionProgess.tsx | 10 +- .../QuestionProgress/QuestionProgress.css.ts | 24 +++ .../[id]/_components/UserGrid/UserGrid.css.ts | 158 ++++++++++++------ .../[id]/_components/UserGrid/UserGrid.tsx | 40 ++++- .../src/app/(game)/quiz-room/[id]/page.css.ts | 95 ++++++++++- .../src/app/(game)/quiz-room/[id]/page.tsx | 10 +- .../_components/ReadyButton/ReadyButton.tsx | 1 - .../_components/BarSpinner/BarSpinner.css.ts | 8 +- 10 files changed, 308 insertions(+), 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 index 6e516fb7dd..45767dc216 100644 --- 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 index 54a2c0a493..2775b02eee 100644 --- 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 index 3b45f0db2b..1f802f4c5c 100644 --- 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} /> {index + 1} @@ -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} /> {index + 1} 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 index 7ceab15a89..2d8ce43f50 100644 --- 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 index be190ae624..69dd5b4981 100644 --- 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,89 +1,81 @@ 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({ @@ -91,6 +83,12 @@ export const EmojiContainer = style({ 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', + }, + }, +}); diff --git a/chatty-fe/src/app/(game)/quiz-room/[id]/_components/UserGrid/UserGrid.tsx b/chatty-fe/src/app/(game)/quiz-room/[id]/_components/UserGrid/UserGrid.tsx index 4bb879e77b..890ce14b9b 100644 --- a/chatty-fe/src/app/(game)/quiz-room/[id]/_components/UserGrid/UserGrid.tsx +++ b/chatty-fe/src/app/(game)/quiz-room/[id]/_components/UserGrid/UserGrid.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import * as styles from './UserGrid.css'; import Image from 'next/image'; import useUserInfoStore from '@/app/_store/useUserInfoStore'; @@ -16,6 +16,21 @@ type UserGridProps = { export default function UserGrid({ submitStatus }: UserGridProps) { const { id: userId } = useUserInfoStore(); + const containerRef = useRef(null); + const [containerWidth, setContainerWidth] = useState(0); + + useEffect(() => { + const handleResize = () => { + if (containerRef.current) { + const containerWidth = containerRef.current.offsetWidth; + setContainerWidth(containerWidth); + } + }; + + handleResize(); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); useEffect(() => { console.log('submitStatus:', submitStatus); @@ -25,7 +40,7 @@ export default function UserGrid({ submitStatus }: UserGridProps) { }, [submitStatus, userId]); return ( -
+
profile
-
- +
+ {submitStatus.find((status) => status.userId === userId)?.nickname}
@@ -76,15 +93,20 @@ export default function UserGrid({ submitStatus }: UserGridProps) { className={ status.isSolved ? styles.SolvedUserImage : styles.UserImage } + style={{ + width: (containerWidth - 75) / 3, + height: (containerWidth - 75) / 3, + }} > profile
-
{status.nickname}
+
{status.nickname}
) : null, )} diff --git a/chatty-fe/src/app/(game)/quiz-room/[id]/page.css.ts b/chatty-fe/src/app/(game)/quiz-room/[id]/page.css.ts index 5d219836ab..fc13b980e5 100644 --- a/chatty-fe/src/app/(game)/quiz-room/[id]/page.css.ts +++ b/chatty-fe/src/app/(game)/quiz-room/[id]/page.css.ts @@ -4,34 +4,79 @@ import { style } from '@vanilla-extract/css'; export const Main = style({ display: 'flex', width: '100%', - justifyContent: 'center', + maxWidth: 1830, gap: 30, + height: '100%', + position: 'relative', }); export const MainContainer = style({ + maxWidth: 1314, + width: 'calc(73% - 15px)', + height: '100%', display: 'flex', flexDirection: 'column', - width: '100%', - maxWidth: 1372, gap: 30, + '@media': { + '(max-width: 768px)': { + maxWidth: 768, + width: '100%', + position: 'absolute', + gap: 12, + top: 130, + left: 0, + zIndex: 10, + height: 'calc(100% - 130px)', + }, + }, +}); + +export const StatusContainer = style({ + maxWidth: 486, + width: 'calc(28% - 15px)', + display: 'flex', + position: 'relative', + height: '100%', + '@media': { + '(max-width: 768px)': { + maxWidth: 768, + width: '100%', + position: 'absolute', + top: 0, + left: 0, + zIndex: 10, + height: 120, + }, + }, }); export const Container = style({ display: 'flex', - flex: 1, flexDirection: 'column', borderRadius: 20, backgroundColor: globals.color.blue_7, maxWidth: 1372, width: '100%', + height: '100%', padding: 20, justifyContent: 'space-between', + '@media': { + '(max-width: 768px)': { + padding: 16, + overflowY: 'scroll', + }, + }, }); export const ContentsWrapper = style({ display: 'flex', flexDirection: 'column', gap: 30, + '@media': { + '(max-width: 768px)': { + gap: 12, + }, + }, }); export const Navigation = style({ @@ -39,12 +84,22 @@ export const Navigation = style({ justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, + '@media': { + '(max-width: 768px)': { + marginBottom: 0, + }, + }, }); export const RoundWrapper = style({ color: globals.color.blue_main, fontSize: 40, fontFamily: 'var(--bagel-font)', + '@media': { + '(max-width: 768px)': { + fontSize: 20, + }, + }, }); export const QuestionContainer = style({ @@ -53,12 +108,23 @@ export const QuestionContainer = style({ gap: 50, alignItems: 'center', justifyContent: 'center', + '@media': { + '(max-width: 768px)': { + gap: 12, + }, + }, }); export const ButtonWrapper = style({ display: 'flex', margin: '50px auto', width: 252, + '@media': { + '(max-width: 768px)': { + width: '100%', + margin: '20px auto', + }, + }, }); export const UserContainer = style({ @@ -79,10 +145,31 @@ export const StatusWrapper = style({ justifyContent: 'flex-end', alignItems: 'center', gap: 24, + '@media': { + '(max-width: 768px)': { + minHeight: '80px', + gap: 12, + }, + }, +}); + +export const StatusText = style({ + fontSize: 16, + '@media': { + '(max-width: 768px)': { + fontSize: 12, + textAlign: 'center', + }, + }, }); export const Count = style({ fontSize: 40, fontFamily: 'var(--bagel-font)', color: '#ffb526', + '@media': { + '(max-width: 768px)': { + fontSize: 26, + }, + }, }); diff --git a/chatty-fe/src/app/(game)/quiz-room/[id]/page.tsx b/chatty-fe/src/app/(game)/quiz-room/[id]/page.tsx index caead0f154..2d9cfaf885 100644 --- a/chatty-fe/src/app/(game)/quiz-room/[id]/page.tsx +++ b/chatty-fe/src/app/(game)/quiz-room/[id]/page.tsx @@ -327,7 +327,7 @@ const QuizRoom = ({ params }: { params: { id: number } }) => { ) : ( '' )} -
+
{count !== null ? '과반수 이상이 제출하였습니다.' : isAnswered @@ -348,7 +348,13 @@ const QuizRoom = ({ params }: { params: { id: number } }) => {
- +
+ +
{isOpen ? ( (false); const { Modal, isOpen, openModal, closeModal } = useModal(); const [isCopied, setIsCopied] = useState(false); - const [isHovered, setIsHovered] = useState(false); useEffect(() => { setIsReady( diff --git a/chatty-fe/src/app/_components/BarSpinner/BarSpinner.css.ts b/chatty-fe/src/app/_components/BarSpinner/BarSpinner.css.ts index 6000c824d1..3cf5b49013 100644 --- a/chatty-fe/src/app/_components/BarSpinner/BarSpinner.css.ts +++ b/chatty-fe/src/app/_components/BarSpinner/BarSpinner.css.ts @@ -14,10 +14,14 @@ export const Container = style({ border: `1.5px solid #ffb526`, height: 40, width: 40, - position: 'relative', - // 분침 + '@media': { + '(max-width: 768px)': { + transform: 'scale(0.6)', + }, + }, + // 분침 '::after': { content: '""', position: 'absolute',