feat: signup 데이터 바인딩 완료

#5
CNU-OOHub · Oct 13, 2022 · ed3c085 · ed3c085
1 parent cae5057
commit ed3c085
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,6 @@ yarn-error.log*
 
 # file tree
 filetree.txt
+
+# package
+package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.1",

diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="oohub" />
+    <link rel="icon" href="%PUBLIC_URL%/tab_logo.png" />
     <title>oohub</title>
   </head>
   <body>

diff --git a/public/tab_logo.png b/public/tab_logo.png
diff --git a/src/api.jsx b/src/api.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import SERVER from "./url";
+import axios from "axios";
+
+// 회원가입
+export const addUser = async (userInfo) => {
+  console.log(userInfo);
+  try {
+    const response = await axios.post(`${SERVER}/api/v1/join`, userInfo);
+    if (response.status === 200) {
+      alert("회원가입 되었습니다");
+    }
+  } catch (error) {
+    throw new Error("signup user error");
+  }
+};
diff --git a/src/components/atoms/button.jsx b/src/components/atoms/button.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import theme from "../../styles/theme";
 
 const CustomButton = styled.button`
@@ -11,7 +11,15 @@ const CustomButton = styled.button`
   background-color: ${(props) => props.bgColor};
   font-size: ${(props) => `${props.fontSize}rem`};
   font-weight: ${(props) => props.fontWeight};
-  border: ${(props) => props.border};
+  //border: ${(props) => props.border};
+  ${(props) =>
+    props.hoverEvent &&
+    css`
+      &:hover {
+        box-shadow: 1px 1px 3px 4px lightgrey;
+        transition: 0.4s;
+      }
+    `}
 `;
 
 const Button = ({
@@ -24,6 +32,7 @@ const Button = ({
   fontSize = 1,
   fontWeight = 700,
   border = "none",
+  hoverEvent = false,
 }) => {
   return (
     <CustomButton
@@ -35,6 +44,7 @@ const Button = ({
       fontSize={fontSize}
       fontWeight={fontWeight}
       border={border}
+      hoverEvent={hoverEvent}
       type="button"
     >
       {children}

diff --git a/src/components/atoms/input.jsx b/src/components/atoms/input.jsx
@@ -1,13 +1,20 @@
 import React from "react";
 
-const Input = ({ type = "text", placeholder, height = 3.5, onChange }) => {
+const Input = ({
+  type = "text",
+  inputType,
+  placeholder,
+  height = 3.5,
+  onChange,
+}) => {
   switch (type) {
     case "text":
       return (
         <input
+          type={inputType}
           placeholder={placeholder}
           onChange={onChange}
-          style={{ height: `${height}rem` }}
+          style={{ height: `${height}rem`, paddingLeft: "5px" }}
         />
       );
     default:

diff --git a/src/components/pages/logIn.jsx b/src/components/pages/logIn.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const LogIn = () => {
+  return <div>난 로그인</div>;
+};
+
+export default LogIn;
diff --git a/src/components/pages/signUp.jsx b/src/components/pages/signUp.jsx
@@ -1,10 +1,17 @@
-import React from "react";
+import {
+  QueryClient,
+  useMutation,
+  useQueryClient,
+} from "@tanstack/react-query";
+import React, { useState } from "react";
 import styled from "styled-components";
+import { addUser } from "../../api";
 import logo from "../../assets/images/logo.png";
 import Button from "../atoms/button";
 import DropDown from "../atoms/dropdown";
 import Input from "../atoms/input";
 import FlexColumn from "../molecules/flexColumn";
+import { useNavigate } from "react-router-dom";
 import Header from "../organisms/header";
 
 const Logo = styled.img`
@@ -13,22 +20,82 @@ const Logo = styled.img`
 `;
 
 const SignUp = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const departments = ["frontend", "backend", "test", "devops"];
+  const [userInfo, setUserInfo] = useState({
+    username: "",
+    password: "",
+    departmentName: "",
+    workspaceName: "",
+  });
+
+  const changeUserInfo = (name, value) => {
+    setUserInfo((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const hasBlank = () => {
+    if (Object.keys(userInfo).find((key) => userInfo[key] === "")) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const addUserMutation = useMutation((userInfo) => addUser(userInfo), {
+    onSuccess: () => {
+      queryClient.invalidateQueries();
+      navigate("/logIn");
+    },
+  });
+
+  const SignUpButtonClicked = () => {
+    if (hasBlank()) {
+      alert("작성");
+    } else {
+      console.log(userInfo);
+      addUserMutation.mutate(userInfo);
+    }
+  };
+
   return (
     <div style={{ height: "100vh" }}>
       <FlexColumn justifyContent="space-evenly" width={25}>
         <Logo src={logo} alt="oohub" />
-        <Input placeholder=" id" />
-        <Input placeholder=" pw" />
-        <DropDown placeholder="department" options={departments} />
-        <Input placeholder=" workspace name" />
+        <Input
+          placeholder="username"
+          onChange={(e) => {
+            changeUserInfo("username", e.target.value);
+          }}
+        />
+        <Input
+          inputType="password"
+          placeholder="password"
+          onChange={(e) => {
+            changeUserInfo("password", e.target.value);
+          }}
+        />
+        <DropDown
+          placeholder="department"
+          options={departments}
+          onChange={(e) => {
+            changeUserInfo("departmentName", e.target.value);
+          }}
+        />
+        <Input
+          placeholder="workspace name"
+          onChange={(e) => {
+            changeUserInfo("workspaceName", e.target.value);
+          }}
+        />
         <Button
           onClick={() => {
-            console.log("클릭");
+            SignUpButtonClicked();
           }}
           width={100}
           height={3.5}
           border="1px solid black"
+          hoverEvent={true}
         >
           Sign Up
         </Button>

diff --git a/src/router.jsx b/src/router.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Header from "./components/organisms/header";
+import LogIn from "./components/pages/logIn";
 import SignUp from "./components/pages/signUp";
 
 const Router = () => {
@@ -10,6 +11,8 @@ const Router = () => {
       <Header />
       <Routes>
         <Route path="/" element={<SignUp />} />
+        <Route path="/signUp" element={<SignUp />} />
+        <Route path="/logIn" element={<LogIn />} />
       </Routes>
     </BrowserRouter>
   );

diff --git a/src/url.jsx b/src/url.jsx
@@ -0,0 +1,2 @@
+const SERVER = "http://127.0.0.1:8080";
+export default SERVER;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		const SERVER = "http://127.0.0.1:8080";
		export default SERVER;