refactor: more TS code

src/common/component/styled/Checkbox.tsx

@@ -1,3 +1,4 @@
+import { InputHTMLAttributes } from "react";
 import styled from "styled-components";
 
 const Styled = styled.input`
@@ -34,6 +35,6 @@ const Styled = styled.input`
   }
 `;
 
-export default function StyledCheckbox(props) {
+export default function StyledCheckbox(props: InputHTMLAttributes<HTMLInputElement>) {
   return <Styled readOnly {...props} type="checkbox" />;
 }

src/common/component/styled/Input.tsx

@@ -1,11 +1,6 @@
-import {
-  useState,
-  FC,
-  DetailedHTMLProps,
-  InputHTMLAttributes
-} from 'react';
-import { HiEye, HiEyeOff } from 'react-icons/hi';
-import styled from 'styled-components';
+import { useState, FC, DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { HiEye, HiEyeOff } from "react-icons/hi";
+import styled from "styled-components";
 
 const StyledWrapper = styled.div`
   width: 100%;
@@ -81,21 +76,41 @@ const StyledInput = styled.input`
   }
 `;
 
-interface Props extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+interface Props
+  extends DetailedHTMLProps<
+    Pick<
+      InputHTMLAttributes<HTMLInputElement>,
+      | "placeholder"
+      | "className"
+      | "type"
+      | "autoFocus"
+      | "id"
+      | "value"
+      | "name"
+      | "required"
+      | "readOnly"
+      | "onChange"
+      | "onBlur"
+      | "pattern"
+      | "disabled"
+    >,
+    HTMLInputElement
+  > {
   prefix?: string;
+  ref?: any;
 }
 
-const Input: FC<Props> = ({ type = 'text', prefix = '', className, ...rest }) => {
+const Input: FC<Props> = ({ type = "text", prefix = "", className, ...rest }) => {
   const [inputType, setInputType] = useState(type);
   const togglePasswordVisible = () => {
-    setInputType((prev) => (prev == 'password' ? 'text' : 'password'));
+    setInputType((prev) => (prev == "password" ? "text" : "password"));
   };
 
-  return type == 'password' ? (
+  return type == "password" ? (
     <StyledWrapper className={className}>
       <StyledInput type={inputType} className={`inner ${className}`} {...rest} />
       <div className="view" onClick={togglePasswordVisible}>
-        {inputType == 'password' ? <HiEyeOff color="#78787c"/> : <HiEye color="#78787c"/>}
+        {inputType == "password" ? <HiEyeOff color="#78787c" /> : <HiEye color="#78787c" />}
       </div>
     </StyledWrapper>
   ) : prefix ? (

src/common/component/styled/Radio.tsx

@@ -1,4 +1,4 @@
-import { useState, useId } from "react";
+import { useState, useId, FC } from "react";
 import styled from "styled-components";
 
 const StyledForm = styled.form`
@@ -61,17 +61,24 @@ const StyledForm = styled.form`
     }
   }
 `;
+type Props = {
+  options: string[];
+  values: (string | number)[];
+  defaultValue?: string | number;
+  onChange?: (param: any) => void;
+  value: object | number | string;
+};
 
-const VALUE_NOT_SET = {};
-const VALUES_NOT_SET = {};
+const VALUE_NOT_SET = "";
+const VALUES_NOT_SET: string[] = [];
 
-export default function Radio({
+const Radio: FC<Props> = ({
   options,
   values = VALUES_NOT_SET,
   value = VALUE_NOT_SET,
-  defaultValue = undefined,
+  defaultValue = "",
   onChange = undefined
-}) {
+}) => {
   const id = useId();
 
   const [fallbackValue, setFallbackValue] = useState(defaultValue);
@@ -104,4 +111,5 @@ export default function Radio({
       ))}
     </StyledForm>
   );
-}
+};
+export default Radio;