From 0a245c87c00356a958de9be12bda8977a2cdda4c Mon Sep 17 00:00:00 2001 From: moony1204 Date: Fri, 30 Aug 2024 16:33:55 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[FEAT]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95=20#67?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(user)/(auth)/login}/loginPage.module.css | 12 ++++++------ src/app/(user)/(auth)/login/page.tsx | 14 ++++++++++---- src/components/pages/loginPage/loginPage.story.tsx | 9 --------- src/components/pages/loginPage/loginPage.tsx | 13 ------------- 4 files changed, 16 insertions(+), 32 deletions(-) rename src/{components/pages/loginPage => app/(user)/(auth)/login}/loginPage.module.css (83%) delete mode 100644 src/components/pages/loginPage/loginPage.story.tsx delete mode 100644 src/components/pages/loginPage/loginPage.tsx diff --git a/src/components/pages/loginPage/loginPage.module.css b/src/app/(user)/(auth)/login/loginPage.module.css similarity index 83% rename from src/components/pages/loginPage/loginPage.module.css rename to src/app/(user)/(auth)/login/loginPage.module.css index 1f5c9dcd..82a5a379 100644 --- a/src/components/pages/loginPage/loginPage.module.css +++ b/src/app/(user)/(auth)/login/loginPage.module.css @@ -2,7 +2,7 @@ display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: flex-start; min-height: 100vh; } @@ -10,7 +10,7 @@ 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 { diff --git a/src/app/(user)/(auth)/login/page.tsx b/src/app/(user)/(auth)/login/page.tsx index d65bc0d0..cf18b904 100644 --- a/src/app/(user)/(auth)/login/page.tsx +++ b/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 ; +export default function LoginPage() { + return ( +
+
+ +
+
+ ); } diff --git a/src/components/pages/loginPage/loginPage.story.tsx b/src/components/pages/loginPage/loginPage.story.tsx deleted file mode 100644 index 017946cd..00000000 --- a/src/components/pages/loginPage/loginPage.story.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import LoginPage from "./loginPage"; - -export default { - title: "Pages/LoginPage", - component: LoginPage, -}; - -export const Default = () => ; diff --git a/src/components/pages/loginPage/loginPage.tsx b/src/components/pages/loginPage/loginPage.tsx deleted file mode 100644 index cf18b904..00000000 --- a/src/components/pages/loginPage/loginPage.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; -import { LoginBox } from "@/components/common/LoginBox/LoginBox"; -import styles from "./loginPage.module.css"; - -export default function LoginPage() { - return ( -
-
- -
-
- ); -} From e94f5ceef97ecca5a4b7f57c86889ef641e45f00 Mon Sep 17 00:00:00 2001 From: moony1204 Date: Thu, 12 Sep 2024 10:31:10 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[FEAT]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=B0=B1=EC=97=94=EB=93=9C=20=EC=97=B0=EA=B2=B0,=20API=20KEY?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=ED=95=84=EC=9A=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(user)/(auth)/login/loginPage.module.css | 9 ++++--- src/app/(user)/(auth)/login/page.tsx | 26 ++++++++++++++++++- src/components/common/LoginBox/LoginBox.tsx | 2 +- 3 files changed, 31 insertions(+), 6 deletions(-) diff --git a/src/app/(user)/(auth)/login/loginPage.module.css b/src/app/(user)/(auth)/login/loginPage.module.css index 82a5a379..569b1e3e 100644 --- a/src/app/(user)/(auth)/login/loginPage.module.css +++ b/src/app/(user)/(auth)/login/loginPage.module.css @@ -11,6 +11,7 @@ align-items: center; justify-content: center; margin-top: 200px; + margin-bottom: 200px; } /* Desktop Default */ @@ -19,21 +20,21 @@ /* Tablet Landscape */ @media screen and (max-width: 1280px) { .loginContainer { - margin-top: 180px; + margin-top: 100px; } } /* Tablet Portrait */ @media screen and (max-width: 1024px) { .loginContainer { - margin-top: 160px; + margin-top: 140px; } } /* Mobile Landscape and Small Tablets */ @media screen and (max-width: 768px) { .loginContainer { - margin-top: 140px; + margin-top: 120px; } .pageContainer { @@ -44,7 +45,7 @@ /* Mobile Portrait */ @media screen and (max-width: 480px) { .loginContainer { - margin-top: 120px; + margin-top: 80px; } .pageContainer { diff --git a/src/app/(user)/(auth)/login/page.tsx b/src/app/(user)/(auth)/login/page.tsx index cf18b904..d0555ccf 100644 --- a/src/app/(user)/(auth)/login/page.tsx +++ b/src/app/(user)/(auth)/login/page.tsx @@ -1,8 +1,32 @@ -import React from "react"; +"use client"; + +import React, { useEffect } from "react"; +import { useRouter } from "next/navigation"; import { LoginBox } from "@/components/common/LoginBox/LoginBox"; import styles from "./loginPage.module.css"; +import axios from "axios"; export default function LoginPage() { + const router = useRouter(); + + useEffect(() => { + const handleKakaoLogin = async () => { + const code = new URLSearchParams(window.location.search).get("code"); + if (code) { + try { + await axios.get(`http://localhost:8000/auth/login/kakao?code=${code}`, { + withCredentials: true, + }); + router.push("/register"); + } catch (error) { + console.error("카카오 로그인 실패:", error); + } + } + }; + + handleKakaoLogin(); + }, [router]); + return (
diff --git a/src/components/common/LoginBox/LoginBox.tsx b/src/components/common/LoginBox/LoginBox.tsx index c8c5c4f7..e37b5a11 100644 --- a/src/components/common/LoginBox/LoginBox.tsx +++ b/src/components/common/LoginBox/LoginBox.tsx @@ -8,7 +8,7 @@ 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 kakaoUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${kakaoClientId}&redirect_uri=${redirectUri}`; window.location.href = kakaoUrl; }; From 7725a3fcbb7a45bf45043a9304067127d124eb67 Mon Sep 17 00:00:00 2001 From: moony1204 Date: Thu, 12 Sep 2024 15:49:37 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[FEAT]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(user)/(auth)/login/page.tsx | 26 +-------------------- src/components/common/LoginBox/LoginBox.tsx | 4 ++-- 2 files changed, 3 insertions(+), 27 deletions(-) diff --git a/src/app/(user)/(auth)/login/page.tsx b/src/app/(user)/(auth)/login/page.tsx index d0555ccf..cf18b904 100644 --- a/src/app/(user)/(auth)/login/page.tsx +++ b/src/app/(user)/(auth)/login/page.tsx @@ -1,32 +1,8 @@ -"use client"; - -import React, { useEffect } from "react"; -import { useRouter } from "next/navigation"; +import React from "react"; import { LoginBox } from "@/components/common/LoginBox/LoginBox"; import styles from "./loginPage.module.css"; -import axios from "axios"; export default function LoginPage() { - const router = useRouter(); - - useEffect(() => { - const handleKakaoLogin = async () => { - const code = new URLSearchParams(window.location.search).get("code"); - if (code) { - try { - await axios.get(`http://localhost:8000/auth/login/kakao?code=${code}`, { - withCredentials: true, - }); - router.push("/register"); - } catch (error) { - console.error("카카오 로그인 실패:", error); - } - } - }; - - handleKakaoLogin(); - }, [router]); - return (
diff --git a/src/components/common/LoginBox/LoginBox.tsx b/src/components/common/LoginBox/LoginBox.tsx index e37b5a11..d7261df7 100644 --- a/src/components/common/LoginBox/LoginBox.tsx +++ b/src/components/common/LoginBox/LoginBox.tsx @@ -6,8 +6,8 @@ import classes from "./LoginBox.module.css"; export function LoginBox() { const handleKakaoLogin = () => { - const kakaoClientId = "REST API KEY"; - const redirectUri = "http://localhost:3000/auth"; + 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; };