Merge pull request #67 from Try-AngIe/feat/simpconsent

feat/simpconsent: 간편서명동의 설정 프론트 구현, 서명이미지 S3 연동

client/package.json

@@ -10,16 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^2.1.2",
     "axios": "^1.7.2",
+    "qrcode.react": "^3.1.0",
     "react": "^18.3.1",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.24.0",
     "react-signature-canvas": "^1.0.6",
     "styled-components": "^6.1.11",
     "zustand": "^4.5.4"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",

client/src/components/common/CheckBox.jsx

@@ -0,0 +1,25 @@
+import { Switch } from '@headlessui/react';
+import { AiOutlineCheck } from 'react-icons/ai';
+
+const Checkbox = ({ label, name, checked, onChange, disabled }) => {
+  return (
+    <Switch.Group>
+      <div className='flex items-center'>
+        <Switch
+          checked={checked}
+          onChange={onChange}
+          name={name}
+          disabled={disabled}
+          className={`relative flex h-5 w-5 items-center justify-center rounded outline-none ring-1 transition-all duration-200 ${!checked && !disabled ? 'bg-white ring-gray-300' : ''} ${checked && !disabled ? 'bg-teal-400 ring-teal-400' : ''} ${disabled ? 'bg-gray-200 ring-gray-200' : ''} `}>
+          <AiOutlineCheck
+            size='0.75rem'
+            className={` ${checked ? 'scale-100' : 'scale-0'} ${checked && !disabled ? 'text-white' : 'text-gray-400'} transition-transform duration-200 ease-out`}
+          />
+        </Switch>
+        <Switch.Label className='ml-2'>{label}</Switch.Label>
+      </div>
+    </Switch.Group>
+  );
+};
+
+export default Checkbox;

client/src/components/common/SelectField.jsx

@@ -25,7 +25,7 @@ const SelectField = ({ label, required, options, ...props }) => (
           </option>
         ))}
       </select>
-      <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
+      <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-700'>
         <svg className='h-5 w-5 fill-current' viewBox='0 0 20 20'>
           <path
             d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'