[New] Container 리스트 화면 구현

@@ -4,6 +4,8 @@ import { ChakraProvider } from '@chakra-ui/react'
 import Index from './components/Index'
 import Index from './components/Index'
 import SignIn from './components/SignIn'
 import SignIn from './components/SignIn'
 import DockerContainerCreate from './components/DockerContainerCreate'
 import DockerContainerCreate from './components/DockerContainerCreate'
+import DockerContainerList from './components/DockerContainerList'
+import 'semantic-ui-css/semantic.min.css'
 
 
 const App = () => {
 const App = () => {
   return (
   return (
@@ -13,6 +15,7 @@ const App = () => {
           <Route exact path="/" component={Index}/>
           <Route exact path="/" component={Index}/>
           <Route exact path="/sign-in" component={SignIn}/>
           <Route exact path="/sign-in" component={SignIn}/>
           <Route exact path="/docker/container/create" component={DockerContainerCreate}/>
           <Route exact path="/docker/container/create" component={DockerContainerCreate}/>
+          <Route exact path="/docker/container/list" component={DockerContainerList}/>
           <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,
+  Form,
+  Input,
+  Transition,
+  Select,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  FormHelperText,
+  VStack,
+  Stack,
+  StackDivider,
+  Box,
+  Text,
+  List, ListItem, ListIcon, OrderedList, UnorderedList,
+} from '@chakra-ui/react'
+import {
+  Divider,
+} from 'semantic-ui-react'
+import http from '../utils/http'
+
+const DockerContainerList = () => {
+  const [containers, setContainers] = useState([])
+  const [isError, setError] = useState(false)
+  const [message, setMessage] = useState('')
+
+  const getContainerList = () => {
+    http.get('/docker/container/list').then(response => {
+      const { status, data, message } = response.data
+      if (status) {
+        const { containers } = data
+        setContainers(containers)
+      } else {
+        setError(true)
+        setMessage(message)
+      }
+    })
+  }
+
+  useEffect(() => {
+    getContainerList()
+  }, [])
+
+  return (
+    <Container>
+      <Divider hidden/>
+      <Heading>Container List</Heading>
+
+      <Divider hidden/>
+
+      <UnorderedList>
+        {containers.map((container, key) => (
+          <ListItem key={key}>
+            {container.name}
+          </ListItem>
+        ))}
+      </UnorderedList>
+
+      <Stack
+        divider={<StackDivider borderColor="gray.200"/>}
+        spacing={4}
+        align="stretch"
+      >
+
+
+        <FormControl id="container" isRequired>
+          <FormLabel>Container Name</FormLabel>
+          <Input
+            type="email"
+            placeholder="Container Name"
+          />
+        </FormControl>
+
+        <FormControl id="image">
+          <FormLabel>Image</FormLabel>
+          <Select placeholder="생성할 컨테이너의 OS를 설정해주세요">
+            <option value="ubuntu 18.04">Ubuntu 18.04.5 LTS</option>
+            <option value="ubuntu 20.04">Ubuntu 20.04.2 LTS</option>
+          </Select>
+        </FormControl>
+
+      </Stack>
+
+      <Stack>
+
+      </Stack>
+
+
+    </Container>
+  )
+}
+
+export default DockerContainerList