feat: 디자인 시스템 - Radio 컴포넌트 구현

packages/jds/src/components/Radio/index.ts

@@ -0,0 +1 @@
+export * from './radioBasic/Radio';

packages/jds/src/components/Radio/radioBasic/Radio.stories.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Radio, RadioProps, RadioSize } from './Radio';
+
+const meta: Meta<typeof Radio> = {
+  title: 'Components/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    radioSize: {
+      control: { type: 'radio' },
+      options: ['lg', 'md', 'sm', 'xs'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {
+  args: {
+    radioSize: 'lg',
+  },
+};
+
+export const Checked: Story = {
+  render: () => <Radio radioSize='md' name='disabledGroup' value='1' checked={true} />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 20 }}>
+      <Radio radioSize='md' name='disabledGroup' value='2' checked={false} disabled={true} />
+      <Radio radioSize='md' name='disabledGroup' value='1' checked={true} disabled={true} />
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => {
+    const [checkedSize, setCheckedSize] = useState<RadioSize | undefined>('md');
+
+    const sizes: RadioProps['radioSize'][] = ['lg', 'md', 'sm', 'xs'];
+
+    return (
+      <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
+        {sizes.map(radioSize => (
+          <Radio
+            key={radioSize}
+            radioSize={radioSize}
+            name='sizeGroup'
+            value={radioSize}
+            checked={checkedSize === radioSize}
+            onChange={() => setCheckedSize(radioSize)}
+          />
+        ))}
+      </div>
+    );
+  },
+};

packages/jds/src/components/Radio/radioBasic/Radio.style.ts

