[New] Sign Up 기능 추가

ch4n3.yoon
Commit 75f4f3d19aa3b60a18e5f0567e8ecdfd18bda836 75f4f3d1 1 parent dc696ab3
Showing 4 changed files with 149 additions and 0 deletions
frontend/package.json
frontend/src/App.js
frontend/src/components/SignUp.js
frontend/yarn.lock
--- a/frontend/package.json
View file @75f4f3d
+++ b/frontend/package.json
View file @75f4f3d
@@ -4,12 +4,14 @@
   "private": true,
   "dependencies": {
     "@chakra-ui/core": "^0.8.0",
+    "@chakra-ui/icons": "^1.0.13",
     "@chakra-ui/react": "^1.6.3",
     "@emotion/react": "11",
     "@emotion/styled": "11",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
     "framer-motion": "4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
--- a/frontend/src/App.js
View file @75f4f3d
+++ b/frontend/src/App.js
View file @75f4f3d
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 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 DockerContainerCreate from './components/DockerContainerCreate'
 const App = () => {
@@ -10,6 +11,7 @@ const App = () => {
       <BrowserRouter>
         <Switch>
           <Route exact path="/" component={Index}/>
+          <Route exact path="/sign-in" component={SignIn}/>
           <Route exact path="/docker/container/create" component={DockerContainerCreate}/>
           <Redirect path="*" to="/"/>
         </Switch>
--- a/frontend/src/components/SignUp.js 0 → 100644
View file @75f4f3d
+++ b/frontend/src/components/SignUp.js 0 → 100644
View file @75f4f3d
+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,
+  VStack,
+  Stack,
+  StackDivider,
+  Box,
+  Text,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
+} from '@chakra-ui/react'
+import { PhoneIcon } from '@chakra-ui/icons'
+import http from '../utils/http'
+
+const SignUp = () => {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [email, setEmail] = useState('')
+  const [phone, setPhone] = useState('')
+
+  const handleUsernameOnChange = (event) => {
+    setUsername(event.target.value)
+  }
+
+  const handlePasswordOnChange = (event) => {
+    setPassword(event.target.value)
+  }
+
+  const handlePhoneOnChange = (event) => {
+    setPhone(event.target.value)
+  }
+
+  const handleEmailOnChange = (event) => {
+    setEmail(event.target.value)
+  }
+
+  useEffect(() => {
+  }, [])
+
+  return (
+    <Container>
+      <Heading>Sign-Up</Heading>
+      <br />
+
+      <Stack
+        // divider={<StackDivider borderColor="gray.200"/>}
+        spacing={4}
+        align="stretch"
+      >
+        <Input
+          type="text"
+          placeholder="username"
+          value={username}
+          onChange={handleUsernameOnChange}
+        />
+
+        <InputGroup size="md">
+          <Input
+            pr="4.5rem"
+            type="password"
+            placeholder="Enter password"
+            value={password}
+            onChange={handlePasswordOnChange}
+          />
+          <InputRightElement width="4.5rem">
+          </InputRightElement>
+        </InputGroup>
+
+        <Input
+          type="email"
+          placeholder="email"
+          value={email}
+          onChange={handleEmailOnChange}
+        />
+
+
+        <InputGroup>
+          <InputLeftElement
+            pointerEvents="none"
+            children={<PhoneIcon color="gray.300" />}
+          />
+          <Input
+            type="tel"
+            placeholder="phone"
+            value={phone}
+            onChange={handlePhoneOnChange}
+          />
+        </InputGroup>
+
+        <Button
+          colorScheme="teal"
+        >
+          Sign Up
+        </Button>
+      </Stack>
+    </Container>
+  )
+}
+
+export default SignUp
--- a/frontend/yarn.lock
View file @75f4f3d
+++ b/frontend/yarn.lock
View file @75f4f3d
@@ -1317,6 +1317,14 @@
   dependencies:
     "@chakra-ui/utils" "1.8.0"
+"@chakra-ui/icons@^1.0.13":
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-1.0.13.tgz#d8eb04479b048d8023ae90d76205cd4a0bf7dd79"
+  integrity sha512-twDpFz2uPVboMTEI4QA2y3EJND3G4+/9AVs730fgnnfhTw4EOJt0Lhfm4Spq1qi1LgHF16x4/Lao1E2imB5lWw==
+  dependencies:
+    "@chakra-ui/icon" "1.1.9"
+    "@types/react" "^17.0.0"
+
 "@chakra-ui/image@1.0.15":
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.0.15.tgz#57aaf7e22d2793b9278481aab56b27063a922e5b"
@@ -2642,6 +2650,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
+"@types/react@^17.0.0":
+  version "17.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451"
+  integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -3388,6 +3405,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.2.tgz#7cf783331320098bfbef620df3b3c770147bc224"
   integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -5982,6 +6006,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.2.tgz#dd73c8effc12728ba5cf4259d760ea5fb83e3147"
   integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
+follow-redirects@^1.10.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
+  integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"