diff --git a/src/api/endpoints/class-onboarding/class-onboarding.ts b/src/api/endpoints/class-onboarding/class-onboarding.ts
new file mode 100644
index 000000000..f9215723f
--- /dev/null
+++ b/src/api/endpoints/class-onboarding/class-onboarding.ts
@@ -0,0 +1,88 @@
+import { axiosInstance } from '@/api/client/axios';
+import type {
+  ClassOnboardingCompleteRequest,
+  ClassOnboardingStep1Request,
+  ClassOnboardingStep2Request,
+  ClassOnboardingStep3Request,
+  ClassOnboardingStepResponse,
+} from '@/types/api/class-onboarding.types';
+
+export const saveClassOnboardingStep1 = async (
+  data: ClassOnboardingStep1Request,
+): Promise<ClassOnboardingStepResponse> => {
+  try {
+    const { data: resData } = await axiosInstance.post(
+      '/v6/class-onboarding/me/step-1',
+      data,
+    );
+
+    if (resData.statusCode !== 200) {
+      throw new Error('Failed to save class onboarding step 1');
+    }
+
+    return resData.content;
+  } catch (err) {
+    console.error('Error saving class onboarding step 1:', err);
+    throw err;
+  }
+};
+
+export const saveClassOnboardingStep2 = async (
+  data: ClassOnboardingStep2Request,
+): Promise<ClassOnboardingStepResponse> => {
+  try {
+    const { data: resData } = await axiosInstance.post(
+      '/v6/class-onboarding/me/step-2',
+      data,
+    );
+
+    if (resData.statusCode !== 200) {
+      throw new Error('Failed to save class onboarding step 2');
+    }
+
+    return resData.content;
+  } catch (err) {
+    console.error('Error saving class onboarding step 2:', err);
+    throw err;
+  }
+};
+
+export const saveClassOnboardingStep3 = async (
+  data: ClassOnboardingStep3Request,
+): Promise<ClassOnboardingStepResponse> => {
+  try {
+    const { data: resData } = await axiosInstance.post(
+      '/v6/class-onboarding/me/step-3',
+      data,
+    );
+
+    if (resData.statusCode !== 200) {
+      throw new Error('Failed to save class onboarding step 3');
+    }
+
+    return resData.content;
+  } catch (err) {
+    console.error('Error saving class onboarding step 3:', err);
+    throw err;
+  }
+};
+
+export const saveClassOnboardingComplete = async (
+  data: ClassOnboardingCompleteRequest,
+): Promise<ClassOnboardingStepResponse> => {
+  try {
+    const { data: resData } = await axiosInstance.post(
+      '/v6/class-onboarding/me/complete',
+      data,
+    );
+
+    if (resData.statusCode !== 200) {
+      throw new Error('Failed to save class onboarding complete');
+    }
+
+    return resData.content;
+  } catch (err) {
+    console.error('Error saving class onboarding complete:', err);
+    throw err;
+  }
+};
diff --git a/src/components/auth/modals/onboarding-modal/onboarding-modal.tsx b/src/components/auth/modals/onboarding-modal/onboarding-modal.tsx
index 6d5f597b5..ea53f668e 100644
--- a/src/components/auth/modals/onboarding-modal/onboarding-modal.tsx
+++ b/src/components/auth/modals/onboarding-modal/onboarding-modal.tsx
@@ -5,6 +5,12 @@ import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
 import { useOnboardingStore } from '@/stores/use-onboarding-store';
+import type {
+  ClassOnboardingCareer,
+  ClassOnboardingInterest,
+  ClassOnboardingJob,
+  VibeCodingExperienceLevel,
+} from '@/types/api/class-onboarding.types';
 import { Step1Nickname } from './steps/step-1-nickname';
 import { Step2Job } from './steps/step-2-job';
 import { Step3Goals } from './steps/step-3-goals';
@@ -16,27 +22,32 @@ interface OnboardingData {
   nickname: string;
   profileImageUrl?: string;
   profileImageFile?: File;
-  career?: string;
-  job?: string;
-  goals: string[];
-  goalEtcText?: string;
-  termsAgreed: boolean;
-  privacyAgreed: boolean;
-  marketingAgreed: boolean;
+  vibeCodingExperienceLevel?: VibeCodingExperienceLevel;
+  jobs: ClassOnboardingJob[];
+  jobEtcText?: string;
+  career?: ClassOnboardingCareer;
+  interests: ClassOnboardingInterest[];
+  interestEtcText?: string;
+  privacyConsent: boolean;
+  termsConsent: boolean;
+  marketingConsent: boolean;
 }
 
