[New] Docker Container Create 화면 구현

 import React, { useEffect } from 'react'
 import React, { useEffect } from 'react'
 import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
 import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
-import { ChakraProvider } from "@chakra-ui/react"
+import { ChakraProvider } from '@chakra-ui/react'
 import Index from './components/Index'
 import Index from './components/Index'
+import DockerContainerCreate from './components/DockerContainerCreate'
 
 
 const App = () => {
 const App = () => {
   return (
   return (
@@ -9,6 +10,7 @@ const App = () => {
       <BrowserRouter>
       <BrowserRouter>
         <Switch>
         <Switch>
           <Route exact path="/" component={Index}/>
           <Route exact path="/" component={Index}/>
+          <Route exact path="/docker/container/create" component={DockerContainerCreate}/>
           <Redirect path="*" to="/"/>
           <Redirect path="*" to="/"/>
         </Switch>
         </Switch>
       </BrowserRouter>
       </BrowserRouter>

+import React, { useState, useEffect } from 'react'
+import { useHistory, Redirect } from 'react-router-dom'
+import {
+  Container,
+  Heading,
+  Button,
+  Segment,
+  Message,
+  Divider,
+  Form,
+  Input,
+  Transition,
+  Select,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  FormHelperText,
+} from '@chakra-ui/react'
+import http from '../utils/http'
+
+const DockerContainerCreate = () => {
+  const [images, setImages] = useState([])
+  const [image, setImage] = useState('')
+  const [containerName, setContainerName] = useState('')
+  const [ssh, setSsh] = useState('')
+  const [port, setPort] = useState(0)
+  const [randomPort, setRandomPort] = useState(false)
+  const [isSuccess, setSuccess] = useState(false)
+  const [isLoading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const history = useHistory()
+
+  const loadImages = () => {
+    setLoading(true)
+    http.get('/docker/image/list').then(response => {
+      const { status, message } = response.data
+      const images = response.data.data
+      setLoading(false)
+
+      if (status) {
+        setImages(images)
+      } else {
+        setError(message)
+        console.log('[ ERROR ]', message)
+      }
+
+    }).catch(error => {
+      console.error(error)
+    })
+  }
+
+  const getImageDropdownOptions = () => {
+    const defaultImage = {
+      key: 999,
+      value: 'default',
+      text: 'default image',
+    }
+
+    return [defaultImage].concat(images.map((image, key) => {
+      return {
+        key: key,
+        value: image.Id,
+        text: image.RepoTags.length > 0 ? image.RepoTags[0] : ' - ',
+      }
+    }))
+  }
+
+  const createContainer = () => {
+    setLoading(true)
+    setError('')
+    console.log('[ DEBUG ] image :', image)
+    http.post('/docker/container/create', {
+      name: containerName,
+      image: image,
+      port: port,
+      random_port: randomPort,
+    }).then(response => {
+      const { status, message } = response.data
+      const { username, password, port } = response.data.data
+      setLoading(false)
+
+      if (!status) {
+        setError(message)
+      } else {
+        setSuccess(true)
+        setSsh(
+          `ssh ${username}@${window.location.hostname} -p ${port} # (password : ${password})`)
+      }
+
+      // setTimeout(() => setSuccess(false), 10000);
+    }).catch(error => {
+      console.error('[ ERROR ]', error)
+    })
+  }
+
+  const handleImage = (e, data) => {
+    setImage(data.value)
+  }
+
+  const handleContainerName = (e) => {
+    setContainerName(e.target.value)
+  }
+
+  const handlePort = (e) => {
+    setPort(e.target.value)
+  }
+
+  const handleRandomPort = () => {
+    setRandomPort(!randomPort)
+  }
+
+  useEffect(() => {
+    loadImages()
+  }, [])
+
+  return (
+    <Container>
+      <Divider hidden/>
+      <Segment raised>
+        <Heading size='huge'>Create your own docker container</Heading>
+        <Divider hidden/>
+
+        <FormControl id="container">
+          <FormLabel>Container Name</FormLabel>
+          <Input
+            type="email"
+            placeholder='Container Name'
+          />
+          <FormHelperText>컨테이너 이름을 입력해주세요.</FormHelperText>
+        </FormControl>
+
+        <div>
+          <Input
+            label='Container Name'
+            placeholder='Container Name'
+            onChange={handleContainerName}
+          />
+
+          <Select label='Image'>
+            <option value="option1">Option 1</option>
+            <option value="option2">Option 2</option>
+            <option value="option3">Option 3</option>
+          </Select>
+
+          {/*<Form.Group>
+            <Form.Dropdown
+              label='Image'
+              selection
+              options={getImageDropdownOptions()}
+              defaultValue={getImageDropdownOptions()[0]}
+              onChange={handleImage}
+            />
+          </Form.Group>*/}
+
+          <Input
+            type='number'
+            label='SSH Port'
+            placeholder='22'
+            disabled={randomPort}
+            onChange={handlePort}
+          />
+
+          {/*<Form.Group>
+            <Form.Input
+              type='number'
+              label='SSH Port'
+              placeholder='22'
+              disabled={randomPort}
+              onChange={handlePort}
+            />
+          </Form.Group>*/}
+          <Checkbox
+            label='Use random port'
+            checked={randomPort}
+            onChange={handleRandomPort}
+          />
+          <Button
+            color='violet'
+            onClick={createContainer}
+            content='Create'
+          />
+          <Button
+            content='Container List'
+            onClick={() => history.push('/docker/container/')}
+          />
+        </div>
+        {/*
+        <Transition.Group
+          duration={300}
+        >
+          {isSuccess && (
+            <>
+              <Divider/>
+              <Message
+                success
+                content={ssh}
+              />
+            </>
+          )}
+          {error && (
+            <>
+              <Divider/>
+              <Message
+                error
+                content={error}
+              />
+            </>
+          )}
+        </Transition.Group>*/}
+      </Segment>
+    </Container>
+  )
+}
+
+export default DockerContainerCreate

 import React, { useEffect } from 'react'
 import React, { useEffect } from 'react'
 import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
 import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
-import { Container } from "@chakra-ui/react"
+import { Container } from '@chakra-ui/react'
 
 
 
 
 const Index = () => {
 const Index = () => {

+import axios from 'axios'
+
+const http = axios.create({
+  baseURL: 'http://192.168.241.128:3030/',
+  withCredentials: true,
+})
+
+export default http