Merge pull request #403 from LEEJW1953/fe-main

[Feature] 메인페이지 반응형 UI 개선

Author: LEEJW1953

app/frontend/src/pages/Main/index.css.ts

@@ -3,10 +3,10 @@ import { style } from '@vanilla-extract/css';
 import { vars, fontStyle } from '@/styles';
 
 export const container = style({
-  position: 'relative',
   display: 'flex',
+  flexDirection: 'column',
   margin: '0 auto',
-  width: '104rem',
+  maxWidth: '104rem',
   height: '81.7rem',
   color: vars.color.grayscale400,
   background: vars.color.grayscaleWhite,
@@ -19,9 +19,9 @@ export const login = style({
 });
 
 export const mainImage = style({
-  width: '69.7rem',
-  height: '69.7rem',
-  alignSelf: 'flex-end',
+  width: '100%',
+  maxWidth: '69.7rem',
+  maxHeight: '69.7rem',
   objectFit: 'contain',
 });
 
@@ -31,12 +31,16 @@ export const text = style([
     color: vars.color.grayscale400,
     textAlign: 'right',
     lineHeight: '3.5rem',
+
+    '@media': {
+      'screen and (max-width:768px)': {
+        fontSize: '1.8rem',
+      },
+    },
   },
 ]);
 
 export const textArea = style({
-  position: 'absolute',
-  right: '0',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-end',
@@ -50,5 +54,11 @@ export const title = style([
     justifyContent: 'center',
     textAlign: 'center',
     color: vars.color.morakGreen,
+
+    '@media': {
+      'screen and (max-width:768px)': {
+        fontSize: '4.8rem',
+      },
+    },
   },
 ]);

app/frontend/src/pages/Main/index.tsx

@@ -15,7 +15,6 @@ export function MainPage() {
 
   return (
     <div className={styles.container}>
-      <img src={MAIN_IMAGE} alt="main" className={styles.mainImage} />
       <div className={styles.textArea}>
         <div className={styles.title}>morak</div>
         <div className={styles.text}>
@@ -38,6 +37,7 @@ export function MainPage() {
           )}
         </div>
       </div>
+      <img src={MAIN_IMAGE} alt="main" className={styles.mainImage} />
     </div>
   );
 }