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

singup 로직 추가

parent 72583297
import axios from "axios";
import { SignupUser } from "../types";
import baseUrl from "./baseUrl";
export const login = async (email: string, password: string) => {
......@@ -13,3 +14,8 @@ export const logout = async () => {
const { data } = await axios.get(`${baseUrl}/auth/logout`);
return data;
};
export const signup = async (user: SignupUser) => {
const { data } = await axios.post(`${baseUrl}/auth/signup`, user);
return data;
};
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import React, { FormEvent, useEffect, useState } from "react";
import { Navigate } from "react-router-dom";
import { authApi } from "../apis";
import { catchErrors } from "../helpers";
import { SpinnerIcon } from "../icons";
import { SignupUser } from "../types";
type SignUpProps = {};
export const SignUp = ({}: SignUpProps) => {
interface IUSER {
name: string;
email: string;
password: string;
password2: string;
}
const [user, setUser] = useState<IUSER>({
name: "user",
email: "user1234@naver.com",
password: "1234",
password2: "1234",
export const SignUp = () => {
const [user, setUser] = useState<SignupUser & { password2: string }>({
name: "",
email: "",
password: "",
password2: "",
});
const [error, setError] = useState("");
const [disabled, setDisabled] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const navigate = useNavigate();
useEffect(() => {
setDisabled(!(user.name && user.email && user.password && user.password2));
......@@ -33,12 +27,16 @@ export const SignUp = ({}: SignUpProps) => {
setUser({ ...user, [id]: value });
}
async function handleSubmit(event: React.MouseEvent<HTMLButtonElement>) {
async function handleSubmit(event: FormEvent) {
event.preventDefault();
try {
console.log("checkPassword:", passwordmatch());
if (passwordmatch()) {
const res = await axios.post("/api/auth/signup", user);
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("회원가입");
setSuccess(true);
......@@ -46,15 +44,15 @@ export const SignUp = ({}: SignUpProps) => {
}
} catch (error) {
console.log("에러발생");
// catchErrors(error, setError)
catchErrors(error, setError);
} finally {
// setLoading(false);
setLoading(false);
}
}
function passwordmatch() {
function passwordMatch() {
if (user.password !== user.password2) {
alert("비밀번호가 일치하지않습니다");
setError("비밀번호가 일치하지않습니다");
console.log("password fail");
return false;
} else {
......@@ -65,12 +63,15 @@ export const SignUp = ({}: SignUpProps) => {
if (success) {
alert("회원가입 되었습니다");
navigate(`../`);
return <Navigate to={"/login"} replace />;
}
return (
<div className="flex justify-center mt-3">
<div className="flex flex-col space-y-4 mt-5 text-xl font-bold">
<form
onSubmit={handleSubmit}
className="flex flex-col space-y-4 mt-5 font-bold"
>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
이름
</label>
......@@ -81,7 +82,10 @@ export const SignUp = ({}: SignUpProps) => {
placeholder="이름을 입력하세요"
onChange={handleChange}
/>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
<label
htmlFor="email"
className="block text-gray-700 text-sm font-bold mb-2 mt-3"
>
이메일
</label>
<input
......@@ -89,42 +93,57 @@ export const SignUp = ({}: SignUpProps) => {
id="email"
type="text"
placeholder="이메일을 입력하세요"
autoComplete="username"
onChange={handleChange}
/>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
<label
htmlFor="password"
className="block text-gray-700 text-sm font-bold mb-2 mt-3"
>
비밀번호
</label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="password"
type="password"
autoComplete="new-password"
placeholder="비밀번호를 입력하세요"
onChange={handleChange}
/>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
<label
htmlFor="password2"
className="block text-gray-700 text-sm font-bold mb-2 mt-3"
>
비밀번호 확인
</label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="password2"
type="password"
autoComplete="new-password"
placeholder="비밀번호를 다시 입력하세요"
onChange={handleChange}
/>
{error && (
<div className="text-red-500 text-sm">
<p>{error}</p>
</div>
)}
<div className="text-center mt-3">
<button
className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
type="submit"
onClick={handleSubmit}
className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
disabled={disabled}
>
{loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
)}
회원가입
</button>
</div>
</div>
</form>
</div>
);
};
......@@ -3,3 +3,9 @@ export interface IUser {
isLoggedIn: boolean;
_id?: string;
}
export interface SignupUser {
email: string;
name: string;
password: string;
}
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