feat: 카카오 소셜 로그인 로직 구현 및 통신

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

next.config.mjs

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  async rewrites() {
+    return [
+      {
+        source: "/api/v1/:path*",
+        destination: 'https://api.picktory.net/api/v1/:path*',
+      },
+    ];
+  },
+};
 
 export default nextConfig;

package.json

@@ -13,10 +13,13 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.7",
+    "@tanstack/react-query": "^5.66.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.5.2",
+    "framer-motion": "^12.4.2",
     "lucide-react": "^0.474.0",
     "next": "14.2.23",
     "react": "^18",

src/app/PageTransition.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { AnimatePresence, motion } from "framer-motion";
+
+export default function PageTransition({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={pathname}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 1 }}
+        transition={{
+          duration: 0.5,
+        }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}

src/app/auth/login/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+import Onboarding from "@/components/Onboarding";
+import KakaoLoginButton from "@/components/KakaoLoginButton";
+
+const Page = () => {
+  const REST_API_KEY = process.env.NEXT_PUBLIC_REST_API_KEY;
+  const REDIRECT_URI = process.env.NEXT_PUBLIC_REDIRECT_URI;
+
+  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`;
+
+  const [isOnboardingComplete, setIsOnboardingComplete] = useState(false);
+
+  const handleOnboardingComplete = () => {
+    setIsOnboardingComplete(true);
+  };
+
+  return (
+    <AnimatePresence mode="wait">
+      {!isOnboardingComplete ? (
+        <motion.div
+          key="/auth/login"
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: 20 }}
+          transition={{ duration: 0.5 }}
+          className="h-full"
+        >
+          <Onboarding onComplete={handleOnboardingComplete} />
+        </motion.div>
+      ) : (
+        <motion.div
+          key="login"
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -20 }}
+          transition={{ duration: 0.5 }}
+          className="h-full"
+        >
+          <div className="w-full h-full flex flex-col justify-center items-center">
+            <section className="w-[340px] h-[442px] bg-gray-100">
+              그래픽
+            </section>
+            <p className="text-center">
+              선물 보따리를 안전하게 보관하기 위해서는 <br /> 로그인이 필요해요!
+            </p>
+          </div>
+          <div className="w-full absolute bottom-4 px-4">
+            <KakaoLoginButton link={KAKAO_AUTH_URL} />
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default Page;

src/app/kakao/callback/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+import { useMutation } from "@tanstack/react-query";
+import Loading from "@/components/common/Loading";
+import { toast } from "@/hooks/use-toast";
+
+const Page = () => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const code = searchParams?.get("code");
+
+  const { mutate } = useMutation({
+    mutationFn: async (code: string) => {
+      const response = await fetch("/api/v1/oauth/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({ code: code }),
+      });
+
+      if (!response.ok) {
+        throw new Error("로그인 실패");
+      }
+
+      const text = await response.text();
+      try {
+        const data = JSON.parse(text);
+        return data;
+      } catch {
+        throw new Error("응답 처리 실패");
+      }
+    },
+    onSuccess: (data) => {
+      console.log(data);
+
+      // 토큰 저장
+      localStorage.setItem("accessToken", data.result.accessToken);
+      localStorage.setItem("refreshToken", data.result.refreshToken);
+
+      toast({
+        title: "로그인 성공",
+        description: "로그인 되었습니다.",
+      });
+
+      router.push("/"); // 로그인 후 홈으로
+    },
+    onError: (error) => {
+      console.error("로그인 실패:", error);
+    },
+  });
+
+  useEffect(() => {
+    console.log("Code", code);
+
+    if (code) {
+      mutate(code);
+    }
+  }, [code]);
+
+  return (
+    <div className="h-full w-full flex items-center justify-center">
+      <Loading />
+    </div>
+  );
+};
+
+export default Page;

src/app/layout.tsx

@@ -1,14 +1,21 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
 import localFont from "next/font/local";
+
 import "./globals.css";
+
 import Header from "@/layout/Header";
-import { Suspense } from "react";
+import { Toaster } from "@/components/ui/toaster";
+import PageTransition from "@/app/PageTransition";
+
+import { Providers } from "./providers";
 
 const pretendard = localFont({
   src: "./fonts/PretendardVariable.woff2",
   variable: "--font-pretendard",
   weight: "100 200 300 400 500 600 700 800 900",
 });
+
 const nanumSquareRound = localFont({
   src: "./fonts/NanumSquareRound.ttf",
   variable: "--font-nanum-square-round",
@@ -33,9 +40,17 @@ export default function RootLayout({
         <div className="max-w-[430px] min-w-[375px] mx-auto bg-white min-h-screen flex flex-col relative">
           <Suspense>
             <Header />
-            <div className="flex-grow" style={{ height: "calc(100vh - 56px)" }}>
-              {children}
-            </div>
+            <Providers>
+              <PageTransition>
+                <div
+                  className="flex-grow"
+                  style={{ height: "calc(100vh - 56px)" }}
+                >
+                  {children}
+                </div>
+              </PageTransition>
+              <Toaster />
+            </Providers>
           </Suspense>
         </div>
       </body>