[#179] 카카오 로그인 수정

src/app/(auth)/_components/simple-signUpIn.tsx

@@ -1,12 +1,14 @@
 import { Button, Icon } from "@/components";
+import randomStringGenerator from "@/utils/random-string-generator";
 import React from "react";
 
 const SimpleSignUpIn = () => {
-  const client_id = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;
-  const redirect_uri = process.env.NEXT_PUBLIC_REDIRECT_URI;
-  const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code`;
-
   const handleKakaoSignin = () => {
+    const state = randomStringGenerator(10);
+    const kakao_client_id = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;
+    const kakao_redirect_uri = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
+    const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${kakao_client_id}&redirect_uri=${kakao_redirect_uri}&response_type=code&state=${state}`;
+
     window.location.href = kakaoUrl;
   };
 
@@ -17,18 +19,18 @@ const SimpleSignUpIn = () => {
         <span className="text-gray-800">OR</span>
         <div className="h-px flex-1 bg-gray-300"></div>
       </div>
-      <div className="flex justify-between">
-        <span className="text-lg font-medium text-gray-800">
-          간편 로그인하기
+      <Button
+        type="button"
+        variant="none"
+        aria-label="kakao login"
+        onClick={handleKakaoSignin}
+        className="flex h-12 w-full items-center justify-center rounded bg-kakao"
+      >
+        <Icon icon="kakao" className="h-[42px] w-[42px]" />
+        <span className="text-lg font-medium text-gray-900">
+          카카오로 계속하기
         </span>
-        <Button
-          variant="none"
-          aria-label="kakao login"
-          onClick={handleKakaoSignin}
-        >
-          <Icon icon="kakao" className="h-[42px] w-[42px]" />
-        </Button>
-      </div>
+      </Button>
     </>
   );
 };

src/app/oauth/kakao/redirect.tsx

@@ -1,20 +1,21 @@
 "use client";
 
 import useToast from "@/hooks/use-toast";
-import { deleteCookie, setCookie } from "@/utils/cookie-utils";
+import { deleteCookie } from "@/utils/cookie-utils";
 import { setAuthCookies } from "@/utils/setAuthCookies";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useRef } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import randomStringGenerator from "@/utils/random-string-generator";
+import { LoadingSpinner } from "@/components";
+import instance from "@/utils/axios";
 
 const Redirect = () => {
   const searchParams = useSearchParams();
   const router = useRouter();
   const queryClient = useQueryClient();
-  const redirect_uri = process.env.NEXT_PUBLIC_REDIRECT_URI;
+  const kakao_redirect_uri = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
   const code = searchParams.get("code");
-  const state = randomStringGenerator(10);
+  const state = searchParams.get("state");
   const { success: ToastSuccess, error: ToastError } = useToast();
 
   const isProcessing = useRef(false);
@@ -28,25 +29,15 @@ const Redirect = () => {
         deleteCookie("accessToken");
         deleteCookie("refreshToken");
 
-        const response = await fetch(
-          `${process.env.NEXT_PUBLIC_API_URL}/auth/signIn/KAKAO`,
-          {
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              state: state,
-              redirectUri: redirect_uri,
-              token: code,
-            }),
-            method: "POST",
-          }
-        );
-        const data = await response.json();
+        const response = await instance.post("auth/signIn/KAKAO", {
+          state: state,
+          redirectUri: kakao_redirect_uri,
+          token: code,
+        });
 
-        if (!response.ok) throw new Error("로그인 실패");
+        const data = response.data;
 
         if (data.accessToken && data.refreshToken) {
-          setCookie("accessToken", data.accessToken);
-          setCookie("refreshToken", data.refreshToken);
           await setAuthCookies(data.accessToken, data.refreshToken);
         }
 
@@ -65,9 +56,13 @@ const Redirect = () => {
     };
 
     kakaoSignin();
-  }, [code, router, redirect_uri, ToastSuccess, ToastError, queryClient]);
+  }, [code, router, kakao_redirect_uri, ToastSuccess, ToastError, queryClient]);
 
-  return <div>카카오 로그인 중...</div>;
+  return (
+    <div className="h-screen w-full flex-center">
+      <LoadingSpinner className="h-10 w-10" />
+    </div>
+  );
 };
 
 export default Redirect;

src/components/gnb/header/mobile-sidebar.tsx

@@ -93,7 +93,7 @@ const MobileSidebar = ({ onClose }: MobileSidebarProps) => {
                   </Button>
                 </Link>
               </div>
-              <div onClick={onClose}>
+              <div onClick={onClose} className="mr-4">
                 <SidebarMenu
                   iconName="board"
                   title="자유게시판"

src/components/loading-spinner/loading-spinner.tsx

@@ -1,8 +1,10 @@
 import LottieAnimation from "@/components/lottie/LottieAnimation";
 import loader from "@/../public/animations/loader.json";
+import cn from "@/utils/clsx";
 
 interface LoadingSpinnerProps {
   ariaLabel?: string;
+  className?: string;
 }
 
 /**
@@ -14,11 +16,14 @@ interface LoadingSpinnerProps {
  *   {isPending ? <LoadingSpinner /> : "등록하기"}
  * </Button>
  */
-const LoadingSpinner = ({ ariaLabel = "로딩 중" }: LoadingSpinnerProps) => {
+const LoadingSpinner = ({
+  ariaLabel = "로딩 중",
+  className,
+}: LoadingSpinnerProps) => {
   return (
     <LottieAnimation
       animationData={loader}
-      className="h-5 w-5"
+      className={cn("h-5 w-5", className)}
       aria-label={ariaLabel}
     />
   );

src/utils/axios.ts

@@ -54,7 +54,13 @@ instance.interceptors.request.use(
     const url = config.url ?? "";
     const method = config.method?.toLocaleLowerCase();
 
-    const noTokenURls = ["/", "/signin", "/signup", "/auth/refresh-token"];
+    const noTokenURls = [
+      "/",
+      "/signin",
+      "/signup",
+      "/auth/refresh-token",
+      "/auth/signIn/KAKAO",
+    ];
     if (noTokenURls.includes(url)) {
       return config;
     }

src/utils/cookie-utils.ts

@@ -18,13 +18,3 @@ export const deleteCookie = (cookieName: string) => {
   document.cookie = `${cookieName}=; path=/; max-age=0; ${secureFlag}`;
   document.cookie = `${cookieName}=; max-age=0; ${secureFlag}`;
 };
-
-export const setCookie = (name: string, value: string) => {
-  const secureFlag = process.env.NODE_ENV === "production" ? "secure" : "";
-  let cookieString = `${name}=${value}; path=/`;
-
-  if (process.env.NODE_ENV === "production") {
-    cookieString += `; ${secureFlag}`;
-  }
-  document.cookie = cookieString;
-};

tailwind.config.ts

@@ -48,6 +48,7 @@ const config: Config = {
         yellow: "#EAB308",
         cyan: "#06B6D4",
         purple: "#A855F7",
+        kakao: "#F5E14B",
       },
       screens: {
         mobile: "375px",