Merge pull request #27 from sopt-makers/feat/#21-checkBoxs

feat: 체크박스 구현

apps/docs/src/App.tsx

@@ -1,12 +1,12 @@
-import './App.css'
-import { Test } from "ui";
+import { Test } from 'ui';
+import './App.css';
 
 function App() {
   return (
     <>
       <Test text="Test Component" size="big" color="blue" />
     </>
-  )
+  );
 }
 
-export default App
+export default App;

apps/docs/src/stories/CheckBox.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import CheckBox from 'ui/CheckBox';
+
+const meta = {
+  title: 'Example/CheckBox',
+  component: CheckBox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} as Meta<typeof CheckBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: function Render() {
+    const [checked, onChange] = useState<boolean>(false);
+
+    return <CheckBox checked={checked} size="small" onChange={(e) => onChange(e.target.checked)} />;
+  },
+
+  name: '체크박스 기본',
+};
+
+export const LargeLabel: StoryObj = {
+  render: function Render() {
+    const [checked, onChange] = useState<boolean>(false);
+
+    return (
+      <CheckBox
+        checked={checked}
+        size="large"
+        label="Label"
+        onChange={(e) => onChange(e.target.checked)}
+      />
+    );
+  },
+
+  name: '체크박스 설명 있는 큰 사이즈',
+};
+
+export const SmallLabel: StoryObj = {
+  render: function Render() {
+    const [checked, onChange] = useState<boolean>(false);
+
+    return (
+      <CheckBox
+        checked={checked}
+        size="small"
+        label="Label"
+        onChange={(e) => onChange(e.target.checked)}
+      />
+    );
+  },
+
+  name: '체크박스 설명 있는 작은 사이즈',
+};

apps/web/app/page.tsx

@@ -1,5 +1,5 @@
-import { Test } from "ui";
-import styles from "./page.module.css";
+import { Test } from 'ui';
+import styles from './page.module.css';
 
 export default function Page(): JSX.Element {
   return (

packages/ui/CheckBox/index.tsx

@@ -0,0 +1,33 @@
+import { InputHTMLAttributes, forwardRef } from 'react';
+import {
+  checkBox,
+  checkBoxChecked,
+  checkBoxInput,
+  checkBoxLabel,
+  checkBoxWrapper,
+} from './style.css';
+
+interface CheckBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: string;
+  size?: 'small' | 'large';
+  checked?: boolean;
+}
+
+const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
+  ({ checked = false, label, size = 'small', ...props }, ref) => {
+    return (
+      <label className={checkBoxWrapper}>
+        <input ref={ref} type="checkbox" {...props} className={checkBoxInput} />
+        <div className={`${checkBox[size]} ${checkBoxChecked[`${checked}`]}`}>
+          {checked && (
+            //   TODO: 체크 아이콘 삽입
+            <></>
+          )}
+        </div>
+        <p className={checkBoxLabel[size]}>{label && label}</p>
+      </label>
+    );
+  }
+);
+
+export default CheckBox;

packages/ui/CheckBox/style.css.ts

@@ -0,0 +1,59 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import theme from '../theme.css';
+
+export const checkBoxWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+});
+
+export const checkBoxInput = style({
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
+});
+
+const checkBoxBase = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: '0.2s background-color',
+  borderRadius: '5px',
+});
+
+export const checkBox = styleVariants({
+  small: [checkBoxBase, { width: '18px', height: '18px' }],
+  large: [checkBoxBase, { width: '24px', height: '24px' }],
+});
+
+export const checkBoxChecked = styleVariants({
+  true: [checkBoxBase, { backgroundColor: `${theme.colors.blue400}` }],
+  false: [checkBoxBase, { backgroundColor: `${theme.colors.gray500}` }],
+});
+
+export const checkBoxLabel = styleVariants({
+  small: {
+    marginLeft: '8px',
+    // MEMO: 객체 형태로 css 받도록 수정되면 수정하기
+    fontFamily: 'SUIT',
+    fontSize: '14px',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: '22px',
+    letterSpacing: '-0.21px',
+  },
+  large: {
+    marginLeft: '10px',
+    // MEMO: 객체 형태로 css 받도록 수정되면 수정하기
+    fontFamily: 'SUIT',
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: '26px',
+    letterSpacing: '-0.24px',
+  },
+});