style: [FE] 모바일 반응형 대응

모바일 반응형 대응 (#32)
d0422 · Nov 14, 2023 · afc75f6 · afc75f6
1 parent 77ecc64
commit afc75f6
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/frontEnd/src/pages/Home.tsx b/frontEnd/src/pages/Home.tsx
@@ -22,25 +22,25 @@ export default function Home() {
 
   return (
     <div className="h-[100vh] w-[100vw] bg-backgroundColor flex justify-center items-center py-[10vw] ">
-      <div className="flex flex-col basis-[50%] gap-[130px] justify-center items-center ">
+      <div className="flex flex-col basis-2/4 pc:gap-[130px] mobile:gap-[50px] justify-center items-center ">
         <div className="flex flex-col justify-center">
           <div className="text-[8.8vw] font-bold font-Pretendard ">AlgoITNi</div>
           <div className="text-[1.4vw]  font-Pretendard">AlgoITNi를 통해 동료, 친구와 함께 알고리즘을 학습해봐요!</div>
         </div>
-        <div className="flex items-center justify-center w-[37vw] gap-[10px] ">
-          <Button onClick={handleMakeRoomClick} fontSize="1.8vw">
+        <div className="flex items-center justify-center w-[37vw] gap-3">
+          <Button onClick={handleMakeRoomClick} fontSize="1.5vw">
             방생성
           </Button>
           <input
-            className="rounded-[15px] font-Pretendard px-[1.6vw] py-[14px] text-[1.8vw] w-[60%]"
+            className="rounded-2xl font-Pretendard px-[1.6vw] py-[14px] text-[1.5vw] w-3/5"
             value={inputValue}
             onChange={onChange}
             onKeyDown={handleKeyDown}
           />
 
           <button
             type="button"
-            className="text-[1.8vw] font-bold text-mainColor font-Pretendard"
+            className="text-[1.5vw] font-bold text-mainColor font-Pretendard"
             onClick={handleJoinRoomClick}
             style={{
               opacity: inputValue ? '1' : '0.4',
@@ -50,7 +50,7 @@ export default function Home() {
           </button>
         </div>
       </div>
-      <div className="basis-[50%] max-w-[500px] max-h-[500px] ">
+      <div className="basis-2/4 max-w-[600px] max-h-[600px] mobile:hidden">
         <img src="/main.png" alt="main" />
       </div>
     </div>