From 6c769d857c44b77febf8918cc61ba72b5e7569f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EC=84=9D=ED=98=B8?= <seokho.choi@ikoob.com>
Date: Thu, 6 Mar 2025 08:40:35 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20OAuth=20=EC=97=B0=EB=8F=99=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProductDetailClient.tsx            | 20 +++++++++++++++++--
 src/components/modals/LoginPopup.tsx          |  8 ++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/app/products/_components/detail/ProductDetailClient.tsx b/src/app/products/_components/detail/ProductDetailClient.tsx
index bb865a9..b524eeb 100644
--- a/src/app/products/_components/detail/ProductDetailClient.tsx
+++ b/src/app/products/_components/detail/ProductDetailClient.tsx
@@ -4,12 +4,13 @@ import { useState } from 'react';
 import type { IProductDetail } from '@/api/product';
 import ProductDegtailCards from './ProductDetailCards';
 import ProductDetailSelectOptions from './ProductDetailSelectOptions';
-import { useRouter } from 'next/navigation';
+import { useRouter, usePathname } from 'next/navigation';
 import ProdudctDetailClientOptions, { SelectItem } from './ProductDetailClientOptions';
 import ProductDetailClientCarousel from './ProductDetailClientCarousel';
 import ProductDetailClientReview from './ProductDetailClientReivew';
 import ProductDetailClientDescription from './ProductDetailClientDescription';
 import { useAuthStore } from '@/store/authStore';
+import LoginPopup from '@/components/modals/LoginPopup';
 
 export interface ISelectOptionDetail {
   count: number;
@@ -18,9 +19,11 @@ export interface ISelectOptionDetail {
 
 const ProductDetailClient: React.FC<{ product: IProductDetail }> = ({ product }) => {
   const router = useRouter();
+  const pathname = usePathname();
   const { isLoggedIn } = useAuthStore();
   const [selectedTab, setSelectedTab] = useState<string>('상세정보');
   const [selectOptions, setSelectOptions] = useState<ISelectOptionDetail[]>([]);
+  const [isLoginPopupOpen, setIsLoginPopupOpen] = useState(false);
 
   function handleAddOption(newOptions: SelectItem[]) {
     setSelectOptions((prevOptions) => {
@@ -56,7 +59,12 @@ const ProductDetailClient: React.FC<{ product: IProductDetail }> = ({ product })
   }
 
   const handlePurchase = () => {
-    if (!isLoggedIn) return alert('로그인을 먼저 진행해주세요!');
+    if (!isLoggedIn) {
+      // 로그인 안 되어 있을 경우 팝업 열기
+      setIsLoginPopupOpen(true);
+      return; // 로그인 팝업을 띄우고 더 이상 진행되지 않게 함
+    }
+
     if (selectOptions.length > 0) {
       const paramData = {
         product,
@@ -78,6 +86,12 @@ const ProductDetailClient: React.FC<{ product: IProductDetail }> = ({ product })
     }, 0);
   }
 
+  const closeLoginPopup = () => {
+    setIsLoginPopupOpen(false);
+    const currentPath = pathname || window.location.pathname; // 페이지 경로가 없을 경우 안전하게 처리
+    router.push(currentPath); // 로그인 후 원래 페이지로 돌아감
+  };
+
   return (
     <div className="max-w-custom mx-auto flex px-4 py-8 flex-col">
       <nav className="w-full bg-slate-50 border border-slate-300 mb-5 rounded-xl flex justify-end px-[30px] py-[10px]">
@@ -163,6 +177,8 @@ const ProductDetailClient: React.FC<{ product: IProductDetail }> = ({ product })
               구매하기
             </button>
           </div>
+
+          {isLoginPopupOpen && <LoginPopup closePopup={closeLoginPopup} baseUrl={pathname || window.location.pathname} />}
         </div>
       </div>
 
diff --git a/src/components/modals/LoginPopup.tsx b/src/components/modals/LoginPopup.tsx
index e52de6a..d2ea67b 100644
--- a/src/components/modals/LoginPopup.tsx
+++ b/src/components/modals/LoginPopup.tsx
@@ -7,12 +7,12 @@ import naverSymbol from '../../assets/naver.png';
 
 const BASE_URL = process.env.NEXT_PUBLIC_REDIRECT_URL;
 
-const NAVER_LOGIN_URL = `https://auth-api.emmotional-cart.click/oauth2/authorization/naver?redirect_uri=${BASE_URL}`;
-const KAKAO_LOGIN_URL = `https://auth-api.emmotional-cart.click/oauth2/authorization/kakao?redirect_uri=${BASE_URL}`;
-
-const LoginPopup: React.FC<{ closePopup: () => void }> = ({ closePopup }) => {
+const LoginPopup: React.FC<{ closePopup: () => void, baseUrl?: string }> = ({ closePopup, baseUrl }) => {
   const [isLoading, setIsLoading] = useState(false);
 
+  const NAVER_LOGIN_URL = `https://auth-api.emmotional-cart.click/oauth2/authorization/naver?redirect_uri=${BASE_URL}/${baseUrl}`;
+  const KAKAO_LOGIN_URL = `https://auth-api.emmotional-cart.click/oauth2/authorization/kakao?redirect_uri=${BASE_URL}/${baseUrl}`;
+
   const handleLogin = async (url: string) => {
     try {
       setIsLoading(true);