Skip to content

OAuth 연동 및 리다이렉트 경로 수정 #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SeokHoChoi wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

OAuth 연동 및 리다이렉트 경로 수정 #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions src/app/products/_components/detail/ProductDetailClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) => {
Expand Down Expand Up @@ -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,
Expand All @@ -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]">
Expand Down Expand Up @@ -163,6 +177,8 @@ const ProductDetailClient: React.FC<{ product: IProductDetail }> = ({ product })
구매하기
</button>
</div>

{isLoginPopupOpen && <LoginPopup closePopup={closeLoginPopup} baseUrl={pathname || window.location.pathname} />}
</div>
</div>

Expand Down
8 changes: 4 additions & 4 deletions src/components/modals/LoginPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down