feat: add clickable label

packages/web/src/common/components/CheckboxOption.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import Checkbox from "./Checkbox";
+import Typography from "./Typography";
+
+interface CheckboxOptionProps {
+  optionText: string;
+  checked: boolean;
+  onClick: () => void;
+}
+
+const CheckboxOptionWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+  padding-left: 2px;
+  cursor: pointer;
+
+  @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.sm}) {
+    gap: 8px;
+  }
+`;
+
+const ResponsiveTypography = styled(Typography)`
+  font-size: 16px;
+  line-height: 20px;
+  cursor: pointer;
+
+  @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.sm}) {
+    font-size: 14px;
+  }
+`;
+
+const CheckboxOption: React.FC<CheckboxOptionProps> = ({
+  optionText,
+  checked,
+  onClick,
+}) => (
+  <CheckboxOptionWrapper onClick={onClick}>
+    <Checkbox checked={checked} />
+    <ResponsiveTypography
+      ff="PRETENDARD"
+      color="BLACK"
+      onClick={e => {
+        e.stopPropagation();
+        onClick();
+      }}
+    >
+      {optionText}
+    </ResponsiveTypography>
+  </CheckboxOptionWrapper>
+);
+
+export default CheckboxOption;

packages/web/src/common/components/Radio/RadioOption.tsx

@@ -22,6 +22,11 @@ const RadioOptionInner = styled.div`
   line-height: 20px;
   font-style: normal;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
+  cursor: pointer;
+
+  & > * {
+    pointer-events: none;
+  }
 `;
 
 const RadioOption = <T extends string>({