Skip to content

GitLab

Commit 73dd813f authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'gyumin'

parents 0b1deeab eacc9ce9
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 73dd813f
......@@ -23,6 +23,7 @@ function App() {
<AuthProvider>
<Router>
<Switch>
<>
<Route path="/admin" component={AdminPage} />
<div style={{ backgroundColor: "black" }}>
<Router>
......@@ -45,6 +46,7 @@ function App() {
</Switch>
</Router>
</div>
</>
</Switch>
</Router>
</AuthProvider>
......
client/src/apis/auth.api.js
View file @ 73dd813f
......@@ -14,19 +14,13 @@ const login = async (login) => {
};
const logout = async () => {
alert("로그아웃되었습니다.");
const { data } = await axios.get(`${baseUrl}/api/auth/logout`);
return data
};
const signup = async (user) => {
const url = `${baseUrl}/api/auth/signup`
await axios.post(url, user)
}
const compareId = async (userId) => {
const url = `${baseUrl}/api/auth/${userId}`
const { data } = await axios.get(url)
const url = `${baseUrl}/api/auth/signup`;
const { data } = await axios.post(url, user);
return data
}
......@@ -47,7 +41,7 @@ const profile = async (formData) => {
const { data } = await axios.post(url, formData)
return data
}
const getMember = async (id) => {
const getMember = async () => {
const url = `${baseUrl}/api/auth/member`
const { data } = await axios.get(url)
return data
......@@ -70,7 +64,6 @@ const authApi = {
login,
logout,
signup,
compareId,
confirmMbnum,
confirmNum,
profile,
......
client/src/components/Login/Login.js
View file @ 73dd813f
......@@ -42,7 +42,11 @@ const Login = () => {
const requestServer = async (data) => {
if(data === user){
await login(data);
const success = await login(data);
if(success){
setSuccess(true);
alert('로그인이 완료되었습니다.')
}
}else{
}
}
......@@ -51,11 +55,8 @@ const Login = () => {
e.preventDefault();
try {
setError("");
console.log(e.target.name);
if (e.target.name === "login") {
requestServer(user);
alert('로그인이 완료되었습니다.')
setSuccess(true);
}
else {
requestServer(guest);
......
client/src/components/MyInfo/MyInfo.js
View file @ 73dd813f
......@@ -42,7 +42,6 @@ const MyInfo = () => {
errorNickName: false,
errorMbnum: false,
errorPassword: false,
errorRePassword: false
})
useEffect(() => {
......@@ -83,7 +82,6 @@ const MyInfo = () => {
const formData = new FormData();
formData.append("image", img);
const image = await authApi.profile(formData);
console.log(image.img);
setProfile(image.img);
} catch (error) {
catchErrors(error, setError);
......@@ -93,13 +91,15 @@ const MyInfo = () => {
const handleOnSummitVerify = async (e) => {
e.preventDefault();
try {
setError(() => (""));
setLoading(() => (true));
setError("");
setLoading(true);
const pw = presentPw;
console.log(pw);
const confirmPw = await authApi.comparePw(pw);
console.log("confirmPw : "+ confirmPw);
console.log("confirmPw : ", confirmPw);
if (confirmPw) {
setPage(false);
setPresentPw("");
} else {
alert("비밀번호가 일치하지 않습니다.");
}
......@@ -117,12 +117,9 @@ const MyInfo = () => {
setError("");
setLoading(true);
const phone = userRe.userMbnum;
console.log("phone : ", phone);
const message = await authApi.confirmMbnum(phone);
console.log("message : ", message);
if(message.isSuccess){
console.log("mberror: "+mbError);
setMbError("보냄");
setStartTime(message.startTime);
}
......@@ -142,11 +139,8 @@ const MyInfo = () => {
try {
setError("");
setLoading(true);
console.log("startTime : ", startTime);
const confirmNum = {userMbnum : userRe.userMbnum, number : number, startTime : startTime};
console.log(confirmNum);
const message = await authApi.confirmNum(confirmNum);
console.log(message);
setMbError(message);
if(message === "성공"){
setConfirmMb(true);
......@@ -159,73 +153,49 @@ const MyInfo = () => {
}
}
//비교하여 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.userName.length === 0), false, "errorName");
//별명 유효성 검사
vaildationData((userRe.userNickName.length === 0), false, "errorNickName");
// 휴대폰 유효성 검사
vaildationData(userRe.userMbnum.length, 11, "errorMbnum");
// 비밀번호 유효성 검사
vaildationIdPw(userRe.userPassword.length, 8, "errorPassword");
// 비밀번호 확인 유효성 검사
vaildationData(userRe.userPassword, userRe.userRePassword, "errorRePassword");
// 최종 유효성 검사
if (!(Object.values(errorMsg).some((element) => (element)))) {
return true
} else {
return false
}
const validationPw = () => {
if(userRe.userPassword !== userRe.userRePassword){
return false;
}else{return true;}
}
const handleOnSummit = async (e) => {
e.preventDefault();
try {
console.log('handle ?????')
setError(() => (""));
setError("");
//처리가 될때까지 버튼(가입하기)이 안눌리게 지정
setLoading(() => (true));
//유효성 검사
let valid = validation();
console.log('handle on submit', valid)
if (valid) {
setLoading(true);
let validPw = validationPw();
if(confirmMb){
if(validPw){
const userData = userRe;
console.log(userData);
//서버로 전송
const result = await authApi.modifyUser(userData);
console.log("result : " + result);
alert("회원정보 수정 완료");
valid = false;
} else { throw new Error("유효하지 않은 데이터입니다.") }
const error = await authApi.modifyUser(userData);
if(error === "성공"){
alert("회원정보수정에 성공하였습니다.")
}else{
setErrorMsg(error);
alert("형식에 맞게 다시 작성해주세요");
}
}else{
throw new Error("비밀번호가 일치하지 않습니다.");
}
}else{
throw new Error("핸드폰 번호를 인증해주세요.");
}
} catch (error) {
//에러전송
catchErrors(error, setError);
} finally {
setLoading(() => (false));
setLoading(false);
}
}
const handleOnclickOut = (e) => {
setConfirmMb(false);
}
const handleOnClick = (e) => {
e.preventDefault();
handleOnclickOut(e);
setPage(true);
}
......@@ -234,14 +204,14 @@ const MyInfo = () => {
{/* 마이페이지 창 */}
<div className="d-flex flex-column">
<span className={styles.title}>마이페이지</span>
<div className="d-flex justify-content-around">
<div className={`${styles.box} me-5`}>
<div className={`d-flex justify-content-around`}>
<div className={`${styles.box}`}>
<p className={`${styles.hoverTxt}`}>프로필 변경</p>
<img src={`/upload/${profile}`} className={`figure-img img-fluid rounded-circle ${styles.profile}`} role="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop" />
<img src={`/upload/${profile}`} className={`figure-img img-fluid rounded-circle ${styles.img} ${styles.profile}`} role="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop" />
</div>
<div className="d-flex flex-column py-4 justify-content-around">
<div className="d-flex flex-column py-2 justify-content-around">
<span className={`${styles.userName}`}>{`${userNickName}`}님 반갑습니다!</span>
<button className={`rounded my-3 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} data-bs-toggle="modal" href="#verifyPassword" >회원정보 수정</button>
<button className={`rounded my-2 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} data-bs-toggle="modal" href="#verifyPassword" >회원정보 수정</button>
</div>
</div>
</div>
......@@ -277,7 +247,7 @@ const MyInfo = () => {
<div className="d-flex flex-column">
<div className="d-flex justify-content-around align-items-center my-4">
<label className={styles.signupLabel}>현재 비밀번호</label>
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handlePwOnChange} onKeyPress={enterKey} maxLength="11" required />
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handlePwOnChange} onKeyPress={enterKey} maxLength="11" />
</div>
</div>
</div>
......@@ -294,21 +264,21 @@ const MyInfo = () => {
<div className="d-flex flex-column">
<div className={styles.inputContent}>
<label className={styles.signupLabel}>이름</label>
<input className={`${styles.input} ${styles.inputSize}`} type="text" name="userName" placeholder="이름을 입력해주세요" onChange={handleUserOnChange} maxLength="11" required />
<input className={`${styles.input} ${styles.inputSize}`} type="text" name="userName" placeholder="이름을 입력해주세요" onChange={handleUserOnChange} maxLength="11" />
</div>
{errorMsg.errorName && <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="email" name="userEmail" placeholder="이메일을 입력해주세요" onChange={handleUserOnChange} maxLength="20" required />
<input className={`${styles.input} ${styles.inputSize}`} type="email" name="userEmail" placeholder="이메일을 입력해주세요" onChange={handleUserOnChange} maxLength="20" />
</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 />
<input className={`${styles.input} ${styles.inputSize}`} type="text" name="userNickName" placeholder="10자리 이내" onChange={handleUserOnChange} maxLength="10" />
</div>
{errorMsg.errorNickName && <p className={styles.passwordConfirmError}>10자 이내로 입력해주세요.</p>}
</div>
......@@ -317,7 +287,7 @@ const MyInfo = () => {
<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 />
<input className={`${styles.input} `} type="number" name="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} min="" max="99999999999" />
<button type="button" disabled={loading} className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onClick={handleOnClickMbnum}>인증번호받기</button>
</div>
</div>
......@@ -327,7 +297,7 @@ const MyInfo = () => {
<div className="d-flex justify-content-around mt-3">
<label className={`${styles.confirm}`}>인증하기</label>
<div>
<input className={`${styles.input}`} type="number" placeholder="인증번호를 입력" onChange={handleOnChangeMb} required/>
<input className={`${styles.input}`} type="number" placeholder="인증번호를 입력" onChange={handleOnChangeMb} />
<button type="button" className={`rounded-2 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickMbConfirm}>확인</button>
<button type="button" className={`rounded-2 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickMbnum}>재전송</button>
</div>
......@@ -338,12 +308,10 @@ const MyInfo = () => {
{(mbError === "실패") && <p className={styles.passwordConfirmError}>인증번호를 다시 입력해주세요.</p>}
</div>
</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 />
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="11" />
</div>
{errorMsg.errorPassword && <p className={styles.passwordConfirmError}>8~11자리 사이로 입력해주세요.</p>}
......@@ -352,7 +320,7 @@ const MyInfo = () => {
<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 />
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userRePassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="11" />
</div>
{errorMsg.errorRePassword && <p className={styles.passwordConfirmError}>비밀번호가 일치하지 않습니다.</p>}
......
client/src/components/MyInfo/my-info.module.scss
View file @ 73dd813f
......@@ -5,9 +5,6 @@
font-size: 3rem;
margin: 2rem 0;
}
.img{
width: 40%;
}
.confirm{
color: black;
......@@ -53,8 +50,10 @@ width: 40%;
}
.box{
width:12rem;
margin: 0px auto;
margin: 0px 3rem;
position: relative;
display: flex;
align-items: center;
}
.box:hover{
display: block;
......@@ -76,7 +75,7 @@ width: 40%;
}
.profile:hover{
opacity: 0.5;
}
}
.input {
margin: 0.5rem 0 0 0;
padding: 0.5rem 0 0.5rem 0;
......@@ -104,6 +103,7 @@ width: 40%;
.butterYellowAndBtn{
color: black;
font-size: 1rem;
background-color: #FEDC00;
border: 1px solid black;
text-align: center;
......@@ -128,5 +128,34 @@ width: 40%;
}
@media (max-width: 403px) {
.title{
display: flex;
justify-content: center;
color: #FEDC00;
font-size: 2rem;
margin: 2rem 0;
}
.box{
width:8rem;
margin: 0px 1.5rem 0 0.5rem;
position: relative;
}
.profile{
width: 8rem;
height: 8rem;
}
.userName{
color: white;
font-size: 1.1rem;
}
.hoverTxt{
display: none;
position:absolute;
top:5rem;
left:2.5rem;
color : #FEDC00;
font-size: 1.5rem;
}
}
\ No newline at end of file
client/src/components/Navs/SubNav.js
View file @ 73dd813f
......@@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
import { useAuth } from "../../context/auth_context.js"
const SubNav = () => {
const { user, setUser, logout } = useAuth();
console.log("user : ", user);
return (
<> {(user.role !== "user") ?
......
client/src/components/ReservationDetails/ReservationDetails.js
View file @ 73dd813f
......@@ -7,16 +7,16 @@ const ReservationDetails = () => {
<div className={`${styles.body}`}>
<div className={`d-flex justify-content-around align-items-center py-3`}>
<div className={`${styles.span} d-flex justify-content-center`}>
<span>영화 포스터</span>
<span className={`${styles.layout}`}>영화 포스터</span>
</div>
<div className={`${styles.span} d-flex flex-column`}>
<span>영화제목</span>
<span>예매확인번호</span>
<span>예매날짜</span>
<span>상영관</span>
<span>좌석정보</span>
<span>결제금액</span>
<span>결제수단</span>
<span className={`${styles.layout}`}>영화제목</span>
<span className={`${styles.layout}`}>예매확인번호</span>
<span className={`${styles.layout}`}>예매날짜</span>
<span className={`${styles.layout}`}>상영관</span>
<span className={`${styles.layout}`}>좌석정보</span>
<span className={`${styles.layout}`}>결제금액</span>
<span className={`${styles.layout}`}>결제수단</span>
</div>
</div>
</div>
......
client/src/components/ReservationDetails/reservation-details.module.scss
View file @ 73dd813f
......@@ -3,6 +3,7 @@
display: flex;
justify-content: center;
}
.header{
display: flex;
justify-content: center;
......@@ -18,7 +19,21 @@
border-bottom: 1px solid #FEDC00;
}
.span span{
.span .layout{
color:white;
font-size: 1.5rem;
}
@media (max-width: 403px) {
.header{
display: flex;
justify-content: center;
background-color: #FEDC00;
width: 80%;
text-align: center;
font-size: 1.5rem;
margin: 2rem;
}
}
\ No newline at end of file
client/src/components/Signup/Signup.js
View file @ 73dd813f
......@@ -5,6 +5,7 @@ import { Redirect } from "react-router-dom";
import catchErrors from "../../utils/catchErrors.js";
const Signup = () => {
//회원정보
const [user, setUser] = useState({
userId: "",
userName:"",
......@@ -23,19 +24,15 @@ const Signup = () => {
const [mbError,setMbError] = useState(false);
const [error, setError] = useState("");
const [errorMsg, setErrorMsg] = useState({
errorId: null,
errorId: false,
errorName: false,
errorEmail: false,
errorNickName: false,
errorBirthday: false,
errorMbnum: false,
errorPassword: false,
errorRePassword: false
})
// id중복확인 여부 state와 가입하기 누르면 id 임시 저장
const [overlapId, setOverlapId] = useState(false);
const [confirmMb, setConfirmMb] = useState(false);
const [preId, setPreId] = useState("");
//입력할때마다 state에 저장
const handleUserOnChange = (e) => {
......@@ -50,42 +47,7 @@ const Signup = () => {
})
}
}
//id(중복확인 체크, 형식 에러)
const handleOnClickId = async (e) => {
e.preventDefault();
try {
setError("");
if (user.userId.length < 5) {
setErrorMsg(errorMsg => ({
...errorMsg,
[e.target.name]: true
}));
if (overlapId === true) {
setOverlapId(() => (false));
};
} else {
const userId = user.userId;
await authApi.compareId(userId);
if (!await authApi.compareId(userId)) {
alert("이 아이디는 사용가능합니다.")
setErrorMsg(errorMsg => ({
...errorMsg,
[e.target.name]: false
}));
setOverlapId(() => (true));
} else {
alert("이미 사용중인 아이디입니다.")
setOverlapId(() => (false));
}
}
} catch (error) {
catchErrors(error, setError)
} finally {
setLoading(false);
}
}
//인증번호 보내기
const handleOnClickMbnum = async (e) => {
e.preventDefault();
try {
......@@ -93,14 +55,10 @@ const Signup = () => {
setError("");
setLoading(true)
const phone = user.userMbnum;
console.log("phone : ", phone);
const message = await authApi.confirmMbnum(phone);
console.log("message : ", message);
if(message.isSuccess){
console.log("mberror: "+mbError);
setMbError("보냄");
setStartTime(message.startTime);
}
} catch (error) {
console.log('error'+ error)
......@@ -108,21 +66,18 @@ const Signup = () => {
setLoading(false);
}
}
//인증번호 입력
const handleOnChangeMb = (e) => {
setNumber(String(e.target.value));
}
//인증번호 검증
const handleOnClickMbConfirm = async (e) => {
e.preventDefault();
try {
setError("");
setLoading(true);
console.log("startTime : ", startTime);
const confirmNum = {userMbnum : user.userMbnum, number : number, startTime : startTime};
console.log(confirmNum);
const message = await authApi.confirmNum(confirmNum);
console.log(message);
setMbError(message);
if(message === "성공"){
setConfirmMb(true);
......@@ -134,23 +89,37 @@ const Signup = () => {
setLoading(false);
}
}
//비밀번호일치 여부만 클라이언트에서 확인
const validationPw = () => {
if(user.userPassword !== user.userRePassword){
return false;
}else{return true;}
}
//서버로 전송
const handleOnSummit = async (e) => {
e.preventDefault();
try {
setError(() => (""));
setError("");
//처리가 될때까지 버튼(가입하기)이 안눌리게 지정
setLoading(() => (true));
//유효성 검사
validation();
setLoading(true);
let validPw = validationPw();
if(confirmMb){
if(validPw){
const userData = user;
//서버로 전송
await authApi.signup(userData)
alert("가입이 완료되었습니다. 로그인 해주세요.");
const error = await authApi.signup(userData);
if(error === "성공"){
setSuccess(true);
}else{
setErrorMsg(error);
alert("형식에 맞게 다시 작성해주세요");
}
}else{
throw new Error("비밀번호가 일치하지 않습니다.");
}
}else{
throw new Error("핸드폰 번호를 인증해주세요.");
}
} catch (error) {
//에러전송
catchErrors(error, setError);
......@@ -159,69 +128,10 @@ const Signup = () => {
}
}
//비교하여 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 if (text >= minValue) {
setErrorMsg(errorMsg => ({ ...errorMsg, [error]: false }));
if (overlapId === true) {
if (preId !== user.userId) {
setOverlapId(false);
}
}
}
}
//유효성 검사
const validation = () => {
setPreId(user.userId);
//아이디 유효성 검사
vaildationIdPw(user.userId.length, 5, "errorId");
//이름 유효성 검사
vaildationData((user.userName.length === 0), false, "errorName");
//별명 유효성 검사
vaildationData((user.userNickName.length === 0), false, "errorNickName");
// 생일 유효성 검사
vaildationData(user.userBirthday.length, 6, "errorBirthday");
// 휴대폰 유효성 검사
vaildationData(user.userMbnum.length, 11, "errorMbnum");
// 비밀번호 유효성 검사
vaildationIdPw(user.userPassword.length, 8, "errorPassword");
// 비밀번호 확인 유효성 검사
vaildationData(user.userRePassword, user.userPassword, "errorRePassword");
let validation = false;
validation = (Object.values(errorMsg).some((element) => (element)) === false);
// 최종 유효성 검사
if (overlapId) {
if(confirmMb){
if(!validation){
throw new Error("유효하지 않은 데이터입니다.");
}else{
console.log("가입성공");
return true
}
}else{
throw new Error("휴대폰 인증도 해주세요");
}
}else{
setErrorMsg(errorMsg => ({ ...errorMsg, errorId: false }));
throw new Error("먼저 아이디 중복확인을 해주세요");
}
}
if (success) {
if(success){
return <Redirect to="/login" />;
}
return (
// 데이터 입력과 유효성 검사 후 보이는 경고창
<form className={`d-flex col-md-6 col-12 justify-content-center`} onSubmit={handleOnSummit}>
......@@ -230,86 +140,78 @@ const Signup = () => {
<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="text" name="userId" placeholder="5~10자리 사이" onChange={handleUserOnChange} maxLength="10" required />
<button type="button" disabled={loading} name="errorId" className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickId}>중복확인</button>
</div>
<input className={`${styles.input} ${styles.inputSize}`} type="text" name="userId" placeholder="5~10자리 사이" onChange={handleUserOnChange} maxLength="10"/>
</div>
{(overlapId === false) && errorMsg.errorId && <p className={styles.passwordConfirmError}>5~10자리 사이로 입력해주세요.</p>}
{overlapId && (errorMsg.errorId === false) && <p className={styles.passwordConfirmError}>아이디 중복이 확인되었습니다.</p>}
{(errorMsg.errorId === false) && (overlapId === false) && <p className={styles.passwordConfirmError}>아이디 중복확인을 해주세요.</p>}
{errorMsg.errorId && <p className={styles.errorMsg}>5~10자리 사이로 입력해주세요.</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="userName" placeholder="이름을 입력해주세요" onChange={handleUserOnChange} maxlength="10" required />
<input className={`${styles.input} ${styles.inputSize}`} type="text" name="userName" placeholder="이름을 입력해주세요" onChange={handleUserOnChange} maxLength="20" />
</div>
{errorMsg.errorName && <p className={styles.passwordConfirmError}>이름을 입력해주세요</p>}
{errorMsg.errorName && <p className={styles.errorMsg}>이름을 입력해주세요</p>}
</div>
<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 />
<input className={`${styles.input} ${styles.inputSize}`} type="email" name="userEmail" placeholder="이메일을 입력해주세요" onChange={handleUserOnChange} maxLength="20" />
</div>
{errorMsg.errorEmail && <p className={styles.passwordConfirmError}>이메일을 입력해주세요</p>}
{errorMsg.errorEmail && <p className={styles.errorMsg}>이메일을 입력해주세요</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 />
<input className={`${styles.input} ${styles.inputSize}`} type="text" name="userNickName" placeholder="10자리 이내" onChange={handleUserOnChange} maxLength="20" />
</div>
{errorMsg.errorNickName && <p className={styles.passwordConfirmError}>10자 이내로 입력해주세요.</p>}
{errorMsg.errorNickName && <p className={styles.errorMsg}>10자 이내로 입력해주세요.</p>}
</div>
<div className="d-flex flex-column">
<div className={styles.inputContent}>
<label className={styles.signupLabel}>생년월일</label>
<input className={`${styles.input} ${styles.inputSize} ${styles.input.placeholder}`} type="number" name="userBirthday" placeholder="6자리(예시: 991225)" onChange={handleUserOnChange} min="0" max="999999" required />
<input className={`${styles.input} ${styles.inputSize} ${styles.input.placeholder}`} type="number" name="userBirthday" placeholder="6자리(예시: 991225)" onChange={handleUserOnChange} min="0" max="999999" />
</div>
{errorMsg.errorBirthday && <p className={styles.passwordConfirmError}>숫자 6자리를 입력해주세요.</p>}
{errorMsg.errorBirthday && <p className={styles.errorMsg}>숫자 6자리를 입력해주세요.</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} ${styles.input2}`} type="number" name="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} min="" max="99999999999" required />
<input className={`${styles.input} ${styles.input2}`} type="number" name="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} min="0" max="99999999999" />
<button type="button" disabled={loading} className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onClick={handleOnClickMbnum}>인증번호받기</button>
</div>
</div>
{errorMsg.errorMbnum && <p className={styles.passwordConfirmError}>-없이 숫자 11자리를 입력해주세요.</p>}
{errorMsg.errorMbnum && <p className={styles.errorMsg}>-없이 숫자 11자리를 입력해주세요.</p>}
<div class="collapse" id="collapseExample">
<div className="collapse" id="collapseExample">
{/* <div className="d-flex col-md-auto justify-content-end"> */}
<div className="d-flex justify-content-between mt-3">
<label className={`${styles.confirm}`}>인증하기</label>
<div>
<input className={`${styles.input} ${styles.input2}`} type="number" placeholder="인증번호를 입력" onChange={handleOnChangeMb} required/>
<input className={`${styles.input} ${styles.input2}`} type="number" placeholder="인증번호를 입력" onChange={handleOnChangeMb} />
<button type="button" className={`rounded-2 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickMbConfirm}>확인</button>
<button type="button" className={`rounded-2 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickMbnum}>재전송</button>
</div>
</div>
{(mbError === "재전송") && <p className={styles.passwordConfirmError}>유효시간이 만료되었습니다. 재전송해주세요.</p>}
{(mbError === "보냄") && <p className={styles.passwordConfirmError}>5분이내에 입력해주세요.</p>}
{(mbError === "성공") && <p className={styles.passwordConfirmError}>인증되었습니다.</p>}
{(mbError === "실패") && <p className={styles.passwordConfirmError}>인증번호를 다시 입력해주세요.</p>}
{(mbError === "재전송") && <p className={styles.errorMsg}>유효시간이 만료되었습니다. 재전송해주세요.</p>}
{(mbError === "보냄") && <p className={styles.errorMsg}>5분이내에 입력해주세요.</p>}
{(mbError === "성공") && <p className={styles.errorMsg}>인증되었습니다.</p>}
{(mbError === "실패") && <p className={styles.errorMsg}>인증번호를 다시 입력해주세요.</p>}
</div>
</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 />
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20" />
</div>
{errorMsg.errorPassword && <p className={styles.passwordConfirmError}>8~11자리 사이로 입력해주세요.</p>}
{errorMsg.errorPassword && <p className={styles.errorMsg}>8~11자리 사이로 입력해주세요.</p>}
</div>
<div className="d-flex flex-column">
<div className={styles.inputContent}>
<div className={`d-flex ${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>}
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userRePassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20" />
</div>
<button className={`rounded my-3 py-2 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" disabled={loading}>가입하기</button>
......
client/src/components/Signup/signup.module.scss
View file @ 73dd813f
......@@ -73,7 +73,7 @@ border: 1px solid white ;
text-align: center;
}
.passwordConfirmError{
.errorMsg{
margin-bottom: 0;
margin-top: 0.5rem;
text-align: end;
......
client/src/context/auth_context.js
View file @ 73dd813f
......@@ -33,7 +33,6 @@ const AuthProvider = ({ children }) => {
setError("");
setLoading(true);
const user = await authApi.login(id, password);
console.log("user : ", user);
setUser(user);
return true;
} catch (error) {
......
package-lock.json
View file @ 73dd813f
......@@ -1544,6 +1544,11 @@
"requires": {
"lru-cache": "^6.0.0"
}
},
"validator": {
"version": "10.11.0",
"resolved": "https://registry.npmjs.org/validator/-/validator-10.11.0.tgz",
"integrity": "sha512-X/p3UZerAIsbBfN/IwahhYaBbY68EN/UQBWHtsbXGT5bfrH/p4NQzUCG1kF/rtKaNpnJ7jAu6NGTdSNtyNIXMw=="
}
}
},
......@@ -1829,9 +1834,9 @@
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
},
"validator": {
"version": "10.11.0",
"resolved": "https://registry.npmjs.org/validator/-/validator-10.11.0.tgz",
"integrity": "sha512-X/p3UZerAIsbBfN/IwahhYaBbY68EN/UQBWHtsbXGT5bfrH/p4NQzUCG1kF/rtKaNpnJ7jAu6NGTdSNtyNIXMw=="
"version": "13.6.0",
"resolved": "https://registry.npmjs.org/validator/-/validator-13.6.0.tgz",
"integrity": "sha512-gVgKbdbHgtxpRyR8K0O6oFZPhhB5tT1jeEHZR0Znr9Svg03U0+r9DXWMrnRAB+HtCStDQKlaIZm42tVsVjqtjg=="
},
"vary": {
"version": "1.1.2",
......
package.json
View file @ 73dd813f
......@@ -29,7 +29,8 @@
"nodemailer": "^6.6.3",
"pg": "^8.6.0",
"pg-hstore": "^2.3.4",
"sequelize": "^6.6.4"
"sequelize": "^6.6.4",
"validator": "^13.6.0"
},
"devDependencies": {
"nodemon": "^2.0.12"
......
server/controllers/user.controller.js
View file @ 73dd813f
......@@ -3,9 +3,9 @@ import config from "../config/app.config.js";
import { User, Role, Guest, ConfirmNum } from '../db/index.js';
import fs from "fs";
import CryptoJS from "crypto-js";
import axios from "axios";
import validator from "validator";
// 현재 유저 상태 결정
const getUser = async (req, res) => {
try {
if (req.cookies.butterStudio) {
......@@ -20,7 +20,7 @@ const getUser = async (req, res) => {
return res.status(500).send("유저를 가져오지 못했습니다.");
}
}
// 로그인
const login = async (req, res) => {
try {
const { id, password } = req.body;
......@@ -41,7 +41,6 @@ const login = async (req, res) => {
const token = jwt.sign(signData, config.jwtSecret, {
expiresIn: config.jwtExpires,
});
console.log(token);
// 4) 토큰을 쿠키에 저장
res.cookie(config.cookieName, token, {
maxAge: config.cookieMaxAge,
......@@ -62,9 +61,8 @@ const login = async (req, res) => {
console.error(error);
return res.status(500).send("로그인 에러");
}
}
// 로그아웃
const logout = async (req, res) => {
try {
res.clearCookie(config.cookieName);
......@@ -79,64 +77,47 @@ const logout = async (req, res) => {
}
}
const compareId = async (req, res) => {
try {
const id = req.params.userId;
const userid = await User.findOne({ where: { userId: id } });
if (userid !== null) {
return res.json(true);
} else {
return res.json(false);
}
} catch (error) {
console.error(error);
return res.status(500).send("아이디 중복 확인 에러");
}
}
// 휴대폰 인증
const NCP_serviceID = 'ncp:sms:kr:270376424445:butterstudio';
const NCP_accessKey = 'GQmVCT2ZFxnEaJOWbrQs';
const NCP_secretKey = 'XLQQ8sd9WxW40hNi0xNBTOG0T8ksRsr8c8sUIEvy';
const date = Date.now().toString();
const uri = NCP_serviceID;
const secretKey = NCP_secretKey;
const accessKey = NCP_accessKey;
const method = 'POST';
const space = " ";
const newLine = "\n";
const url = `https://sens.apigw.ntruss.com/sms/v2/services/${uri}/messages`;
const url2 = `/sms/v2/services/${uri}/messages`;
//시크릿 키를 암호화하는 작업
const hmac = CryptoJS.algo.HMAC.create(CryptoJS.algo.SHA256, secretKey);
hmac.update(method);
hmac.update(space);
hmac.update(url2);
hmac.update(newLine);
hmac.update(date);
hmac.update(newLine);
hmac.update(accessKey);
const hash = hmac.finalize();
const signature = hash.toString(CryptoJS.enc.Base64);
// 인증번호 발송
const confirmMbnum = async (req, res) => {
try {
// 휴대폰 인증
const NCP_serviceID = process.env.NCP_serviceID;
const NCP_accessKey = process.env.NCP_accessKey;
const NCP_secretKey = process.env.NCP_secretKey;
const date = Date.now().toString();
const uri = NCP_serviceID;
const accessKey = NCP_accessKey;
const secretKey = NCP_secretKey;
const method = 'POST';
const space = " ";
const newLine = "\n";
const url = `https://sens.apigw.ntruss.com/sms/v2/services/${uri}/messages`;
const url2 = `/sms/v2/services/${uri}/messages`;
//시크릿 키를 암호화하는 작업
const hmac = CryptoJS.algo.HMAC.create(CryptoJS.algo.SHA256, secretKey);
hmac.update(method);
hmac.update(space);
hmac.update(url2);
hmac.update(newLine);
hmac.update(date);
hmac.update(newLine);
hmac.update(accessKey);
const hash = hmac.finalize();
const signature = hash.toString(CryptoJS.enc.Base64);
const phoneNumber = req.params.phone;
console.log(phoneNumber);
//인증번호 생성
const verifyCode = Math.floor(Math.random() * (999999 - 100000)) + 100000;
console.log("verifyCode : ",verifyCode);
console.log("verifyCode : ", verifyCode);
let today = new Date();
let time = String(today.getTime());
console.log("time : ", time);
// let result = await axios({
// method: method,
// json: true,
......@@ -165,9 +146,8 @@ const confirmMbnum = async (req, res) => {
// console.log('resultMs', resultMs);
// console.log('response', res.data, res['data']);
const confirm = await ConfirmNum.findOne({ where: { phone: phoneNumber} });
console.log(confirm);
if(confirm){
const confirm = await ConfirmNum.findOne({ where: { phone: phoneNumber } });
if (confirm) {
await confirm.destroy();
// 5분 유효시간 설정
await ConfirmNum.create({
......@@ -175,7 +155,7 @@ const confirmMbnum = async (req, res) => {
phone: phoneNumber,
startTime: time,
});
}else{
} else {
await ConfirmNum.create({
confirmNum: String(verifyCode),
phone: phoneNumber,
......@@ -196,25 +176,21 @@ const confirmMbnum = async (req, res) => {
// 인증번호 확인
const confirmNum = async (req, res) => {
try {
const {userMbnum, number, startTime} = req.body;
console.log(userMbnum, number, startTime);
const confirm = await ConfirmNum.findOne({ where: { phone: userMbnum, startTime: startTime} });
console.log(confirm);
const { userMbnum, number, startTime } = req.body;
const confirm = await ConfirmNum.findOne({ where: { phone: userMbnum, startTime: startTime } });
let today = new Date();
let time = today.getTime();
console.log("time2 :", time);
const elapsedMSec = time - confirm.startTime;
const elapsedMin = String(elapsedMSec / 1000 / 60);
console.log("elapsedMin : ", elapsedMin);
if(elapsedMin <= 5 ){
if (elapsedMin <= 5) {
if (number !== confirm.confirmNum) {
res.send("실패");
}else {
} else {
await confirm.destroy();
res.send("성공");
}
}else{
} else {
res.send("재전송")
}
} catch (error) {
......@@ -223,21 +199,62 @@ const confirmNum = async (req, res) => {
}
};
//유효성 검사
const validation = (errorMsg, data, minLength, maxLength, dataType) => {
if (validator.isLength(data, minLength, maxLength)) {
errorMsg[dataType] = false;
} else {
errorMsg[dataType] = true;
}
if (dataType === "userEmail") {
if (validator.isEmail(data, minLength, maxLength)) {
errorMsg[dataType] = false;
} else {
errorMsg[dataType] = true;
}
}
};
// 회원정보
const signup = async (req, res) => {
const { userId, userName, userEmail, userNickName, userBirthday, userMbnum, userPassword } = req.body;
try {
const mbnum = await User.findOne({ where: { phoneNumber: userMbnum }});
const email = await User.findOne({ where: { email: userEmail } });
let errorMsg = {
errorId: false,
errorName: false,
errorEmail: false,
errorBirthday: false,
errorNickName: false,
errorMbnum: false,
errorPassword: false,
};
if (mbnum && email) {
return res.status(422).send(`이미 있는 이메일, 휴대폰번호입니다.`);
} else if (!mbnum && email) {
return res.status(422).send(`이미 있는 이메일입니다.`);
} else if (mbnum && !email) {
return res.status(422).send(`이미 있는 휴대폰번호입니다.`);
//유효성 검사
validation(errorMsg, userId, 5, 10, "errorId");
validation(errorMsg, userName, 1, 10, "errorName");
validation(errorMsg, userEmail, 3, 20, "errorEmail");
validation(errorMsg, userBirthday, 6, 6, "errorBirthday");
validation(errorMsg, userNickName, 1, 10, "errorNickName");
validation(errorMsg, userMbnum, 11, 11, "errorMbnum");
validation(errorMsg, userPassword, 8, 11, "errorPassword");
let valid = !(Object.values(errorMsg).some((element) => (element)));
// db에서 데이터 중복검사
const id = await User.findOne({ where: { userId: userId } });
const mbnum = await User.findOne({ where: { phoneNumber: userMbnum } });
const email = await User.findOne({ where: { email: userEmail } });
if (!valid) {
res.json(errorMsg);
} else {
if (id) {
return res.status(401).send(`이미 있는 아이디입니다.`);
} else if (email) {
return res.status(401).send(`이미 있는 이메일입니다.`);
} else if (mbnum) {
return res.status(401).send(`이미 있는 휴대폰번호입니다.`);
} else{
const role = await Role.findOne({ where: { name: "member" } })
const newUser = await User.create({
await User.create({
userId: userId,
name: userName,
email: userEmail,
......@@ -248,7 +265,8 @@ const signup = async (req, res) => {
img: "",
roleId: role.id
});
res.json(newUser);
res.json("성공");
}
}
} catch (error) {
console.error(error.message);
......@@ -264,18 +282,17 @@ const getMember = async (req, res) => {
const user = await User.findOne({ where: { id: decoded.id } });
res.json({ nickname: user.nickname, img: user.img });
} else {
res.status(401).send("잘못된 접근입니다.");
res.status(500).send("잘못된 접근입니다.");
}
} catch (error) {
console.error("error : ", error.message);
res.status(500).send("잘못된 접근입니다.");
}
}
// 프로필 변경
const uploadProfile = async (req, res) => {
try {
const image = req.file.filename;
console.log(req.file);
const token = req.cookies.butterStudio;
const decoded = jwt.verify(token, config.jwtSecret);
......@@ -298,7 +315,7 @@ const uploadProfile = async (req, res) => {
res.status(500).send("프로필 에러");
}
}
// 기본 비밀번호인지 확인
const comparePw = async (req, res) => {
try {
//쿠키 안 토큰에서 id추출
......@@ -308,7 +325,6 @@ const comparePw = async (req, res) => {
const user = await User.scope("withPassword").findOne({ where: { id: decoded.id } });
//입력한 비번과 해당 행 비번을 비교
const passwordMatch = await user.comparePassword(req.params.pw);
console.log("passwordMatch : ", passwordMatch);
//클라이언트로 동일여부를 전송
if (passwordMatch) {
return res.json(true)
......@@ -320,16 +336,16 @@ const comparePw = async (req, res) => {
res.status(500).send("인증 에러");
}
}
// 회원정보 수정할 때 쓰는 함수
const overlap = async (decoded, dataType, data) => {
try {
let overlap = await User.findOne({ where: { id: decoded.id } });
console.log("기존 데이터 : ", overlap, "변경할 데이터 : ", data);
// 변경할 데이터가 자기자신이면 true
if (overlap[dataType] === data) {
return true
} else {
// 그렇지 않으면 다른 데이터들 중에서 중복되는지 검사
let overlap2 = await User.findOne({ attributes: [dataType] });
console.log(overlap2)
if (overlap2[dataType] === data) {
return false
} else {
......@@ -340,26 +356,43 @@ const overlap = async (decoded, dataType, data) => {
console.error(error.message);
}
}
// 회원정보 수정
const modifyUser = async (req, res) => {
try {
const token = req.cookies.butterStudio;
const decoded = jwt.verify(token, config.jwtSecret);
const { userName, userEmail, userNickName, userMbnum, userPassword } = req.body;
let errorMsg = {
errorName: false,
errorEmail: false,
errorNickName: false,
errorMbnum: false,
errorPassword: false,
};
//유효성 검사
validation(errorMsg, userName, 1, 10, "errorName");
validation(errorMsg, userEmail, 3, 20, "errorEmail");
validation(errorMsg, userNickName, 1, 10, "errorNickName");
validation(errorMsg, userMbnum, 11, 11, "errorMbnum");
validation(errorMsg, userPassword, 8, 11, "errorPassword");
let valid = !(Object.values(errorMsg).some((element) => (element)));
const overlapEmail = await overlap(decoded, "email", userEmail);
const overlapMbnum = await overlap(decoded, "phoneNumber", userMbnum);
if (!valid) {
res.json(errorMsg);
} else {
if (overlapEmail && overlapMbnum) {
const user = await User.update({
await User.update({
name: userName,
email: userEmail,
nickname: userNickName,
phoneNumber: userMbnum,
password: userPassword,
}, { where: { id: decoded.id }, individualHooks: true });
console.log("user22 :", user);
res.json(user);
res.json("성공");
} else if (!overlapEmail && overlapMbnum) {
res.status(500).send("이미 있는 이메일입니다.");
} else if (overlapEmail && !overlapMbnum) {
......@@ -367,6 +400,7 @@ const modifyUser = async (req, res) => {
} else {
res.status(500).send("이미 있는 이메일, 핸드폰번호입니다.");
}
}
} catch (error) {
console.error(error.message);
res.status(500).send("수정 에러. 나중에 다시 시도 해주세요");
......@@ -434,7 +468,6 @@ export default {
getUser,
login,
logout,
compareId,
confirmMbnum,
confirmNum,
signup,
......
server/models/user.model.js
View file @ 73dd813f
......@@ -54,7 +54,6 @@ const UserModel = (sequelize) => {
);
User.beforeSave(async (user) => {
console.log('update before', user)
if (!user.changed("password")) {
return;
}
......
server/routes/user.route.js
View file @ 73dd813f
......@@ -41,7 +41,6 @@ router
.route("/pw/:pw")
.get(userCtrl.comparePw)
router
.route("/phone/:phone")
.post(userCtrl.confirmMbnum)
......
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