Skip to content

GitLab

Commit ea3c348e authored by 한규민's avatar 한규민
Browse files

회원가입디버그

parent 01fc5d96
Hide whitespace changes
Inline Side-by-side
client/src/apis/auth.api.js
View file @ ea3c348e
......@@ -31,11 +31,15 @@ const confirmMbnum = async (id,token) => {
return data
}
const getNickName = async(id) =>{
const url = `${baseUrl}/api/auth/${id}`
console.log("url : ", url);
const { nickName } = await axios.get(url)
return nickName
const getNickName = async (id) =>{
const url = `${baseUrl}/api/auth/nickname/${id}`
const { data } = await axios.get(url)
return data
}
const modifyUser = async (user) => {
const url = `${baseUrl}/api/auth/modify`
await axios.post(url, user)
}
const authApi = {
......@@ -45,5 +49,6 @@ const authApi = {
compareId,
confirmMbnum,
getNickName,
modifyUser,
};
export default authApi
\ No newline at end of file
client/src/components/MyInfo/MyInfo.js
View file @ ea3c348e
......@@ -2,34 +2,195 @@ import styles from "./my-info.module.scss";
import { useAuth } from "../../context/auth_context";
import { useState, useEffect } from "react";
import authApi from "../../apis/auth.api";
import catchErrors from "../../utils/catchErrors.js";
const MyInfo = () => {
const { user } = useAuth();
const [userNickName, setUserNickName] = useState(user.nickname);
const [userNickName, setUserNickName] = useState(user.nickName);
const getNickName = async (id) => {
console.log(id);
const nickname = await authApi.getNickName(id);
console.log(nickname);
return nickname
setUserNickName(nickname);
}
const [userRe, setUserRe] = useState({
userEmail: "",
userNickName: "",
userMbnum: "",
userPassword: "",
userRePassword: ""
})
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
//각 타입별 error 유무 state
const [error, setError] = useState("");
const [errorMsg, setErrorMsg] = useState({
errorEmail: false,
errorNickName: false,
errorMbnum: false,
errorPassword: false,
errorRePassword: false
})
useEffect(() => {
let name = getNickName(user.id);
setUserNickName(name);
getNickName(user.id);
}, [])
return (
//입력할때마다 state에 저장
const handleUserOnChange = (e) => {
setUserRe({
...userRe,
[e.target.name]: e.target.value
})
if (e.target.name === "userMbnum") {
setUserRe({
...userRe,
[e.target.name]: String(e.target.value)
})
}
}
//비교하여 error메세지 반환
const vaildationData = (text, compareValue, error) => {
if (text !== compareValue) {
setErrorMsg(errorMsg => ({ ...errorMsg, [error]: true }));
} else {
setErrorMsg(errorMsg => ({ ...errorMsg, [error]: false }));
}
}
const vaildationIdPw = (text, minValue, error) => {
if ((text < minValue)) {
setErrorMsg(errorMsg => ({ ...errorMsg, [error]: true }));
} else {
setErrorMsg(errorMsg => ({ ...errorMsg, [error]: false }));
}
}
//유효성 검사
const validation = () => {
//별명 유효성 검사
vaildationData((userRe.userNickName.length === 0), false, "errorNickName");
// 휴대폰 유효성 검사
vaildationData(userRe.userMbnum.length, 11, "errorMbnum");
// 비밀번호 유효성 검사
vaildationIdPw(userRe.userPassword.length, 8, "errorPassword");
// 비밀번호 확인 유효성 검사
vaildationIdPw(userRe.userPassword.length, 8, "errorRePassword");
// 최종 유효성 검사
if ((Object.values(errorMsg).some((element) => (element)) === false)) {
} else {
throw new Error("유효하지 않은 데이터입니다.");
}
}
if (success) {
alert("회원정보 수정이 완료되었습니다.")
}
const handleOnSummit = async (e) => {
e.preventDefault();
try {
setError(() => (""));
//처리가 될때까지 버튼(가입하기)이 안눌리게 지정
setLoading(() => (true));
//유효성 검사
validation();
const userData = userRe;
console.log(userData);
//서버로 전송
await authApi.modifyUser(userData);
alert("회원정보 수정 완료");
setSuccess(true);
} catch (error) {
//에러전송
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
return (<>
<div className="d-flex flex-column">
<span className={styles.title}>마이페이지</span>
<div className="d-flex flex mh-100">
<img src="/images/cat.jpg" className="img-thumbnail rounded-circle" />
<div>
<span>{`${userNickName}`}님 반갑습니다!</span>
<button>수정</button>
<div className="d-flex flex-column">
<span className={`${styles.userName}`}>{`${userNickName}`}님 반갑습니다!</span>
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#exampleModal">회원정보 수정</button>
</div>
</div>
</div>
{/* 회원정보 수정 모달창 */}
<div className="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog modal-dialog-scrollable">
<div className="modal-content">
<div class="modal-header">
<h5 className="modal-title" id="exampleModalLabel">회원정보 수정</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form className={`d-flex col-md-6 col-12 justify-content-center d-flex flex-column`} onSubmit={handleOnSummit}>
<div className="modal-body">
<div className={`d-flex col-md-6 col-12 justify-content-center d-flex flex-column`}>
<div className="d-flex flex-column">
<div className={styles.inputContent}>
<label className={styles.signupLabel}>이메일</label>
<input className={`${styles.input} ${styles.inputSize}`} type="email" name="userEmail" placeholder="이메일을 입력해주세요" onChange={handleUserOnChange} maxlength="20" required />
</div>
{errorMsg.errorEmail && <p className={styles.passwordConfirmError}>이메일을 입력해주세요</p>}
</div>
<div className="d-flex flex-column">
<div className={styles.inputContent}>
<label className={styles.signupLabel}>별명</label>
<input className={`${styles.input} ${styles.inputSize}`} type="text" name="userNickName" placeholder="10자리 이내" onChange={handleUserOnChange} maxLength="10" required />
</div>
{errorMsg.errorNickName && <p className={styles.passwordConfirmError}>10자 이내로 입력해주세요.</p>}
</div>
<div className="d-flex flex-column">
<div className={styles.inputContent}>
<label className={styles.signupLabel}>휴대폰 번호</label>
<div className="d-flex col-md-auto">
<input className={`${styles.input}`} type="number" name="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} min="" max="99999999999" required />
</div>
</div>
{errorMsg.errorMbnum && <p className={styles.passwordConfirmError}>-없이 숫자 11자리를 입력해주세요.</p>}
</div>
<div className="d-flex flex-column">
<div className={`${styles.inputContent}`}>
<label className={styles.signupLabel}>기존 비밀번호</label>
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="11" required />
</div>
{errorMsg.errorPassword && <p className={styles.passwordConfirmError}>8~11자리 사이로 입력해주세요.</p>}
</div>
<div className="d-flex flex-column">
<div className={styles.inputContent}>
<label className={styles.signupLabel}>변경 비밀번호</label>
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userRePassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="11" required />
</div>
{errorMsg.errorRePassword && <p className={styles.passwordConfirmError}>비밀번호가 일치하지 않습니다.</p>}
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary rounded my-3 py-2 fs-5" data-bs-dismiss="modal" disabled={loading}>닫기</button>
<button type="submit" className={`rounded my-3 py-2 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} disabled={loading}>수정하기</button>
</div>
</div>
</form>
</div>
</div>
</div>
</>
)
}
......
client/src/components/MyInfo/my-info.module.scss
View file @ ea3c348e
......@@ -4,4 +4,77 @@
color: #FEDC00;
font-size: 25px;
margin: 1rem 0;
}
\ No newline at end of file
}
.userName{
color: white;
font-size: 1rem;
}
.contents{
display: flex;
width: 100%;
justify-content: spa;
align-items: center;
padding-top: 5px;
}
.signupLabel{
color: black;
padding-right: 8px;
text-align: left;
}
.inputContent{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
}
.input {
margin: 0.5rem 0 0 0;
padding: 0.5rem 0 0.5rem 0;
border-radius: 3px;
text-align: center;
}
input[type=password]{
font-family: 'Courier New', Courier, monospace;
}
input::placeholder{
font-family: 'HangeulNuriB'
}
.inputSize{
width: 15.3rem;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.butterYellowAndBtn{
color: black;
background-color: #FEDC00;
border: 1px solid black;
text-align: center;
}
.btnHover:hover{
background-color: black;
color: #FEDC00;
transition: ease-out;
border: 1px solid #FEDC00 ;
text-align: center;
}
.passwordConfirmError{
margin-bottom: 0;
margin-top: 0.5rem;
text-align: end;
font-size: 13px;
color: #FEDC00;
}
\ No newline at end of file
client/src/components/Signup/Signup.js
View file @ ea3c348e
......@@ -3,7 +3,6 @@ import { useState } from "react";
import authApi from "../../apis/auth.api.js";
import { Redirect } from "react-router";
import catchErrors from "../../utils/catchErrors.js";
import Twilio from "twilio";
const Signup = () => {
const [user, setUser] = useState({
......
client/src/context/auth_context.js
View file @ ea3c348e
import axios from "axios";
import { createContext, useCallback, useContext, useState } from "react";
import authApi from "../apis/auth.api";
import { getLocalUser } from "../utils/auth";
import {baseUrl} from "../utils/baseUrl";
import catchErrors from "../utils/catchErrors";
import config from "../utils/clientConfig";
const AuthContext = createContext({
error: "",
loading: false,
user: {id:0, role:"user"},
user: {id:0, nickName:"비회원", role:"user"},
setUser: () => { },
login: () => Promise.resolve(false),
logout: () => { },
......@@ -26,9 +24,9 @@ const AuthProvider = ({ children }) => {
setError("");
setLoading(true);
const user = await authApi.login(id, password);
console.log("user : ", user);
localStorage.setItem(config.loginUser, JSON.stringify(user));
setUser(user);
return true;
} catch (error) {
catchErrors(error, setError);
......@@ -45,7 +43,7 @@ const AuthProvider = ({ children }) => {
alert("로그아웃되었습니다.");
localStorage.removeItem(config.loginUser);
setLoading(true);
await axios.get(`${baseUrl}/api/auth/logout`);
await authApi.logout();
} catch (error) {
catchErrors(error, setError);
} finally {
......
client/src/utils/auth.js
View file @ ea3c348e
import config from "./clientConfig";
import clientConfig from "./clientConfig";
export function handleLogin(user) {
if (user) {
localStorage.setItem(config.loginUser, JSON.stringify(user));
localStorage.setItem(clientConfig.loginUser, JSON.stringify(user));
}
}
export function getLocalUser() {
const userData = localStorage.getItem(config.loginUser);
const userData = localStorage.getItem(clientConfig.loginUser);
console.log(userData);
let user = null;
if (userData) {
user = JSON.parse(userData);
......
server/controllers/user.controller.js
View file @ ea3c348e
import jwt from "jsonwebtoken";
import config from "../config/app.config.js";
import { User, Role } from '../db/index.js';
import Twilio from "twilio";
const login = async (req, res) => {
try {
......@@ -57,7 +56,9 @@ const login = async (req, res) => {
const logout = async (req, res) => {
try {
res.cookie(config.cookieName,"")
console.log(req.cookies);
res.clearCookie(config.cookieName);
res.send('successfully cookie cleared.')
} catch (error) {
console.error(error);
return res.status(500).send("로그인 에러");
......@@ -78,18 +79,18 @@ const confirmMbnum = async (req, res) => {
const id = req.params.id;
const token = req.params.token;
const client = Twilio(id, token);
// console.log(client);
client.messages
.create({
to: '+8201086074580',
from: '+14159428621',
body: '[ButterStudio] 인증번호[1234]를 입력해주세요',
})
.then(message => console.log(message.sid))
.catch(e => console.log(error));
// const client = Twilio(id, token);
// // console.log(client);
// client.messages
// .create({
// to: '+8201086074580',
// from: '+14159428621',
// body: '[ButterStudio] 인증번호[1234]를 입력해주세요',
// })
// .then(message => console.log(message.sid))
// .catch(e => console.log(error));
// console.log("id = ", id, "token = ", token);
return res.json(true);
res.json(true);
}
const signup = async (req, res) => {
......@@ -119,24 +120,55 @@ const signup = async (req, res) => {
};
const getNickName = async (req, res) => {
console.log("여기여기");
const id = req.params.id;
console.log("id : ", id);
try {
const userNickName = await User.findOne({ where: { id: id }, attributes:["nickname"] });
console.log("userNickName: ", userNickName);
return res.json(userNickName.nickname)
res.json(userNickName.nickname)
} catch (error) {
console.error("error : ",error.message);
res.status(500).send("회원가입 에러. 나중에 다시 시도 해주세요");
}
}
const modifyUser = async (req, res) => {
const { userEmail, userNickName, userMbnum, userPassword, userRePassword } = req.body;
// 휴대폰 중복 확인
try {
const emailOverlap = await User.findOne({ where: { email: userEmail } });
console.log("emailOverlap : ",emailOverlap);
if (emailOverlap) {
return res.status(422).send(`이미 있는 이메일입니다.`);
}else{
const user = await User.findOne({ where: { password: userPassword } });
console.log("user", user);
user.email = userEmail;
user.nickname = userNickName;
user.phoneNumber = userMbnum;
user.password = userRePassword;
await user.save({ fields: ['email'] });
await user.reload();
}
res.clearCookie(config.cookieName);
res.cookie(config.cookieName, token, {
maxAge: config.cookieMaxAge,
path: "/",
httpOnly: config.env === "production",
secure: config.env === "production",
});
res.send('successfully cookie cleared.')
} catch (error) {
console.error(error.message);
res.status(500).send("수정 에러. 나중에 다시 시도 해주세요");
}
};
export default {
login,
logout,
compareId,
confirmMbnum,
signup,
getNickName
getNickName,
modifyUser
}
server/index.js
View file @ ea3c348e
......@@ -10,7 +10,7 @@ dotenv.config({
});
sequelize
.sync({ force: true })
.sync({ force: false })
.then(async () => {
await Promise.all(
Object.keys(ROLE_NAME).map((name) => {
......
server/routes/user.route.js
View file @ ea3c348e
......@@ -15,6 +15,16 @@ router
.route("/signup")
.post(userCtrl.signup)
router
.route("/modify")
.post(userCtrl.modifyUser)
router
.route("/nickname/:id")
.get(userCtrl.getNickName)
router
.route("/:userId")
.get(userCtrl.compareId)
......@@ -23,8 +33,4 @@ router
.route("/:id/:token")
.get(userCtrl.confirmMbnum)
router
.route("/:id")
.get(userCtrl.getNickName)
export default router;
\ No newline at end of file
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