Feat(client, design-system): 온보딩 직무 step UI 추가, checkbox 구현

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

@@ -3,6 +3,7 @@ import { useState, useEffect, 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'));
@@ -36,15 +37,19 @@ const variants = {
 };
 
 const CardStyle = cva(
-  'bg-white-bg flex h-[54.8rem] w-[63.2rem] flex-col items-center justify-between rounded-[2.4rem] pt-[3.2rem]',
+  'bg-white-bg flex h-[54.8rem] w-full flex-col items-center justify-between rounded-[2.4rem] pt-[3.2rem]',
   {
     variants: {
       overflow: {
         true: 'overflow-visible',
         false: 'overflow-hidden',
       },
+      size: {
+        default: 'max-w-[63.2rem]',
+        wide: 'max-w-[82.6rem]',
+      },
     },
-    defaultVariants: { overflow: false },
+    defaultVariants: { overflow: false, size: 'default' },
   }
 );
 
@@ -60,6 +65,7 @@ const MainCard = () => {
   const [userEmail, setUserEmail] = useState('');
   const [remindTime, setRemindTime] = useState('09:00');
   const [fcmToken, setFcmToken] = useState<string | null>(null);
+  const [jobShareAgree, setJobShareAgree] = useState(true);
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
@@ -131,6 +137,13 @@ const MainCard = () => {
         );
       case Step.SOCIAL_LOGIN:
         return <SocialLoginStep />;
+      case Step.JOB:
+        return (
+          <JobStep
+            agreeChecked={jobShareAgree}
+            onAgreeChange={setJobShareAgree}
+          />
+        );
       case Step.ALARM:
         return (
           <AlarmStep selected={alarmSelected} setSelected={setAlarmSelected} />
@@ -201,6 +214,7 @@ const MainCard = () => {
     <div
       className={CardStyle({
         overflow: step === Step.ALARM && alarmSelected === 3,
+        size: step === Step.JOB ? 'wide' : 'default',
       })}
     >
       {storySteps.includes(step) && (
@@ -246,6 +260,7 @@ const MainCard = () => {
             size="medium"
             className="ml-auto w-[4.8rem]"
             onClick={nextStep}
+            isDisabled={step === Step.JOB && !jobShareAgree}
           >
             다음
           </Button>

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

@@ -0,0 +1,148 @@
+import { useId, useMemo, useState } from 'react';
+import { cva } from 'class-variance-authority';
+import dotori from '/assets/onBoarding/icons/dotori.svg';
+import jobPlan from '/assets/onBoarding/jobs/jobPlan.svg';
+import jobDesign from '/assets/onBoarding/jobs/jobDesign.svg';
+import jobFrontend from '/assets/onBoarding/jobs/jobFrontend.svg';
+import jobBackend from '/assets/onBoarding/jobs/jobBackend.svg';
+import { Checkbox } from '@pinback/design-system/ui';
+
+type JobKey = 'planner' | 'designer' | 'frontend' | 'backend';
+
+interface JobStepProps {
+  selectedJob?: JobKey;
+  onSelectJob?: (job: JobKey) => void;
+  agreeChecked?: boolean;
+  onAgreeChange?: (checked: boolean) => void;
+}
+
+const jobCardStyle = cva(
+  'flex h-[22.4rem] w-[18rem] flex-col items-center justify-center rounded-[1.2rem] border transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main400 focus-visible:ring-offset-2 focus-visible:ring-offset-white-bg',
+  {
+    variants: {
+      selected: {
+        true: 'border-main400 bg-main0',
+        false: 'border-transparent bg-white-bg hover:border-main300',
+      },
+    },
+    defaultVariants: { selected: false },
+  }
+);
+
+const JobIcon = ({ type }: { type: JobKey }) => {
+  const iconMap: Record<JobKey, string> = {
+    planner: jobPlan,
+    designer: jobDesign,
+    frontend: jobFrontend,
+    backend: jobBackend,
+  };
+
+  return (
+    <img
+      src={iconMap[type]}
+      alt={`${type} 직무 아이콘`}
+      aria-hidden="true"
+      className="h-[10.2rem] w-[10.2rem]"
+    />
+  );
+};
+
+const JobStep = ({
+  selectedJob,
+  onSelectJob,
+  agreeChecked,
+  onAgreeChange,
+}: JobStepProps) => {
+  const defaultJob: JobKey = 'planner';
+  const [internalJob, setInternalJob] = useState<JobKey>(defaultJob);
+  const [internalAgree, setInternalAgree] = useState(true);
+  const agreeId = useId();
+
+  const activeJob = selectedJob ?? internalJob;
+  const activeAgree = agreeChecked ?? internalAgree;
+
+  const jobs = useMemo(
+    () => [
+      { key: 'planner', label: '기획자' },
+      { key: 'designer', label: '디자이너' },
+      { key: 'frontend', label: '프론트엔드' },
+      { key: 'backend', label: '백엔드' },
+    ],
+    []
+  );
+
+  const handleSelect = (job: JobKey) => {
+    onSelectJob?.(job);
+    if (!onSelectJob || selectedJob === undefined) {
+      setInternalJob(job);
+    }
+  };
+
+  const handleAgreeChange = (checked: boolean) => {
+    onAgreeChange?.(checked);
+    if (!onAgreeChange || agreeChecked === undefined) {
+      setInternalAgree(checked);
+    }
+  };
+
+  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>
+
+      <div
+        role="radiogroup"
+        aria-label="직무 선택"
+        className="grid w-full grid-cols-2 justify-items-center gap-[1.4rem] sm:grid-cols-4"
+      >
+        {jobs.map((job) => {
+          const isSelected = activeJob === job.key;
+          return (
+            <button
+              key={job.key}
+              type="button"
+              role="radio"
+              aria-checked={isSelected}
+              onClick={() => handleSelect(job.key as JobKey)}
+              className={jobCardStyle({ selected: isSelected })}
+            >
+              <div className="flex flex-col items-center gap-[1.6rem]">
+                <JobIcon type={job.key as JobKey} />
+                <span
+                  className={`sub3-sb ${
+                    isSelected ? 'text-main500' : 'text-font-black-1'
+                  }`}
+                >
+                  {job.label}
+                </span>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      <label
+        htmlFor={agreeId}
+        className="mt-[2.4rem] flex max-w-[62rem] items-start gap-[1.2rem]"
+      >
+        <Checkbox
+          id={agreeId}
+          size="small"
+          isSelected={activeAgree}
+          onSelectedChange={handleAgreeChange}
+        />
+        <span className="body3-r text-font-gray-3">
+          내가 북마크한 아티클이 내 Google 이름과 함께 다른 사용자에게 추천될 수
+          있어요.
+        </span>
+      </label>
+    </div>
+  );
+};
+
+export default JobStep;

apps/client/src/pages/onBoarding/constants/onboardingSteps.ts

@@ -3,6 +3,7 @@ export const Step = {
   STORY_1: 'STORY_1',
   STORY_2: 'STORY_2',
   SOCIAL_LOGIN: 'SOCIAL_LOGIN',
+  JOB: 'JOB',
   ALARM: 'ALARM',
   MAC: 'MAC',
   FINAL: 'FINAL',
@@ -21,6 +22,7 @@ export const stepOrder: StepType[] = [
   Step.STORY_1,
   Step.STORY_2,
   Step.SOCIAL_LOGIN,
+  Step.JOB,
   Step.ALARM,
   Step.MAC,
   Step.FINAL,

packages/design-system/src/components/checkbox/Checkbox.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Checkbox from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          '기본 체크박스 컴포넌트입니다. `isSelected`로 제어하고 `onSelectedChange`로 상태를 전달합니다. `size`로 크기를 조절할 수 있습니다.',
+      },
+    },
+  },
+  argTypes: {
+    isSelected: { control: 'boolean' },
+    defaultSelected: { control: 'boolean' },
+    size: { control: 'inline-radio', options: ['small', 'medium'] },
+    disabled: { control: 'boolean' },
+    onSelectedChange: { action: 'selected' },
+    className: { table: { disable: true } },
+  },
+  args: {
+    size: 'medium',
+    isSelected: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: { isSelected: false },
+};
+
+export const Selected: Story = {
+  args: { isSelected: true },
+};
+
+export const Medium: Story = {
+  args: { size: 'medium', isSelected: true },
+};
+
+export const Disabled: Story = {
+  args: { isSelected: true, disabled: true },
+};