feat(processes/profile): add religion form

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 150,
+  "printWidth": 120,
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,

src/processes/my_profile/ReligionForm/ReligionForm.module.css

@@ -0,0 +1,9 @@
+.Container {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.Label {
+  margin-bottom: 16px;
+}

src/processes/my_profile/ReligionForm/ReligionForm.stories.ts

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

src/processes/my_profile/ReligionForm/ReligionForm.tsx

@@ -0,0 +1,50 @@
+import { Radio } from 'src/shared/ui/Radio/Radio';
+import { RadioWithInput } from 'src/shared/ui/RadioWithInput/RadioWithInput';
+import styles from './ReligionForm.module.css';
+import { useState } from 'react';
+
+const ReligionTypeList = ['NONE', 'CHRISTIAN', 'BUDDHISM', 'CATHOLIC', 'WON_BUDDHISM', 'ETC'];
+type ReligionType = (typeof ReligionTypeList)[number];
+const ReligionMetaMap: Record<ReligionType, { name: string; allowInput: boolean; placeholder?: string }> = {
+  NONE: { name: '무교', allowInput: false },
+  CHRISTIAN: { name: '기독교', allowInput: false },
+  BUDDHISM: { name: '불교', allowInput: false },
+  CATHOLIC: { name: '천주교', allowInput: false },
+  WON_BUDDHISM: { name: '원불교', allowInput: false },
+  ETC: { name: '기타(기타 선택 시 직접 입력)', allowInput: true, placeholder: '종교를 입력해주세요.' },
+} as const;
+
+export const ReligionForm = () => {
+  const [selected, setSelected] = useState<ReligionType | null>(null);
+  return (
+    <section className={styles.Container} role={'radiogroup'}>
+      <div>
+        <p className={styles.Label}>아니오,</p>
+        <Radio label={'무교'} checked={selected === 'NONE'} onChange={() => setSelected('NONE')} />
+      </div>
+      <div>
+        <p className={styles.Label}>네! 저는..</p>
+        {ReligionTypeList.slice(1).map((type) =>
+          ReligionMetaMap[type].allowInput ? (
+            <RadioWithInput
+              key={type}
+              value={type}
+              checked={selected === type}
+              label={ReligionMetaMap[type].name}
+              inputPlaceholder={ReligionMetaMap[type].placeholder}
+              onChange={() => setSelected(type)}
+            />
+          ) : (
+            <Radio
+              key={type}
+              value={type}
+              checked={selected === type}
+              label={ReligionMetaMap[type].name}
+              onChange={() => setSelected(type)}
+            />
+          ),
+        )}
+      </div>
+    </section>
+  );
+};

src/shared/ui/RadioWithInput/RadioWithInput.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RadioWithInput } from 'src/shared/ui/RadioWithInput/RadioWithInput';
+
+const meta: Meta<typeof RadioWithInput> = {
+  component: RadioWithInput,
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioWithInput>;
+
+export const Default: Story = {
+  args: { label: '직장인', checked: true, inputPlaceholder: '직장을 입력해주세요' },
+};

src/shared/ui/RadioWithInput/RadioWithInput.tsx

@@ -4,9 +4,9 @@ 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;
+  inputPlaceholder?: string;
+  inputValue?: string;
+  onChangeInputValue?: (value: string) => void;
 };
 
 export const RadioWithInput = ({ inputPlaceholder, inputValue, onChangeInputValue, ...props }: RadioWithInputProps) => {
@@ -20,7 +20,7 @@ export const RadioWithInput = ({ inputPlaceholder, inputValue, onChangeInputValu
           className={styles.Input}
           placeholder={inputPlaceholder}
           value={inputValue}
-          onChange={(e) => onChangeInputValue(e.target.value)}
+          onChange={(e) => onChangeInputValue?.(e.target.value)}
         />
       )}
     </>