[FEAT] 로그인 페이지 구현 및 로그인 박스 수정

src/components/pages/loginPage/loginPage.module.css → src/app/(user)/(auth)/login/loginPage.module.css

@@ -2,15 +2,15 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   min-height: 100vh;
 }
 
 .loginContainer {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 100px;
+  margin-top: 200px;
 }
 
 /* Desktop Default */
@@ -19,21 +19,21 @@
 /* Tablet Landscape */
 @media screen and (max-width: 1280px) {
   .loginContainer {
-    margin-top: 80px;
+    margin-top: 180px;
   }
 }
 
 /* Tablet Portrait */
 @media screen and (max-width: 1024px) {
   .loginContainer {
-    margin-top: 60px;
+    margin-top: 160px;
   }
 }
 
 /* Mobile Landscape and Small Tablets */
 @media screen and (max-width: 768px) {
   .loginContainer {
-    margin-top: 40px;
+    margin-top: 140px;
   }
 
   .pageContainer {
@@ -44,7 +44,7 @@
 /* Mobile Portrait */
 @media screen and (max-width: 480px) {
   .loginContainer {
-    margin-top: 20px;
+    margin-top: 120px;
   }
 
   .pageContainer {

src/app/(user)/(auth)/login/page.tsx

@@ -1,7 +1,13 @@
-// src/app/(user)/(auth)/login/page.tsx
 import React from "react";
-import LoginPage from "@/components/pages/loginPage/loginPage";
+import { LoginBox } from "@/components/common/LoginBox/LoginBox";
+import styles from "./loginPage.module.css";
 
-export default function Page() {
-  return <LoginPage />;
+export default function LoginPage() {
+  return (
+    <div className={styles.pageContainer}>
+      <div className={styles.loginContainer}>
+        <LoginBox />
+      </div>
+    </div>
+  );
 }