[✨ Feature] 카카오 간편 회원가입/ 로그인 연결 [✨ Feature] 로그인 회원가입 로직 alert 토스트 팝업으로 변경

src/api/oauth.ts

@@ -0,0 +1,58 @@
+// src/api/oauth.ts
+import { apiFetch } from '@/config/client';
+import { OAuthAuthResponse } from '@/types/oauth';
+
+type OAuthProvider = 'kakao';
+
+type OAuthSignInParams = {
+  provider: OAuthProvider;
+  redirectUri: string;
+  token: string;
+};
+
+type OAuthSignUpParams = {
+  provider: OAuthProvider;
+  redirectUri: string;
+  token: string;
+  nickname: string;
+};
+
+/**
+ * OAuth 로그인
+ * POST /oauth/sign-in/{provider}
+ */
+export function oauthSignIn({
+  provider,
+  redirectUri,
+  token,
+}: OAuthSignInParams) {
+  return apiFetch<OAuthAuthResponse>(`/oauth/sign-in/${provider}`, {
+    method: 'POST',
+    body: {
+      redirectUri,
+      token,
+    },
+    skipAuthRefresh: true,
+  });
+}
+
+/**
+ * OAuth 회원가입
+ * POST /oauth/sign-up/{provider}
+ */
+export function oauthSignUp({
+  provider,
+  redirectUri,
+  token,
+  nickname,
+}: OAuthSignUpParams) {
+  return apiFetch<OAuthAuthResponse>(`/oauth/sign-up/${provider}`, {
+    method: 'POST',
+    body: {
+      redirectUri,
+      token,
+      nickname,
+    },
+    skipAuthRefresh: true,
+  });
+}

src/app/(auth)/login/page.tsx

@@ -9,6 +9,7 @@ import { login } from '@/api/auth';
 import kakaoLogo from '@/assets/icons/auth/ic-kakao.svg';
 import Button from '@/components/Button';
 import { TextInput, PasswordInput } from '@/components/Input';
+import { KAKAO_REST_API_KEY, KAKAO_REDIRECT_URI } from '@/config/oauth';
 import { useGuestOnly } from '@/hooks/useGuestOnly';
 import { validateEmail, validatePassword } from '@/util/validations';
 
