Feat(client): job selection popup open condition change

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 = () => {
           <Outlet />
         </main>
       </div>
+      {shouldShowJobSelectionFunnel && (
+        <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-black/40 p-4">
+          <JobSelectionFunnel
+            onComplete={() => {
+              queryClient.invalidateQueries({ queryKey: ['hasJob'] });
+            }}
+          />
+        </div>
+      )}
     </>
   );
 };

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<number | null>(null);
-  const [showJobSelectionFunnel, setShowJobSelectionFunnel] = useState(
-    () => localStorage.getItem('hasJob') !== 'true'
-  );
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   const formattedDate = useMemo(() => {
@@ -254,16 +250,6 @@ const Remind = () => {
           </div>
         </div>
       )}
-
-      {showJobSelectionFunnel && (
-        <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-black/40 p-4">
-          <JobSelectionFunnel
-            onComplete={() => {
-              setShowJobSelectionFunnel(false);
-            }}
-          />
-        </div>
-      )}
     </div>
   );
 };

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<HasJobResponse> => {
+  const { data } = await apiRequest.get('/api/v3/users/job');
+  return data.data;
+};
+
 export const getJobs = async (): Promise<JobsResponse> => {
   const { data } = await apiRequest.get('/api/v3/enums/jobs');
   return data.data;

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<HasJobResponse, AxiosError> => {
+  return useQuery({
+    queryKey: ['hasJob'],
+    queryFn: getHasJob,
+    enabled,
+  });
+};
+
 export const useGetJobs = (): UseQueryResult<JobsResponse, AxiosError> => {
   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'],
+      });
+    },
   });
 };

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<HTMLDivElement>(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(
         {

apps/client/src/shared/types/api.ts

@@ -50,3 +50,7 @@ export interface JobOption {
 export interface JobsResponse {
   jobs: JobOption[];
 }
+
+export interface HasJobResponse {
+  hasJob: boolean;
+}