[Edit] Sign Up 기능 서버와 연결

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
 import { ChakraProvider } from '@chakra-ui/react'
 import Index from './components/Index'
 import SignIn from './components/SignIn'
+import SignUp from './components/SignUp'
 import DockerContainerCreate from './components/DockerContainerCreate'
 import DockerContainerList from './components/DockerContainerList'
 import 'semantic-ui-css/semantic.min.css'
@@ -14,6 +15,7 @@ const App = () => {
         <Switch>
           <Route exact path="/" component={Index}/>
           <Route exact path="/sign-in" component={SignIn}/>
+          <Route exact path="/sign-up" component={SignUp}/>
           <Route exact path="/docker/container/create" component={DockerContainerCreate}/>
           <Route exact path="/docker/container/list" component={DockerContainerList}/>
           <Redirect path="*" to="/"/>

@@ -6,7 +6,6 @@ import {
   Button,
   Segment,
   Message,
-  Divider,
   Form,
   Input,
   Transition,
@@ -24,15 +23,33 @@ import {
   InputGroup,
   InputLeftElement,
   InputRightElement,
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
 } from '@chakra-ui/react'
 import { PhoneIcon } from '@chakra-ui/icons'
+import {
+  Divider,
+} from 'semantic-ui-react'
 import http from '../utils/http'
 
 const SignUp = () => {
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
+  const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [phone, setPhone] = useState('')
+  const [isSuccess, setSuccess] = useState(false)
+
+  const cancelRef = React.useRef()
+  const onClose = () => setSuccess(false)
 
   const handleUsernameOnChange = (event) => {
     setUsername(event.target.value)
@@ -42,6 +59,10 @@ const SignUp = () => {
     setPassword(event.target.value)
   }
 
+  const handleNameOnChange = (event) => {
+    setName(event.target.value)
+  }
+
   const handlePhoneOnChange = (event) => {
     setPhone(event.target.value)
   }
@@ -50,13 +71,32 @@ const SignUp = () => {
     setEmail(event.target.value)
   }
 
+  const signUp = () => {
+    http.post('/user/register', {
+      userId: username,
+      password: password,
+      // eslint-disable-next-line no-restricted-globals
+      name: name,
+      phone: phone,
+      email: email,
+    }).then(response => {
+      const { success, code, message, data } = response.data
+      if (success) {
+        setSuccess(true)
+      }
+    }).catch(error => {
+      console.error(error)
+    })
+  }
+
   useEffect(() => {
   }, [])
 
   return (
     <Container>
+      <Divider hidden />
       <Heading>Sign-Up</Heading>
-      <br />
+      <br/>
 
       <Stack
         // divider={<StackDivider borderColor="gray.200"/>}
@@ -90,10 +130,17 @@ const SignUp = () => {
         />
 
 
+        <Input
+          type="text"
+          placeholder="Enter your name"
+          value={name}
+          onChange={handleNameOnChange}
+        />
+
         <InputGroup>
           <InputLeftElement
             pointerEvents="none"
-            children={<PhoneIcon color="gray.300" />}
+            children={<PhoneIcon color="gray.300"/>}
           />
           <Input
             type="tel"
@@ -105,10 +152,26 @@ const SignUp = () => {
 
         <Button
           colorScheme="teal"
+          onClick={() => signUp()}
         >
           Sign Up
         </Button>
       </Stack>
+
+      <AlertDialog
+        isOpen={isSuccess}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <Alert status="success">
+              <AlertIcon />
+              Successfully signed up !
+            </Alert>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
     </Container>
   )
 }