feat(processes/profile): add job form and add radioWithInput

src/processes/my_profile/JobForm/JobForm.module.css

@@ -0,0 +1,7 @@
+.Container {
+
+}
+
+.Input {
+    margin-left: 32px;
+}

src/processes/my_profile/JobForm/JobForm.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { JobForm } from 'src/processes/my_profile/JobForm/JobForm';
+
+const meta: Meta<typeof JobForm> = {
+  component: JobForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof JobForm>;
+
+export const Default: Story = {
+  args: {},
+};

src/processes/my_profile/JobForm/JobForm.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import styles from './JobForm.module.css';
+import { RadioWithInput } from 'src/shared/ui/RadioWithInput/RadioWithInput';
+
+const JobTypeList = ['STUDENT', 'OFFICE_WORKER', 'FREELANCER', 'ETC'];
+type JobType = (typeof JobTypeList)[number];
+
+const JobMetaMap: Record<JobType, { name: string; inputPlaceHolder: string }> = {
+  STUDENT: {
+    name: '학생(대학원생)',
+    inputPlaceHolder: '학과나 학교를 입력해주세요.',
+  },
+  OFFICE_WORKER: {
+    name: '직장인',
+    inputPlaceHolder: '직무나 회사를 입력해주세요.',
+  },
+  FREELANCER: {
+    name: '자영업자, 프리랜서',
+    inputPlaceHolder: '어떤 사업을 하는지 입력해주세요.',
+  },
+  ETC: {
+    name: '기타',
+    inputPlaceHolder: '기타 하시는 일을 입력해주세요.',
+  },
+};
+
+export const JobForm = () => {
+  const [selected, setSelected] = useState<JobType | null>(null);
+  const [inputValue, setInputValue] = useState<string>('');
+
+  const onSelect = (job: JobType) => {
+    setSelected(job);
+    setInputValue('');
+  };
+
+  return (
+    <section className={styles.Container} role={'radiogroup'}>
+      {JobTypeList.map((job) => (
+        <RadioWithInput
+          key={job}
+          label={JobMetaMap[job].name}
+          checked={selected === job}
+          onChange={() => onSelect(job)}
+          inputPlaceholder={JobMetaMap[job].inputPlaceHolder}
+          inputValue={inputValue}
+          onChangeInputValue={setInputValue}
+        />
+      ))}
+    </section>
+  );
+};

src/shared/ui/Input/Input.tsx

@@ -1,15 +1,15 @@
-import { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from 'react';
+import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, ReactNode } from 'react';
 import styles from './Input.module.css';
 
 type InputProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
   suffixSlot?: ReactNode;
 };
 
-export const Input = ({ suffixSlot, ...props }: InputProps) => {
+export const Input = forwardRef<HTMLInputElement | null, InputProps>(function InputComponent({ className, suffixSlot, ...props }: InputProps, ref) {
   return (
-    <div className={styles.Container}>
-      <input className={styles.Input} {...props} />
+    <div className={`${className} ${styles.Container}`}>
+      <input ref={ref} className={styles.Input} {...props} />
       {suffixSlot && <span className={styles.SuffixSlotContainer}>{suffixSlot}</span>}
     </div>
   );
-};
+});

src/shared/ui/Radio/Radio.module.css

@@ -4,6 +4,7 @@
     font-weight: 500;
     font-size: 16px;
     line-height: 16px;
+    padding: 12px 0;
     color: var(--color-neutral-90);
 }
 

src/shared/ui/Radio/Radio.tsx

@@ -1,7 +1,7 @@
 import styles from './Radio.module.css';
 import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 
-type RadioProps = Exclude<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'type'> & {
+export type RadioProps = Exclude<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'type'> & {
   label: string;
 };
 

src/shared/ui/RadioWithInput/RadioWithInput.tsx

@@ -0,0 +1,28 @@
+import { Radio, RadioProps } from 'src/shared/ui/Radio/Radio';
+import { Input } from 'src/shared/ui/Input/Input';
+import styles from 'src/processes/my_profile/JobForm/JobForm.module.css';
+import { useRef } from 'react';
+
+type RadioWithInputProps = RadioProps & {
+  inputPlaceholder: string;
+  inputValue: string;
+  onChangeInputValue: (value: string) => void;
+};
+
+export const RadioWithInput = ({ inputPlaceholder, inputValue, onChangeInputValue, ...props }: RadioWithInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  return (
+    <>
+      <Radio {...props} />
+      {props.checked && (
+        <Input
+          ref={inputRef}
+          className={styles.Input}
+          placeholder={inputPlaceholder}
+          value={inputValue}
+          onChange={(e) => onChangeInputValue(e.target.value)}
+        />
+      )}
+    </>
+  );
+};