[Edit] Sign In 서버 연결

@@ -24,6 +24,16 @@ import {
   InputGroup,
   InputGroup,
   InputLeftElement,
   InputLeftElement,
   InputRightElement,
   InputRightElement,
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
 } from '@chakra-ui/react'
 } from '@chakra-ui/react'
 import { PhoneIcon } from '@chakra-ui/icons'
 import { PhoneIcon } from '@chakra-ui/icons'
 import http from '../utils/http'
 import http from '../utils/http'
@@ -31,6 +41,10 @@ import http from '../utils/http'
 const SignIn = () => {
 const SignIn = () => {
   const [username, setUsername] = useState('')
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [password, setPassword] = useState('')
+  const [isSuccess, setSuccess] = useState(false)
+
+  const cancelRef = React.useRef()
+  const onClose = () => setSuccess(false)
 
 
   const handleUsernameOnChange = (event) => {
   const handleUsernameOnChange = (event) => {
     setUsername(event.target.value)
     setUsername(event.target.value)
@@ -40,6 +54,14 @@ const SignIn = () => {
     setPassword(event.target.value)
     setPassword(event.target.value)
   }
   }
 
 
+  const signIn = () => {
+    http.post('/login').then(response => {
+      const { success, code, data, message } = response.data
+      if (success) {
+
+      }
+    })
+  }
 
 
   useEffect(() => {
   useEffect(() => {
   }, [])
   }, [])
@@ -47,7 +69,7 @@ const SignIn = () => {
   return (
   return (
     <Container>
     <Container>
       <Heading>Sign-In</Heading>
       <Heading>Sign-In</Heading>
-      <br />
+      <br/>
 
 
       <Stack
       <Stack
         // divider={<StackDivider borderColor="gray.200"/>}
         // divider={<StackDivider borderColor="gray.200"/>}
@@ -75,10 +97,26 @@ const SignIn = () => {
 
 
         <Button
         <Button
           colorScheme="teal"
           colorScheme="teal"
+          onClick={() => signIn()}
         >
         >
           Sign In
           Sign In
         </Button>
         </Button>
       </Stack>
       </Stack>
+
+      <AlertDialog
+        isOpen={isSuccess}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <Alert status="success">
+              <AlertIcon />
+              Successfully signed in !
+            </Alert>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
     </Container>
     </Container>
   )
   )
 }
 }