From 81cba2c9daad296b708c9f7ed90a35dea5b592d1 Mon Sep 17 00:00:00 2001
From: Daeki Yoon <dowellware@gmail.com>
Date: Thu, 7 Jul 2022 13:02:35 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EC=8A=A4=ED=94=BC?=
 =?UTF-8?q?=EB=84=88=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/auth/signup.tsx       | 22 ++++++++++++++--------
 frontend/src/icons/SpinnerIcon.tsx | 29 +++++++++++++++++++++++++++++
 frontend/src/icons/index.ts        |  1 +
 3 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/icons/SpinnerIcon.tsx
 create mode 100644 frontend/src/icons/index.ts

diff --git a/frontend/src/auth/signup.tsx b/frontend/src/auth/signup.tsx
index 4f5473d..3919dc2 100644
--- a/frontend/src/auth/signup.tsx
+++ b/frontend/src/auth/signup.tsx
@@ -2,6 +2,7 @@ import React, { FormEvent, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { authApi } from "../apis";
 import { catchErrors } from "../helpers";
+import { SpinnerIcon } from "../icons";
 import { SignupUser } from "../types";
 
 export default function Signup() {
@@ -24,17 +25,18 @@ export default function Signup() {
 
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     const { name, value } = event.currentTarget;
-    console.log(`name: ${name}, value: ${value}`);
     setUser({ ...user, [name]: value });
   }
 
   async function handleSubmit(event: FormEvent) {
     event.preventDefault();
     try {
+      setError("");
       console.log("checkPassword:", passwordMatch());
       console.log("user data", user);
       if (passwordMatch()) {
         const { password2, ...sUser } = user;
+        setLoading(true);
         const res = await authApi.signup(sUser);
         console.log("서버연결됬나요", res);
         console.log("회원가입");
@@ -51,7 +53,8 @@ export default function Signup() {
 
   function passwordMatch() {
     if (user.password !== user.password2) {
-      alert("비밀번호가 일치하지않습니다");
+      // alert();
+      setError("비밀번호가 일치하지않습니다");
       console.log("password fail");
       return false;
     } else {
@@ -98,7 +101,6 @@ export default function Signup() {
           placeholder="비밀번호"
           type="password"
           name="password"
-          // value={password}
           onChange={handleChange}
         />
 
@@ -110,13 +112,17 @@ export default function Signup() {
           placeholder="비밀번호 확인"
           type="password"
           name="password2"
-          // value={password}
           onChange={handleChange}
         />
-        <button
-          disabled={disabled}
-          className="place-self-center py-3 border-b border-white"
-        >
+        {error && (
+          <div className="text-red-500 text-sm">
+            <p>{error}</p>
+          </div>
+        )}
+        <button disabled={disabled} className="border-b border-white">
+          {loading && (
+            <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
+          )}
           회원가입
         </button>
       </form>
diff --git a/frontend/src/icons/SpinnerIcon.tsx b/frontend/src/icons/SpinnerIcon.tsx
new file mode 100644
index 0000000..9a38b25
--- /dev/null
+++ b/frontend/src/icons/SpinnerIcon.tsx
@@ -0,0 +1,29 @@
+import React, { FC, ReactNode } from "react";
+
+export const SpinnerIcon = ({ ...props }) => {
+  return (
+    // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+    //   <path d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z" />
+    // </svg>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth={4}
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+};
diff --git a/frontend/src/icons/index.ts b/frontend/src/icons/index.ts
new file mode 100644
index 0000000..4e2f0b9
--- /dev/null
+++ b/frontend/src/icons/index.ts
@@ -0,0 +1 @@
+export { SpinnerIcon } from "./SpinnerIcon";
-- 
GitLab