[Feature/#280] 네이버, 구글 로그인 연동 및 로그인 모달 설정

src/apis/hooks/pots/useGetPots.ts

@@ -5,12 +5,18 @@ import { GetPotsParams } from "apis/types/pot";
 const useGetPots = ({
   page,
   size,
-  recruitmentRole,
+  recruitmentRoles,
   onlyMine,
 }: GetPotsParams) => {
   return useQuery({
-    queryKey: ["pots", page, recruitmentRole, onlyMine],
-    queryFn: () => GetPots({ page, size, recruitmentRole, onlyMine }),
+    queryKey: ["pots", page, size, recruitmentRoles ?? null, onlyMine],
+    queryFn: () =>
+      GetPots({
+        page,
+        size,
+        recruitmentRoles: recruitmentRoles ?? null,
+        onlyMine,
+      }),
     select: (data) => data.result,
   });
 };

src/apis/hooks/users/useGetSignIn.ts

@@ -1,13 +1,24 @@
 import routes from "@constants/routes";
 import { useMutation } from "@tanstack/react-query";
-import { getKakaoLogIn } from "apis/userAPI";
+import { getGoogleLogIn, getKakaoLogIn, getNaverLogIn } from "apis/userAPI";
 import { useNavigate } from "react-router-dom";
 
-const useGetSignIn = () => {
+const useGetSignIn = (signInType: string | undefined) => {
   const navigate = useNavigate();
 
   return useMutation({
-    mutationFn: (code: string) => getKakaoLogIn(code),
+    mutationFn: (code: string) => {
+      switch (signInType) {
+        case "google":
+          return getGoogleLogIn(code);
+        case "kakao":
+          return getKakaoLogIn(code);
+        case "naver":
+          return getNaverLogIn(code);
+        default:
+          throw new Error(`Invalid login type: ${signInType}`);
+      }
+    },
     onSuccess: (data) => {
       if (data.result) {
         const { accessToken, refreshToken } = data.result.tokenServiceResponse;

src/apis/potAPI.ts

@@ -32,13 +32,13 @@ export const PostPot = async (postPotParams: PostPotParams) => {
 export const GetPots = async ({
   page,
   size,
-  recruitmentRole,
+  recruitmentRoles,
   onlyMine,
 }: GetPotsParams) => {
   return authApiGet<PotsResponse>("pots", {
     page,
     size,
-    recruitmentRole,
+    recruitmentRoles,
     onlyMine,
   });
 };

src/apis/types/pot.ts

@@ -40,7 +40,7 @@ export interface RecruitmentDetailResponse {
 export interface GetPotsParams {
   page: number;
   size: number;
-  recruitmentRole: string | null;
+  recruitmentRoles: string | null;
   onlyMine: boolean;
 }
 

src/apis/userAPI.ts

@@ -28,10 +28,18 @@ import {
   PostPotResponse,
 } from "./types/pot";
 
+export const getGoogleLogIn = async (code: string) => {
+  return apiGet<LogInResponse>("/users/oauth/google", { code });
+};
+
 export const getKakaoLogIn = async (code: string) => {
   return apiGet<LogInResponse>("/users/oauth/kakao", { code });
 };
 
+export const getNaverLogIn = async (code: string) => {
+  return apiGet<LogInResponse>("/users/oauth/naver", { code });
+};
+
 export const GetMyUser = async () => {
   return authApiGet<GetUserResponse>("/users");
 };
@@ -53,6 +61,15 @@ export const postNickname = async (nickname: string) => {
   });
 };
 
+// export const GetMyPage = async ({ dataType }: GetMyPageParams) => {
+//   if (dataType === "feed") {
+//     return authApiGet<MyPageResponse>("/users/mypages");
+//   } else if (dataType === "pot") {
+//     return authApiGet<MyPageResponse>("/users/mypages", { dataType });
+//   } else {
+//     return authApiGet<DescriptionResponse>("/users/description");
+//   }
+// };
 export const getMyPageFeeds = async ({
   nextCursor,
   size,

src/components/cards/CtaCard/CtaCard.tsx

@@ -7,6 +7,8 @@ import {
 } from "./CtaCard.style";
 import { useNavigate } from "react-router-dom";
 import routes from "@constants/routes";
+import { useState } from "react";
+import LoginModal from "@components/commons/Modal/LoginModal/LoginModal";
 import { SproutImage } from "@assets/images";
 
 interface CtaCardProps {
@@ -15,10 +17,13 @@ interface CtaCardProps {
 
 const CtaCard: React.FC<CtaCardProps> = ({ type }: CtaCardProps) => {
   const navigate = useNavigate();
-  const accessToken = localStorage.getItem("accessToken");
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
 
   const handleClick = () => {
-    if (accessToken) {
+    const token = localStorage.getItem("accessToken");
+    if (token === null) {
+      setIsLoginModalOpen(true);
+    } else {
       if (type === "feed") {
         navigate(routes.writePost);
       } else if (type === "pot") {
@@ -29,19 +34,24 @@ const CtaCard: React.FC<CtaCardProps> = ({ type }: CtaCardProps) => {
   };
 
   return (
-    <div css={container} onClick={handleClick}>
-      <img css={profileImageStyle} src={SproutImage} />
-      <p css={bodyTextStyle}>
-        {type == "feed"
-          ? "오늘 작업하다가 무슨 일이 있었냐면..."
-          : "꿈을 현실로 옮길 시간이에요. 팟을 만들고 팀원을 모집해 볼까요?"}
-      </p>
-      <div css={buttonContainer}>
-        <Button variant="cta" onClick={handleClick}>
-          {type == "feed" ? "피드 작성" : "팟 만들기"}
-        </Button>
+    <>
+      <div css={container} onClick={handleClick}>
+        <img css={profileImageStyle} src={SproutImage} />
+        <p css={bodyTextStyle}>
+          {type == "feed"
+            ? "오늘 작업하다가 무슨 일이 있었냐면..."
+            : "꿈을 현실로 옮길 시간이에요. 팟을 만들고 팀원을 모집해 볼까요?"}
+        </p>
+        <div css={buttonContainer}>
+          <Button variant="cta" onClick={handleClick}>
+            {type == "feed" ? "피드 작성" : "팟 만들기"}
+          </Button>
+        </div>
       </div>
-    </div>
+      {isLoginModalOpen && (
+        <LoginModal onCancel={() => setIsLoginModalOpen(false)} />
+      )}
+    </>
   );
 };
 export default CtaCard;

src/components/commons/Modal/LoginModal/LoginModal.tsx

@@ -20,13 +20,21 @@ interface LoginModalProps {
 }
 
 const LoginModal: React.FC<LoginModalProps> = ({ onCancel }) => {
-  const googleLoginLink = "";
+  const googleLoginLink = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${
+    import.meta.env.VITE_REST_GOOGLE_API_KEY
+  }&redirect_uri=${
+    import.meta.env.VITE_GOOGLE_REDIRECT_URI
+  }&response_type=code&scope=email`;
+
   const kakaoLoginLink = `https://kauth.kakao.com/oauth/authorize?client_id=${
     import.meta.env.VITE_REST_API_KEY
   }&redirect_uri=${import.meta.env.VITE_REDIRECT_URI}&response_type=code
 &scope=account_email
 &prompt=login`;
-  const naverLoginLink = "";
+
+  const naverLoginLink = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${
+    import.meta.env.VITE_REST_NAVER_API_KEY
+  }&redirect_uri=${import.meta.env.VITE_NAVER_REDIRECT_URI}`;
 
   const handleLogin = (link: string) => {
     window.location.href = link;

src/components/layouts/SideBar/SideBar.tsx

@@ -1,6 +1,15 @@
 import React, { useState, useEffect } from "react";
 import { NavLink } from "react-router-dom";
-import { MyPotIcon, HomeIcon, HomeFilledIcon, PotIcon, LogoFilledIcon, ChatIcon, MyPotFilledIcon, ChatFilledIcon } from "@assets/svgs";
+import {
+  MyPotIcon,
+  HomeIcon,
+  HomeFilledIcon,
+  PotIcon,
+  LogoFilledIcon,
+  ChatIcon,
+  MyPotFilledIcon,
+  ChatFilledIcon,
+} from "@assets/svgs";
 import {
   container,
   iconStyle,
@@ -11,37 +20,38 @@ import {
   menuItemStyle,
 } from "./SideBar.style";
 import routes from "@constants/routes";
-
-
+import LoginModal from "@components/commons/Modal/LoginModal/LoginModal";
 
 const menuItems = [
   {
     to: routes.home,
     icon: <HomeIcon css={iconStyle} />,
     activeIcon: <HomeFilledIcon css={iconStyle} />,
-    label: '홈'
+    label: "홈",
   },
   {
     to: routes.pot.base,
     icon: <PotIcon css={potIconStyle} />,
     activeIcon: <LogoFilledIcon css={potIconStyle} />,
-    label: '모든팟',
+    label: "모든팟",
   },
   {
     to: routes.myPot.base,
     icon: <MyPotIcon css={iconStyle} />,
     activeIcon: <MyPotFilledIcon css={iconStyle} />,
-    label: '나의팟',
-  }, {
+    label: "나의팟",
+  },
+  {
     to: routes.chat,
     icon: <ChatIcon css={iconStyle} />,
     activeIcon: <ChatFilledIcon css={iconStyle} />,
-    label: '채팅',
+    label: "채팅",
   },
 ];
 
 const SideBar: React.FC = () => {
   const [top, setTop] = useState(0);
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
 
   useEffect(() => {
     const initialTop = window.innerHeight / 2 + window.scrollY;
@@ -67,31 +77,42 @@ const SideBar: React.FC = () => {
   }, []);
 
   return (
-    <div css={mainContainer(top)}>
-      <div css={container}>
-        {menuItems.map(({ to, icon, activeIcon, label }, index) => {
-          const accessToken = localStorage.getItem("accessToken");
-          const isPrivateRoute = to === routes.myPot.base || to === routes.chat;
-          const link = `https://kauth.kakao.com/oauth/authorize?client_id=${import.meta.env.VITE_REST_API_KEY}&redirect_uri=${import.meta.env.VITE_REDIRECT_URI}&response_type=code&scope=account_email&prompt=login`;
+    <>
+      <div css={mainContainer(top)}>
+        <div css={container}>
+          {menuItems.map(({ to, icon, activeIcon, label }, index) => {
+            const accessToken = localStorage.getItem("accessToken");
+            const isPrivateRoute =
+              to === routes.myPot.base || to === routes.chat;
 
-          return (
-            <NavLink
-              key={index}
-              to={!accessToken && isPrivateRoute ? link : to}
-              style={({ isActive }) => getNavLinkStyle(isActive)}
-              css={menuItemStyle}
-            >
-              {({ isActive }) => (
-                <>
-                  {isActive ? activeIcon : icon}
-                  <p css={labelStyle}>{label}</p>
-                </>
-              )}
-            </NavLink>
-          );
-        })}
+            return (
+              <NavLink
+                key={index}
+                to={to}
+                style={({ isActive }) => getNavLinkStyle(isActive)}
+                css={menuItemStyle}
+                onClick={(e) => {
+                  if (!accessToken && isPrivateRoute) {
+                    e.preventDefault();
+                    setIsLoginModalOpen(true);
+                  }
+                }}
+              >
+                {({ isActive }) => (
+                  <>
+                    {isActive ? activeIcon : icon}
+                    <p css={labelStyle}>{label}</p>
+                  </>
+                )}
+              </NavLink>
+            );
+          })}
+        </div>
       </div>
-    </div>
+      {isLoginModalOpen && (
+        <LoginModal onCancel={() => setIsLoginModalOpen(false)} />
+      )}
+    </>
   );
 };
 

src/pages/Callback/Callback.tsx

@@ -2,11 +2,15 @@ import { useEffect, useRef } from "react";
 import useGetSignIn from "apis/hooks/users/useGetSignIn";
 import { LoadingSpinnerIcon } from "@assets/svgs";
 import { container, iconStyle } from "./Callback.style";
+import { useNavigate, useParams } from "react-router-dom";
+import routes from "@constants/routes";
 
 const Callback: React.FC = () => {
+  const navigate = useNavigate();
+  const { loginType } = useParams();
   const isCodeProcessed = useRef(false);
   const code = new URL(window.location.href).searchParams.get("code");
-  const { mutate } = useGetSignIn();
+  const { mutate } = useGetSignIn(loginType);
 
   useEffect(() => {
     if (code && !isCodeProcessed.current) {
@@ -15,6 +19,13 @@ const Callback: React.FC = () => {
     }
   }, [code, mutate]);
 
+  useEffect(() => {
+    if (!loginType || !["google", "kakao", "naver"].includes(loginType)) {
+      console.error("Invalid loginType:", loginType);
+      navigate(routes.home);
+    }
+  }, [loginType]);
+
   return (
     <main css={container}>
       <LoadingSpinnerIcon css={iconStyle} />

src/pages/Home/Home.tsx

@@ -19,20 +19,19 @@ import "swiper";
 import { useNavigate } from "react-router-dom";
 import routes from "@constants/routes";
 import { Feed, PopularPots } from "./components";
+import { useState } from "react";
+import LoginModal from "@components/commons/Modal/LoginModal/LoginModal";
 
 const Home: React.FC = () => {
   const navigate = useNavigate();
-  const link = `https://kauth.kakao.com/oauth/authorize?client_id=${import.meta.env.VITE_REST_API_KEY
-    }&redirect_uri=${import.meta.env.VITE_REDIRECT_URI}&response_type=code
-&scope=account_email
-&prompt=login`;
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
 
   const handleClick = () => {
     const token = localStorage.getItem("accessToken");
     if (token) {
       navigate(routes.createPot);
     } else {
-      window.location.href = link;
+      setIsLoginModalOpen(true);
     }
   };
 
@@ -68,6 +67,9 @@ const Home: React.FC = () => {
           </div>
         </div>
       </main>
+      {isLoginModalOpen && (
+        <LoginModal onCancel={() => setIsLoginModalOpen(false)} />
+      )}
     </>
   );
 };