[Edit] fix bug

@@ -16,6 +16,10 @@ import {
   FormLabel,
   FormErrorMessage,
   FormHelperText,
+  VStack,
+  StackDivider,
+  Box,
+  Text,
 } from '@chakra-ui/react'
 import http from '../utils/http'
 
@@ -118,11 +122,14 @@ const DockerContainerCreate = () => {
   return (
     <Container>
       <Divider hidden/>
-      <Segment raised>
-        <Heading size='huge'>Create your own docker container</Heading>
-        <Divider hidden/>
-
-        <FormControl id="container">
+      <Heading>Create Docker Container</Heading>
+
+      <VStack
+        divider={<StackDivider borderColor="gray.200"/>}
+        spacing={4}
+        align="stretch"
+      >
+        <FormControl id="container" isRequired>
           <FormLabel>Container Name</FormLabel>
           <Input
             type="email"
@@ -131,85 +138,22 @@ const DockerContainerCreate = () => {
           <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>
+        <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>
 
-          {/*<Form.Group>
-            <Form.Dropdown
-              label='Image'
-              selection
-              options={getImageDropdownOptions()}
-              defaultValue={getImageDropdownOptions()[0]}
-              onChange={handleImage}
-            />
-          </Form.Group>*/}
+        <Button size="md" colorScheme="green" mt="24px"
+          onClick={() => createContainer()}
+        >
+          Create Container
+        </Button>
+      </VStack>
 
-          <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>
   )
 }