diff --git a/apps/client/src/layout/Layout.tsx b/apps/client/src/layout/Layout.tsx index 4b997da3..bab24695 100644 --- a/apps/client/src/layout/Layout.tsx +++ b/apps/client/src/layout/Layout.tsx @@ -1,19 +1,36 @@ -import { Outlet, useLocation } from 'react-router-dom'; -import { Sidebar } from '@shared/components/sidebar/Sidebar'; import { ROUTES_CONFIG } from '@routes/routesConfig'; +import { useGetHasJob } from '@shared/apis/queries'; +import JobSelectionFunnel from '@shared/components/jobSelectionFunnel/JobSelectionFunnel'; +import { Sidebar } from '@shared/components/sidebar/Sidebar'; +import { useQueryClient } from '@tanstack/react-query'; +import { Outlet, useLocation } from 'react-router-dom'; const Layout = () => { const location = useLocation(); + const queryClient = useQueryClient(); const isPolicyPage = location.pathname === ROUTES_CONFIG.privacyPolicy.path || location.pathname === ROUTES_CONFIG.termsOfService.path; - const isSidebarHidden = + const isAuthPage = location.pathname.startsWith(ROUTES_CONFIG.onboarding.path) || location.pathname.startsWith(ROUTES_CONFIG.login.path) || - location.pathname.startsWith(ROUTES_CONFIG.onboardingCallback.path) || - isPolicyPage; + location.pathname.startsWith(ROUTES_CONFIG.onboardingCallback.path); + + const isSidebarHidden = isAuthPage || isPolicyPage; + const isLoggedIn = !!localStorage.getItem('token'); + + const { data: hasJobData, isLoading: isHasJobLoading } = useGetHasJob( + isLoggedIn && !isAuthPage + ); + + const shouldShowJobSelectionFunnel = + isLoggedIn && + !isAuthPage && + !isPolicyPage && + !isHasJobLoading && + hasJobData?.hasJob === false; return ( <> @@ -23,6 +40,15 @@ const Layout = () => { + {shouldShowJobSelectionFunnel && ( +
+ { + queryClient.invalidateQueries({ queryKey: ['hasJob'] }); + }} + /> +
+ )} ); }; diff --git a/apps/client/src/pages/remind/Remind.tsx b/apps/client/src/pages/remind/Remind.tsx index e14703c5..285963cd 100644 --- a/apps/client/src/pages/remind/Remind.tsx +++ b/apps/client/src/pages/remind/Remind.tsx @@ -20,7 +20,6 @@ import { useGetArticleDetail, usePutArticleReadStatus, } from '@shared/apis/queries'; -import JobSelectionFunnel from '@shared/components/jobSelectionFunnel/JobSelectionFunnel'; import TooltipCard from '@shared/components/tooltipCard/TooltipCard'; import { useInfiniteScroll } from '@shared/hooks/useInfiniteScroll'; import { useQueryClient } from '@tanstack/react-query'; @@ -35,9 +34,6 @@ const Remind = () => { const [activeBadge, setActiveBadge] = useState<'read' | 'notRead'>('notRead'); const [isDeleteOpen, setIsDeleteOpen] = useState(false); const [deleteTargetId, setDeleteTargetId] = useState(null); - const [showJobSelectionFunnel, setShowJobSelectionFunnel] = useState( - () => localStorage.getItem('hasJob') !== 'true' - ); const scrollContainerRef = useRef(null); const formattedDate = useMemo(() => { @@ -254,16 +250,6 @@ const Remind = () => { )} - - {showJobSelectionFunnel && ( -
- { - setShowJobSelectionFunnel(false); - }} - /> -
- )} ); }; diff --git a/apps/client/src/shared/apis/axios.ts b/apps/client/src/shared/apis/axios.ts index efec01f4..d4f4755b 100644 --- a/apps/client/src/shared/apis/axios.ts +++ b/apps/client/src/shared/apis/axios.ts @@ -1,5 +1,9 @@ import apiRequest from '@shared/apis/setting/axiosInstance'; -import { EditArticleRequest, JobsResponse } from '@shared/types/api'; +import { + EditArticleRequest, + HasJobResponse, + JobsResponse, +} from '@shared/types/api'; import { formatLocalDateTime } from '@shared/utils/formatDateTime'; export const getDashboardCategories = async () => { @@ -84,6 +88,11 @@ export const getMyProfile = async () => { return data.data; }; +export const getHasJob = async (): Promise => { + const { data } = await apiRequest.get('/api/v3/users/job'); + return data.data; +}; + export const getJobs = async (): Promise => { const { data } = await apiRequest.get('/api/v3/enums/jobs'); return data.data; diff --git a/apps/client/src/shared/apis/queries.ts b/apps/client/src/shared/apis/queries.ts index 47481dfa..affd778a 100644 --- a/apps/client/src/shared/apis/queries.ts +++ b/apps/client/src/shared/apis/queries.ts @@ -5,6 +5,7 @@ import { getArticleDetail, getDashboardCategories, getGoogleProfile, + getHasJob, getJobs, getMyProfile, patchUserJob, @@ -22,6 +23,7 @@ import { ArticleReadStatusResponse, DashboardCategoriesResponse, EditArticleRequest, + HasJobResponse, JobsResponse, } from '@shared/types/api'; import { fetchOGData } from '@shared/utils/fetchOgData'; @@ -182,6 +184,16 @@ export const useGetMyProfile = () => { }); }; +export const useGetHasJob = ( + enabled = true +): UseQueryResult => { + return useQuery({ + queryKey: ['hasJob'], + queryFn: getHasJob, + enabled, + }); +}; + export const useGetJobs = (): UseQueryResult => { return useQuery({ queryKey: ['jobs'], @@ -199,7 +211,14 @@ export const useSuspenseGetJobs = () => { }; export const usePatchUserJob = () => { + const queryClient = useQueryClient(); + return useMutation({ mutationFn: (data: patchUserJobRequest) => patchUserJob(data), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ['hasJob'], + }); + }, }); }; diff --git a/apps/client/src/shared/components/profilePopup/ProfilePopup.tsx b/apps/client/src/shared/components/profilePopup/ProfilePopup.tsx index b1ffc70c..4206d722 100644 --- a/apps/client/src/shared/components/profilePopup/ProfilePopup.tsx +++ b/apps/client/src/shared/components/profilePopup/ProfilePopup.tsx @@ -1,5 +1,6 @@ import { Icon } from '@pinback/design-system/icons'; import { Button } from '@pinback/design-system/ui'; +import { useQueryClient } from '@tanstack/react-query'; import formatRemindTime from '@shared/utils/formatRemindTime'; import { useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -22,6 +23,7 @@ export default function ProfilePopup({ remindTime, }: ProfilePopupProps) { const navigate = useNavigate(); + const queryClient = useQueryClient(); const popupRef = useRef(null); useEffect(() => { @@ -42,6 +44,8 @@ export default function ProfilePopup({ const handleLogout = () => { localStorage.removeItem('token'); localStorage.removeItem('email'); + localStorage.removeItem('userId'); + queryClient.clear(); const sendExtensionLogout = () => { window.postMessage( { diff --git a/apps/client/src/shared/types/api.ts b/apps/client/src/shared/types/api.ts index 340b7add..b0d2e3c5 100644 --- a/apps/client/src/shared/types/api.ts +++ b/apps/client/src/shared/types/api.ts @@ -50,3 +50,7 @@ export interface JobOption { export interface JobsResponse { jobs: JobOption[]; } + +export interface HasJobResponse { + hasJob: boolean; +}