Feat(client): 직무 조회 API 연결 (온보딩/대시보드)

.vscode/settings.json

@@ -12,7 +12,8 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "always"
   },
   "tailwindCSS.suggestions": true,
   "editor.quickSuggestions": {

apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx

@@ -1,12 +1,12 @@
 import { Progress, Button } from '@pinback/design-system/ui';
 import { lazy, Suspense } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import SocialLoginStep from './step/SocialLoginStep';
-const StoryStep = lazy(() => import('./step/StoryStep'));
-const JobStep = lazy(() => import('./step/JobStep'));
-const AlarmStep = lazy(() => import('./step/AlarmStep'));
-const MacStep = lazy(() => import('./step/MacStep'));
-const FinalStep = lazy(() => import('./step/FinalStep'));
+import SocialLoginStep from './step/socialLogin/SocialLoginStep';
+const StoryStep = lazy(() => import('./step/story/StoryStep'));
+const JobStep = lazy(() => import('./step/job/JobStep'));
+const AlarmStep = lazy(() => import('./step/alarm/AlarmStep'));
+const MacStep = lazy(() => import('./step/mac/MacStep'));
+const FinalStep = lazy(() => import('./step/final/FinalStep'));
 import { cva } from 'class-variance-authority';
 const stepProgress = [{ progress: 33 }, { progress: 66 }, { progress: 100 }];
 import {
@@ -47,8 +47,10 @@ const MainCard = () => {
     direction,
     alarmSelected,
     jobShareAgree,
+    selectedJob,
     setAlarmSelected,
     setJobShareAgree,
+    setSelectedJob,
     nextStep,
     prevStep,
   } = useOnboardingFunnel();
@@ -66,6 +68,8 @@ const MainCard = () => {
       case Step.JOB:
         return (
           <JobStep
+            selectedJob={selectedJob}
+            onSelectJob={setSelectedJob}
             agreeChecked={jobShareAgree}
             onAgreeChange={setJobShareAgree}
           />
@@ -132,7 +136,7 @@ const MainCard = () => {
             size="medium"
             className="ml-auto w-[4.8rem]"
             onClick={nextStep}
-            isDisabled={step === Step.JOB && !jobShareAgree}
+            isDisabled={step === Step.JOB && (!jobShareAgree || !selectedJob)}
           >
             다음
           </Button>

apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx → apps/client/src/pages/onBoarding/components/funnel/step/alarm/AlarmStep.tsx

@@ -1,5 +1,5 @@
 import dotori from '/assets/onBoarding/icons/dotori.svg';
-import AlarmBox from '../AlarmBox';
+import AlarmBox from '../../AlarmBox';
 import { useEffect } from 'react';
 import { sendGAEvent } from '@pinback/design-system/ui';
 interface AlarmStepProps {

apps/client/src/pages/onBoarding/components/funnel/step/job/JobStep.tsx

@@ -0,0 +1,55 @@
+import { Suspense } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import dotori from '/assets/onBoarding/icons/dotori.svg';
+import { Checkbox } from '@pinback/design-system/ui';
+import { JobsResponse } from '@shared/types/api';
+import JobCards from '@shared/components/jobSelectionFunnel/step/job/JobCards';
+import JobCardsSkeleton from '@shared/components/jobSelectionFunnel/step/job/JobCardsSkeleton';
+
+interface JobStepProps {
+  selectedJob: string | null;
+  onSelectJob: (jobName: string) => void;
+  agreeChecked: boolean;
+  onAgreeChange: (checked: boolean) => void;
+}
+
+const JobStep = ({
+  selectedJob,
+  onSelectJob,
+  agreeChecked,
+  onAgreeChange,
+}: JobStepProps) => {
+  const queryClient = useQueryClient();
+  const cachedJobs = queryClient.getQueryData<JobsResponse>(['jobs']);
+  const skeletonCount = cachedJobs?.jobs.length ?? 4;
+
+  return (
+    <div className="flex w-full flex-col items-center">
+      <img src={dotori} className="mb-[1.2rem]" alt="dotori" />
+      <div className="mb-[2.4rem] flex flex-col items-center gap-[0.8rem]">
+        <p className="head3 text-font-black-1">직무를 선택해주세요</p>
+        <p className="body2-m text-font-gray-3 text-center">
+          직무에 따라 아티클을 추천해드려요
+        </p>
+      </div>
+
+      <Suspense fallback={<JobCardsSkeleton count={skeletonCount} />}>
+        <JobCards activeJob={selectedJob} onSelectJob={onSelectJob} />
+      </Suspense>
+
+      <label className="mt-[2.4rem] flex max-w-[62rem] items-start gap-[1.2rem]">
+        <Checkbox
+          size="small"
+          isSelected={agreeChecked}
+          onSelectedChange={onAgreeChange}
+        />
+        <span className="body3-r text-font-gray-3">
+          내가 북마크한 아티클이 내 Google 이름과 함께 다른 사용자에게 추천될 수
+          있어요.
+        </span>
+      </label>
+    </div>
+  );
+};
+
+export default JobStep;

apps/client/src/pages/onBoarding/hooks/useOnboardingFunnel.ts

@@ -5,7 +5,11 @@ import { useCallback, useEffect, useState } from 'react';
 import { AlarmsType } from '@constants/alarms';
 import { normalizeTime } from '@pages/onBoarding/utils/formatRemindTime';
 import { registerServiceWorker } from '@pages/onBoarding/utils/registerServiceWorker';
-import { Step, stepOrder, StepType } from '@pages/onBoarding/constants/onboardingSteps';
+import {
+  Step,
+  stepOrder,
+  StepType,
+} from '@pages/onBoarding/constants/onboardingSteps';
 import { firebaseConfig } from '../../../firebase-config';
 import { getApp, getApps, initializeApp } from 'firebase/app';
 import { getMessaging, getToken } from 'firebase/messaging';
@@ -14,19 +18,25 @@ type AlarmSelection = 1 | 2 | 3;
 
 export function useOnboardingFunnel() {
   const { mutate: postSignData } = usePostSignUp();
-  const { currentStep: step, currentIndex, setStep, goNext, goPrev } =
-    useFunnel<StepType>({
-      steps: stepOrder,
-      initialStep: Step.STORY_0,
-    });
+  const {
+    currentStep: step,
+    currentIndex,
+    setStep,
+    goNext,
+    goPrev,
+  } = useFunnel<StepType>({
+    steps: stepOrder,
+    initialStep: Step.STORY_0,
+  });
 
   const [direction, setDirection] = useState(0);
   const [alarmSelected, setAlarmSelected] = useState<AlarmSelection>(1);
   const [isMac, setIsMac] = useState(false);
   const [userEmail, setUserEmail] = useState('');
   const [remindTime, setRemindTime] = useState('09:00');
   const [fcmToken, setFcmToken] = useState<string | null>(null);
-  const [jobShareAgree, setJobShareAgree] = useState(true);
+  const [jobShareAgree, setJobShareAgree] = useState(false);
+  const [selectedJob, setSelectedJob] = useState<string | null>(null);
 
   useEffect(() => {
     const storedEmail = localStorage.getItem('email');
@@ -37,7 +47,8 @@ export function useOnboardingFunnel() {
 
   const requestFCMToken = useCallback(async (): Promise<string | null> => {
     try {
-      const app = getApps().length > 0 ? getApp() : initializeApp(firebaseConfig);
+      const app =
+        getApps().length > 0 ? getApp() : initializeApp(firebaseConfig);
       const messaging = getMessaging(app);
       const permission = await Notification.requestPermission();
       registerServiceWorker();
@@ -149,8 +160,10 @@ export function useOnboardingFunnel() {
     direction,
     alarmSelected,
     jobShareAgree,
+    selectedJob,
     setAlarmSelected,
     setJobShareAgree,
+    setSelectedJob,
     nextStep,
     prevStep,
   };

apps/client/src/shared/apis/axios.ts

@@ -1,5 +1,5 @@
 import apiRequest from '@shared/apis/setting/axiosInstance';
-import { EditArticleRequest } from '@shared/types/api';
+import { EditArticleRequest, JobsResponse } from '@shared/types/api';
 import { formatLocalDateTime } from '@shared/utils/formatDateTime';
 
 export const getDashboardCategories = async () => {
@@ -81,3 +81,8 @@ export const getMyProfile = async () => {
   const { data } = await apiRequest.get('/api/v2/users/me');
   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

@@ -3,6 +3,7 @@ import {
   UseMutationResult,
   useQuery,
   UseQueryResult,
+  useSuspenseQuery,
 } from '@tanstack/react-query';
 import {
   deleteCategory,
@@ -18,6 +19,7 @@ import {
   deleteRemindArticle,
   getGoogleProfile,
   getMyProfile,
+  getJobs,
 } from '@shared/apis/axios';
 import { AxiosError } from 'axios';
 import {
@@ -26,6 +28,7 @@ import {
   EditArticleRequest,
   ArticleReadStatusResponse,
   ArticleDetailResponse,
+  JobsResponse,
 } from '@shared/types/api';
 import { fetchOGData } from '@shared/utils/fetchOgData';
 
@@ -146,9 +149,25 @@ export const useGetGoogleProfile = () => {
   });
 };
 
-export function useGetMyProfile() {
+export const useGetMyProfile = () => {
   return useQuery({
     queryKey: ['myProfile'],
     queryFn: getMyProfile,
   });
-}
+};
+
+export const useGetJobs = (): UseQueryResult<JobsResponse, AxiosError> => {
+  return useQuery({
+    queryKey: ['jobs'],
+    queryFn: getJobs,
+    staleTime: Infinity,
+  });
+};
+
+export const useSuspenseGetJobs = () => {
+  return useSuspenseQuery({
+    queryKey: ['jobs'],
+    queryFn: getJobs,
+    staleTime: Infinity,
+  });
+};