Merge pull request #54 from Kernel360/common-component-radio

공통 컴포넌트: Radio

src/app/globals.css

@@ -10,6 +10,7 @@
   --tertiary: #7A7A7A;
   --black: #090A0A;
   --white: #FFF;
+  --white-100: #F3F5F8;
   --pink: #F67272;
 
   /* -------------- z-index -------------- */

src/components/shared/radio/Radio.module.scss

@@ -0,0 +1,48 @@
+input[type="radio"] {
+  display: none;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+label.gender {
+  height: 48px;
+  border-radius: 8px;
+}
+
+input[type="radio"] + label.gender {
+  border: 1px solid var(--gray-100);
+  background-color: var(--white);
+  color: var(--gray-300);
+}
+
+input[type="radio"]:checked + label.gender {
+  background-color: var(--primary);
+  color: var(--white);
+}
+
+label.ageGroup {
+  height: 47px;
+  border-radius: 30px;
+}
+
+label.additionalInfo {
+  height: 60px;
+  border-radius: 10px;
+}
+
+input[type="radio"] + label.ageGroup,
+input[type="radio"] + label.additionalInfo {
+  background-color: var(--white-100);
+  color: var(--gray-300);
+}
+
+input[type="radio"]:checked + label.ageGroup,
+input[type="radio"]:checked + label.additionalInfo {
+  background-color: var(--primary);
+  color: var(--white-100);
+}

src/components/shared/radio/Radio.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Radio from './Radio';
+
+const meta = {
+  title: 'Shared/Radio',
+  component: Radio,
+  parameters: {
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const gender: Story = {
+  args: {
+    type: 'gender',
+    label: '남성',
+    value: 'male',
+  },
+};
+
+export const ageGroup: Story = {
+  args: {
+    type: 'ageGroup',
+    label: '10대',
+    value: '10',
+  },
+};
+
+export const additionalInfo: Story = {
+  args: {
+    type: 'additionalInfo',
+    label: '소형',
+    value: 'mini',
+  },
+};

src/components/shared/radio/Radio.tsx

@@ -0,0 +1,28 @@
+import { InputHTMLAttributes, forwardRef } from 'react';
+
+import classNames from 'classnames/bind';
+
+import styles from './Radio.module.scss';
+
+interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
+  type: 'gender' | 'ageGroup' | 'additionalInfo'
+  label: string
+  value: string | number
+}
+
+const cx = classNames.bind(styles);
+
+const Radio = forwardRef<HTMLInputElement, RadioProps>(({
+  type, label, value,
+}, ref) => {
+  return (
+    <>
+      <input id={label} type="radio" ref={ref} value={value} />
+      <label className={cx({ [type]: true })} htmlFor={label}>
+        {label}
+      </label>
+    </>
+  );
+});
+
+export default Radio;

src/styles/colorPalette.ts

@@ -10,6 +10,7 @@ export const colors = {
   tertiary: 'var(--tertiary',
   black: 'var(--black)',
   white: 'var(--white)',
+  white100: 'var(--white-100)',
   pink: 'var(--pink)',
 };