From 4a8e900297ab05ecc65d9a1f8cf7a5acb99a330a Mon Sep 17 00:00:00 2001
From: Muhun Kim <iam@muhun.kim>
Date: Mon, 11 Nov 2019 19:58:01 +0900
Subject: [PATCH] style(ts): extend FormEvents in the login router

---
 src/@types/events.ts |  3 +++
 src/routes/Fetch.tsx |  7 ++++---
 src/routes/Login.tsx | 17 ++++++++++++-----
 3 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 src/@types/events.ts

diff --git a/src/@types/events.ts b/src/@types/events.ts
new file mode 100644
index 0000000..e04edf3
--- /dev/null
+++ b/src/@types/events.ts
@@ -0,0 +1,3 @@
+import { FormEvent } from 'react'
+
+export interface TypeForm extends FormEvent<HTMLFormElement> {}
diff --git a/src/routes/Fetch.tsx b/src/routes/Fetch.tsx
index 1b20405..f77cd1d 100644
--- a/src/routes/Fetch.tsx
+++ b/src/routes/Fetch.tsx
@@ -1,16 +1,17 @@
-import React, { useState, FormEvent, useEffect, Fragment } from 'react'
+import React, { useState, useEffect, Fragment } from 'react'
 
 import { fetchAndSet, isCodeFF } from '../control'
 import { Input } from '../view/Input'
 import { saveToken } from '../utils'
 import { Redirect } from 'react-router-dom'
+import { TypeForm } from '../@types/events'
 
 interface FormElements extends HTMLFormElement {
   student_no: HTMLInputElement
   student_pw: HTMLInputElement
 }
 
-interface FormTarget extends FormEvent<HTMLFormElement> {
+interface FormTarget extends TypeForm {
   target: FormElements
 }
 
@@ -34,7 +35,7 @@ const App = () => {
     <div id="form">
       <p>학번 및 비밀번호를 입력해주세요!</p>
       <form onSubmit={onSubmit}>
-        <Input name="student_no" type="username" />
+        <Input name="student_no" type="number" />
         <Input name="student_pw" type="password" />
         <button type="submit">Submit</button>
       </form>
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index 2b738cb..8439fc8 100644
--- a/src/routes/Login.tsx
+++ b/src/routes/Login.tsx
@@ -1,15 +1,22 @@
-import React, { FormEvent, useState, Fragment } from 'react'
+import React, { useState, Fragment } from 'react'
 
 import { Input } from '../view/Input'
 import { submitID } from '../control'
+import { TypeForm } from '../@types/events'
+
+interface FormElements extends HTMLFormElement {
+  mailid: HTMLInputElement
+}
+
+interface FormTarget extends TypeForm {
+  target: FormElements
+}
 
 const App: React.FC = () => {
   const [flag, setFlag] = useState<boolean>()
-  const onSubmit = async (event: FormEvent) => {
+  const onSubmit = async (event: FormTarget) => {
     event.preventDefault()
-    // @ts-ignore
-    const { value }: { value: string } = event.target[0]
-    setFlag(await submitID(value))
+    setFlag(await submitID(event.target.mailid.value))
   }
   return (
     <Fragment>