로그인 프론트 구조 변경

src/app/components/ImgInputForm.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useRef, useState, useEffect } from 'react'
 import styles from './ImgInputForm.module.css'
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
@@ -16,6 +16,24 @@ const ImgInputForm = () => {
 
     const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:9001'
 
+    useEffect(() => {
+        const checkAuth = async () => {
+            try {
+                const res = await fetch(`${API_BASE}/auth/check-token`, {
+                    method: 'GET',
+                    credentials: 'include',
+                })
+                if (!res.ok) throw new Error('인증 실패')
+                console.log('사용자 인증 성공')
+            } catch (err) {
+                console.error('사용자 인증 실패:', (err as Error).message)
+                setError('로그인이 필요합니다.')
+            }
+        }
+
+        checkAuth()
+    }, [])
+
     const handleFile = useCallback((file: File) => {
         setError(null)
         setSuccess(null)

src/app/pages/oauth/callback.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+const OAuthCallback = () => {
+    const router = useRouter();
+    const [error, setError] = useState<string | null>(null);
+    const [message, setMessage] = useState<string | null>(null);
+
+    useEffect(() => {
+        const handleOAuthCallback = async () => {
+            console.log('OAuth 콜백 처리 중...');
+            const urlParams = new URLSearchParams(window.location.search);
+            const code = urlParams.get('code');
+            const error = urlParams.get('error');
+
+            if (error) {
+                setError('카카오 로그인 중 오류가 발생했습니다.');
+                return;
+            }
+
+            if (code) {
+                try {
+                    const res = await fetch('/api/oauth/kakao', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ code }),
+                    });
+
+                    if (!res.ok) throw new Error('서버 요청 실패');
+                    const data = await res.json();
+                    setMessage(`로그인 성공: ${data.message}`);
+                } catch (err) {
+                    setError((err as Error).message || '로그인 처리 중 오류가 발생했습니다.');
+                }
+            }
+        };
+
+        handleOAuthCallback();
+    }, []);
+
+    return (
+        <div>
+            {error && <p style={{ color: 'red' }}>{error}</p>}
+            {message && <p>{message}</p>}
+        </div>
+    );
+};
+
+export default OAuthCallback;