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

* feat: 직무 목록 get api function 구현

* feat: onboarding funnel job state 추가

* feat: jobs 목록 조회 api 연결

* chore: onboarding funnel file 구조 변경

* feat: dashboard job funnel 직무 조회 api 연결

* chore: 직무 선택 default 설정 로직 제거

* feat: 직무 공유 체크박스 동의 default value false로 변경

* fix: 불필요 코드 제거

* setting: 미사용 import문 저장 시 자동 제거 되도록 setting 추가

* refactor: 공통 jobCards & jobCardSkeleton 컴포넌트 재사용하도록 변경

Author: constantly-dev

.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/JobStep.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 {

…ing/components/funnel/step/AlarmStep.tsx …mponents/funnel/step/alarm/AlarmStep.tsxapps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx renamed to apps/client/src/pages/onBoarding/components/funnel/step/alarm/AlarmStep.tsx apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx renamed to apps/client/src/pages/onBoarding/components/funnel/step/alarm/AlarmStep.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;

…ing/components/funnel/step/FinalStep.tsx …mponents/funnel/step/final/FinalStep.tsxapps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx renamed to apps/client/src/pages/onBoarding/components/funnel/step/final/FinalStep.tsx apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx renamed to apps/client/src/pages/onBoarding/components/funnel/step/final/FinalStep.tsx

@@ -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,
   };