Merge pull request #177 from MBTips/feature/로그인-페이지-개발

feat: 로그인 페이지 ui 개선

Author: junjeeong

public/image/login/banner.png

@@ -4,13 +4,14 @@ const TermsAndPrivacy = ({
   openModal: (mode: "terms" | "privacy") => void;
 }) => {
   return (
-    <div className="flex items-center w-screen text-gray-900 text-sm">
+    <div className="relative flex items-center w-full text-gray-900 text-sm">
       <button
         onClick={() => openModal("terms")}
-        className="flex justify-center border-r w-full hover:font-bold"
+        className="flex justify-center w-full hover:font-bold"
       >
         이용약관
       </button>
+      <div className="absolute h-2.5 border-r left-[50%] bottom-1.5"></div>
       <button
         onClick={() => openModal("privacy")}
         className="w-full hover:font-bold"

public/image/login/banner_lg.png

@@ -2,8 +2,11 @@ import { useState } from "react";
 import KakaoLoginButton from "@/components/button/KakaoLoginButton";
 import TermsAndPrivacy from "@/components/TermsAndPrivacy";
 import TermsAndPrivacyModal from "@/components/modal/TermsAndPrivacyModal";
+import useLayoutSize from "@/hooks/useLayoutSize";
 
 const Login = () => {
+  const layoutSize = useLayoutSize();
+  const isPC = layoutSize === "lg";
   const [isModalOpen, setIsModalOpen] = useState<{isOpen : boolean, mode : "terms" | "privacy"}>({
     isOpen: false,
     mode: "terms",
@@ -16,17 +19,17 @@ const Login = () => {
     setIsModalOpen((state) => ({mode:state.mode, isOpen : false}));
   }
 
-  const isOpen = isModalOpen.isOpen
+  const isOpen = isModalOpen.isOpen;
   const isTerms = isModalOpen.mode === "terms";
 
   return (
-    <div className="flex flex-col items-center">
+    <main className="bg-white flex flex-col items-center h-[812px]">
       <img
-        src="/image/banner_login.png"
+        src={isPC ? "/image/login/banner_lg.png" : "/image/login/banner.png"}
         alt="로그인 페이지 이미지"
         className="w-full h-[391px]"
       />
-      <h1 className="mt-8 font-bold text-3xl text-center whitespace-pre-wrap">
+      <h1 className="mt-12 font-bold text-3xl text-center whitespace-pre-wrap">
         MBTI 성향 기반
         <br />
         AI 채팅 시뮬레이션으로
@@ -39,7 +42,7 @@ const Login = () => {
       <div className="mt-[47px]">
         <KakaoLoginButton />
       </div>
-      <div className="mt-[72px]">
+      <div className="w-full mt-auto mb-1">
         <TermsAndPrivacy openModal={openModal} />
       </div>
       {isOpen ? (
@@ -49,7 +52,7 @@ const Login = () => {
           <TermsAndPrivacyModal mode="privacy" closeModal={closeModal} />
         )
       ) : null}
-    </div>
+    </main>
   );
 };