+const initialData: OnboardingData = {
+  nickname: '',
+  jobs: [],
+  interests: [],
+  privacyConsent: false,
+  termsConsent: false,
+  marketingConsent: false,
+};
+
 export function OnboardingModal() {
   const { isOpen, close } = useOnboardingStore();
   const [mounted, setMounted] = useState(false);
   const [currentStep, setCurrentStep] = useState<Step>(1);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [data, setData] = useState<OnboardingData>({
-    nickname: '',
-    goals: [],
-    termsAgreed: false,
-    privacyAgreed: false,
-    marketingAgreed: false,
-  });
+  const [data, setData] = useState<OnboardingData>(initialData);
 
   useEffect(() => {
     setMounted(true);
@@ -46,13 +57,7 @@ export function OnboardingModal() {
   useEffect(() => {
     if (isOpen) {
       setCurrentStep(1);
-      setData({
-        nickname: '',
-        goals: [],
-        termsAgreed: false,
-        privacyAgreed: false,
-        marketingAgreed: false,
-      });
+      setData(initialData);
     }
   }, [isOpen]);
 
@@ -78,20 +83,29 @@ export function OnboardingModal() {
             data={data}
             updateData={updateData}
             onNext={handleNext}
+            onSubmittingChange={setIsSubmitting}
           />
         );
       case 2:
         return (
-          <Step2Job data={data} updateData={updateData} onNext={handleNext} />
+          <Step2Job
+            data={data}
+            updateData={updateData}
+            onNext={handleNext}
+            onSubmittingChange={setIsSubmitting}
+          />
         );
       case 3:
         return (
-          <Step3Goals data={data} updateData={updateData} onNext={handleNext} />
+          <Step3Goals
+            data={data}
+            updateData={updateData}
+            onNext={handleNext}
+            onSubmittingChange={setIsSubmitting}
+          />
         );
       case 4:
-        return (
-          <Step4Completion data={data} onSubmittingChange={setIsSubmitting} />
-        );
+        return <Step4Completion nickname={data.nickname} />;
     }
   };
 
@@ -105,7 +119,7 @@ export function OnboardingModal() {
       />
 
       {/* Modal panel */}
-      <div className="relative flex max-h-[90vh] w-full max-w-7500 flex-col overflow-hidden rounded-200 bg-white">
+      <div className="relative flex max-h-modal w-full max-w-7500 flex-col overflow-hidden rounded-200 bg-white">
         {/* Header */}
         <div className="flex items-center justify-between px-500 pt-400 pb-300">
           {/* Back button */}
@@ -116,7 +130,7 @@ export function OnboardingModal() {
               className="rounded-100 p-100 text-gray-500 transition-colors hover:bg-gray-100"
               aria-label="이전"
             >
-              <X className="h-300 w-300 rotate-[135deg]" />
+              <X className="h-300 w-300 rotate-135" />
             </button>
           ) : (
             <div className="size-500" />
diff --git a/src/components/auth/modals/onboarding-modal/steps/step-1-nickname.tsx b/src/components/auth/modals/onboarding-modal/steps/step-1-nickname.tsx
index f4dc572d5..072c7fa47 100644
--- a/src/components/auth/modals/onboarding-modal/steps/step-1-nickname.tsx
+++ b/src/components/auth/modals/onboarding-modal/steps/step-1-nickname.tsx
@@ -1,42 +1,47 @@
 'use client';
 
+import { useMutation } from '@tanstack/react-query';
 import { Check, Loader2, RefreshCw } from 'lucide-react';
 import Image from 'next/image';
 import { useRef, useState } from 'react';
+import { saveClassOnboardingStep1 } from '@/api/endpoints/class-onboarding/class-onboarding';
 import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
 import { useNicknameCheckQuery } from '@/hooks/queries/auth/use-nickname-check';
-import { useCareersQuery } from '@/hooks/queries/user/use-update-user-profile-mutation';
-import type { CareerResponse } from '@/types/api/my-page.types';
+import {
+  VIBE_EXPERIENCE_OPTIONS,
+  type VibeCodingExperienceLevel,
+} from '@/types/api/class-onboarding.types';
 
 interface Step1Data {
   nickname: string;
   profileImageUrl?: string;
   profileImageFile?: File;
-  career?: string;
-  termsAgreed: boolean;
-  privacyAgreed: boolean;
-  marketingAgreed: boolean;
+  vibeCodingExperienceLevel?: VibeCodingExperienceLevel;
+  termsConsent: boolean;
+  privacyConsent: boolean;
+  marketingConsent: boolean;
 }
 
 interface Step1NicknameProps {
   data: Step1Data;
   updateData: (field: keyof Step1Data, value: unknown) => void;
   onNext: () => void;
+  onSubmittingChange: (v: boolean) => void;
 }
 
 const CONSENTS = [
   {
-    key: 'termsAgreed' as const,
+    key: 'termsConsent' as const,
     label: '[필수] 이용약관 동의',
     link: 'https://www.notion.so/gaan/29bfbb391d7980fba669f8d4de741021',
   },
   {
-    key: 'privacyAgreed' as const,
+    key: 'privacyConsent' as const,
     label: '[필수] 개인정보 처리방침 동의',
     link: 'https://www.notion.so/gaan/29bfbb391d7980fba669f8d4de741021',
   },
   {
-    key: 'marketingAgreed' as const,
+    key: 'marketingConsent' as const,
     label: '[선택] 마케팅 정보 수신 동의',
     link: 'https://www.notion.so/gaan/29bfbb391d7980fba669f8d4de741021',
   },
@@ -48,10 +53,15 @@ export function Step1Nickname({
   data,
   updateData,
   onNext,
+  onSubmittingChange,
 }: Step1NicknameProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isCheckRequested, setIsCheckRequested] = useState(false);
 
+  const { mutate: saveStep1, isPending } = useMutation({
+    mutationFn: saveClassOnboardingStep1,
+  });
+
   const isValidFormat = isValidNicknameFormat(data.nickname);
 
   const { data: nicknameCheck, isLoading: isChecking } = useNicknameCheckQuery(
@@ -63,14 +73,12 @@ export function Step1Nickname({
   const showAvailable = isCheckRequested && !isChecking && isAvailable === true;
   const showTaken = isCheckRequested && !isChecking && isAvailable === false;
 
-  const { data: careers = [] } = useCareersQuery();
-
   const canProceed =
     isValidFormat &&
     showAvailable &&
-    data.termsAgreed &&
-    data.privacyAgreed &&
-    !!data.career;
+    data.termsConsent &&
+    data.privacyConsent &&
+    !!data.vibeCodingExperienceLevel;
 
   const handleNicknameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     updateData('nickname', e.target.value);
@@ -92,13 +100,42 @@ export function Step1Nickname({
     updateData('profileImageFile', file);
   };
 
-  const toggleConsent = (key: keyof Step1Data) => {
+  const toggleConsent = (
+    key: keyof Pick<
+      Step1Data,
+      'termsConsent' | 'privacyConsent' | 'marketingConsent'
+    >,
+  ) => {
     updateData(key, !data[key]);
   };
 
+  const handleNext = () => {
+    if (!canProceed || isPending || !data.vibeCodingExperienceLevel) return;
+    onSubmittingChange(true);
+    saveStep1(
+      {
+        nickname: data.nickname,
+        privacyConsent: data.privacyConsent,
+        termsConsent: data.termsConsent,
+        marketingConsent: data.marketingConsent,
+        vibeCodingExperienceLevel: data.vibeCodingExperienceLevel,
+      },
+      {
+        onSuccess: () => {
+          onSubmittingChange(false);
+          onNext();
+        },
+        onError: () => {
+          onSubmittingChange(false);
+        },
+      },
+    );
+  };
+
   return (
     <div className="flex flex-col gap-400 overflow-y-auto">
       {/* Profile image */}
+      {/* ⚠️ TODO: 프로필 이미지 업로드 엔드포인트 확인 후 처리 (v6 step-1에 포함 안 됨) */}
       <div className="flex flex-col items-center gap-200">
         <div className="relative">
           <div className="size-1600 overflow-hidden rounded-full bg-rose-50">
@@ -196,7 +233,7 @@ export function Step1Nickname({
           <div
             key={consent.key}
             className="flex cursor-pointer items-center gap-150"
-            onClick={() => toggleConsent(consent.key as keyof Step1Data)}
+            onClick={() => toggleConsent(consent.key)}
           >
             <div
               className={cn(
@@ -227,33 +264,40 @@ export function Step1Nickname({
         ))}
       </div>
 
-      {/* Career options */}
+      {/* Vibe coding experience */}
       <div className="flex flex-col gap-150">
-        {careers.map((careerResponse: CareerResponse) => (
-          <button
-            key={careerResponse.career}
-            type="button"
-            onClick={() => updateData('career', careerResponse.career)}
-            className={cn(
-              'h-700 rounded-150 border px-300 text-left font-designer-14m transition-all duration-200',
-              data.career === careerResponse.career
-                ? 'border-rose-500 bg-rose-50 text-rose-500'
-                : 'border-gray-300 bg-white text-gray-800 hover:border-rose-300',
-            )}
-          >
-            {careerResponse.description}
-          </button>
-        ))}
+        <p className="font-designer-16b text-gray-800">
+          바이브 코딩 경험이 어느 정도인가요?
+        </p>
+        <div className="flex flex-col gap-150">
+          {VIBE_EXPERIENCE_OPTIONS.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() =>
+                updateData('vibeCodingExperienceLevel', option.value)
+              }
+              className={cn(
+                'rounded-150 border px-300 py-200 text-left font-designer-14m transition-all duration-200',
+                data.vibeCodingExperienceLevel === option.value
+                  ? 'border-rose-500 bg-rose-50 text-rose-500'
+                  : 'border-gray-300 bg-white text-gray-800 hover:border-rose-300',
+              )}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
       </div>
 
       {/* CTA */}
       <button
         type="button"
-        onClick={onNext}
-        disabled={!canProceed}
+        onClick={handleNext}
+        disabled={!canProceed || isPending}
         className={cn(
           'h-700 w-full rounded-100 font-designer-16b transition-colors',
-          canProceed
+          canProceed && !isPending
             ? 'bg-rose-500 text-white hover:bg-rose-600'
             : 'cursor-not-allowed bg-gray-200 text-gray-400',
         )}
diff --git a/src/components/auth/modals/onboarding-modal/steps/step-2-job.tsx b/src/components/auth/modals/onboarding-modal/steps/step-2-job.tsx
index 7626dd1c4..495d9694c 100644
--- a/src/components/auth/modals/onboarding-modal/steps/step-2-job.tsx
+++ b/src/components/auth/modals/onboarding-modal/steps/step-2-job.tsx
@@ -1,69 +1,103 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { saveClassOnboardingStep2 } from '@/api/endpoints/class-onboarding/class-onboarding';
 import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
+
 import {
-  useCareersQuery,
-  useJobsQuery,
-} from '@/hooks/queries/user/use-update-user-profile-mutation';
-import type { CareerResponse, JobResponse } from '@/types/api/my-page.types';
+  CAREER_OPTIONS,
+  JOB_OPTIONS,
+  type ClassOnboardingCareer,
+  type ClassOnboardingJob,
+} from '@/types/api/class-onboarding.types';
 
 interface Step2Data {
-  job?: string;
-  career?: string;
+  jobs: ClassOnboardingJob[];
+  jobEtcText?: string;
+  career?: ClassOnboardingCareer;
 }
 
 interface Step2JobProps {
   data: Step2Data;
   updateData: (field: keyof Step2Data, value: unknown) => void;
   onNext: () => void;
+  onSubmittingChange: (v: boolean) => void;
 }
 
-export function Step2Job({ data, updateData, onNext }: Step2JobProps) {
-  const { data: jobs = [] } = useJobsQuery();
-  const { data: careers = [] } = useCareersQuery();
-
+export function Step2Job({
+  data,
+  updateData,
+  onNext,
+  onSubmittingChange,
+}: Step2JobProps) {
+  const { mutate: saveStep2, isPending } = useMutation({
+    mutationFn: saveClassOnboardingStep2,
+  });
   const [etcInput, setEtcInput] = useState('');
   const [etcMode, setEtcMode] = useState(false);
-  const initializedRef = useRef(false);
-
-  useEffect(() => {
-    if (jobs.length === 0 || initializedRef.current) return;
-    initializedRef.current = true;
-    const jobKeys = jobs.map((j: JobResponse) => j.job);
-    if (data.job && !jobKeys.includes(data.job)) {
-      setEtcMode(true);
-      setEtcInput(data.job);
-    }
-  }, [jobs, data.job]);
 
-  const canProceed = !!data.job && !!data.career;
-  const isEtcActive = etcMode;
+  const isOtherSelected = data.jobs.includes('CLASS_ONBOARDING_OTHER');
+  const canProceed =
+    data.jobs.length > 0 &&
+    !!data.career &&
+    (!isOtherSelected || !!data.jobEtcText?.trim());
 
-  const handleJobSelect = (jobKey: string) => {
-    if (etcMode) {
-      setEtcMode(false);
-      setEtcInput('');
+  const toggleJob = (value: ClassOnboardingJob) => {
+    if (data.jobs.includes(value)) {
+      updateData(
+        'jobs',
+        data.jobs.filter((j) => j !== value),
+      );
+    } else {
+      updateData('jobs', [...data.jobs, value]);
     }
-    updateData('job', data.job === jobKey ? undefined : jobKey);
   };
 
   const handleEtcClick = () => {
-    updateData('job', undefined);
     setEtcMode(true);
+    if (!isOtherSelected) {
+      updateData('jobs', [...data.jobs, 'CLASS_ONBOARDING_OTHER']);
+    }
   };
 
   const handleEtcAdd = () => {
     if (!etcInput.trim()) return;
-    updateData('job', etcInput.trim());
+    updateData('jobEtcText', etcInput.trim());
     setEtcMode(false);
   };
 
   const handleEtcCancel = () => {
     setEtcMode(false);
     setEtcInput('');
-    const jobKeys = jobs.map((j: JobResponse) => j.job);
-    if (data.job && !jobKeys.includes(data.job)) updateData('job', undefined);
+    updateData(
+      'jobs',
+      data.jobs.filter((j) => j !== 'CLASS_ONBOARDING_OTHER'),
+    );
+    updateData('jobEtcText', '');
+  };
+
+  const handleNext = () => {
+    if (!canProceed || isPending || !data.career) return;
+    onSubmittingChange(true);
+    saveStep2(
+      {
+        jobs: data.jobs,
+        career: data.career,
+        ...(isOtherSelected && data.jobEtcText?.trim()
+          ? { jobEtcText: data.jobEtcText.trim() }
+          : {}),
+      },
+      {
+        onSuccess: () => {
+          onSubmittingChange(false);
+          onNext();
+        },
+        onError: () => {
+          onSubmittingChange(false);
+        },
+      },
+    );
   };
 
   return (
@@ -74,14 +108,14 @@ export function Step2Job({ data, updateData, onNext }: Step2JobProps) {
         <p className="font-designer-14r text-gray-500">
           해당하는 직무를 선택해주세요.
         </p>
-        <div className="flex flex-wrap gap-150 pt-150">
-          {jobs.map((jobItem: JobResponse) => {
-            const selected = data.job === jobItem.job;
+        <div className="flex flex-wrap items-center gap-150 pt-150">
+          {JOB_OPTIONS.map((jobItem) => {
+            const selected = data.jobs.includes(jobItem.value);
             return (
               <button
-                key={jobItem.job}
+                key={jobItem.value}
                 type="button"
-                onClick={() => handleJobSelect(jobItem.job)}
+                onClick={() => toggleJob(jobItem.value)}
                 className={cn(
                   'rounded-full px-250 py-125 font-designer-16r transition-colors',
                   selected
@@ -89,7 +123,7 @@ export function Step2Job({ data, updateData, onNext }: Step2JobProps) {
                     : 'border border-gray-300 text-gray-500 hover:border-rose-300',
                 )}
               >
-                {jobItem.description}
+                {jobItem.label}
               </button>
             );
           })}
@@ -98,40 +132,40 @@ export function Step2Job({ data, updateData, onNext }: Step2JobProps) {
             onClick={handleEtcClick}
             className={cn(
               'rounded-full px-250 py-125 font-designer-16r transition-colors',
-              isEtcActive
-                ? 'bg-rose-500 text-white'
+              isOtherSelected
+                ? 'border border-rose-500 text-rose-500'
                 : 'border border-gray-300 text-gray-500 hover:border-rose-300',
             )}
           >
             기타+
           </button>
+          {etcMode && (
+            <div className="flex items-center gap-125 rounded-500 border border-rose-500 px-250 py-100">
+              <input
+                type="text"
+                value={etcInput}
+                onChange={(e) => setEtcInput(e.target.value)}
+                placeholder="직무를 입력해주세요"
+                className="flex-1 border-none bg-transparent font-designer-14r text-gray-800 outline-none placeholder:text-gray-400"
+              />
+              <button
+                type="button"
+                onClick={handleEtcAdd}
+                disabled={!etcInput.trim()}
+                className="rounded-50 bg-rose-500 px-100 py-50 font-designer-13r text-white disabled:opacity-50"
+              >
+                추가
+              </button>
+              <button
+                type="button"
+                onClick={handleEtcCancel}
+                className="rounded-50 bg-rose-100 px-100 py-50 font-designer-13r text-rose-500"
+              >
+                취소
+              </button>
+            </div>
+          )}
         </div>
-        {etcMode && (
-          <div className="flex gap-150">
-            <input
-              type="text"
-              value={etcInput}
-              onChange={(e) => setEtcInput(e.target.value)}
-              placeholder="직무를 입력해주세요"
-              className="flex-1 rounded-150 border border-rose-500 px-250 py-125 font-designer-14r text-gray-800 outline-none placeholder:text-gray-500"
-            />
-            <button
-              type="button"
-              onClick={handleEtcAdd}
-              disabled={!etcInput.trim()}
-              className="rounded-150 bg-rose-500 px-200 py-125 font-designer-14m text-white disabled:opacity-50"
-            >
-              추가
-            </button>
-            <button
-              type="button"
-              onClick={handleEtcCancel}
-              className="rounded-150 bg-rose-50 px-200 py-125 font-designer-14m text-rose-500"
-            >
-              취소
-            </button>
-          </div>
-        )}
       </div>
 
       {/* Career section */}
@@ -141,32 +175,31 @@ export function Step2Job({ data, updateData, onNext }: Step2JobProps) {
           현재 개발 경력 수준을 선택해주세요.
         </p>
         <div className="flex flex-col gap-150 pt-150">
-          {careers.map((careerItem: CareerResponse) => (
+          {CAREER_OPTIONS.map((careerItem) => (
             <button
-              key={careerItem.career}
+              key={careerItem.value}
               type="button"
-              onClick={() => updateData('career', careerItem.career)}
+              onClick={() => updateData('career', careerItem.value)}
               className={cn(
                 'h-700 rounded-150 border px-188 text-left transition-all duration-200',
-                data.career === careerItem.career
+                data.career === careerItem.value
                   ? 'border-rose-500 font-designer-16b text-rose-500'
                   : 'border-gray-300 font-designer-16r text-gray-500 hover:border-rose-300',
               )}
             >
-              {careerItem.description}
+              {careerItem.label}
             </button>
           ))}
         </div>
       </div>
 
-      {/* CTA */}
       <button
         type="button"
-        onClick={onNext}
-        disabled={!canProceed}
+        onClick={handleNext}
+        disabled={!canProceed || isPending}
         className={cn(
           'h-700 w-full rounded-100 font-designer-16b transition-colors',
-          canProceed
+          canProceed && !isPending
             ? 'bg-rose-500 text-white hover:bg-rose-600'
             : 'cursor-not-allowed bg-gray-200 text-gray-400',
         )}
diff --git a/src/components/auth/modals/onboarding-modal/steps/step-3-goals.tsx b/src/components/auth/modals/onboarding-modal/steps/step-3-goals.tsx
index 285d06a42..d1a1b810f 100644
--- a/src/components/auth/modals/onboarding-modal/steps/step-3-goals.tsx
+++ b/src/components/auth/modals/onboarding-modal/steps/step-3-goals.tsx
@@ -1,44 +1,75 @@
 'use client';
 
+import { useMutation } from '@tanstack/react-query';
+import { saveClassOnboardingStep3 } from '@/api/endpoints/class-onboarding/class-onboarding';
 import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
-
-const GOAL_OPTIONS = [
-  { key: '내 포트폴리오 사이트', label: '내 포트폴리오 사이트' },
-  { key: '사이드 프로젝트 웹/앱', label: '사이드 프로젝트 웹/앱' },
-  { key: '업무 자동화 도구', label: '업무 자동화 도구' },
-  { key: '수익화 서비스(창업, 부업)', label: '수익화 서비스(창업, 부업)' },
-  { key: '기타', label: '기타(상세 내용 기재)' },
-] as const;
+import {
+  INTEREST_OPTIONS,
+  type ClassOnboardingInterest,
+} from '@/types/api/class-onboarding.types';
 
 interface Step3Data {
-  goals: string[];
-  goalEtcText?: string;
+  interests: ClassOnboardingInterest[];
+  interestEtcText?: string;
 }
 
 interface Step3GoalsProps {
   data: Step3Data;
   updateData: (field: keyof Step3Data, value: unknown) => void;
   onNext: () => void;
+  onSubmittingChange: (v: boolean) => void;
 }
 
-export function Step3Goals({ data, updateData, onNext }: Step3GoalsProps) {
-  const goals = data.goals;
-  const isEtcSelected = goals.includes('기타');
+export function Step3Goals({
+  data,
+  updateData,
+  onNext,
+  onSubmittingChange,
+}: Step3GoalsProps) {
+  const { mutate: saveStep3, isPending } = useMutation({
+    mutationFn: saveClassOnboardingStep3,
+  });
+
+  const interests = data.interests;
+  const isOtherSelected = interests.includes('OTHER');
   const canProceed =
-    goals.length >= 1 && (!isEtcSelected || !!data.goalEtcText?.trim());
+    interests.length >= 1 &&
+    (!isOtherSelected || !!data.interestEtcText?.trim());
 
-  const toggleGoal = (key: string) => {
-    if (goals.includes(key)) {
+  const toggleInterest = (value: ClassOnboardingInterest) => {
+    if (interests.includes(value)) {
       updateData(
-        'goals',
-        goals.filter((g) => g !== key),
+        'interests',
+        interests.filter((i) => i !== value),
       );
-      if (key === '기타') updateData('goalEtcText', '');
-    } else if (goals.length < 2) {
-      updateData('goals', [...goals, key]);
+      if (value === 'OTHER') updateData('interestEtcText', '');
+    } else if (interests.length < 2) {
+      updateData('interests', [...interests, value]);
     }
   };
 
+  const handleNext = () => {
+    if (!canProceed || isPending) return;
+    onSubmittingChange(true);
+    saveStep3(
+      {
+        interests,
+        ...(isOtherSelected && data.interestEtcText?.trim()
+          ? { interestEtcText: data.interestEtcText.trim() }
+          : {}),
+      },
+      {
+        onSuccess: () => {
+          onSubmittingChange(false);
+          onNext();
+        },
+        onError: () => {
+          onSubmittingChange(false);
+        },
+      },
+    );
+  };
+
   return (
     <div className="flex flex-col gap-400">
       <div className="flex flex-col gap-150">
@@ -51,16 +82,16 @@ export function Step3Goals({ data, updateData, onNext }: Step3GoalsProps) {
       </div>
 
       <div className="flex flex-col gap-160">
-        {GOAL_OPTIONS.map((option) => {
-          const selected = goals.includes(option.key);
-          const isDisabled = !selected && goals.length >= 2;
-          const isEtc = option.key === '기타';
+        {INTEREST_OPTIONS.map((option) => {
+          const selected = interests.includes(option.value);
+          const isDisabled = !selected && interests.length >= 2;
+          const isOtc = option.value === 'OTHER';
 
           return (
-            <div key={option.key} className="flex flex-col gap-150">
+            <div key={option.value} className="flex flex-col gap-150">
               <button
                 type="button"
-                onClick={() => toggleGoal(option.key)}
+                onClick={() => toggleInterest(option.value)}
                 disabled={isDisabled}
                 className={cn(
                   'h-700 rounded-150 border px-188 text-left transition-all duration-200',
@@ -73,10 +104,12 @@ export function Step3Goals({ data, updateData, onNext }: Step3GoalsProps) {
               >
                 {option.label}
               </button>
-              {isEtc && isEtcSelected && (
+              {isOtc && isOtherSelected && (
                 <textarea
-                  value={data.goalEtcText ?? ''}
-                  onChange={(e) => updateData('goalEtcText', e.target.value)}
+                  value={data.interestEtcText ?? ''}
+                  onChange={(e) =>
+                    updateData('interestEtcText', e.target.value)
+                  }
                   placeholder="내용을 입력해주세요."
                   rows={3}
                   className="resize-none rounded-150 border border-rose-500 px-188 py-200 font-designer-14r text-gray-800 outline-none placeholder:text-gray-500"
@@ -87,14 +120,13 @@ export function Step3Goals({ data, updateData, onNext }: Step3GoalsProps) {
         })}
       </div>
 
-      {/* CTA */}
       <button
         type="button"
-        onClick={onNext}
-        disabled={!canProceed}
+        onClick={handleNext}
+        disabled={!canProceed || isPending}
         className={cn(
           'h-700 w-full rounded-100 font-designer-16b transition-colors',
-          canProceed
+          canProceed && !isPending
             ? 'bg-rose-500 text-white hover:bg-rose-600'
             : 'cursor-not-allowed bg-gray-200 text-gray-400',
         )}
diff --git a/src/components/auth/modals/onboarding-modal/steps/step-4-completion.tsx b/src/components/auth/modals/onboarding-modal/steps/step-4-completion.tsx
index 9f4d5d34e..8b1b9e297 100644
--- a/src/components/auth/modals/onboarding-modal/steps/step-4-completion.tsx
+++ b/src/components/auth/modals/onboarding-modal/steps/step-4-completion.tsx
@@ -1,87 +1,30 @@
 'use client';
 
+import { useMutation } from '@tanstack/react-query';
 import Image from 'next/image';
-import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
-import { writeAccessTokenSession } from '@/features/auth/model/client-auth-session';
-import {
-  useSignUpMutation,
-  useUploadProfileImageMutation,
-} from '@/hooks/queries/auth/use-auth-mutation';
+import { useRouter } from 'next/navigation';
+import { saveClassOnboardingComplete } from '@/api/endpoints/class-onboarding/class-onboarding';
 import { useOnboardingStore } from '@/stores/use-onboarding-store';
-import { useToastStore } from '@/stores/use-toast-store';
-import type { SignUpRequest } from '@/types/api/auth.types';
-
-interface Step4Data {
-  nickname: string;
-  profileImageFile?: File;
-  job?: string;
-  career?: string;
-  goals: string[];
-  goalEtcText?: string;
-}
 
 interface Step4CompletionProps {
-  data: Step4Data;
-  onSubmittingChange: (v: boolean) => void;
-}
-
-function getImageExtension(file: File): SignUpRequest['imageExtension'] {
-  if (file.type === 'image/png') return 'PNG';
-  if (file.type === 'image/gif') return 'GIF';
-  if (file.type === 'image/webp') return 'WEBP';
-  return 'JPG';
-}
-
-function buildGoalString(goals: string[], etcText?: string): string {
-  return goals
-    .map((g) => (g === '기타' && etcText?.trim() ? etcText.trim() : g))
-    .join(', ');
+  nickname: string;
 }
 
-export function Step4Completion({
-  data,
-  onSubmittingChange,
-}: Step4CompletionProps) {
+export function Step4Completion({ nickname }: Step4CompletionProps) {
   const { close } = useOnboardingStore();
-  const { mutate: signUp, isPending } = useSignUpMutation();
-  const { mutateAsync: uploadImage } = useUploadProfileImageMutation();
+  const router = useRouter();
+  const { mutate: complete, isPending } = useMutation({
+    mutationFn: () =>
+      saveClassOnboardingComplete({
+        confirmedOnboardingCompletion: true,
+      }),
+  });
 
   const handleFinish = () => {
-    const request: SignUpRequest = {
-      nickname: data.nickname,
-      ...(data.profileImageFile
-        ? { imageExtension: getImageExtension(data.profileImageFile) }
-        : {}),
-      ...(data.job ? { jobs: [data.job] } : {}),
-      ...(data.career ? { career: data.career } : {}),
-      ...(data.goals.length > 0
-        ? { goal: buildGoalString(data.goals, data.goalEtcText) }
-        : {}),
-    };
-
-    onSubmittingChange(true);
-    signUp(request, {
-      onSuccess: async (response) => {
-        const newToken = response?.content?.accessToken;
-        if (newToken) writeAccessTokenSession(newToken);
-        const uploadUrl = response?.content?.uploadUrl;
-        try {
-          if (uploadUrl && data.profileImageFile) {
-            const formData = new FormData();
-            formData.append('file', data.profileImageFile);
-            await uploadImage({ uploadUrl, file: formData });
-          }
-        } catch {
-          useToastStore
-            .getState()
-            .showToast('프로필 이미지 업로드에 실패했어요.', 'error');
-        } finally {
-          close();
-          onSubmittingChange(false);
-        }
-      },
-      onError: () => {
-        onSubmittingChange(false);
+    complete(undefined, {
+      onSuccess: () => {
+        close();
+        router.push('/class');
       },
     });
   };
@@ -90,8 +33,7 @@ export function Step4Completion({
     <div className="flex flex-col items-center gap-500 py-400">
       <div className="flex flex-col items-center gap-100">
         <p className="font-designer-20b text-gray-800">
-          <span className="text-rose-500">{data.nickname}</span> 빌더님, 준비
-          완료!
+          <span className="text-rose-500">{nickname}</span> 빌더님, 준비 완료!
         </p>
         <p className="font-designer-16r text-gray-500">
           ZERO-ONE 트랙 위에서, 첫 발을 내딛어보세요.
@@ -99,22 +41,18 @@ export function Step4Completion({
       </div>
 
       <Image
-        src="/onboarding/mascot.png"
+        src="/zerowoni_walk.gif"
         alt="Zero and Wonnie mascot"
         width={300}
         height={227}
+        unoptimized
       />
 
       <button
         type="button"
         onClick={handleFinish}
         disabled={isPending}
-        className={cn(
-          'h-700 w-full rounded-100 font-designer-16b transition-colors',
-          isPending
-            ? 'cursor-not-allowed bg-gray-200 text-gray-400'
-            : 'bg-rose-500 text-white hover:bg-rose-600',
-        )}
+        className="h-700 w-full rounded-100 bg-rose-500 font-designer-16b text-white transition-colors hover:bg-rose-600 disabled:opacity-60"
       >
         ZERO-ONE 시작하기
       </button>
diff --git a/src/types/api/class-onboarding.types.ts b/src/types/api/class-onboarding.types.ts
new file mode 100644
index 000000000..8d78743cf
--- /dev/null
+++ b/src/types/api/class-onboarding.types.ts
@@ -0,0 +1,118 @@
+export const VIBE_EXPERIENCE_OPTIONS = [
+  { value: 'CURIOUS_NO_EXPERIENCE', label: '관심은 있는데 아직 안 해봤어요' },
+  {
+    value: 'COPY_PASTE_WITH_AI',
+    label: 'AI한테 코드 짜달라고 해서 복사 붙여넣기해봤어요',
+  },
+  {
+    value: 'TRIED_WITH_AI_BUT_GAVE_UP',
+    label: 'AI랑 같이 만들다가 막혀서 포기한 적이 있어요',
+  },
+  {
+    value: 'BUILT_WORKING_RESULT',
+    label: '원하는대로 동작하는 결과물을 만들어본 적 있어요',
+  },
+  {
+    value: 'DEPLOYED_AND_SHARED',
+    label: '배포까지 해서 실제로 쓰거나 남에게 보여준 적 있어요',
+  },
+] as const;
+
+export type VibeCodingExperienceLevel =
+  | (typeof VIBE_EXPERIENCE_OPTIONS)[number]['value']
+  | (string & {});
+
+export const IT_JOB_VALUES = [
+  'IT_NOBASE_BUSINESS_STARTUP',
+  'IT_NOBASE_AUTOMATION',
+  'IT_NOBASE_MY_SERVICE',
+  'IT_PRACTITIONER_PM_PO_PLANNING',
+  'IT_PRACTITIONER_FRONTEND',
+  'IT_PRACTITIONER_BACKEND',
+  'IT_PRACTITIONER_AI_ML',
+  'IT_PRACTITIONER_IOS',
+  'IT_PRACTITIONER_ANDROID',
+  'IT_PRACTITIONER_DEVOPS',
+  'IT_PRACTITIONER_DATA_ANALYSIS',
+  'IT_PRACTITIONER_QA',
+  'IT_PRACTITIONER_GAME_DEV',
+  'IT_PRACTITIONER_DESIGN',
+  'IT_PRACTITIONER_MARKETING',
+  'IT_PRACTITIONER_ETC',
+] as const;
+
+export const JOB_OPTIONS = [
+  { value: 'CLASS_ONBOARDING_DESIGNER', label: '디자이너' },
+  { value: 'CLASS_ONBOARDING_MARKETER', label: '마케터' },
+  {
+    value: 'CLASS_ONBOARDING_SERVICE_PLANNER_PM_PO',
+    label: '서비스 기획자/PM/PO',
+  },
+  { value: 'CLASS_ONBOARDING_STUDENT_JOB_SEEKER', label: '학생/취업준비생' },
+  { value: 'CLASS_ONBOARDING_ENTREPRENEUR', label: '창업가/예비 창업자' },
+  {
+    value: 'CLASS_ONBOARDING_NON_MAJOR_SELF_DEVELOPMENT',
+    label: '비전공/자기개발',
+  },
+  { value: 'CLASS_ONBOARDING_DEVELOPER', label: '개발자' },
+] as const;
+
+export type ClassOnboardingJob =
+  | (typeof JOB_OPTIONS)[number]['value']
+  | (typeof IT_JOB_VALUES)[number]
+  | (string & {});
+
+export const CAREER_OPTIONS = [
+  { value: 'JOB_SEEKER', label: '학생/취업준비생' },
+  { value: 'JUNIOR', label: '주니어(0~3년)' },
+  { value: 'MIDDLE', label: '미들(3~5년)' },
+  { value: 'SENIOR', label: '시니어(5년~)' },
+  { value: 'RETIRED', label: '퇴직자' },
+] as const;
+
+export type ClassOnboardingCareer =
+  | (typeof CAREER_OPTIONS)[number]['value']
+  | (string & {});
+
+export const INTEREST_OPTIONS = [
+  { value: 'PORTFOLIO_SITE', label: '내 포트폴리오 사이트' },
+  { value: 'SIDE_PROJECT_WEB_APP', label: '사이드 프로젝트 웹/앱' },
+  { value: 'WORK_AUTOMATION_TOOL', label: '업무 자동화 도구' },
+  { value: 'MONETIZATION_SERVICE', label: '수익화 서비스(창업, 부업)' },
+  { value: 'OTHER', label: '기타(상세 내용 기재)' },
+] as const;
+
+export type ClassOnboardingInterest =
+  | (typeof INTEREST_OPTIONS)[number]['value']
+  | (string & {});
+
+export interface ClassOnboardingStep1Request {
+  nickname: string;
+  privacyConsent: boolean;
+  termsConsent: boolean;
+  marketingConsent: boolean;
+  vibeCodingExperienceLevel: VibeCodingExperienceLevel;
+}
+
+export interface ClassOnboardingStep2Request {
+  jobs: ClassOnboardingJob[];
+  jobEtcText?: string;
+  career: ClassOnboardingCareer;
+}
+
+export interface ClassOnboardingStep3Request {
+  interests: ClassOnboardingInterest[];
+  interestEtcText?: string;
+}
+
+export interface ClassOnboardingCompleteRequest {
+  confirmedOnboardingCompletion: boolean;
+}
+
+export interface ClassOnboardingStepResponse {
+  savedStep: string;
+  nextStep: string;
+  savedNickname: string;
+  savedJobs: ClassOnboardingJob[];
+  savedInterests: ClassOnboardingInterest[];
+}