[FE] 체크박스 공통 컴포넌트 구현 (#359)

* feat(Checkbox): 체크박스 공통 컴포넌트 구현

* test(Checkbox): 체크박스 스토리북 작성

* refactor: id값은 필수입력으로 수정

* refactor: autodocs 제거

* style: css 코드 정렬

* refactor: import React 제거

frontend/src/components/_common/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from 'storybook/internal/preview-api';
+
+import Checkbox from '.';
+
+const meta = {
+  title: 'Common/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story, context) => {
+      const [{ isChecked }, setArgState] = useArgs();
+
+      const onToggleIsChecked = () => {
+        setArgState({ isChecked: !isChecked });
+      };
+
+      return (
+        <Story
+          args={{
+            ...context.args,
+            onChange: onToggleIsChecked,
+          }}
+        />
+      );
+    },
+  ],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    id: 'checkbox',
+    isChecked: false,
+    labelText: '체크박스입니다.',
+  },
+};

frontend/src/components/_common/Checkbox/Checkbox.styles.ts

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react';
+
+export const s_container = css`
+  display: flex;
+  gap: 0.2rem;
+  align-items: center;
+`;

frontend/src/components/_common/Checkbox/index.tsx

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes } from 'react';
+
+import { s_container } from './Checkbox.styles';
+
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  isChecked: boolean;
+  labelText: string;
+  id: string;
+}
+
+export default function Checkbox({ isChecked, id, labelText, ...props }: CheckboxProps) {
+  return (
+    <div css={s_container}>
+      <input id={id} checked={isChecked} type="checkbox" {...props} />
+      <label htmlFor={id}>{labelText}</label>
+    </div>
+  );
+}