From 1cffd81ef54163809114c7a897d67b8e56a1484e Mon Sep 17 00:00:00 2001
From: jinhobyeong <jhb_0921@naver.com>
Date: Sun, 17 Jul 2022 23:10:22 +0900
Subject: [PATCH] feat : signup api test

---
 frontend/package-lock.json     |   1 +
 frontend/package.json          |   4 +-
 frontend/src/Page/Register.jsx | 420 +++++++++++++++++++--------------
 frontend/src/setupProxy.js     |   9 +
 frontend/yarn.lock             |   7 +-
 5 files changed, 264 insertions(+), 177 deletions(-)
 create mode 100644 frontend/src/setupProxy.js

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ab04614..12349d4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "@types/react": "^18.0.15",
         "axios": "^0.27.2",
         "express": "^4.18.1",
+        "http-proxy-middleware": "^2.0.6",
         "mysql": "^2.18.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
diff --git a/frontend/package.json b/frontend/package.json
index 1178aab..4b0d5b3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,7 @@
 {
   "name": "frontend",
   "version": "0.1.0",
+  "proxy": "http://localhost:8080",
   "private": true,
   "dependencies": {
     "@babel/core": "^7.18.6",
@@ -14,6 +15,7 @@
     "@types/react": "^18.0.15",
     "axios": "^0.27.2",
     "express": "^4.18.1",
+    "http-proxy-middleware": "^2.0.6",
     "mysql": "^2.18.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -25,7 +27,7 @@
   },
   "scripts": {
     "start": "WATCHPACK_POLLING=true react-scripts start",
-    "dev":"react-scripts start",
+    "dev": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
diff --git a/frontend/src/Page/Register.jsx b/frontend/src/Page/Register.jsx
index 44b6869..2259010 100644
--- a/frontend/src/Page/Register.jsx
+++ b/frontend/src/Page/Register.jsx
@@ -1,63 +1,76 @@
-import * as React from 'react';
-import {useState} from 'react';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { FormHelperText,Modal,Backdrop,Button,CssBaseline,TextField,Box,Typography,Container,Link, styled } from '@mui/material';
+import * as React from "react";
+import { useState } from "react";
+import axios from "axios";
+
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import {
+  FormHelperText,
+  Modal,
+  Backdrop,
+  Button,
+  CssBaseline,
+  TextField,
+  Box,
+  Typography,
+  Container,
+  Link,
+  styled,
+} from "@mui/material";
 import { ReactComponent as TrashCan } from "../../src/images/trashcan.svg";
 
 const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: 400,
-    bgcolor: 'background.paper',
-    borderRadius:3,
-    boxShadow: 24,
-    p: 4,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center"
-  };
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 400,
+  bgcolor: "background.paper",
+  borderRadius: 3,
+  boxShadow: 24,
+  p: 4,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+};
 
-  const btnstyle = {
-    borderColor: "transparent",
-    backgroundColor: "#759F98",
-     color:"#ffffff",
-     height:"40px",
-     width:"300px",
-     borderRadius:"5px",
-     marginTop:"25px",
-     textAlign:"center",
-     fontSize:"15px",
-     fontWeight:"bold",
-     textDecoration: "none",
-     p: 1,
-    "&:hover":{backgroundColor: "#5e8079", color:"#ffffff"}
-  };
+const btnstyle = {
+  borderColor: "transparent",
+  backgroundColor: "#759F98",
+  color: "#ffffff",
+  height: "40px",
+  width: "300px",
+  borderRadius: "5px",
+  marginTop: "25px",
+  textAlign: "center",
+  fontSize: "15px",
+  fontWeight: "bold",
+  textDecoration: "none",
+  p: 1,
+  "&:hover": { backgroundColor: "#5e8079", color: "#ffffff" },
+};
 
 const theme = createTheme({
-    palette: {
-      primary: {
-        main: "#759F98",
-      },
+  palette: {
+    primary: {
+      main: "#759F98",
     },
-  });
+  },
+});
 
