[Feat] 회원가입 API, 카카오 로그인 연동

.env.dev

@@ -1 +1 @@
-NEXT_PUBLIC_API_BASE_URL="https://api.8aladin.shop"
+NEXT_PUBLIC_API_BASE_URL=https://api.8aladin.shop

package.json

@@ -14,12 +14,13 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "antd": "^5.27.4",
+    "antd": "^6.0.1",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "next": "^15.5.7",
     "react": "^19.1.2",
-    "react-dom": "^19.1.2"
+    "react-dom": "^19.1.2",
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",

src/api/axiosInstance.ts

@@ -5,12 +5,32 @@ const axiosInstance = axios.create({
   headers: {
     "Content-Type": "application/json",
   },
+  withCredentials: true, // 쿠키를 포함하여 요청 전송
 });
 
+// 쿠키에서 accessToken을 읽어오는 유틸리티 함수
+function getCookie(name: string): string | null {
+  if (typeof document === "undefined") return null;
+
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+
+  if (parts.length === 2) {
+    return parts.pop()?.split(";").shift() || null;
+  }
+  return null;
+}
+
 // 요청 인터셉터
 axiosInstance.interceptors.request.use(
   config => {
-    // 필요시 토큰 추가 등의 로직
+    // 쿠키에서 accessToken을 읽어서 Authorization 헤더에 추가
+    const accessToken = getCookie("accessToken");
+
+    if (accessToken && config.headers) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+
     return config;
   },
   error => {
@@ -24,7 +44,28 @@ axiosInstance.interceptors.response.use(
     return response;
   },
   error => {
-    // 에러 처리 로직
+    // 401 에러 처리
+    if (error.response?.status === 401) {
+      // 인증이 필요한 경우에만 로그인 페이지로 리다이렉트
+      // 채팅방 생성 API는 permitAll이므로 여기서 리다이렉트하지 않음
+      console.error("인증 오류:", error.response?.data);
+
+      // 로그인이 필요한 API에 대해서만 리다이렉트
+      // 현재 요청 URL이 인증이 필요하지 않은 엔드포인트인지 확인
+      const url = error.config?.url || "";
+      const isPublicEndpoint = 
+        url.includes("/api/v1/chatrooms") ||
+        url.includes("/api/v1/products") ||
+        url.includes("/api/v1/images");
+
+      // 공개 엔드포인트가 아니고, 로그인 페이지가 아닌 경우에만 리다이렉트
+      if (!isPublicEndpoint && typeof window !== "undefined" && !window.location.pathname.startsWith("/login")) {
+        // 로그인 페이지로 리다이렉트할 때 현재 URL을 저장
+        const currentUrl = window.location.pathname + window.location.search;
+        window.location.href = `/login?redirect=${encodeURIComponent(currentUrl)}`;
+      }
+    }
+
     return Promise.reject(error);
   }
 );
@@ -33,3 +74,5 @@ export default axiosInstance;
 
 
 
+
+

src/api/chat/apis.ts

@@ -1,3 +1,38 @@
+import axiosInstance from "../axiosInstance";
+
+// 채팅방 생성 요청 타입
+export interface CreateChatRoomRequest {
+  sellerId: number;
+  buyerId: number;
+  productId: number;
+}
+
+// 채팅방 생성 응답 타입
+export interface ChatRoomResponse {
+  chatRoomId: number;
+  sellerId: number;
+  sellerName: string;
+  buyerId: number;
+  buyerName: string;
+  productId: number;
+  productTitle: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+/**
+ * 채팅방 생성 API
+ */
+export async function createChatRoom(
+  request: CreateChatRoomRequest
+): Promise<ChatRoomResponse> {
+  const response = await axiosInstance.post<ChatRoomResponse>(
+    "/api/v1/chatrooms",
+    request
+  );
+  return response.data;
+}
+
 // 더미 데이터
 export async function getChatRoomDetails(roomId: string) {
   return {

src/api/signup.ts

@@ -0,0 +1,31 @@
+import axiosInstance from "./axiosInstance";
+
+// 회원가입 요청 타입
+export interface SignupRequest {
+  name: string;
+  email: string;
+  password: string;
+  mobileNumber: string;
+}
+
+// 회원가입 응답 타입
+export interface SignupResponse {
+  memberId: number;
+  name: string;
+  email: string;
+  message: string;
+}
+
+// 회원가입 API
+export async function signup(
+  signupData: SignupRequest
+): Promise<SignupResponse> {
+  const response = await axiosInstance.post<SignupResponse>(
+    "/api/v1/members/signup",
+    signupData
+  );
+  console.log("요청 URL:", response.config.url);
+  console.log("응답 데이터:", response.data);
+  console.log("요청 데이터:", signupData);
+  return response.data;
+}

src/app/login/page.tsx

@@ -2,20 +2,15 @@
 
 import React from "react";
 import { useRouter } from "next/navigation";
+import {
+  handleKakaoLogin,
+  handleGoogleLogin,
+  handleNaverLogin,
+} from "@/utils/oauthHandlers";
 
 export default function LoginPage() {
   const router = useRouter();
 
-  const handleKakaoLogin = () => {
-    console.log("카카오 로그인 시작");
-    // TODO: 카카오 OAuth 연동
-  };
-
-  const handleGoogleLogin = () => {
-    console.log("구글 로그인 시작");
-    // TODO: 구글 OAuth 연동
-  };
-
   return (
     <div className="min-h-screen bg-gradient-to-b from-gray-900 via-black to-gray-900 flex flex-col">
       {/* 상단 영역 - 로고 및 타이틀 */}
@@ -27,24 +22,16 @@ export default function LoginPage() {
               <span className="text-white text-4xl font-bold">8</span>
             </div>
           </div>
-          
+
           {/* 타이틀 */}
-          <h1 className="text-4xl font-bold text-white mb-3">
-            8aladin
-          </h1>
-          <p className="text-gray-400 text-lg">
-            안전하고 편리한 중고거래
-          </p>
+          <h1 className="text-4xl font-bold text-white mb-3">8aladin</h1>
+          <p className="text-gray-400 text-lg">안전하고 편리한 중고거래</p>
         </div>
 
         {/* 설명 텍스트 */}
         <div className="text-center space-y-2 mb-8">
-          <p className="text-gray-300 text-sm">
-            간편하게 로그인하고
-          </p>
-          <p className="text-gray-300 text-sm">
-            다양한 중고 상품을 만나보세요
-          </p>
+          <p className="text-gray-300 text-sm">간편하게 로그인하고</p>
+          <p className="text-gray-300 text-sm">다양한 중고 상품을 만나보세요</p>
         </div>
       </div>
 
@@ -75,37 +62,25 @@ export default function LoginPage() {
         {/* 구글 로그인 버튼 */}
         <button
           onClick={handleGoogleLogin}
-          className="w-full h-14 bg-white hover:bg-gray-50 text-gray-800 font-semibold rounded-xl flex items-center justify-center transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-[0.98]"
+          className="w-full h-14 bg-[#F2F2F2] hover:bg-gray-50 text-gray-800 font-semibold rounded-xl flex items-center justify-center transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-[0.98]"
         >
           <div className="flex items-center justify-center gap-3">
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M19.805 10.227c0-.709-.064-1.39-.182-2.045H10.1v3.868h5.438a4.648 4.648 0 0 1-2.016 3.049v2.508h3.265c1.91-1.759 3.018-4.35 3.018-7.38Z"
-                fill="#4285F4"
-              />
-              <path
-                d="M10.1 20c2.73 0 5.018-.904 6.691-2.453l-3.264-2.509c-.905.609-2.064.968-3.427.968-2.636 0-4.868-1.781-5.664-4.173H1.064v2.59A9.996 9.996 0 0 0 10.1 20Z"
-                fill="#34A853"
-              />
-              <path
-                d="M4.436 11.833A6.006 6.006 0 0 1 4.123 10c0-.636.113-1.254.313-1.833V5.577H1.064A9.996 9.996 0 0 0 0 10c0 1.614.386 3.14 1.064 4.423l3.372-2.59Z"
-                fill="#FBBC04"
-              />
-              <path
-                d="M10.1 3.994c1.486 0 2.82.51 3.868 1.513l2.9-2.9C15.113.972 12.826 0 10.1 0A9.996 9.996 0 0 0 1.064 5.577l3.372 2.59c.796-2.392 3.028-4.173 5.664-4.173Z"
-                fill="#EA4335"
-              />
-            </svg>
+            <img src="/googleIcon.png" alt="구글" className="w-8 h-8" />
             <span>구글로 시작하기</span>
           </div>
         </button>
 
+        {/* 네이버 로그인 버튼 */}
+        <button
+          onClick={handleNaverLogin}
+          className="w-full h-14 bg-[#03C75A] hover:bg-[#02B350] text-white font-semibold rounded-xl flex items-center justify-center transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-[0.98]"
+        >
+          <div className="flex items-center justify-center gap-3">
+            <img src="/naverIcon.png" alt="네이버" className="w-8 h-8" />
+            <span>네이버로 시작하기</span>
+          </div>
+        </button>
+
         {/* 구분선 */}
         <div className="flex items-center gap-4 py-4">
           <div className="flex-1 h-px bg-gray-700"></div>
@@ -153,4 +128,3 @@ export default function LoginPage() {
     </div>
   );
 }
-