[Feat] 구글 로그인 기능 및 웨더바 표시 #34, #10

package.json

@@ -15,6 +15,7 @@
     "@mui/material": "^5.14.18",
     "axios": "^1.6.2",
     "next": "14.0.3",
+    "next-auth": "^4.24.5",
     "react": "^18",
     "react-dom": "^18",
     "recoil": "^0.7.7",

src/app/detail/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import WeatherBar from "@/component/WeatherBar";
+import Image from "next/image";
+
+export default function Detail(): JSX.Element {
+  return (
+    <div className="container">
+      <div className="w-full h-12 flex items-center ">
+        <Image src="/images/back.svg" width={15} height={15} alt="back" />
+      </div>
+      <hr className="w-full h-px" />
+      <WeatherBar />
+      <hr className="w-full h-px" />
+    </div>
+  );
+}

src/app/login/page.tsx

@@ -1,17 +1,32 @@
 "use client";
-import { Link } from "@mui/icons-material";
 import "../../style/login.scss";
 import CloseIcon from "@mui/icons-material/Close";
 import Menubar from "../../component/MenuBar";
 import { useState, ChangeEvent, FormEvent, useEffect } from "react";
 import axios from "axios";
-import { useRouter } from "next/navigation";
 
 export default function Login() {
-  const router = useRouter();
   const [email, setEmail] = useState<string>("");
   const [pw, setPw] = useState<string>("");
 
+  useEffect(() => {
+    // 페이지 로드 시 URL에서 access_token 파싱
+    const urlParams = new URLSearchParams(window.location.hash.substring(1));
+    const accessToken = urlParams.get("access_token");
+
+    // accessToken을 로컬 스토리지에 저장 또는 백엔드로 전송
+    if (accessToken) {
+      localStorage.setItem("accessToken", accessToken);
+    }
+  }, []);
+
+  const onGoogleSocialLogin = async () => {
+    window.location.href =
+      "https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.metadata.readonly&include_granted_scopes=true&response_type=token&redirect_uri=https%3A%2F%2Fwww.jerneithe.site%2Fuser%2Flogin%2Foauth2%2Fcode%2Fgoogle&client_id=453423602833-7db2b1dbicre47rkcrpfgn20nd16l9rs.apps.googleusercontent.com&service=lso&o2v=2&theme=glif&flowName=GeneralOAuthFlow";
+  };
+
+  // 일반 로그인
+
   const handleLogin = async (e: FormEvent) => {
     e.preventDefault();
 
@@ -27,13 +42,13 @@ export default function Login() {
     } catch (error) {
       console.error("login error: ", error);
     }
-
   };
 
   const handleInputChange =
     (setState: React.Dispatch<React.SetStateAction<string>>) =>
-    (e: ChangeEvent<HTMLInputElement>) =>
+    (e: ChangeEvent<HTMLInputElement>) => {
       setState(e.target.value);
+    };
 
   return (
     <div className="container">
@@ -75,7 +90,12 @@ export default function Login() {
       <br />
       <br />
       <div className="login_easy">
-        <hr /> 간편 로그인 <hr />
+        <div>
+          <hr /> 간편 로그인 <hr />
+        </div>
+        <button className="" onClick={onGoogleSocialLogin}>
+          구글 소셜 로그인
+        </button>
       </div>
       <Menubar />
     </div>

src/app/register/page.tsx

@@ -4,16 +4,15 @@ import "../../style/register.scss";
 import { useState } from "react";
 import InputBar from "@/component/InputBar";
 import Menubar from "@/component/MenuBar";
-
 import axios from "axios";
 
 ///////////////////////////해야하는 작업/////////////////////////////
 
 // 희성이형하고 같이해야함
-//1. 비밀번호 확인 기능 
-//2. 이메일 인증 전에는 데이터 전송을 해주지 않고, 이메일 전송을 통해 토큰을 받았을때만 
+//1. 비밀번호 확인 기능
+//2. 이메일 인증 전에는 데이터 전송을 해주지 않고, 이메일 전송을 통해 토큰을 받았을때만
 // 회원가입 데이터를 전송해주는 기능
-//3. 소셜데이터 로그인 버튼과 소셜 로그인 기능 
+//3. 소셜데이터 로그인 버튼과 소셜 로그인 기능
 
 ///////////////////////////////////////////////////////////////////
 export default function Register(): JSX.Element {
@@ -44,40 +43,34 @@ export default function Register(): JSX.Element {
     return inputValue === password;
   };
 
-  const verify_btn = async() => {
+  const verify_btn = async () => {
     console.log("Verify 버튼이 클릭되었습니다.");
 
-    const verify_email =  await axios({
-      method : "POST",
-      url : "https://www.jerneithe.site/user/profile",
-      data : email
+    const verify_email = await axios({
+      method: "POST",
+      url: "https://www.jerneithe.site/user/profile",
+      data: email,
     });
+  };
 
-
-  }
-
-  const caster_register = async() => {
+  const caster_register = async () => {
     const req_regdata = {
       email,
       name,
       nickname,
       password,
-      repassword,  
-    }
+      repassword,
+    };
 
     console.log(req_regdata);
 
-    const register_data =  await axios({
-      method : "POST",
-      url : "https://www.jerneithe.site/user/signup",
-      data : req_regdata
+    const register_data = await axios({
+      method: "POST",
+      url: "https://www.jerneithe.site/user/signup",
+      data: req_regdata,
     });
-
-
-
   };
 
-
   return (
     <div className="container">
       <div id="x-div">