feat: 체크박스에 레이블을 달 수 있는 CheckboxItem 컴포넌트 작성

frontend/src/components/common/CheckboxItem/index.tsx

@@ -0,0 +1,33 @@
+import { ChangeEvent } from 'react';
+
+import Checkbox, { CheckboxStyleProps } from '../Checkbox';
+
+import * as S from './styles';
+
+interface CheckboxItemProps extends CheckboxStyleProps {
+  id: string;
+  label: string;
+  isChecked: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  name?: string;
+  isDisabled?: boolean;
+}
+const CheckboxItem = ({ id, name, label, isChecked, onChange, isDisabled = false, $style }: CheckboxItemProps) => {
+  return (
+    <S.CheckboxItem>
+      <S.CheckboxLabel>
+        <Checkbox
+          id={id}
+          name={name}
+          isChecked={isChecked}
+          onChange={onChange}
+          isDisabled={isDisabled}
+          $style={$style}
+        />
+        {label}
+      </S.CheckboxLabel>
+    </S.CheckboxItem>
+  );
+};
+
+export default CheckboxItem;

frontend/src/components/common/CheckboxItem/styles.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const CheckboxItem = styled.div``;
+
+export const CheckboxLabel = styled.label`
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+`;