diff --git a/src/components/Combination/CombinationDeviceCard.tsx b/src/components/Combination/CombinationDeviceCard.tsx index d387f608..ebb74729 100644 --- a/src/components/Combination/CombinationDeviceCard.tsx +++ b/src/components/Combination/CombinationDeviceCard.tsx @@ -63,7 +63,7 @@ const CombinationDeviceCard = ({

{combination.comboName}

- {combination.isPinned && } + {combination.isPinned && }
{/* Tags */} diff --git a/src/pages/devices/DeviceSearchPage.tsx b/src/pages/devices/DeviceSearchPage.tsx index bc12fc11..7af272db 100644 --- a/src/pages/devices/DeviceSearchPage.tsx +++ b/src/pages/devices/DeviceSearchPage.tsx @@ -1,5 +1,5 @@ import { useState, useEffect, useRef } from 'react'; -import { useSearchParams } from 'react-router-dom'; +import { useSearchParams, useNavigate } from 'react-router-dom'; import GNB from '@/components/Home/GNB'; import ProductCard from '@/components/ProductCard/ProductCard'; import PrimaryButton from '@/components/Button/PrimaryButton'; @@ -24,17 +24,28 @@ import { SCROLL_CONSTANTS, } from '@/constants/devices'; import { MOCK_PRODUCTS } from '@/constants/mockData'; -import { type AuthStatus, type ModalView } from '@/types/devices'; +import { ROUTES } from '@/constants/routes'; +import { type ModalView } from '@/types/devices'; import { useGetCombos } from '@/apis/combo/getCombos'; import { useGetCombo } from '@/apis/combo/getComboId'; import { usePostComboDevice } from '@/apis/combo/postComboDevices'; +import { useGetUserProfile } from '@/apis/mypage/getUserProfile'; +import { hasAuthTokens, hasCompletedOnboarding } from '@/utils/auth/authStorage'; const DeviceSearchPage = () => { const [searchParams, setSearchParams] = useSearchParams(); const selectedProductId = searchParams.get('productId'); + const navigate = useNavigate(); + + // 로그인 상태 확인 + const isLoggedIn = hasAuthTokens(); + + // 사용자 프로필 조회 (로그인 시에만 자동 실행) + const { data: userProfile, isLoading: isProfileLoading } = useGetUserProfile(); + + // 온보딩 완료 여부 확인 (로딩 중에는 false로 기본 처리) + const hasOnboarding = isProfileLoading ? false : hasCompletedOnboarding(userProfile); - // 추후 Zustand/Context에서 인증 상태 가져오기 - const [authStatus] = useState('login'); // 테스트로 login으로 변경. 추후 logout으로 변경. const [modalView, setModalView] = useState('device'); // API hooks @@ -79,11 +90,6 @@ const DeviceSearchPage = () => { /* 내 조합에 담기 */ const handleAddToCombination = () => { - if (authStatus === 'logout') { - // 로그인 페이지로 이동 - return; - } - // 조합이 1개면 바로 저장 if (combos.length === 1 && selectedProductId) { addDeviceToCombo( @@ -110,6 +116,37 @@ const DeviceSearchPage = () => { setModalView('combination'); }; + /* 버튼 텍스트 및 핸들러 결정 */ + const getAddToCombinationConfig = () => { + // Case 1: 로그아웃 상태 + if (!isLoggedIn) { + return { + text: '로그인하고 내 조합에 담기', + handler: () => { + navigate(ROUTES.auth.login); + }, + }; + } + + // Case 2: 로그인했지만 온보딩 미완료 + if (!hasOnboarding) { + return { + text: '맞춤 설정하고 담기', + handler: () => { + navigate(ROUTES.auth.onboarding.lifestyle); + }, + }; + } + + // Case 3: 로그인 + 온보딩 완료 + return { + text: '내 조합에 담기', + handler: handleAddToCombination, + }; + }; + + const addToCombinationConfig = getAddToCombinationConfig(); + /* 조합 선택 - 기기 리스트 보기 */ const handleSelectCombination = (combinationId: number) => { setSelectedCombinationId(combinationId); @@ -400,8 +437,9 @@ const DeviceSearchPage = () => { {/* Button */} @@ -499,7 +537,7 @@ const DeviceSearchPage = () => { {/* 조합명 + 대표조합 star */}

{combo.comboName}

- {combo.isPinned && } + {combo.isPinned && }
{/* 기기 수 + 총 가격 */} diff --git a/src/utils/auth/authStorage.ts b/src/utils/auth/authStorage.ts index 575b129f..62adaaa6 100644 --- a/src/utils/auth/authStorage.ts +++ b/src/utils/auth/authStorage.ts @@ -1,4 +1,5 @@ import { ACCESS_TOKEN, REFRESH_TOKEN} from '@/constants/tokenKey'; +import type { UserProfileResult } from '@/types/mypage/user'; // localStorage를 조작하는 유틸리티 함수 // 나머지 파일에서는 localStorage를 직접 사용하지 않고 이 파일의 함수를 사용하도록 함 @@ -37,3 +38,11 @@ export const hasAuthTokens = (): boolean => { const refreshToken = getRefreshToken(); return !!(accessToken && refreshToken); }; + +// 온보딩 완료 여부 확인 +// lifestyleList가 비어있지 않으면 온보딩 완료로 판단 +export const hasCompletedOnboarding = ( + userProfile: UserProfileResult | undefined +): boolean => { + return !!(userProfile?.lifestyleList && userProfile.lifestyleList.length > 0); +};