@@ -19,6 +20,18 @@ export default function LoginPage() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
+  const handleKakaoLogin = () => {
+    const url =
+      'https://kauth.kakao.com/oauth/authorize' +
+      `?client_id=${KAKAO_REST_API_KEY}` +
+      `&redirect_uri=${encodeURIComponent(KAKAO_REDIRECT_URI)}` +
+      '&response_type=code' +
+      '&state=login' +
+      '&prompt=login';
+
+    window.location.href = url;
+  };
+
   useEffect(() => {
     const savedEmail = sessionStorage.getItem('signupEmail');
 
@@ -126,7 +139,12 @@ export default function LoginPage() {
         <div className="h-px flex-1 bg-gray-100" />
       </div>
 
-      <Button type="button" size="lg" variant="secondary" className="w-full">
+      <Button
+        type="button"
+        size="lg"
+        variant="secondary"
+        className="w-full"
+        onClick={handleKakaoLogin}>
         <Image src={kakaoLogo} alt="카카오로고" width={24} height={24} />
         카카오 로그인
       </Button>

src/app/(auth)/signup/page.tsx

@@ -9,6 +9,8 @@ import { signup } from '@/api/users';
 import kakaoLogo from '@/assets/icons/auth/ic-kakao.svg';
 import Button from '@/components/Button';
 import { TextInput, PasswordInput } from '@/components/Input';
+import { useToast } from '@/components/toast/useToast';
+import { KAKAO_REST_API_KEY, KAKAO_REDIRECT_URI } from '@/config/oauth';
 import { useGuestOnly } from '@/hooks/useGuestOnly';
 import {
   validateEmail,
@@ -35,6 +37,19 @@ export default function SignupPage() {
   });
 
   const router = useRouter();
+  const toast = useToast();
+
+  const handleKakaoSignup = () => {
+    const url =
+      'https://kauth.kakao.com/oauth/authorize' +
+      `?client_id=${KAKAO_REST_API_KEY}` +
+      `&redirect_uri=${encodeURIComponent(KAKAO_REDIRECT_URI)}` +
+      '&response_type=code' +
+      '&state=signup' +
+      '&prompt=login';
+
+    window.location.href = url;
+  };
 
   const handleChange = (key: keyof typeof form) => (value: string) => {
     setForm((prev) => ({
@@ -71,36 +86,37 @@ export default function SignupPage() {
         password: form.password,
         nickname: form.nickname,
       });
-      //TODO toast 팝업으로 교체
-      alert('회원가입이 완료되었습니다!');
+      toast.success('회원가입이 완료되었습니다!');
       sessionStorage.setItem('signupEmail', form.email);
-
       router.push('/login');
     } catch (error) {
-      //TODO 에러처리
       if (error instanceof Error) {
         if (error.message.includes('이메일')) {
           setErrors((prev) => ({
             ...prev,
             email: error.message,
           }));
+          toast.error(error.message);
         } else if (error.message.includes('닉네임')) {
           setErrors((prev) => ({
             ...prev,
             nickname: error.message,
           }));
+          toast.error(error.message);
         } else {
           setErrors((prev) => ({
             ...prev,
             password: error.message,
           }));
+          toast.error(error.message);
         }
       } else {
         // 예상치 못한 에러
         setErrors((prev) => ({
           ...prev,
           password: '알 수 없는 오류가 발생했습니다.',
         }));
+        toast.error('알 수 없는 오류가 발생했습니다.');
       }
     }
   };
@@ -199,7 +215,12 @@ export default function SignupPage() {
         <div className="h-px flex-1 bg-gray-100" />
       </div>
 
-      <Button type="button" size="lg" variant="secondary" className="w-full">
+      <Button
+        type="button"
+        size="lg"
+        variant="secondary"
+        className="w-full"
+        onClick={handleKakaoSignup}>
         <Image src={kakaoLogo} alt="카카오로고" width={24} height={24} />
         카카오 회원가입
       </Button>

src/app/(common)/(mypage)/mypage/hooks/useMyPageForm.ts

@@ -6,6 +6,7 @@ import { createUpdatePayload, isUnauthorizedError } from './useMypageFormUtils';
 import { validateForm } from './useMyPageFormValidators';
 import { useGetMyInfo, useUpdateMyInfo } from './useUser';
 
+import { useToast } from '@/components/toast/useToast';
 import { getApiErrorMessage } from '@/util/error';
 
 /**
@@ -16,6 +17,7 @@ import { getApiErrorMessage } from '@/util/error';
  */
 export function useMyPageForm() {
   const router = useRouter();
+  const toast = useToast();
 
   // React Query: 사용자 정보 조회
   const {
@@ -59,8 +61,8 @@ export function useMyPageForm() {
     if (fetchError) {
       console.error('사용자 정보 로딩 실패:', fetchError);
       if (isUnauthorizedError(fetchError)) {
-        alert('로그인이 필요합니다.');
-        router.push('/signin');
+        toast.warning('로그인이 필요합니다.');
+        router.push('/login');
       }
     }
   }, [fetchError, router]);
@@ -102,7 +104,7 @@ export function useMyPageForm() {
     try {
       const payload = createUpdatePayload(formData);
       await updateProfile(payload);
-      alert('저장되었습니다.');
+      toast.success('저장되었습니다!');
 
       // 비밀번호 필드 초기화
       setFormData((prev) => ({
@@ -113,12 +115,12 @@ export function useMyPageForm() {
     } catch (error: unknown) {
       console.error('저장 실패:', error);
       if (isUnauthorizedError(error)) {
-        alert('로그인이 필요합니다.');
-        router.push('/signin');
+        toast.warning('로그인이 필요합니다.');
+        router.push('/login');
         return;
       }
       const errorMessage = getApiErrorMessage(error, '저장에 실패했습니다.');
-      alert(errorMessage);
+      toast.error(errorMessage);
     }
   };
 

src/app/layout.tsx

@@ -29,6 +29,13 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ko" className={notoSansKR.variable}>
+      <head>
+        {/* kakao logout SDK */}
+        <Script
+          src="https://developers.kakao.com/sdk/js/kakao.min.js"
+          strategy="beforeInteractive"
+        />
+      </head>
       <body className={notoSansKR.className}>
         <QueryProvider>
           <ModalProvider>

src/app/oauth/kakao/KakaoCallbackContent.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useRef } from 'react';
+
+import { oauthSignIn, oauthSignUp } from '@/api/oauth';
+import kakaoLogo from '@/assets/icons/auth/ic-kakao.svg';
+import { useToast } from '@/components/toast/useToast';
+import { KAKAO_REDIRECT_URI } from '@/config/oauth';
+
+// 랜덤 5자리 문자열 생성 함수
+function generateRandomNickname(length = 5) {
+  const chars =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}
+
+export default function KakaoCallbackContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const hasRequested = useRef(false);
+  const toast = useToast();
+
+  useEffect(() => {
+    const code = searchParams.get('code');
+    const state = searchParams.get('state');
+
+    if (!code || !state) {
+      router.replace('/login');
+      return;
+    }
+
+    if (hasRequested.current) return;
+    hasRequested.current = true;
+
+    window.history.replaceState({}, '', '/oauth/kakao');
+
+    const processOAuth = async () => {
+      try {
+        let res;
+        if (state === 'signup') {
+          res = await oauthSignUp({
+            provider: 'kakao',
+            nickname: generateRandomNickname(),
+            redirectUri: KAKAO_REDIRECT_URI,
+            token: code,
+          });
+        } else {
+          res = await oauthSignIn({
+            provider: 'kakao',
+            redirectUri: KAKAO_REDIRECT_URI,
+            token: code,
+          });
+        }
+
+        localStorage.setItem('accessToken', res.accessToken);
+        localStorage.setItem('refreshToken', res.refreshToken);
+
+        router.replace('/');
+      } catch (e) {
+        console.error('카카오 인증 실패', e);
+        if (e instanceof Error) {
+          if (state === 'signup' && e.message.includes('이미')) {
+            toast.warning('이미 가입된 계정입니다. 로그인을 진행해 주세요.');
+            router.replace('/login');
+          } else if (state === 'login' && e.message.includes('않은')) {
+            toast.warning(
+              '가입되지 않은 계정입니다. 회원가입을 진행해 주세요.'
+            );
+            router.replace('/signup');
+          } else {
+            toast.error('인증에 실패했습니다. 다시 시도해주세요.');
+            router.replace(state === 'signup' ? '/signup' : '/login');
+          }
+        }
+      }
+    };
+
+    processOAuth();
+  }, [router, searchParams]);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <Image src={kakaoLogo} alt="카카오로고" width={100} height={100} />
+      <p className="title-lg mt-5">카카오 인증 처리 중...</p>
+      <p className="title-sm mt-3">잠시만 기다려주세요</p>
+    </div>
+  );
+}

src/app/oauth/kakao/page.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import Image from 'next/image';
+import { Suspense } from 'react';
+
+import KakaoCallbackContent from './KakaoCallbackContent';
+
+import kakaoLogo from '@/assets/icons/auth/ic-kakao.svg';
+
+export default function KakaoCallbackPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen flex-col items-center justify-center">
+          <Image src={kakaoLogo} alt="카카오로고" width={100} height={100} />
+          <p className="title-lg mt-5">카카오 인증 처리 중...</p>
+        </div>
+      }>
+      <KakaoCallbackContent />
+    </Suspense>
+  );
+}

src/components/Header/HeaderAuth.tsx

@@ -19,6 +19,11 @@ export default function HeaderAuth() {
 
   const handleLogout = () => {
     logout();
+    if (typeof window !== 'undefined' && window.Kakao?.Auth) {
+      window.Kakao.Auth.logout(() => {
+        console.log('카카오 로그아웃 완료');
+      });
+    }
     router.push('/login');
   };
 

src/components/SideMenu/SideMenuNav.tsx

@@ -9,6 +9,11 @@ export default function SideMenuNav({ onClose }: { onClose?: () => void }) {
   const router = useRouter();
   const handleLogout = () => {
     logout();
+    if (typeof window !== 'undefined' && window.Kakao?.Auth) {
+      window.Kakao.Auth.logout(() => {
+        console.log('카카오 세션 로그아웃 완료');
+      });
+    }
     router.push('/login');
   };
   return (

src/config/oauth.ts

@@ -0,0 +1,6 @@
+// src/config/oauth.ts
+export const KAKAO_REST_API_KEY = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY!;
+
+export const KAKAO_REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI!;
+
+//redirectUri는 카카오 디벨로퍼 + 백엔드에 등록한 값과 동일해야 함