From 7c2a470d6a9f139f75bd33eca4fe2809e8bad672 Mon Sep 17 00:00:00 2001
From: "casio@sparcs.org" <casio@sparcs.org>
Date: Mon, 7 Oct 2024 14:54:40 +0900
Subject: [PATCH] feat: add clickable label

---
 .../src/common/components/CheckboxOption.tsx  | 55 +++++++++++++++++++
 .../common/components/Radio/RadioOption.tsx   |  5 ++
 2 files changed, 60 insertions(+)
 create mode 100644 packages/web/src/common/components/CheckboxOption.tsx

diff --git a/packages/web/src/common/components/CheckboxOption.tsx b/packages/web/src/common/components/CheckboxOption.tsx
new file mode 100644
index 0000000..ce53e98
--- /dev/null
+++ b/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;
diff --git a/packages/web/src/common/components/Radio/RadioOption.tsx b/packages/web/src/common/components/Radio/RadioOption.tsx
index 17fdbde..a66e9c0 100644
--- a/packages/web/src/common/components/Radio/RadioOption.tsx
+++ b/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>({