fix: checkBox size 추가

team-aliens · Mar 26, 2023 · 6261d35 · 6261d35
1 parent 0a311d3
commit 6261d35
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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 })};
 `;