Feat: 체크박스 배경, 폰트 조절 props 추가

src/components/input/Checkbox/AllConsentCheckbox.tsx

@@ -1,20 +1,29 @@
+/** @jsxImportSource @emotion/react */
 import { ChangeEvent, useState } from "react";
 import * as S from "./allConsentCheckbox.style";
 import CheckIcon from "@assets/icons/checkbox_Check.svg?react";
 
 export interface AllConsentCheckboxProps {
   content?: string;
+  transparent?: boolean;
+  fontSize?: string;
+  fontWeight?: string;
+  color?: string;
 }
 
-const AllConsentCheckbox = ({ content }: AllConsentCheckboxProps) => {
+const AllConsentCheckbox = ({
+  content,
+  transparent = false,
+  ...props
+}: AllConsentCheckboxProps) => {
   const [checked, setChecked] = useState(false);
 
   const handleCheck = (e: ChangeEvent<HTMLInputElement>) => {
     setChecked(e.target.checked);
   };
 
   return (
-    <S.Wrapper>
+    <S.Wrapper transparent={transparent}>
       <S.IconWrapper>
         <S.Input id="agreement" type="checkbox" checked={checked} onChange={handleCheck} />
         <S.Icon>
@@ -23,7 +32,7 @@ const AllConsentCheckbox = ({ content }: AllConsentCheckboxProps) => {
       </S.IconWrapper>
       <S.Label htmlFor="agreement">
         {content ? (
-          <p className="content">{content}</p>
+          <p css={{ ...props }}>{content}</p>
         ) : (
           <p>
             전체 동의 <span>(선택 포함)</span>

src/components/input/Checkbox/allConsentCheckbox.style.ts

@@ -1,13 +1,14 @@
 import styled from "@emotion/styled";
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ transparent?: boolean }>`
   display: flex;
   align-items: center;
 
   padding: 12px 8px;
 
   border-radius: 5px;
-  background-color: ${({ theme }) => theme.colors.gray[100]};
+  background-color: ${({ theme, transparent }) =>
+    transparent ? "transparent" : theme.colors.gray[100]};
 
   span {
     font-size: 14px;
@@ -33,10 +34,6 @@ export const Label = styled.label`
   font-weight: ${({ theme }) => theme.text.button1.fontWeight};
 
   cursor: pointer;
-
-  .content {
-    opacity: 0.5;
-  }
 `;
 
 export const IconWrapper = styled.div`

src/components/input/Checkbox/index.tsx

@@ -7,12 +7,12 @@ type CheckboxProps =
   | (AllConsentCheckboxProps & { variant: "all" })
   | (IndividualConsentCheckboxProps & { variant: "individual" });
 
-const Checkbox = ({ variant = "all", content, ...individualProps }: CheckboxProps) => {
+const Checkbox = ({ variant, ...props }: CheckboxProps) => {
   switch (variant) {
     case "all":
-      return <AllConsentCheckbox content={content} />;
+      return <AllConsentCheckbox {...(props as AllConsentCheckboxProps)} />;
     case "individual":
-      return <IndividualConsentCheckbox {...(individualProps as IndividualConsentCheckboxProps)} />;
+      return <IndividualConsentCheckbox {...(props as IndividualConsentCheckboxProps)} />;
     default:
       return <AllConsentCheckbox />;
   }