feat(processes/profile): add smoke and alcohol form

src/processes/my_profile/SmokeAlcoholForm/SmokeAlcoholForm.module.css

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

src/processes/my_profile/SmokeAlcoholForm/SmokeAlcoholForm.stories.ts

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

src/processes/my_profile/SmokeAlcoholForm/SmokeAlcoholForm.tsx

@@ -0,0 +1,28 @@
+import { Input } from 'src/shared/ui/Input/Input';
+import styles from './SmokeAlcoholForm.module.css';
+import { RadioList, RadioMeta } from 'src/shared/ui/RadioList/RadioList';
+import { useState } from 'react';
+
+const SmokeTypeList = ['NO', 'YES', 'ETC'];
+type SmokeType = (typeof SmokeTypeList)[number];
+const SmokeMetaList: RadioMeta<SmokeType>[] = [
+  { key: 'NO', name: '안합니다', allowInput: false },
+  { key: 'YES', name: '합니다', allowInput: false },
+  { key: 'ETC', name: '기타', allowInput: true, placeholder: '담배는 언제 피는 편인가요?' },
+];
+
+export const SmokeAlcoholForm = () => {
+  const [selected, setSelected] = useState<SmokeType | null>(null);
+  return (
+    <section className={styles.Container}>
+      <fieldset>
+        <legend className={`strong ${styles.Legend}`}>술자리 빈도</legend>
+        <Input placeholder={'ex. 가볍게 주 2회, 친구들과 주 1회, 회식 매 달 1회...'} />
+      </fieldset>
+      <fieldset>
+        <legend className={`strong ${styles.Legend}`}>흡연 여부</legend>
+        <RadioList radioMetaList={SmokeMetaList} selected={selected} onSelect={setSelected} />
+      </fieldset>
+    </section>
+  );
+};

src/shared/styles/typography.css

@@ -28,6 +28,20 @@ label.strong {
     line-height: 16px;
 }
 
+legend {
+    font-size: 14px;
+    font-weight: 600;
+    text-align: left;
+    color: var(--color-neutral-40);
+    line-height: 14px;
+}
+
+legend.strong {
+    font-size: 16px;
+    color: var(--color-neutral-90);
+    line-height: 16px;
+}
+
 small {
     font-size: 13px;
     font-weight: 600;