[Feat] 구글 로그인 기능 구현 #34

package.json

@@ -13,10 +13,13 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.18",
     "@mui/material": "^5.14.18",
+    "@react-oauth/google": "^0.12.1",
     "axios": "^1.6.2",
     "next": "14.0.3",
+    "next-auth": "^4.24.5",
     "react": "^18",
     "react-dom": "^18",
+    "react-google-login": "^5.2.2",
     "recoil": "^0.7.7",
     "sass": "^1.69.5"
   },

src/app/detail/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import WeatherBar from "@/component/WeatherBar";
+
+export default function Detail(): JSX.Element {
+  return (
+    <>
+      <></>
+      <WeatherBar />
+    </>
+  );
+}

src/app/login/page.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { Link } from "@mui/icons-material";
 import "../../style/login.scss";
 import CloseIcon from "@mui/icons-material/Close";
 import Menubar from "../../component/MenuBar";
@@ -8,10 +7,29 @@ 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);
+      // 백엔드로 전송하려면 이곳에서 API 호출을 수행할 수 있습니다.
+      // axios.post('/api/authenticate', { 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();
 
@@ -32,8 +50,9 @@ export default function Login() {
 
   const handleInputChange =
     (setState: React.Dispatch<React.SetStateAction<string>>) =>
-    (e: ChangeEvent<HTMLInputElement>) =>
+    (e: ChangeEvent<HTMLInputElement>) => {
       setState(e.target.value);
+    };
 
   return (
     <div className="container">
@@ -75,7 +94,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>