Merge pull request #543 from Team-WeQuiz/feat/#542

[FE] 튜토리얼 스타일 수정
Team-WeQuiz · May 30, 2024 · b69ffff · b69ffff
2 parents 1ec50d8 + ddbbf05
commit b69ffff
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 14 deletions.
diff --git a/chatty-fe/src/app/_components/Header/Header.css.ts b/chatty-fe/src/app/_components/Header/Header.css.ts
@@ -82,7 +82,13 @@ export const musicPlayButton = style({
 export const ModalContainer = style({
   width: '60vw',
   maxWidth: 890,
-  height: '80vh',
+  height: '100%',
+  '@media': {
+    '(max-width: 768px)': {
+      width: '100%',
+      height: '100%',
+    },
+  },
 });
 
 export const LogoWrapper = style({});
@@ -112,6 +118,13 @@ export const ContentsBox = style({
   boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
   color: '#fff',
   transition: 'background-color 0.3s',
+  '@media': {
+    '(max-width: 768px)': {
+      width: '100%',
+      height: 32,
+      minHeight: 32,
+    },
+  },
 });
 
 export const ContentsWrapper = recipe({
@@ -123,6 +136,11 @@ export const ContentsWrapper = recipe({
     justifyContent: 'center',
     gap: 24,
     margin: '12px 0',
+    '@media': {
+      '(max-width: 768px)': {
+        width: '100%',
+      },
+    },
   },
   variants: {
     visible: {
@@ -143,6 +161,11 @@ export const ImageWrapper = style({
   alignItems: 'center',
   width: '100%',
   height: 300,
+  '@media': {
+    '(max-width: 768px)': {
+      height: 150,
+    },
+  },
 });
 
 export const ContentsTextWrapper = style({
@@ -154,3 +177,24 @@ export const ContentsTextWrapper = style({
   gap: 12,
   wordBreak: 'keep-all',
 });
+
+export const BoldText = style({
+  fontSize: '1rem',
+  fontWeight: '700',
+  '@media': {
+    '(max-width: 768px)': {
+      fontSize: '0.8rem',
+    },
+  },
+});
+
+export const ContentsText = style({
+  fontSize: '1rem',
+  fontWeight: '400',
+  color: globals.color.black_2,
+  '@media': {
+    '(max-width: 768px)': {
+      fontSize: '0.8rem',
+    },
+  },
+});
diff --git a/chatty-fe/src/app/_components/Header/Header.tsx b/chatty-fe/src/app/_components/Header/Header.tsx
@@ -165,13 +165,15 @@ export default function Header() {
                 />
               </div>
               <div className={styles.ContentsTextWrapper}>
-                <p>
-                  <span style={{ fontWeight: 700 }}>방 제목</span>,{' '}
-                  <span style={{ fontWeight: 700 }}>설명</span>,{' '}
-                  <span style={{ fontWeight: 700 }}>인원 수</span>,{' '}
-                  <span style={{ fontWeight: 700 }}>문제 수</span>를 설정하세요.
+                <p className={styles.ContentsText}>
+                  <span className={styles.BoldText}>방 제목</span>,{' '}
+                  <span className={styles.BoldText}>설명</span>,{' '}
+                  <span className={styles.BoldText}>인원 수</span>,{' '}
+                  <span className={styles.BoldText}>문제 수</span>를 설정하세요.
+                </p>
+                <p className={styles.ContentsText}>
+                  닉네임을 입력하면, 퀴즈 방이 생성됩니다!
                 </p>
-                <p>닉네임을 입력하면, 퀴즈 방이 생성됩니다!</p>
               </div>
             </div>
             <div className={styles.ContentsBox} onClick={handlePlayVisibility}>
@@ -192,14 +194,14 @@ export default function Header() {
                 />
               </div>
               <div className={styles.ContentsTextWrapper}>
-                <p>
-                  <span style={{ fontWeight: 700 }}>엔터 키</span> 로도 답을
+                <p className={styles.ContentsText}>
+                  <span className={styles.BoldText}>엔터 키</span> 로도 답을
                   제출할 수 있습니다.
                 </p>
 
-                <p>
-                  <span style={{ fontWeight: 700 }}>과반수</span> 이상이 답을
-                  입력하면 <span style={{ fontWeight: 700 }}>3초</span> 뒤에
+                <p className={styles.ContentsText}>
+                  <span className={styles.BoldText}>과반수</span> 이상이 답을
+                  입력하면 <span className={styles.BoldText}>3초</span> 뒤에
                   자동으로 다음 문제로 넘어갑니다!
                 </p>
               </div>
@@ -225,8 +227,8 @@ export default function Header() {
                 />
               </div>
               <div className={styles.ContentsTextWrapper}>
-                <p>
-                  <span style={{ fontWeight: 700 }}>마이페이지</span> 에서 내가
+                <p className={styles.ContentsText}>
+                  <span className={styles.BoldText}>마이페이지</span> 에서 내가
                   풀었던 퀴즈의 결과를 언제든지 확인할 수 있습니다.
                 </p>
               </div>