@@ -0,0 +1,80 @@
+import styled from '@emotion/styled';
+import { RadioSize } from './Radio';
+import { RADIO_SIZE } from './radio.variants';
+import { interaction, pxToRem } from 'utils';
+
+interface RadioStyledProps {
+  radioSize: RadioSize;
+}
+
+export const RadioLabel = styled.label<RadioStyledProps>(({ theme, radioSize }) => {
+  const borderSize = RADIO_SIZE[radioSize]
+    .border as keyof typeof theme.scheme.desktop.stroke.weight;
+
+  return {
+    display: 'inline-flex',
+    position: 'relative',
+
+    [`input[type="radio"]:not(:disabled):checked + .visual`]: {
+      backgroundColor: theme.color.surface.static.standard,
+      border: `${pxToRem(theme.scheme.desktop.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
+      [theme.breakPoint.tablet]: {
+        border: `${pxToRem(theme.scheme.tablet.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
+      },
+      [theme.breakPoint.mobile]: {
+        border: `${pxToRem(theme.scheme.mobile.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
+      },
+    },
+
+    [`input[type="radio"]:not(:checked):disabled + .visual`]: {
+      backgroundColor: theme.color.surface.standard,
+      borderColor: theme.color.stroke.alpha.subtler,
+      cursor: 'default',
+      ...interaction(theme, 'normal', 'normal', 'default', 'disabled'),
+    },
+
+    [`input[type="radio"]:checked:disabled + .visual`]: {
+      backgroundColor: theme.color.fill.subtle,
+      border: `${pxToRem(theme.scheme.desktop.stroke.weight[borderSize])}px solid ${theme.color.stroke.subtler}`,
+      cursor: 'default',
+      ...interaction(theme, 'normal', 'normal', 'default', 'disabled'),
+
+      [theme.breakPoint.tablet]: {
+        border: `${pxToRem(theme.scheme.tablet.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
+      },
+      [theme.breakPoint.mobile]: {
+        border: `${pxToRem(theme.scheme.mobile.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
+      },
+    },
+
+    [`input[type="radio"]:focus-visible + .visual`]: {
+      boxShadow: `0 0 0 3px ${theme.color.interaction.focus}`,
+    },
+  };
+});
+
+export const RadioInput = styled.input({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  border: 0,
+  overflow: 'hidden',
+  clipPath: 'inset(50%)',
+  whiteSpace: 'nowrap',
+});
+
+export const RadioSpan = styled.span<RadioStyledProps>(({ theme, radioSize }) => {
+  const sizeValue = pxToRem(RADIO_SIZE[radioSize].radioSize);
+
+  return {
+    borderRadius: theme.scheme.desktop.radius.max,
+    width: sizeValue,
+    height: sizeValue,
+    border: `1px solid ${theme.color.stroke.alpha.assistive}`,
+    backgroundColor: theme.color.surface.shallow,
+    cursor: 'pointer',
+    ...interaction(theme, 'normal', 'normal', 'default'),
+  };
+});

packages/jds/src/components/Radio/radioBasic/Radio.tsx

@@ -0,0 +1,21 @@
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { RadioInput, RadioLabel, RadioSpan } from './Radio.style';
+
+export type RadioSize = 'lg' | 'md' | 'sm' | 'xs';
+
+export interface RadioProps extends ComponentPropsWithoutRef<'input'> {
+  radioSize?: RadioSize;
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ radioSize = 'md', ...props }, ref) => {
+    return (
+      <RadioLabel radioSize={radioSize}>
+        <RadioInput ref={ref} type='radio' {...props} />
+        <RadioSpan className='visual' aria-hidden='true' radioSize={radioSize} />
+      </RadioLabel>
+    );
+  },
+);
+
+Radio.displayName = 'Radio';

packages/jds/src/components/Radio/radioBasic/radio.variants.ts

@@ -0,0 +1,26 @@
+import { RadioSize } from './Radio';
+
+export const RADIO_SIZE: Record<
+  RadioSize,
+  {
+    radioSize: number;
+    border: string;
+  }
+> = {
+  lg: {
+    radioSize: 20,
+    border: '6',
+  },
+  md: {
+    radioSize: 18,
+    border: '5',
+  },
+  sm: {
+    radioSize: 16,
+    border: '5',
+  },
+  xs: {
+    radioSize: 14,
+    border: '4',
+  },
+};

packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx

@@ -0,0 +1,142 @@
+import { ChangeEvent, FormEvent, useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { RadioContent } from './RadioContent';
+
+const meta: Meta<typeof RadioContent> = {
+  title: 'Components/RadioContent',
+  component: RadioContent,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    radioSize: {
+      control: { type: 'radio' },
+      options: ['lg', 'md', 'sm', 'xs'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioContent>;
+
+export const Default: Story = {
+  args: {
+    radioSize: 'lg',
+    radioStyle: 'empty',
+    align: 'left',
+    disabled: false,
+    subLabelVisible: false,
+    subLabel: '레이블',
+    children: '레이블',
+  },
+};
+
+export const OutlineRadio: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
+      <RadioContent radioSize='md' radioStyle='outline' value='1'>
+        레이블
+      </RadioContent>
+      <RadioContent
+        radioSize='md'
+        radioStyle='outline'
+        subLabelVisible={true}
+        subLabel='레이블'
+        value='2'
+      >
+        레이블
+      </RadioContent>
+      <RadioContent radioSize='md' radioStyle='outline' align='right' value='3'>
+        레이블
+      </RadioContent>
+      <RadioContent
+        radioSize='md'
+        radioStyle='outline'
+        align='right'
+        subLabelVisible={true}
+        subLabel='레이블'
+        value='4'
+      >
+        레이블
+      </RadioContent>
+    </div>
+  ),
+};
+
+export const SubLabelWithHyperlink: Story = {
+  render: () => (
+    <RadioContent
+      radioSize='md'
+      radioStyle='outline'
+      subLabelVisible={true}
+      subLabel={
+        <>
+          하이퍼링크&nbsp;
+          <a href='https://www.naver.com/' style={{ textDecoration: 'underline' }}>
+            (네이버 바로가기)
+          </a>
+        </>
+      }
+      value='1'
+    >
+      레이블
+    </RadioContent>
+  ),
+};
+
+export const controlledRadio: Story = {
+  render: () => {
+    const [checked, setChecked] = useState('korea');
+
+    const handleGenderChange = (e: ChangeEvent<HTMLInputElement>) => {
+      setChecked(e.target.value);
+    };
+
+    const items = ['korea', 'japan', 'us', 'uk'];
+
+    return (
+      <div style={{ display: 'flex', gap: 20 }}>
+        {items.map(item => (
+          <RadioContent
+            key={item}
+            radioSize='md'
+            name='radioGroup'
+            value={item}
+            checked={checked === item}
+            onChange={handleGenderChange}
+          >
+            {item}
+          </RadioContent>
+        ))}
+        <p>결과: {checked}</p>
+      </div>
+    );
+  },
+};
+
+export const uncontrolledRadio: Story = {
+  render: () => (
+    <div>
+      <form
+        style={{ display: 'flex', gap: 20 }}
+        onSubmit={(e: FormEvent<HTMLFormElement>) => {
+          e.preventDefault();
+          const form = e.target as HTMLFormElement;
+          alert(`${form.namedItem('groupName').value} 확인!`);
+        }}
+      >
+        <RadioContent radioSize='md' name='groupName' value='apple' defaultChecked>
+          apple
+        </RadioContent>
+        <RadioContent radioSize='md' name='groupName' value='banana'>
+          banana
+        </RadioContent>
+        <RadioContent radioSize='md' name='groupName' value='orange'>
+          orange
+        </RadioContent>
+        <button type='submit'>제출 버튼</button>
+      </form>
+    </div>
+  ),
+};