From 6261d3593ca747e6dfd1971551234022d810badf Mon Sep 17 00:00:00 2001
From: jikwan <jikwan0327@gmail.com>
Date: Sun, 26 Mar 2023 12:31:55 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20checkBox=20size=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/checkBox/Box.tsx   | 9 +++++----
 src/components/checkBox/index.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/checkBox/Box.tsx b/src/components/checkBox/Box.tsx
index 7fec893..b859fcf 100644
--- a/src/components/checkBox/Box.tsx
+++ b/src/components/checkBox/Box.tsx
@@ -3,11 +3,12 @@ import styled, { css } from 'styled-components';
 interface PropsType {
   disabled?: boolean;
   status: boolean;
+  size?: number;
 }
 
-export const Box = ({ disabled, status }: PropsType) => {
+export const Box = ({ size, disabled, status }: PropsType) => {
   return (
-    <_Wrapper disabled={disabled} status={status}>
+    <_Wrapper size={size} disabled={disabled} status={status}>
       {status && (
         <svg
           width="15"
@@ -29,8 +30,8 @@ const _Wrapper = styled.span<PropsType>`
   justify-content: center;
   float: left;
   border-radius: 2px;
-  width: 24px;
-  height: 24px;
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
   ${({ status, disabled, theme }) => {
     const { gray2, primaryLighten1, gray3, gray5, primary } = theme.color;
     if (status && disabled) {
diff --git a/src/components/checkBox/index.tsx b/src/components/checkBox/index.tsx
index 9af1c8e..d6ca125 100644
--- a/src/components/checkBox/index.tsx
+++ b/src/components/checkBox/index.tsx
@@ -9,6 +9,7 @@ interface PropsType extends marginCssType {
   disabled?: boolean;
   label?: string;
   status: boolean;
+  size?: number;
   onChange: (status: boolean) => void;
 }
 
@@ -19,6 +20,7 @@ export const CheckBox = ({
   label,
   status,
   onChange,
+  size = 24,
   margin,
 }: PropsType) => {
   return (
@@ -28,7 +30,7 @@ export const CheckBox = ({
       onClick={() => !disabled && onChange(!status)}
       margin={margin}
     >
-      <Box status={status} disabled={disabled} />
+      <Box size={size} status={status} disabled={disabled} />
       {label && <Label label={label} disabled={disabled} />}
     </_Wrapper>
   );
@@ -39,6 +41,8 @@ interface WrapperProps extends marginCssType {
 }
 
 const _Wrapper = styled.div<WrapperProps>`
+  display: flex;
+  align-items: center;
   cursor: ${({ disabled }) => (disabled ? 'no-drop' : 'pointer')};
   ${({ margin }) => marginToCss({ margin })};
 `;