refactor: add typescript support to project

src/routes/reg/EmailNextStepTip.tsx

@@ -1,5 +1,5 @@
-// import React from "react";
 import styled from "styled-components";
+
 const Styled = styled.div`
   display: flex;
   flex-direction: column;
@@ -22,6 +22,7 @@ const Styled = styled.div`
     }
   }
 `;
+
 export default function EmailNextTip() {
   return (
     <Styled>

src/routes/reg/ExpiredTip.tsx

@@ -1,5 +1,6 @@
 // import React from "react";
 import styled from "styled-components";
+
 const Styled = styled.div`
   display: flex;
   flex-direction: column;
@@ -22,6 +23,7 @@ const Styled = styled.div`
     }
   }
 `;
+
 export default function ExpiredTip() {
   return (
     <Styled>

src/routes/reg/Register.tsx

@@ -1,12 +1,9 @@
-import { useState, useEffect } from "react";
-// import { useDispatch } from "react-redux";
+import { useState, useEffect, FormEvent, ChangeEvent } from "react";
 import { useNavigate } from "react-router-dom";
-// import toast from "react-hot-toast";
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
 import { useSendRegMagicLinkMutation } from "../../app/services/auth";
 import EmailNextTip from "./EmailNextStepTip";
-// import { useSendLoginMagicLinkMutation } from "../../app/services/auth";
 
 export default function Reg() {
   const [sendRegMagicLink, { isLoading, data, isSuccess }] = useSendRegMagicLinkMutation();
@@ -17,6 +14,7 @@ export default function Reg() {
     password: "",
     confirmPassword: ""
   });
+
   useEffect(() => {
     const query = new URLSearchParams(location.search);
     // const githubCode = query.get("gcode");
@@ -25,6 +23,7 @@ export default function Reg() {
       setMagicToken(token);
     }
   }, []);
+
   useEffect(() => {
     if (isSuccess && data) {
       const { new_magic_token, mail_is_sent } = data;
@@ -35,7 +34,7 @@ export default function Reg() {
     }
   }, [isSuccess, data]);
 
-  const handleReg = (evt) => {
+  const handleReg = (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
     const { email, password } = input;
     sendRegMagicLink({
@@ -46,7 +45,7 @@ export default function Reg() {
     // sendMagicLink(email);
   };
 
-  const handleInput = (evt) => {
+  const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
     const { type } = evt.target.dataset;
     const { value } = evt.target;
     // console.log(type, value);
@@ -55,6 +54,7 @@ export default function Reg() {
       return { ...prev };
     });
   };
+
   const { email, password } = input;
   if (data?.mail_is_sent) return <EmailNextTip />;
   return (

src/routes/reg/SignInLink.tsx

@@ -20,6 +20,7 @@ const StyledSignInLink = styled.p`
     cursor: pointer;
   }
 `;
+
 export default function SignInLink() {
   const navigate = useNavigate();
   const handleSignIn = () => {

src/routes/reg/styled.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+
 const StyledWrapper = styled.div`
   display: flex;
   justify-content: center;
@@ -7,7 +8,7 @@ const StyledWrapper = styled.div`
   .form {
     max-width: 440px;
     padding: 36px 40px 32px 40px;
-    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
     border-radius: 12px;
     .tips {
       display: flex;