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

Signup 로직 추가하고 스타일 변경

parent eef9d0c4
import axios from "axios"; import axios from "axios";
import { SignupUser } from "../types";
import baseUrl from "./baseUrl"; import baseUrl from "./baseUrl";
export const login = async (email: string, password: string) => { export const login = async (email: string, password: string) => {
...@@ -13,3 +14,8 @@ export const logout = async () => { ...@@ -13,3 +14,8 @@ export const logout = async () => {
const { data } = await axios.get(`${baseUrl}/auth/logout`); const { data } = await axios.get(`${baseUrl}/auth/logout`);
return data; return data;
}; };
export const signup = async (user: SignupUser) => {
const { data } = await axios.post(`${baseUrl}/auth/signup`, user);
return data;
};
import React, { useState } from "react"; import React, { FormEvent, useEffect, useState } from "react";
import { Link } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { authApi } from "../apis";
import { catchErrors } from "../helpers";
import { SignupUser } from "../types";
export default function Signup() { export default function Signup() {
const [user, setUser] = useState<SignupUser & { password2: string }>({
name: "",
email: "",
password: "",
password2: "",
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [disabled, setDisabled] = useState(false);
const [success, setSuccess] = useState(false);
const navigate = useNavigate();
useEffect(() => {
setDisabled(!(user.name && user.email && user.password && user.password2));
}, [user]);
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 {
console.log("checkPassword:", passwordMatch());
console.log("user data", user);
if (passwordMatch()) {
const { password2, ...sUser } = user;
const res = await authApi.signup(sUser);
console.log("서버연결됬나요", res);
console.log("회원가입");
setSuccess(true);
setError("");
}
} catch (error) {
console.log("에러발생");
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
function passwordMatch() {
if (user.password !== user.password2) {
alert("비밀번호가 일치하지않습니다");
console.log("password fail");
return false;
} else {
console.log("password match");
return true;
}
}
if (success) {
alert("회원가입 되었습니다");
navigate("/login", { replace: true });
}
return ( return (
<div className="flex flex-col "> <div className="flex flex-col items-center">
<div className="p-12 w-1/2 h-1/2 md:w-40 md:h-1/6 bg-red-400 place-self-center rounded-2xl"> <div className="p-12 md:w-40 mt-8 bg-red-400 rounded-2xl">
<Link to="/">Travel Report</Link> <Link to="/">Travel Report</Link>
</div> </div>
<form className="py-3 border-b border-white "> <form
onSubmit={handleSubmit}
className="flex flex-col items-center mt-16 gap-y-4"
>
<input
className="placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
placeholder="이름"
type="text"
name="name"
onChange={handleChange}
/>
<input
className="placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
placeholder="이메일"
type="email"
name="email"
onChange={handleChange}
/>
<input <input
className="placeholder:text-slate-300 className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3 py-2 pl-9 pr-3
focus:border-black" focus:border-black"
placeholder="비밀번호" placeholder="비밀번호"
type="text" type="password"
name="password" name="password"
// value={password} // value={password}
// onChange={(e) => setPassword(e.target.value)} onChange={handleChange}
/> />
<input <input
...@@ -25,18 +107,18 @@ export default function Signup() { ...@@ -25,18 +107,18 @@ export default function Signup() {
bg-white border border-slate-500 rounded-2xl bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3 py-2 pl-9 pr-3
focus:border-black" focus:border-black"
placeholder="비밀번호" placeholder="비밀번호 확인"
type="text" type="password"
name="password" name="password2"
// value={password} // value={password}
// onChange={(e) => setPassword(e.target.value)} onChange={handleChange}
/>
<input
className="placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
placeholder="email"
type="text"
name="Id"
/> />
<button
disabled={disabled}
className="place-self-center py-3 border-b border-white"
>
회원가입
</button>
</form> </form>
</div> </div>
); );
......
...@@ -7,3 +7,9 @@ export interface PostType { ...@@ -7,3 +7,9 @@ export interface PostType {
theme?: string; theme?: string;
city?: string; city?: 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