[FE] feat: 공통 컴포넌트인 체크박스와 체크박스 아이템 제작

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

@@ -0,0 +1,40 @@
+import { ChangeEvent } from 'react';
+
+import CheckedIcon from '@/assets/checked.svg';
+import UncheckedIcon from '@/assets/unchecked.svg';
+
+import * as S from './styles';
+
+// NOTE: 공통 컴포넌트에서 이 스타일 속성을 계속 쓰는 것 같은데 이걸 아예 공통 타입으로 빼버릴지 고민
+export interface CheckboxStyleProps {
+  $style?: React.CSSProperties;
+}
+
+interface CheckboxProps extends CheckboxStyleProps {
+  id: string;
+  isChecked: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  name?: string;
+  isDisabled?: boolean;
+}
+
+const Checkbox = ({ id, name, isChecked, isDisabled, onChange, $style }: CheckboxProps) => {
+  return (
+    <S.CheckboxContainer $style={$style}>
+      <S.CheckboxLabel>
+        <input
+          id={id}
+          name={name}
+          checked={isChecked}
+          onChange={onChange}
+          disabled={isDisabled}
+          aria-hidden={false}
+          type="checkbox"
+        />
+        <img src={isChecked ? CheckedIcon : UncheckedIcon} alt="체크박스" />
+      </S.CheckboxLabel>
+    </S.CheckboxContainer>
+  );
+};
+
+export default Checkbox;

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

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+
+import { CheckboxStyleProps } from './index';
+
+export const CheckboxContainer = styled.div<CheckboxStyleProps>`
+  padding: 0;
+
+  background-color: transparent;
+  border: none;
+
+  input {
+    display: hidden;
+
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+  ${({ $style }) => $style && { ...$style }};
+`;
+
+export const CheckboxLabel = styled.label`
+  cursor: pointer;
+  object-fit: contain;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+`;

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;
+`;