Merge pull request #48 from SWMTheFirstTake/dev

Dev

Author: MindulMendul

app/chat/page.tsx

@@ -7,10 +7,14 @@ import ChatPanel from '@/components/chat/message/ChatPanel';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { panelAtom } from '@/atoms/chatAtoms';
 import { Suspense, useEffect } from 'react';
+import { userAtom } from '@/atoms/authAtoms';
+import { useRouter } from 'next/navigation';
 
 export default function Chat() {
   const panel = useAtomValue(panelAtom);
   const setPanel = useSetAtom(panelAtom);
+  const user = useAtomValue(userAtom);
+  const router = useRouter();
 
   // lg 이상일 때 panel이 'chat'이면 자동으로 'closet'으로 전환
   useEffect(() => {
@@ -29,6 +33,18 @@ export default function Chat() {
     return () => mq.removeEventListener('change', handler);
   }, [panel, setPanel]);
 
+  // useEffect(() => {
+  //   console.log(user);
+  //   if (!user) {
+  //     alert('로그인이 필요합니다.');
+  //     router.push('/signin');
+  //   }
+  // }, [user, router]);
+
+  // if (!user) {
+  //   return null;
+  // }
+
   return (
     <Suspense>
       <div className="flex flex-col">
@@ -41,26 +57,16 @@ export default function Chat() {
           <div className="hidden lg:flex w-full lg:w-1/2 h-full lg:transition-all lg:duration-300">
             <ChatPanel />
           </div>
-          {panel === 'closet' && (
-            <div className="hidden lg:flex flex-col h-full w-full lg:w-1/2 bg-beige border-l border-navy-200">
-              <div className="flex-shrink-0">
-                <ChatHeader />
-              </div>
-              <div className="flex-1 min-h-0">
-                <ClosetPanel />
-              </div>
+
+          <div className="hidden lg:flex flex-col h-full w-full lg:w-1/2 bg-beige border-l border-navy-200">
+            <div className="flex-shrink-0">
+              <ChatHeader />
             </div>
-          )}
-          {panel === 'fitting' && (
-            <div className="hidden lg:flex flex-col h-full w-full lg:w-1/2 bg-beige border-l border-navy-200">
-              <div className="flex-shrink-0">
-                <ChatHeader />
-              </div>
-              <div className="flex-1 min-h-0">
-                <FittingPanel />
-              </div>
+            <div className="flex-1 min-h-0">
+              {panel === 'closet' && <ClosetPanel />}
+              {panel === 'fitting' && <FittingPanel />}
             </div>
-          )}
+          </div>
 
           {/* 모바일/태블릿: 단일 패널 레이아웃 */}
           <div className="lg:hidden w-full h-[calc(100vh-5rem)]">

app/signin/page.tsx

@@ -1,6 +1,4 @@
-import SigninForm from '@/components/auth/SigninForm';
 import SigninSNSForm from '@/components/auth/SigninSNSForm';
-import Link from 'next/link';
 
 export default function SigninPage() {
   return (
@@ -14,26 +12,8 @@ export default function SigninPage() {
         </div>
 
         <div className="space-y-6">
-          <SigninForm />
-
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-gray-200 dark:border-gray-700"></div>
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="px-4 bg-white/80 dark:bg-gray-800/80 text-gray-500 dark:text-gray-400">또는</span>
-            </div>
-          </div>
-
           <SigninSNSForm />
         </div>
-
-        <div className="text-center text-sm text-gray-600 dark:text-gray-400">
-          계정이 없으신가요?{' '}
-          <Link href="/signup" className="font-medium text-navy hover:text-blue dark:text-indigo-400">
-            회원가입
-          </Link>
-        </div>
       </div>
     </div>
   );

src/api/authAPI.ts

@@ -0,0 +1,23 @@
+import { requestAPI } from '@/api/API';
+
+/// GET
+
+export const getAuthMe = async () => requestAPI<any>(`/api/auth/me`, 'GET');
+
+export const getAuthKakaoCallback = async (): Promise<APIResponse<User>> => {
+  const response = await requestAPI<APIUser>(`/api/auth/kakao/callback`, 'GET');
+  if (response.status == 'fail') return response;
+  return {
+    status: response.status,
+    message: response.message,
+    data: {
+      userId: response.data.userId,
+      username: response.data.nickname,
+    },
+  };
+};
+
+/// POST
+export const postAuthRefresh = async () => requestAPI<any>(`/api/auth/refresh`, 'POST');
+
+export const postAuthLogout = async () => requestAPI<any>(`/api/auth/logout`, 'POST');

src/api/fittingAPI.ts

@@ -0,0 +1,14 @@
+import { requestAPI } from '@/api/API';
+
+/// GET
+export const getFittingProxyImage = async () => requestAPI<APIFitting>('/api/fitting/proxy-image', 'GET');
+
+export const getFittingStatusTaskId = async (taskId: string) =>
+  requestAPI<APIFitting>(`/api/fitting/status/${taskId}`, 'GET');
+
+export const getFittingProxyTest = async () => requestAPI<APIFitting>('/api/fitting/proxy-test', 'GET');
+
+/// POST
+export const postFittingTryon = async () => requestAPI<APIFitting>('/api/fitting/try-on', 'POST');
+
+export const postFittingTryonCombo = async () => requestAPI<APIFitting>('/api/fitting/try-on/combo', 'POST');

src/atoms/authAtoms.ts

@@ -1,3 +1,13 @@
 import { atom } from 'jotai';
+import { getAuthCookie } from '@/lib/cookies';
 
-export const userAtom = atom<User | null>(null);
+// // 초기값을 쿠키에서 가져오도록 설정
+// export const userAtom = atom<User | null>(() => {
+//   // SSR 환경에서는 null 반환
+//   if (typeof window === 'undefined') return null;
+
+//   // 클라이언트 환경에서는 쿠키에서 사용자 정보 가져오기
+//   return getAuthCookie();
+// });
+
+export const userAtom = atom<User | null>({ userId: 'adsf', username: 'mindul' });

src/atoms/chatAtoms.ts

@@ -13,7 +13,7 @@ export const examplesAtom = atom<string[]>([
   '꾸민 듯 안 꾸민 듯한 꾸안꾸 패션을 추구해보고 싶어.',
 ]);
 
-export const isAIRespondingAtom = atom<'style' | 'trend' | 'color' | 'codi' | ''>('');
+export const isAIRespondingAtom = atom<boolean>(false);
 export const isSidebarOpenAtom = atom<boolean>(false);
 
 export const panelAtom = atom<'chat' | 'closet' | 'fitting'>('chat');

src/components/auth/AuthJotaiInitializer.tsx

@@ -1,20 +1,40 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useSetAtom } from 'jotai';
 import { userAtom } from '@/atoms/authAtoms';
 import { useUser } from '@/queries/useUser';
+import { getAuthCookie, setAuthCookie, deleteAuthCookie } from '@/lib/cookies';
 
 // 이 컴포넌트는 UI를 렌더링하지 않고, 오직 상태 초기화 역할만 합니다.
 export default function AuthJotaiInitializer() {
   const setUser = useSetAtom(userAtom);
   const { data: user, status } = useUser();
+  const [isInitialized, setIsInitialized] = useState(false);
 
+  // 컴포넌트 마운트 시 쿠키에서 사용자 정보 복원
   useEffect(() => {
-    if (status === 'success' || status === 'error') {
-      setUser(user ?? null);
+    const cookieUser = getAuthCookie();
+    if (cookieUser) {
+      setUser(cookieUser);
     }
-  }, [user, status, setUser]);
+    setIsInitialized(true);
+  }, [setUser]);
+
+  // API에서 사용자 정보를 가져왔을 때 처리
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    if (status === 'success' && user) {
+      // API에서 사용자 정보를 성공적으로 가져왔을 때
+      // JWT 토큰은 서버에서 쿠키로 설정되므로 여기서는 상태만 업데이트
+      setUser(user);
+    } else if (status === 'error') {
+      // API 호출 실패 시 쿠키에서 사용자 정보 삭제
+      deleteAuthCookie();
+      setUser(null);
+    }
+  }, [user, status, setUser, isInitialized]);
 
   return null;
 }

src/components/auth/SignInKakaoButton.tsx

@@ -1,9 +1,26 @@
+'use client';
+
+import { getKakaoAuthUrl, getKakaoConfig } from '@/lib/kakao-auth';
+
 export default function SignInKakaoButton() {
+  // 카카오 설정 확인
+  const config = getKakaoConfig();
+  const kakaoAuthUrl = getKakaoAuthUrl();
+  
+  // 환경변수가 없으면 에러 표시
+  if (!config || !kakaoAuthUrl) {
+    return (
+      <div className="text-red-500 text-center p-2">
+        카카오 로그인 설정 오류
+      </div>
+    );
+  }
+  
+  console.log('Kakao Config:', config);
+  console.log('Full Kakao Auth URL:', kakaoAuthUrl);
+  
   return (
-    <form
-      action={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.AUTH_KAKAO_ID}&redirect_uri=${process.env.AUTH_KAKAO_REDIRECT_URL}&response_type=code`}
-      method="GET"
-    >
+    <form action={kakaoAuthUrl} method="GET">
       <button type="submit">Sign In</button>
     </form>
   );

src/components/auth/SignOutButton.tsx

@@ -1,20 +1,38 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
+import { useSetAtom } from 'jotai';
+import { userAtom } from '@/atoms/authAtoms';
+import { deleteAuthCookie } from '@/lib/cookies';
 
 export default function SignOutButton() {
   const router = useRouter();
+  const setUser = useSetAtom(userAtom);
+  
   const handleLogout = async () => {
-    const res = await fetch(`${process.env.NEXT_PUBLIC_TFT_BASE_URL}/api/auth/logout/kakao`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      credentials: 'include',
-      body: JSON.stringify({}),
-    });
+    try {
+      // 서버에 로그아웃 요청
+      const res = await fetch(`${process.env.NEXT_PUBLIC_TFT_BASE_URL}/api/auth/logout/kakao`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({}),
+      });
 
-    if (res.ok) {
+      // 로컬 상태 및 쿠키 정리
+      setUser(null);
+      deleteAuthCookie();
+      
+      if (res.ok) {
+        router.push('/');
+      }
+    } catch (error) {
+      console.error('Logout error:', error);
+      // 에러가 발생해도 로컬 상태는 정리
+      setUser(null);
+      deleteAuthCookie();
       router.push('/');
     }
   };

src/components/auth/SigninSNSForm.tsx

@@ -1,22 +1,47 @@
-import Image from 'next/image';
+'use client';
+
+import { getKakaoAuthUrl, getKakaoConfig } from '@/lib/kakao-auth';
 
 export default function SigninSNSForm() {
+  // 카카오 설정 확인
+  const config = getKakaoConfig();
+  const kakaoAuthUrl = getKakaoAuthUrl();
+  
+  // 환경변수가 없으면 에러 표시
+  if (!config || !kakaoAuthUrl) {
+    return (
+      <div className="text-red-500 text-center p-4">
+        카카오 로그인 설정이 완료되지 않았습니다.
+        <br />
+        <small className="text-xs">
+          NEXT_PUBLIC_AUTH_KAKAO_ID와 NEXT_PUBLIC_AUTH_KAKAO_REDIRECT_URL을 확인해주세요.
+        </small>
+      </div>
+    );
+  }
+  
+  console.log('Kakao Config:', config);
+  console.log('Full Kakao Auth URL:', kakaoAuthUrl);
+
   return (
     <div className="grid grid-cols-3 gap-4">
-      <button className="flex justify-center items-center p-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 shadow-sm hover:shadow-md">
+      {/* <button className="flex justify-center items-center p-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 shadow-sm hover:shadow-md">
         <Image
           src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg"
           alt="Google"
           className="w-6 h-6"
+          width={300}
+          height={300}
         />
       </button>
 
       <button className="flex justify-center items-center p-3 rounded-xl bg-[#03C75A] hover:bg-[#02b350] transition-all duration-200 shadow-sm hover:shadow-md">
         <span className="text-white font-bold text-lg w-6 h-6 flex items-center justify-center">N</span>
-      </button>
+      </button> */}
 
       <form
-        action={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.AUTH_KAKAO_ID}&redirect_uri=${process.env.AUTH_KAKAO_REDIRECT_URL}&response_type=code`}
+        className="w-full"
+        action={kakaoAuthUrl}
         method="GET"
       >
         <button className="w-full flex justify-center items-center p-3 rounded-xl bg-[#FEE500] hover:bg-[#FDD835] transition-all duration-200 shadow-sm hover:shadow-md">