fix: CheckBox UI 수정

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-return/design-system",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/Team-Return/JOBIS-DESIGN-SYSTEM.git"

src/components/checkbox/CheckBox.tsx

@@ -1,6 +1,7 @@
 import React, { Children, ReactNode } from 'react';
 import styled from 'styled-components';
 import { marginCssType, marginToCss } from '../../utils/distance';
+import { theme } from '../../styles/theme';
 
 interface CheckBoxProps extends marginCssType {
   //TODO label?: string;
@@ -37,16 +38,30 @@ export const CheckBox = ({
   );
 };
 
-const _CheckBoxWrapper = styled.div`
+const _CheckBoxWrapper = styled.label`
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: 8px;
+  ${theme.font.Body2};
+  color: ${theme.color.gray70};
 `;
 
 const _Wrapper = styled.input<CheckBoxProps>`
-  width: 16px;
-  height: 16px;
+  appearance: none;
+  width: 18px;
+  height: 18px;
   ${({ margin }) => marginToCss({ margin })};
   accent-color: #0087ff;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'auto')};
+  border: 1px solid ${theme.color.gray50};
+  border-radius: 4px;
+  cursor: pointer;
+  &:checked {
+    border-color: transparent;
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+    background-size: 100% 100%;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-color: ${theme.color.blue};
+  }
 `;