Merge pull request #338 from KW-ClassLog/Fix/#337/login

🐛 Fix/#337 로그인화면 로고 이미지로 변경 및 input밖으로 텍스트 삐져나오는거 해결

Author: iinuyha

frontend/app/(non-login)/login/_components/LeftSection.tsx

@@ -8,7 +8,13 @@ export default function LeftSection() {
   return (
     <div className={styles.leftSection}>
       <div className={styles.textWrapper}>
-        <h1>CLASSLOG,</h1>
+        <Image
+          src={IMAGES.logo4}
+          alt="ClassLog Logo"
+          width={500}
+          height={120}
+          className={styles.logo}
+        />
         <h2>당신의 강의를 더 스마트하게</h2>
 
         <p>수업 녹음, 실시간 소통, AI 기반 퀴즈 생성을 통해</p>

frontend/app/(non-login)/login/page.module.scss

@@ -24,10 +24,19 @@
     margin: $spacing-3xl 0px;
   }
 
-  h1 {
-    font-size: clamp(60px, 7.5vw, 100px);
-    font-weight: bold;
-    font-family: $font-logo;
+  .logo {
+    width: clamp(400px, 7.5vw, 300px);
+    height: auto;
+    object-fit: contain;
+    transition: $transition-default;
+
+    @include respond-to(lg) {
+      width: clamp(300px, 7.5vw, 200px);
+    }
+
+    @include respond-to(md) {
+      width: clamp(200px, 7.5vw, 100px);
+    }
   }
 
   h2 {

frontend/app/(non-login)/signup/page.module.scss

@@ -23,6 +23,9 @@
   display: flex;
   gap: $spacing-md;
   width: 100%;
+  @media (max-width: 300px) {
+    flex-direction: column;
+  }
 }
 
 .teacherButton,
@@ -57,7 +60,7 @@
   display: flex;
   flex-direction: row;
   gap: $spacing-md;
-  align-items: first baseline;
+  align-items: center;
   & > :first-child {
     flex: 3;
   }

frontend/components/Input/BasicInput/BasicInput.module.scss

@@ -1,5 +1,8 @@
 .wrapper {
   width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .label {

frontend/constants/images.ts

@@ -2,6 +2,7 @@
 import logo1 from "@/public/images/logo1.png";
 import logo2 from "@/public/images/logo2.png";
 import logo3 from "@/public/images/logo3.png";
+import logo4 from "@/public/images/logo4.png";
 import introImage from "@/public/images/intro_image.png";
 import qrCode from "@/public/images/QRcode.png";
 import kakaoLogo from "@/public/images/kakao_logo.png";
@@ -25,6 +26,7 @@ export const IMAGES = {
   logo1,
   logo2,
   logo3,
+  logo4,
   introImage,
   qrCode,
   kakaoLogo,