-  const UserInfoTf = styled(TextField)(({ }) => ({
-    backgroundColor: "",
-    "&:hover": {
-        color : "#759F98",
-        
-    },
+const UserInfoTf = styled(TextField)(({}) => ({
+  backgroundColor: "",
+  "&:hover": {
+    color: "#759F98",
+  },
 
-    '& .MuiOutlinedInput-root': {
-        '&:hover fieldset': {
-          borderColor: '#759F98',
-        },
-      },
-  }));
+  "& .MuiOutlinedInput-root": {
+    "&:hover fieldset": {
+      borderColor: "#759F98",
+    },
+  },
+}));
 
-  const FormHelperTexts = styled(FormHelperText)`
+const FormHelperTexts = styled(FormHelperText)`
   width: 100%;
   padding-left: 12px;
   font-weight: 700;
@@ -66,44 +79,48 @@ const theme = createTheme({
 `;
 
 function Register() {
-  const [emailError, setEmailError] = useState('');
-  const [passwordState, setPasswordState] = useState('');
-  const [passwordError, setPasswordError] = useState('');
-  const [nameError, setNameError] = useState('');
-  const [registerError, setRegisterError] = useState('');
+  const [emailError, setEmailError] = useState("");
+  const [passwordState, setPasswordState] = useState("");
+  const [passwordError, setPasswordError] = useState("");
+  const [nameError, setNameError] = useState("");
+  const [registerError, setRegisterError] = useState("");
 
-//form 비교
+  //form 비교
   const handleSubmit = (e) => {
     e.preventDefault();
 
     const data = new FormData(e.currentTarget);
     const joinData = {
-      email: data.get('email'),
-      name: data.get('name'),
-      password: data.get('password'),
-      rePassword: data.get('rePassword'),
+      email: data.get("email"),
+      name: data.get("name"),
+      password: data.get("password"),
+      rePassword: data.get("rePassword"),
     };
     const { email, name, password, rePassword } = joinData;
 
     // 이메일 유효성 체크
-    const emailRegex = /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
-    if (!emailRegex.test(email)) setEmailError('올바른 이메일 형식이 아닙니다.');
-    else setEmailError('');
+    const emailRegex =
+      /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
+    if (!emailRegex.test(email))
+      setEmailError("올바른 이메일 형식이 아닙니다.");
+    else setEmailError("");
 
     // 비밀번호 유효성 체크
     const passwordRegex = /^[가-힣a-zA-Z]+$/;
     if (!passwordRegex.test(password))
-      setPasswordState('비밀번호를 입력해주세요!');
-    else setPasswordState('');
+      setPasswordState("비밀번호를 입력해주세요!");
+    else setPasswordState("");
 
     // 비밀번호 같은지 체크
-    if (password !== rePassword) setPasswordError('비밀번호가 일치하지 않습니다.');
-    else setPasswordError('');
+    if (password !== rePassword)
+      setPasswordError("비밀번호가 일치하지 않습니다.");
+    else setPasswordError("");
 
     // 이름 유효성 검사
     const nameRegex = /^[가-힣a-zA-Z]+$/;
-    if (!nameRegex.test(name) || name.length < 1) setNameError('올바른 이름을 입력해주세요.');
-    else setNameError('');
+    if (!nameRegex.test(name) || name.length < 1)
+      setNameError("올바른 이름을 입력해주세요.");
+    else setNameError("");
 
     // 모두 통과되면 완료출력
     if (
@@ -112,121 +129,174 @@ function Register() {
       password === rePassword &&
       nameRegex.test(name)
     ) {
-      handleOpen();
+      axios
+        .post("/user/signup/", {
+          name: data.get("name"),
+          pw: data.get("password"),
+          alias: "hohohoho",
+          email: data.get("email"),
+        })
+        .then((response) => {
+          // Handle success.
+          handleOpen();
+          console.log("Well done!");
+          console.log("User profile", response.data.user);
+          console.log("User token", response.data.jwt);
+        })
+        .catch((error) => {
+          // Handle error.
+          console.log("An error occurred:", error.response);
+        });
     }
-  }
+  };
 
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
   return (
-    <Container  style={{backgroundColor : '#E7F5EF',  border: "solid", borderColor :"#E7F5EF", minWidth: "100%", height: "100vh"}}>
-    <ThemeProvider theme={theme} >
-        <Container component="main" maxWidth="xs" sx={{mb: 2 }} >
-            <CssBaseline />
-              <Box
-                sx={{
-                    marginTop: 8,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                }}
-              >
-      
-                <Typography component= "h1" color = "primary" fontWeight = 'bold' variant="h4">
-                    회원가입
-                </Typography>
-                <Box component="form" color="info.contrastText" onSubmit={handleSubmit} noValidate sx={{ mt: 1, width:396}}>
-                    <UserInfoTf
-                      margin="normal"
-                      required
-                      fullWidth
-                      id="email"
-                      label="Email Address"
-                      name="email"
-                      autoComplete="email"
-                      autoFocus
-                      error={emailError !== '' || false}
-                    />
-                    <FormHelperTexts>{emailError}</FormHelperTexts>
-                    
-                    <UserInfoTf
-                      margin="normal"
-                      required
-                      fullWidth
-                      name="password"
-                      label="Password"
-                      type="password"
-                      id="password"
-                      error={passwordState !== '' || false}
-                    />
-                    <FormHelperTexts>{passwordState}</FormHelperTexts>
-
-                    <UserInfoTf
-                      margin="normal"
-                      required
-                      fullWidth
-                      name="rePassword"
-                      label="Password Confirm"
-                      type="password"
-                      id="rePassword"
-                      error={passwordError !== '' || false}
-                    />
-                    <FormHelperTexts>{passwordError}</FormHelperTexts>
-
-                    <UserInfoTf
-                      margin="normal"
-                      required
-                      fullWidth
-                      name="name"
-                      label="name"
-                      type="name"
-                      id="name"
-                      error={nameError !== '' || false}
-                    />
-                    <FormHelperTexts>{nameError}</FormHelperTexts>
-                    <React.Fragment>
-      
-      <Button
-      type="submit"
-      fullWidth
-      variant="contained"
-      sx={{ mt: 3, mb: 2, height : 50, color : 'white',fontWeight: 'bold',fontSize:20}}
-      >가입하기</Button>
-      <FormHelperTexts>{registerError}</FormHelperTexts>
-
-      <Modal
-        aria-labelledby="modal-title"
-        aria-describedby="modal-description"
-        open={open}
-        onClose={handleClose}
-        closeAfterTransition
-        BackdropComponent={Backdrop}
-        BackdropProps={{
-          timeout: 700,
-        }}
-      >
-        <Box sx={style} >
-          <Typography id="modal-title" variant="h4" fontWeight="bold" component="h1" sx={{mb:1}}>
-            회원가입 완료
-          </Typography>
-          <Typography id="modal-description" variant="h6" sx={{mb: 3, mt: 2 }}>
-            가입이 완료되었습니다!
-          </Typography>
-          <TrashCan/>
-          <Link href="/login"
-          sx={btnstyle}
-          >로그인하러가기</Link>
-        </Box>
-      </Modal>
-      </React.Fragment>
-                </Box>
-              </Box>
+    <Container
+      style={{
+        backgroundColor: "#E7F5EF",
+        border: "solid",
+        borderColor: "#E7F5EF",
+        minWidth: "100%",
+        height: "100vh",
+      }}
+    >
+      <ThemeProvider theme={theme}>
+        <Container component="main" maxWidth="xs" sx={{ mb: 2 }}>
+          <CssBaseline />
+          <Box
+            sx={{
+              marginTop: 8,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              component="h1"
+              color="primary"
+              fontWeight="bold"
+              variant="h4"
+            >
+              회원가입
+            </Typography>
+            <Box
+              component="form"
+              color="info.contrastText"
+              onSubmit={handleSubmit}
+              noValidate
+              sx={{ mt: 1, width: 396 }}
+            >
+              <UserInfoTf
+                margin="normal"
+                required
+                fullWidth
+                id="email"
+                label="Email Address"
+                name="email"
+                autoComplete="email"
+                autoFocus
+                error={emailError !== "" || false}
+              />
+              <FormHelperTexts>{emailError}</FormHelperTexts>
+
+              <UserInfoTf
+                margin="normal"
+                required
+                fullWidth
+                name="password"
+                label="Password"
+                type="password"
+                id="password"
+                error={passwordState !== "" || false}
+              />
+              <FormHelperTexts>{passwordState}</FormHelperTexts>
+
+              <UserInfoTf
+                margin="normal"
+                required
+                fullWidth
+                name="rePassword"
+                label="Password Confirm"
+                type="password"
+                id="rePassword"
+                error={passwordError !== "" || false}
+              />
+              <FormHelperTexts>{passwordError}</FormHelperTexts>
+
+              <UserInfoTf
+                margin="normal"
+                required
+                fullWidth
+                name="name"
+                label="name"
+                type="name"
+                id="name"
+                error={nameError !== "" || false}
+              />
+              <FormHelperTexts>{nameError}</FormHelperTexts>
+              <React.Fragment>
+                <Button
+                  type="submit"
+                  fullWidth
+                  variant="contained"
+                  sx={{
+                    mt: 3,
+                    mb: 2,
+                    height: 50,
+                    color: "white",
+                    fontWeight: "bold",
+                    fontSize: 20,
+                  }}
+                >
+                  가입하기
+                </Button>
+                <FormHelperTexts>{registerError}</FormHelperTexts>
+
+                <Modal
+                  aria-labelledby="modal-title"
+                  aria-describedby="modal-description"
+                  open={open}
+                  onClose={handleClose}
+                  closeAfterTransition
+                  BackdropComponent={Backdrop}
+                  BackdropProps={{
+                    timeout: 700,
+                  }}
+                >
+                  <Box sx={style}>
+                    <Typography
+                      id="modal-title"
+                      variant="h4"
+                      fontWeight="bold"
+                      component="h1"
+                      sx={{ mb: 1 }}
+                    >
+                      회원가입 완료
+                    </Typography>
+                    <Typography
+                      id="modal-description"
+                      variant="h6"
+                      sx={{ mb: 3, mt: 2 }}
+                    >
+                      가입이 완료되었습니다!
+                    </Typography>
+                    <TrashCan />
+                    <Link href="/login" sx={btnstyle}>
+                      로그인하러가기
+                    </Link>
+                  </Box>
+                </Modal>
+              </React.Fragment>
+            </Box>
+          </Box>
         </Container>
-    </ThemeProvider>
+      </ThemeProvider>
     </Container>
   );
 }
 
-export default Register;
\ No newline at end of file
+export default Register;
diff --git a/frontend/src/setupProxy.js b/frontend/src/setupProxy.js
new file mode 100644
index 0000000..9d0dc73
--- /dev/null
+++ b/frontend/src/setupProxy.js
@@ -0,0 +1,9 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
+module.exports = function (app) {
+  app.use(
+    "/user",
+    createProxyMiddleware({
+      target: "http://localhost:8080",
+    })
+  );
+};
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8711f88..ae345bb 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4830,6 +4830,11 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
+"fsevents@^2.3.2", "fsevents@~2.3.2":
+  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  "version" "2.3.2"
+
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -5163,7 +5168,7 @@
     "agent-base" "6"
     "debug" "4"
 
-"http-proxy-middleware@^2.0.3":
+"http-proxy-middleware@^2.0.3", "http-proxy-middleware@^2.0.6":
   "integrity" "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw=="
   "resolved" "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz"
   "version" "2.0.6"