Merge pull request #67 from SystemConsultantGroup/feat/42-loginPage

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

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

@@ -2,15 +2,16 @@
   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;
+  margin-bottom: 200px;
 }
 
 /* Desktop Default */
@@ -19,21 +20,21 @@
 /* Tablet Landscape */
 @media screen and (max-width: 1280px) {
   .loginContainer {
-    margin-top: 80px;
+    margin-top: 100px;
   }
 }
 
 /* Tablet Portrait */
 @media screen and (max-width: 1024px) {
   .loginContainer {
-    margin-top: 60px;
+    margin-top: 140px;
   }
 }
 
 /* Mobile Landscape and Small Tablets */
 @media screen and (max-width: 768px) {
   .loginContainer {
-    margin-top: 40px;
+    margin-top: 120px;
   }
 
   .pageContainer {
@@ -44,7 +45,7 @@
 /* Mobile Portrait */
 @media screen and (max-width: 480px) {
   .loginContainer {
-    margin-top: 20px;
+    margin-top: 80px;
   }
 
   .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>
+  );
 }

src/components/common/LoginBox/LoginBox.tsx

@@ -6,9 +6,9 @@ import classes from "./LoginBox.module.css";
 
 export function LoginBox() {
   const handleKakaoLogin = () => {
-    const kakaoClientId = "REST API KEY";
-    const redirectUri = "http://localhost:3000/auth";
-    const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${kakaoClientId}&redirect_uri=${redirectUri}/login/kakao`;
+    const kakaoClientId = "71c7a5552be46df39f8781d45361e718";
+    const redirectUri = "http://localhost:8000/auth/login/kakao";
+    const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${kakaoClientId}&redirect_uri=${redirectUri}`;
     window.location.href = kakaoUrl;
   };