Refactor: 전체 동의 체크박스 내부 컨텐츠 작성 가능하게 변경

Yanabada · Jan 11, 2024 · ef7b432 · ef7b432
1 parent d9b21ee
commit ef7b432
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/src/components/input/Checkbox/AllConsentCheckbox.tsx b/src/components/input/Checkbox/AllConsentCheckbox.tsx
@@ -2,7 +2,11 @@ import { ChangeEvent, useState } from "react";
 import * as S from "./allConsentCheckbox.style";
 import CheckIcon from "@assets/icons/checkbox_Check.svg?react";
 
-const AllConsentCheckbox = () => {
+export interface AllConsentCheckboxProps {
+  content?: string;
+}
+
+const AllConsentCheckbox = ({ content }: AllConsentCheckboxProps) => {
   const [checked, setChecked] = useState(false);
 
   const handleCheck = (e: ChangeEvent<HTMLInputElement>) => {
@@ -18,7 +22,13 @@ const AllConsentCheckbox = () => {
         </S.Icon>
       </S.IconWrapper>
       <S.Label htmlFor="agreement">
-        전체 동의 <span>(선택 포함)</span>
+        {content ? (
+          <p className="content">{content}</p>
+        ) : (
+          <p>
+            전체 동의 <span>(선택 포함)</span>
+          </p>
+        )}
       </S.Label>
     </S.Wrapper>
   );

diff --git a/src/components/input/Checkbox/allConsentCheckbox.style.ts b/src/components/input/Checkbox/allConsentCheckbox.style.ts
@@ -31,6 +31,12 @@ export const Icon = styled.div`
 export const Label = styled.label`
   font-size: ${({ theme }) => theme.text.button1.fontSize};
   font-weight: ${({ theme }) => theme.text.button1.fontWeight};
+
+  cursor: pointer;
+
+  .content {
+    opacity: 0.5;
+  }
 `;
 
 export const IconWrapper = styled.div`
@@ -39,6 +45,8 @@ export const IconWrapper = styled.div`
   align-items: center;
 
   margin-right: 8px;
+
+  cursor: pointer;
 `;
 
 export const Input = styled.input`

diff --git a/src/components/input/Checkbox/index.tsx b/src/components/input/Checkbox/index.tsx
@@ -1,16 +1,16 @@
-import AllConsentCheckbox from "./AllConsentCheckbox";
+import AllConsentCheckbox, { AllConsentCheckboxProps } from "./AllConsentCheckbox";
 import IndividualConsentCheckbox, {
   type IndividualConsentCheckboxProps
 } from "./IndividualConsentCheckbox";
 
 type CheckboxProps =
-  | { variant: "all" }
+  | (AllConsentCheckboxProps & { variant: "all" })
   | (IndividualConsentCheckboxProps & { variant: "individual" });
 
-const Checkbox = ({ variant = "all", ...individualProps }: CheckboxProps) => {
+const Checkbox = ({ variant = "all", content, ...individualProps }: CheckboxProps) => {
   switch (variant) {
     case "all":
-      return <AllConsentCheckbox />;
+      return <AllConsentCheckbox content={content} />;
     case "individual":
       return <IndividualConsentCheckbox {...(individualProps as IndividualConsentCheckboxProps)} />;
     default: