[Edit] 디자인 수정

@@ -9,6 +9,7 @@ import DockerImageCreate from './components/DockerImageCreate'
 import DockerImageList from './components/DockerImageList'
 import DockerImageList from './components/DockerImageList'
 import DockerContainerCreate from './components/DockerContainerCreate'
 import DockerContainerCreate from './components/DockerContainerCreate'
 import DockerContainerList from './components/DockerContainerList'
 import DockerContainerList from './components/DockerContainerList'
+import DockerDockerfileList from './components/DockerDockerfileList'
 import 'semantic-ui-css/semantic.min.css'
 import 'semantic-ui-css/semantic.min.css'
 
 
 const App = () => {
 const App = () => {
@@ -26,6 +27,9 @@ const App = () => {
                  component={DockerContainerCreate}/>
                  component={DockerContainerCreate}/>
           <Route exact path="/docker/container/list"
           <Route exact path="/docker/container/list"
                  component={DockerContainerList}/>
                  component={DockerContainerList}/>
+          <Route exact path="/docker/dockerfile/list"
+                 component={DockerDockerfileList}/>
+
           <Redirect path="*" to="/"/>
           <Redirect path="*" to="/"/>
         </Switch>
         </Switch>
       </BrowserRouter>
       </BrowserRouter>

@@ -6,7 +6,6 @@ import {
   Button,
   Button,
   Segment,
   Segment,
   Message,
   Message,
-  Divider,
   Form,
   Form,
   Input,
   Input,
   Transition,
   Transition,
@@ -17,10 +16,14 @@ import {
   FormErrorMessage,
   FormErrorMessage,
   FormHelperText,
   FormHelperText,
   VStack,
   VStack,
+  Stack,
   StackDivider,
   StackDivider,
   Box,
   Box,
-  Text,
+  Text, AlertDialogOverlay, AlertDialogContent, Alert, AlertIcon, AlertDialog,
 } from '@chakra-ui/react'
 } from '@chakra-ui/react'
+import {
+  Divider,
+} from 'semantic-ui-react'
 import http from '../utils/http'
 import http from '../utils/http'
 
 
 const DockerContainerCreate = () => {
 const DockerContainerCreate = () => {
@@ -85,12 +88,13 @@ const DockerContainerCreate = () => {
       const { username, password, port } = response.data.data
       const { username, password, port } = response.data.data
       setLoading(false)
       setLoading(false)
 
 
-      if (!status) {
-        setError(message)
-      } else {
+      if (status) {
         setSuccess(true)
         setSuccess(true)
-        setSsh(
-          `ssh ${username}@${window.location.hostname} -p ${port} # (password : ${password})`)
+        setTimeout(3000, () => {
+          history.push('/docker/container/list')
+        })
+      } else {
+        setError(message)
       }
       }
 
 
       // setTimeout(() => setSuccess(false), 10000);
       // setTimeout(() => setSuccess(false), 10000);
@@ -122,20 +126,20 @@ const DockerContainerCreate = () => {
   return (
   return (
     <Container>
     <Container>
       <Divider hidden/>
       <Divider hidden/>
-      <Heading>Create Docker Container</Heading>
 
 
-      <VStack
-        divider={<StackDivider borderColor="gray.200"/>}
+      <Stack
+        divider={<Divider hidden/>}
         spacing={4}
         spacing={4}
         align="stretch"
         align="stretch"
       >
       >
+        <Heading>Create Docker Container</Heading>
+
         <FormControl id="container" isRequired>
         <FormControl id="container" isRequired>
           <FormLabel>Container Name</FormLabel>
           <FormLabel>Container Name</FormLabel>
           <Input
           <Input
             type="email"
             type="email"
             placeholder='Container Name'
             placeholder='Container Name'
           />
           />
-          <FormHelperText>컨테이너 이름을 입력해주세요.</FormHelperText>
         </FormControl>
         </FormControl>
 
 
         <FormControl id="image">
         <FormControl id="image">
@@ -146,14 +150,26 @@ const DockerContainerCreate = () => {
           </Select>
           </Select>
         </FormControl>
         </FormControl>
 
 
-        <Button size="md" colorScheme="green" mt="24px"
+        <Button size="md" colorScheme="teal" mt="24px"
           onClick={() => createContainer()}
           onClick={() => createContainer()}
         >
         >
           Create Container
           Create Container
         </Button>
         </Button>
-      </VStack>
-
+      </Stack>
 
 
+      <AlertDialog
+        isOpen={isSuccess}
+        onClose={() => setSuccess(false)}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <Alert status="success">
+              <AlertIcon />
+              Successfully created !
+            </Alert>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
     </Container>
     </Container>
   )
   )
 }
 }

@@ -24,6 +24,7 @@ import {
 } from '@chakra-ui/react'
 } from '@chakra-ui/react'
 import {
 import {
   Divider,
   Divider,
+  Grid,
 } from 'semantic-ui-react'
 } from 'semantic-ui-react'
 import http from '../utils/http'
 import http from '../utils/http'
 
 
@@ -32,6 +33,8 @@ const DockerContainerList = () => {
   const [isError, setError] = useState(false)
   const [isError, setError] = useState(false)
   const [message, setMessage] = useState('')
   const [message, setMessage] = useState('')
 
 
+  const history = useHistory()
+
   const getContainerList = () => {
   const getContainerList = () => {
     http.get('/docker/container/list').then(response => {
     http.get('/docker/container/list').then(response => {
       const { status, data, message } = response.data
       const { status, data, message } = response.data
@@ -54,6 +57,20 @@ const DockerContainerList = () => {
       <Divider hidden/>
       <Divider hidden/>
       <Heading>Container List</Heading>
       <Heading>Container List</Heading>
 
 
+      <Grid>
+        <Grid.Column
+          floated='right' width={3}
+        >
+          <Button
+            size='xs'
+            colorScheme='blue'
+            onClick={() => history.push('/docker/container/create')}
+          >
+            New Container
+          </Button>
+        </Grid.Column>
+      </Grid>
+
       <Divider hidden/>
       <Divider hidden/>
 
 
       <UnorderedList>
       <UnorderedList>

+import React, { useEffect, useState } from 'react'
+import {
+  Container,
+  Heading,
+  Button,
+  Text,
+  Box,
+} from '@chakra-ui/react'
+import {
+  Divider, Grid,
+  Header,
+} from 'semantic-ui-react'
+import http from '../utils/http'
+import { useHistory } from 'react-router-dom'
+
+const ImageBlock = ({ title, desc, ...rest }) => {
+  return (
+    <Box p={5} shadow="md" borderWidth="1px" {...rest}>
+      <Heading fontSize="xl">{title}</Heading>
+      <Text mt={4}>{desc}</Text>
+    </Box>
+  )
+}
+
+const DockerDockerfileList = () => {
+  const [token, setToken] = useState('')
+  const [images, setImages] = useState([])
+
+  const history = useHistory()
+
+  const setTokenFromLocalStorage = () => {
+    const token = localStorage.getItem('token')
+    setToken(token)
+  }
+
+  const getImages = () => {
+    http.get('/image/list', {
+      headers: {
+        Authorization: `token ${token}`,
+      },
+    }).then(response => {
+      const { success, code, data, message } = response.data
+      if (success) {
+        const { count, data } = data
+        setImages(data)
+      }
+    })
+  }
+
+  useEffect(() => {
+    setTokenFromLocalStorage()
+    getImages()
+  }, [])
+
+  return (
+    <Container>
+      <Divider hidden />
+      <Heading>Dockerfile List</Heading>
+      <Divider hidden />
+      <Grid>
+        <Grid.Column
+          floated='right' width={3}
+        >
+          <Button
+            size='xs'
+            colorScheme='blue'
+            onClick={() => history.push('/docker/image/create')}
+          >
+            New Image
+          </Button>
+        </Grid.Column>
+      </Grid>
+      {images.map(image => (
+        <ImageBlock
+          title={image.name}
+          desc={image.name}
+        />
+      ))}
+    </Container>
+  )
+}
+
+export default DockerDockerfileList
\ No newline at end of file

@@ -95,7 +95,6 @@ const DockerImageCreate = () => {
           </AlertDialogContent>
           </AlertDialogContent>
         </AlertDialogOverlay>
         </AlertDialogOverlay>
       </AlertDialog>
       </AlertDialog>
-
     </Container>
     </Container>
   )
   )
 }
 }

@@ -14,8 +14,12 @@ const Navigation = () => {
   const panes = [
   const panes = [
     {
     {
       menuItem: 'Home',
       menuItem: 'Home',
-      render: () => <Redirect to="/"/>,
+      render: () => <Redirect to="/" />,
     },
     },
+    /*{
+      menuItem: 'Dockerfile',
+      render: () => <Redirect to="/docker/dockerfile/list"/>,
+    },*/
     {
     {
       menuItem: 'Image',
       menuItem: 'Image',
       render: () => <Redirect to="/docker/image/list"/>,
       render: () => <Redirect to="/docker/image/list"/>,