2. 유저

POST /user

{ "user": { "username": String*, "email": String*, "password": String*, "accountname": String*, "intro": String, "image": String // 예시) https://mandarin.api.weniv.co.kr/1641906557953.png } }

{ "Content-type" : "application/json" }

// SUCCESS { "message": "회원가입 성공", "user": { "_id": String, "username": String, "email": String, "accountname": String, "intro": String, "image": String, } } // FAIL // email, password, accountname, username 중 하나라도 작성하지 않을 경우 필수 입력사항을 입력해주세요. // password를 6자 이상 입력하지 않을 경우 비밀번호는 6자 이상이어야 합니다. // eamil 형식이 잘못될 경우 잘못된 이메일 형식입니다. // 가입된 email일 경우 이미 가입된 이메일 주소입니다. // accountname에 지정된 문자 이외의 문자가 들어갈 경우 영문, 숫자, 밑줄, 마침표만 사용할 수 있습니다. // 가입된 accountname일 경우 이미 사용중인 계정 ID입니다.

POST /user/login

{ "user":{ "email": String, "password": String } }

{ "Content-type" : "application/json" }

// SUCCESS { "user": { "_id": String, "username": String, "email": String, "accountname": String, "image": String, "token": String } } // FAIL // email, password를 입력하지 않을 때 이메일 또는 비밀번호를 입력해주세요. // email를 입력하지 않을 때 이메일을 입력해주세요. // password를 입력하지 않을 때 비밀번호를 입력해주세요. // email, password를 일치하지 않을 때 { "message": "이메일 또는 비밀번호가 일치하지 않습니다.", "status": 400 }

GET /user/myinfo

{ "Authorization" : "Bearer {token}" }

// SUCCESS [ { "user": { "_id": String, "username": String, "accountname": String, "image": String, "isfollow": false, "following": [], "follower": [], "followerCount": 0, "followingCount": 0 } } ]

POST /user/emailvalid

{ "user":{ "email": String } }

{ "Content-type" : "application/json" }

// SUCCESS // 사용 가능한 이메일인 경우 { "message": "사용 가능한 이메일 입니다." } // 가입한 이메일이 있는 경우 { "message": "이미 가입된 이메일 주소 입니다." } // FAIL { "message": "잘못된 접근입니다." }

POST /user/accountnamevalid

{ "user":{ "accountname": String } }

{ "Content-type" : "application/json" }

// SUCCESS // 사용 가능한 계정ID인 경우 { "message": "사용 가능한 계정ID 입니다." } // 가입한 계정ID가 있는 경우 { "message": "이미 가입된 계정ID 입니다." } // FAIL { "message": "잘못된 접근입니다." }

import { useEffect, useState, useRef } from 'react' import axios from "axios" import { useNavigate } from 'react-router'; import Button from '../../components/Button'; import UserInput from '../../components/userinput/UserInput'; import Inp from '../../components/userinput/Inp'; import Warning from '../../components/Warning'; export default function Register() { const [idValid, setIdValid] = useState(false); const [pwValid, setPwValid] = useState(false); const [isDisable, setIsDisable] = useState(true); const idAlertMsg = useRef(null); const pwAlertMsg = useRef(null); const idInput = useRef(null); const pwInput = useRef(null); const [userEmail, setUserEmail] = useState(null); const [resMsg, setResMsg] = useState(null); const [userData, setUserData] = useState(null) const navigate = useNavigate(); const checkValid = (e) => { if (e.target.id === "email"){ if (e.target.validity.valueMissing){ idAlertMsg.current.textContent = "*값을 입력해주세요."; setIdValid(false); } else if (e.target.validity.typeMismatch){ idAlertMsg.current.textContent = "*알맞은 형식을 입력해주세요."; setIdValid(false); } else if (resMsg.message === "이미 가입된 이메일 주소 입니다."){ idAlertMsg.current.textContent = "*이미 가입된 이메일 주소입니다."; setIdValid(false); } else { e.target.setCustomValidity('') idAlertMsg.current.style.display = "none"; setIdValid(true); return; } idAlertMsg.current.style.display = "block"; } else if (e.target.id === "pw"){ if (e.target.value.length < 6){ pwAlertMsg.current.style.display = "block"; setPwValid(false); } else { pwAlertMsg.current.style.display = "none"; setPwValid(true); } } setUserData({ "user": { "username": null, "email": userEmail, "password": pwInput.current.value, "accountname": null, "intro": null, "image": "https://mandarin.api.weniv.co.kr/Ellipse.png" } }) } useEffect(() => { const getMsg = async () => { setUserEmail(idInput.current.value); const res = await axios.post('https://mandarin.api.weniv.co.kr/user/emailvalid', { "user":{ "email": userEmail } }) setResMsg(res.data); } getMsg(); }, [userEmail, resMsg]) useEffect(() => { idValid && pwValid ? setIsDisable(false) : setIsDisable(true); }, [idValid, pwValid]) const handleSubmit = (e) => { e.preventDefault(); // 새로고침 막기 // console.log(email, password,displayName); // navigate('../profile', { state: userData }); // console.log(userData) } return ( <> <h1>이메일로 회원가입</h1> <form onSubmit={handleSubmit}> <UserInput inputId="email" label="이메일"> <Inp type="email" id="email" ref={idInput} placeholder="이메일 주소를 입력해주세요." onBlur={checkValid} required > </Inp> </UserInput> <Warning ref={idAlertMsg}> 이메일 안내 메시지 </Warning> <UserInput inputId="pw" label="비밀번호"> <Inp type="password" id="pw" ref={pwInput} placeholder="비밀번호를 설정해주세요." onBlur={checkValid} required > </Inp> </UserInput> <Warning ref={pwAlertMsg}>* 비밀번호는 6자 이상이어야 합니다.</Warning> <Button type="submit" className="large" disabled={isDisable}>다음</Button> </form> </> ); }