Commit 81cba2c9 authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

로딩 스피너 추가

parent 770dd0ab
...@@ -2,6 +2,7 @@ import React, { FormEvent, useEffect, useState } from "react"; ...@@ -2,6 +2,7 @@ import React, { FormEvent, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { authApi } from "../apis"; import { authApi } from "../apis";
import { catchErrors } from "../helpers"; import { catchErrors } from "../helpers";
import { SpinnerIcon } from "../icons";
import { SignupUser } from "../types"; import { SignupUser } from "../types";
export default function Signup() { export default function Signup() {
...@@ -24,17 +25,18 @@ export default function Signup() { ...@@ -24,17 +25,18 @@ export default function Signup() {
function handleChange(event: React.ChangeEvent<HTMLInputElement>) { function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
const { name, value } = event.currentTarget; const { name, value } = event.currentTarget;
console.log(`name: ${name}, value: ${value}`);
setUser({ ...user, [name]: value }); setUser({ ...user, [name]: value });
} }
async function handleSubmit(event: FormEvent) { async function handleSubmit(event: FormEvent) {
event.preventDefault(); event.preventDefault();
try { try {
setError("");
console.log("checkPassword:", passwordMatch()); console.log("checkPassword:", passwordMatch());
console.log("user data", user); console.log("user data", user);
if (passwordMatch()) { if (passwordMatch()) {
const { password2, ...sUser } = user; const { password2, ...sUser } = user;
setLoading(true);
const res = await authApi.signup(sUser); const res = await authApi.signup(sUser);
console.log("서버연결됬나요", res); console.log("서버연결됬나요", res);
console.log("회원가입"); console.log("회원가입");
...@@ -51,7 +53,8 @@ export default function Signup() { ...@@ -51,7 +53,8 @@ export default function Signup() {
function passwordMatch() { function passwordMatch() {
if (user.password !== user.password2) { if (user.password !== user.password2) {
alert("비밀번호가 일치하지않습니다"); // alert();
setError("비밀번호가 일치하지않습니다");
console.log("password fail"); console.log("password fail");
return false; return false;
} else { } else {
...@@ -98,7 +101,6 @@ export default function Signup() { ...@@ -98,7 +101,6 @@ export default function Signup() {
placeholder="비밀번호" placeholder="비밀번호"
type="password" type="password"
name="password" name="password"
// value={password}
onChange={handleChange} onChange={handleChange}
/> />
...@@ -110,13 +112,17 @@ export default function Signup() { ...@@ -110,13 +112,17 @@ export default function Signup() {
placeholder="비밀번호 확인" placeholder="비밀번호 확인"
type="password" type="password"
name="password2" name="password2"
// value={password}
onChange={handleChange} onChange={handleChange}
/> />
<button {error && (
disabled={disabled} <div className="text-red-500 text-sm">
className="place-self-center py-3 border-b border-white" <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> </button>
</form> </form>
......
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>
);
};
export { SpinnerIcon } from "./SpinnerIcon";
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment