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;
+}