Skip to content

GitLab

Commit 19251ba0 authored by 한규민's avatar 한규민
Browse files

디버그 해결 

서버에서 유효성 중복 검사
parent 3c31b22f
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 19251ba0
...@@ -22,6 +22,7 @@ function App() { ...@@ -22,6 +22,7 @@ function App() {
<AuthProvider> <AuthProvider>
<Router> <Router>
<Switch> <Switch>
<>
<Route path="/admin" component={AdminPage} /> <Route path="/admin" component={AdminPage} />
<div style={{ backgroundColor: "black" }}> <div style={{ backgroundColor: "black" }}>
<Router> <Router>
...@@ -42,6 +43,7 @@ function App() { ...@@ -42,6 +43,7 @@ function App() {
</Switch> </Switch>
</Router> </Router>
</div> </div>
</>
</Switch> </Switch>
</Router> </Router>
</AuthProvider> </AuthProvider>
......
client/src/apis/auth.api.js
View file @ 19251ba0
...@@ -24,12 +24,6 @@ const signup = async (user) => { ...@@ -24,12 +24,6 @@ const signup = async (user) => {
return data return data
} }
const compareId = async (userId) => {
const url = `${baseUrl}/api/auth/${userId}`
const { data } = await axios.get(url)
return data
}
const confirmMbnum = async (phone) => { const confirmMbnum = async (phone) => {
const url = `${baseUrl}/api/auth/phone/${phone}` const url = `${baseUrl}/api/auth/phone/${phone}`
const { data } = await axios.post(url); const { data } = await axios.post(url);
...@@ -47,7 +41,7 @@ const profile = async (formData) => { ...@@ -47,7 +41,7 @@ const profile = async (formData) => {
const { data } = await axios.post(url, formData) const { data } = await axios.post(url, formData)
return data return data
} }
const getMember = async (id) => { const getMember = async () => {
const url = `${baseUrl}/api/auth/member` const url = `${baseUrl}/api/auth/member`
const { data } = await axios.get(url) const { data } = await axios.get(url)
return data return data
...@@ -70,7 +64,6 @@ const authApi = { ...@@ -70,7 +64,6 @@ const authApi = {
login, login,
logout, logout,
signup, signup,
compareId,
confirmMbnum, confirmMbnum,
confirmNum, confirmNum,
profile, profile,
......
client/src/components/MyInfo/MyInfo.js
View file @ 19251ba0
...@@ -91,12 +91,15 @@ const MyInfo = () => { ...@@ -91,12 +91,15 @@ const MyInfo = () => {
const handleOnSummitVerify = async (e) => { const handleOnSummitVerify = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
setError(() => ("")); setError("");
setLoading(() => (true)); setLoading(true);
const pw = presentPw; const pw = presentPw;
console.log(pw);
const confirmPw = await authApi.comparePw(pw); const confirmPw = await authApi.comparePw(pw);
console.log("confirmPw : ", confirmPw);
if (confirmPw) { if (confirmPw) {
setPage(false); setPage(false);
setPresentPw("");
} else { } else {
alert("비밀번호가 일치하지 않습니다."); alert("비밀번호가 일치하지 않습니다.");
} }
...@@ -159,31 +162,40 @@ const MyInfo = () => { ...@@ -159,31 +162,40 @@ const MyInfo = () => {
const handleOnSummit = async (e) => { const handleOnSummit = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
setError(() => ("")); setError("");
//처리가 될때까지 버튼(가입하기)이 안눌리게 지정 //처리가 될때까지 버튼(가입하기)이 안눌리게 지정
setLoading(() => (true)); setLoading(true);
let validPw = validationPw(); let validPw = validationPw();
if(confirmMb){
if(validPw){ if(validPw){
const userData = userRe; const userData = userRe;
//서버로 전송 //서버로 전송
const error = await authApi.modifyUser(userData); const error = await authApi.modifyUser(userData);
setErrorMsg(error);
if(error === "성공"){ if(error === "성공"){
alert("회원정보 수정 완료"); alert("회원정보수정에 성공하였습니다.")
}else{
setErrorMsg(error);
alert("형식에 맞게 다시 작성해주세요");
} }
}else{ }else{
throw new Error("비밀번호가 일치하지 않습니다."); throw new Error("비밀번호가 일치하지 않습니다.");
} }
}else{
throw new Error("핸드폰 번호를 인증해주세요.");
}
} catch (error) { } catch (error) {
//에러전송 //에러전송
catchErrors(error, setError); catchErrors(error, setError);
} finally { } finally {
setLoading(() => (false)); setLoading(false);
} }
} }
const handleOnclickOut = (e) => {
setConfirmMb(false);
}
const handleOnClick = (e) => { const handleOnClick = (e) => {
e.preventDefault(); e.preventDefault();
handleOnclickOut(e);
setPage(true); setPage(true);
} }
...@@ -192,14 +204,14 @@ const MyInfo = () => { ...@@ -192,14 +204,14 @@ const MyInfo = () => {
{/* 마이페이지 창 */} {/* 마이페이지 창 */}
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<span className={styles.title}>마이페이지</span> <span className={styles.title}>마이페이지</span>
<div className="d-flex justify-content-around"> <div className={`d-flex justify-content-around`}>
<div className={`${styles.box} me-5`}> <div className={`${styles.box}`}>
<p className={`${styles.hoverTxt}`}>프로필 변경</p> <p className={`${styles.hoverTxt}`}>프로필 변경</p>
<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" /> <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>
<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> <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> </div>
</div> </div>
...@@ -235,7 +247,7 @@ const MyInfo = () => { ...@@ -235,7 +247,7 @@ const MyInfo = () => {
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className="d-flex justify-content-around align-items-center my-4"> <div className="d-flex justify-content-around align-items-center my-4">
<label className={styles.signupLabel}>현재 비밀번호</label> <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> </div>
</div> </div>
...@@ -252,21 +264,21 @@ const MyInfo = () => { ...@@ -252,21 +264,21 @@ const MyInfo = () => {
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>이름</label> <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> </div>
{errorMsg.errorName && <p className={styles.passwordConfirmError}>이름을 입력해주세요</p>} {errorMsg.errorName && <p className={styles.passwordConfirmError}>이름을 입력해주세요</p>}
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>이메일</label> <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> </div>
{errorMsg.errorEmail && <p className={styles.passwordConfirmError}>이메일을 입력해주세요</p>} {errorMsg.errorEmail && <p className={styles.passwordConfirmError}>이메일을 입력해주세요</p>}
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>별명</label> <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> </div>
{errorMsg.errorNickName && <p className={styles.passwordConfirmError}>10자 이내로 입력해주세요.</p>} {errorMsg.errorNickName && <p className={styles.passwordConfirmError}>10자 이내로 입력해주세요.</p>}
</div> </div>
...@@ -275,7 +287,7 @@ const MyInfo = () => { ...@@ -275,7 +287,7 @@ const MyInfo = () => {
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>휴대폰 번호</label> <label className={styles.signupLabel}>휴대폰 번호</label>
<div className="d-flex col-md-auto"> <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> <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>
</div> </div>
...@@ -285,7 +297,7 @@ const MyInfo = () => { ...@@ -285,7 +297,7 @@ const MyInfo = () => {
<div className="d-flex justify-content-around mt-3"> <div className="d-flex justify-content-around mt-3">
<label className={`${styles.confirm}`}>인증하기</label> <label className={`${styles.confirm}`}>인증하기</label>
<div> <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={handleOnClickMbConfirm}>확인</button>
<button type="button" className={`rounded-2 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickMbnum}>재전송</button> <button type="button" className={`rounded-2 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickMbnum}>재전송</button>
</div> </div>
...@@ -296,12 +308,10 @@ const MyInfo = () => { ...@@ -296,12 +308,10 @@ const MyInfo = () => {
{(mbError === "실패") && <p className={styles.passwordConfirmError}>인증번호를 다시 입력해주세요.</p>} {(mbError === "실패") && <p className={styles.passwordConfirmError}>인증번호를 다시 입력해주세요.</p>}
</div> </div>
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>새 비밀번호</label> <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> </div>
{errorMsg.errorPassword && <p className={styles.passwordConfirmError}>8~11자리 사이로 입력해주세요.</p>} {errorMsg.errorPassword && <p className={styles.passwordConfirmError}>8~11자리 사이로 입력해주세요.</p>}
...@@ -310,7 +320,7 @@ const MyInfo = () => { ...@@ -310,7 +320,7 @@ const MyInfo = () => {
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>새 비밀번호 확인</label> <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> </div>
{errorMsg.errorRePassword && <p className={styles.passwordConfirmError}>비밀번호가 일치하지 않습니다.</p>} {errorMsg.errorRePassword && <p className={styles.passwordConfirmError}>비밀번호가 일치하지 않습니다.</p>}
......
client/src/components/MyInfo/my-info.module.scss
View file @ 19251ba0
...@@ -5,9 +5,6 @@ ...@@ -5,9 +5,6 @@
font-size: 3rem; font-size: 3rem;
margin: 2rem 0; margin: 2rem 0;
} }
.img{
width: 40%;
}
.confirm{ .confirm{
color: black; color: black;
...@@ -53,8 +50,10 @@ width: 40%; ...@@ -53,8 +50,10 @@ width: 40%;
} }
.box{ .box{
width:12rem; width:12rem;
margin: 0px auto; margin: 0px 3rem;
position: relative; position: relative;
display: flex;
align-items: center;
} }
.box:hover{ .box:hover{
display: block; display: block;
...@@ -76,7 +75,7 @@ width: 40%; ...@@ -76,7 +75,7 @@ width: 40%;
} }
.profile:hover{ .profile:hover{
opacity: 0.5; opacity: 0.5;
} }
.input { .input {
margin: 0.5rem 0 0 0; margin: 0.5rem 0 0 0;
padding: 0.5rem 0 0.5rem 0; padding: 0.5rem 0 0.5rem 0;
...@@ -104,6 +103,7 @@ width: 40%; ...@@ -104,6 +103,7 @@ width: 40%;
.butterYellowAndBtn{ .butterYellowAndBtn{
color: black; color: black;
font-size: 1rem;
background-color: #FEDC00; background-color: #FEDC00;
border: 1px solid black; border: 1px solid black;
text-align: center; text-align: center;
...@@ -128,5 +128,34 @@ width: 40%; ...@@ -128,5 +128,34 @@ width: 40%;
} }
@media (max-width: 403px) { @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/ReservationDetails/reservation-details.module.scss
View file @ 19251ba0
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.header{ .header{
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -22,3 +23,17 @@ ...@@ -22,3 +23,17 @@
color:white; color:white;
font-size: 1.5rem; 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 @ 19251ba0
...@@ -5,6 +5,7 @@ import { Redirect } from "react-router-dom"; ...@@ -5,6 +5,7 @@ import { Redirect } from "react-router-dom";
import catchErrors from "../../utils/catchErrors.js"; import catchErrors from "../../utils/catchErrors.js";
const Signup = () => { const Signup = () => {
//회원정보
const [user, setUser] = useState({ const [user, setUser] = useState({
userId: "", userId: "",
userName:"", userName:"",
...@@ -23,7 +24,7 @@ const Signup = () => { ...@@ -23,7 +24,7 @@ const Signup = () => {
const [mbError,setMbError] = useState(false); const [mbError,setMbError] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [errorMsg, setErrorMsg] = useState({ const [errorMsg, setErrorMsg] = useState({
errorId: null, errorId: false,
errorName: false, errorName: false,
errorEmail: false, errorEmail: false,
errorNickName: false, errorNickName: false,
...@@ -31,10 +32,7 @@ const Signup = () => { ...@@ -31,10 +32,7 @@ const Signup = () => {
errorMbnum: false, errorMbnum: false,
errorPassword: false, errorPassword: false,
}) })
// id중복확인 여부 state와 가입하기 누르면 id 임시 저장
const [overlapId, setOverlapId] = useState(false);
const [confirmMb, setConfirmMb] = useState(false); const [confirmMb, setConfirmMb] = useState(false);
const [preId, setPreId] = useState("");
//입력할때마다 state에 저장 //입력할때마다 state에 저장
const handleUserOnChange = (e) => { const handleUserOnChange = (e) => {
...@@ -49,42 +47,7 @@ const Signup = () => { ...@@ -49,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;
const overlapId = await authApi.compareId(userId);
if (!overlapId) {
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) => { const handleOnClickMbnum = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
...@@ -103,11 +66,11 @@ const Signup = () => { ...@@ -103,11 +66,11 @@ const Signup = () => {
setLoading(false); setLoading(false);
} }
} }
//인증번호 입력
const handleOnChangeMb = (e) => { const handleOnChangeMb = (e) => {
setNumber(String(e.target.value)); setNumber(String(e.target.value));
} }
//인증번호 검증
const handleOnClickMbConfirm = async (e) => { const handleOnClickMbConfirm = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
...@@ -126,30 +89,37 @@ const Signup = () => { ...@@ -126,30 +89,37 @@ const Signup = () => {
setLoading(false); setLoading(false);
} }
} }
//비밀번호일치 여부만 클라이언트에서 확인
const validationPw = () => { const validationPw = () => {
if(user.userPassword !== user.userRePassword){ if(user.userPassword !== user.userRePassword){
return false; return false;
}else{return true;} }else{return true;}
} }
//서버로 전송
const handleOnSummit = async (e) => { const handleOnSummit = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
setError(() => ("")); setError("");
//처리가 될때까지 버튼(가입하기)이 안눌리게 지정 //처리가 될때까지 버튼(가입하기)이 안눌리게 지정
setLoading(() => (true)); setLoading(true);
let validPw = validationPw(); let validPw = validationPw();
if(confirmMb){
if(validPw){ if(validPw){
const userData = user; const userData = user;
//서버로 전송 //서버로 전송
const error = await authApi.signup(userData); const error = await authApi.signup(userData);
setErrorMsg(error);
if(error === "성공"){ if(error === "성공"){
setSuccess(true); setSuccess(true);
}else{
setErrorMsg(error);
alert("형식에 맞게 다시 작성해주세요");
} }
}else{ }else{
throw new Error("비밀번호가 일치하지 않습니다."); throw new Error("비밀번호가 일치하지 않습니다.");
} }
}else{
throw new Error("핸드폰 번호를 인증해주세요.");
}
} catch (error) { } catch (error) {
//에러전송 //에러전송
catchErrors(error, setError); catchErrors(error, setError);
...@@ -170,83 +140,78 @@ const Signup = () => { ...@@ -170,83 +140,78 @@ const Signup = () => {
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>아이디</label> <label className={styles.signupLabel}>아이디</label>
<div className="d-flex col-md-auto"> <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userId" placeholder="5~10자리 사이" onChange={handleUserOnChange} maxLength="10"/>
<input className={styles.input} type="text" name="userId" placeholder="5~10자리 사이" onChange={handleUserOnChange} maxLength="20" required />
<button type="button" disabled={loading} name="errorId" className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickId}>중복확인</button>
</div>
</div> </div>
{(overlapId === false) && errorMsg.errorId && <p className={styles.passwordConfirmError}>5~10자리 사이로 입력해주세요.</p>} {errorMsg.errorId && <p className={styles.errorMsg}>5~10자리 사이로 입력해주세요.</p>}
{overlapId && (errorMsg.errorId === false) && <p className={styles.passwordConfirmError}>아이디 중복이 확인되었습니다.</p>}
{(errorMsg.errorId === false) && (overlapId === false) && <p className={styles.passwordConfirmError}>아이디 중복확인을 해주세요.</p>}
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>이름</label> <label className={styles.signupLabel}>이름</label>
<input className={`${styles.input} ${styles.inputSize}`} type="text" name="userName" placeholder="이름을 입력해주세요" onChange={handleUserOnChange} maxLength="20" required /> <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userName" placeholder="이름을 입력해주세요" onChange={handleUserOnChange} maxLength="20" />
</div> </div>
{errorMsg.errorName && <p className={styles.passwordConfirmError}>이름을 입력해주세요</p>} {errorMsg.errorName && <p className={styles.errorMsg}>이름을 입력해주세요</p>}
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>이메일</label> <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> </div>
{errorMsg.errorEmail && <p className={styles.passwordConfirmError}>이메일을 입력해주세요</p>} {errorMsg.errorEmail && <p className={styles.errorMsg}>이메일을 입력해주세요</p>}
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>별명</label> <label className={styles.signupLabel}>별명</label>
<input className={`${styles.input} ${styles.inputSize}`} type="text" name="userNickName" placeholder="10자리 이내" onChange={handleUserOnChange} maxLength="20" required /> <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userNickName" placeholder="10자리 이내" onChange={handleUserOnChange} maxLength="20" />
</div> </div>
{errorMsg.errorNickName && <p className={styles.passwordConfirmError}>10자 이내로 입력해주세요.</p>} {errorMsg.errorNickName && <p className={styles.errorMsg}>10자 이내로 입력해주세요.</p>}
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>생년월일</label> <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> </div>
{errorMsg.errorBirthday && <p className={styles.passwordConfirmError}>숫자 6자리를 입력해주세요.</p>} {errorMsg.errorBirthday && <p className={styles.errorMsg}>숫자 6자리를 입력해주세요.</p>}
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>휴대폰 번호</label> <label className={styles.signupLabel}>휴대폰 번호</label>
<div className="d-flex col-md-auto"> <div className="d-flex col-md-auto">
<input className={`${styles.input} ${styles.input2}`} type="number" name="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} min="0" 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> <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>
</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 col-md-auto justify-content-end"> */}
<div className="d-flex justify-content-between mt-3"> <div className="d-flex justify-content-between mt-3">
<label className={`${styles.confirm}`}>인증하기</label> <label className={`${styles.confirm}`}>인증하기</label>
<div> <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={handleOnClickMbConfirm}>확인</button>
<button type="button" className={`rounded-2 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickMbnum}>재전송</button> <button type="button" className={`rounded-2 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickMbnum}>재전송</button>
</div> </div>
</div> </div>
{(mbError === "재전송") && <p className={styles.passwordConfirmError}>유효시간이 만료되었습니다. 재전송해주세요.</p>} {(mbError === "재전송") && <p className={styles.errorMsg}>유효시간이 만료되었습니다. 재전송해주세요.</p>}
{(mbError === "보냄") && <p className={styles.passwordConfirmError}>5분이내에 입력해주세요.</p>} {(mbError === "보냄") && <p className={styles.errorMsg}>5분이내에 입력해주세요.</p>}
{(mbError === "성공") && <p className={styles.passwordConfirmError}>인증되었습니다.</p>} {(mbError === "성공") && <p className={styles.errorMsg}>인증되었습니다.</p>}
{(mbError === "실패") && <p className={styles.passwordConfirmError}>인증번호를 다시 입력해주세요.</p>} {(mbError === "실패") && <p className={styles.errorMsg}>인증번호를 다시 입력해주세요.</p>}
</div> </div>
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={`${styles.inputContent}`}> <div className={`${styles.inputContent}`}>
<label className={styles.signupLabel}>비밀번호</label> <label className={styles.signupLabel}>비밀번호</label>
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20" required /> <input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20" />
</div> </div>
{errorMsg.errorPassword && <p className={styles.passwordConfirmError}>8~11자리 사이로 입력해주세요.</p>} {errorMsg.errorPassword && <p className={styles.errorMsg}>8~11자리 사이로 입력해주세요.</p>}
</div> </div>
<div className={`d-flex ${styles.inputContent}`}> <div className={`d-flex ${styles.inputContent}`}>
<label className={styles.signupLabel}>비밀번호 확인</label> <label className={styles.signupLabel}>비밀번호 확인</label>
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userRePassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20" required /> <input className={`${styles.input} ${styles.inputSize}`} type="password" name="userRePassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20" />
</div> </div>
<button className={`rounded my-3 py-2 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" disabled={loading}>가입하기</button> <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 @ 19251ba0
...@@ -73,7 +73,7 @@ border: 1px solid white ; ...@@ -73,7 +73,7 @@ border: 1px solid white ;
text-align: center; text-align: center;
} }
.passwordConfirmError{ .errorMsg{
margin-bottom: 0; margin-bottom: 0;
margin-top: 0.5rem; margin-top: 0.5rem;
text-align: end; text-align: end;
......
server/controllers/user.controller.js
View file @ 19251ba0
...@@ -5,6 +5,7 @@ import fs from "fs"; ...@@ -5,6 +5,7 @@ import fs from "fs";
import CryptoJS from "crypto-js"; import CryptoJS from "crypto-js";
import validator from "validator"; import validator from "validator";
// 현재 유저 상태 결정
const getUser = async (req, res) => { const getUser = async (req, res) => {
try { try {
if (req.cookies.butterStudio) { if (req.cookies.butterStudio) {
...@@ -19,7 +20,7 @@ const getUser = async (req, res) => { ...@@ -19,7 +20,7 @@ const getUser = async (req, res) => {
return res.status(500).send("유저를 가져오지 못했습니다."); return res.status(500).send("유저를 가져오지 못했습니다.");
} }
} }
// 로그인
const login = async (req, res) => { const login = async (req, res) => {
try { try {
const { id, password } = req.body; const { id, password } = req.body;
...@@ -60,9 +61,8 @@ const login = async (req, res) => { ...@@ -60,9 +61,8 @@ const login = async (req, res) => {
console.error(error); console.error(error);
return res.status(500).send("로그인 에러"); return res.status(500).send("로그인 에러");
} }
} }
// 로그아웃
const logout = async (req, res) => { const logout = async (req, res) => {
try { try {
res.clearCookie(config.cookieName); res.clearCookie(config.cookieName);
...@@ -77,57 +77,41 @@ const logout = async (req, res) => { ...@@ -77,57 +77,41 @@ 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) {
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) => { const confirmMbnum = async (req, res) => {
try { try {
const phoneNumber = req.params.phone;
// 휴대폰 인증
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(uri,secretKey,accessKey);
//인증번호 생성 //인증번호 생성
const verifyCode = Math.floor(Math.random() * (999999 - 100000)) + 100000; const verifyCode = Math.floor(Math.random() * (999999 - 100000)) + 100000;
console.log("verifyCode : ", verifyCode); console.log("verifyCode : ", verifyCode);
...@@ -230,7 +214,7 @@ const validation = (errorMsg, data, minLength, maxLength, dataType) => { ...@@ -230,7 +214,7 @@ const validation = (errorMsg, data, minLength, maxLength, dataType) => {
} }
}; };
// 회원정보
const signup = async (req, res) => { const signup = async (req, res) => {
const { userId, userName, userEmail, userNickName, userBirthday, userMbnum, userPassword } = req.body; const { userId, userName, userEmail, userNickName, userBirthday, userMbnum, userPassword } = req.body;
try { try {
...@@ -243,6 +227,7 @@ const signup = async (req, res) => { ...@@ -243,6 +227,7 @@ const signup = async (req, res) => {
errorMbnum: false, errorMbnum: false,
errorPassword: false, errorPassword: false,
}; };
//유효성 검사 //유효성 검사
validation(errorMsg, userId, 5, 10, "errorId"); validation(errorMsg, userId, 5, 10, "errorId");
validation(errorMsg, userName, 1, 10, "errorName"); validation(errorMsg, userName, 1, 10, "errorName");
...@@ -253,19 +238,20 @@ const signup = async (req, res) => { ...@@ -253,19 +238,20 @@ const signup = async (req, res) => {
validation(errorMsg, userPassword, 8, 11, "errorPassword"); validation(errorMsg, userPassword, 8, 11, "errorPassword");
let valid = !(Object.values(errorMsg).some((element) => (element))); 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 mbnum = await User.findOne({ where: { phoneNumber: userMbnum } });
const email = await User.findOne({ where: { email: userEmail } }); const email = await User.findOne({ where: { email: userEmail } });
if (!valid) { if (!valid) {
res.json(errorMsg); res.json(errorMsg);
} else { } else {
if (mbnum && email) { if (id) {
return res.status(422).send(`이미 있는 이메일, 휴대폰번호입니다.`); return res.status(401).send(`이미 있는 아이디입니다.`);
} else if (!mbnum && email) { } else if (email) {
return res.status(422).send(`이미 있는 이메일입니다.`); return res.status(401).send(`이미 있는 이메일입니다.`);
} else if (mbnum && !email) { } else if (mbnum) {
return res.status(422).send(`이미 있는 휴대폰번호입니다.`); return res.status(401).send(`이미 있는 휴대폰번호입니다.`);
} else { } else{
const role = await Role.findOne({ where: { name: "member" } }) const role = await Role.findOne({ where: { name: "member" } })
await User.create({ await User.create({
userId: userId, userId: userId,
...@@ -295,14 +281,14 @@ const getMember = async (req, res) => { ...@@ -295,14 +281,14 @@ const getMember = async (req, res) => {
const user = await User.findOne({ where: { id: decoded.id } }); const user = await User.findOne({ where: { id: decoded.id } });
res.json({ nickname: user.nickname, img: user.img }); res.json({ nickname: user.nickname, img: user.img });
} else { } else {
res.status(401).send("잘못된 접근입니다."); res.status(500).send("잘못된 접근입니다.");
} }
} catch (error) { } catch (error) {
console.error("error : ", error.message); console.error("error : ", error.message);
res.status(500).send("잘못된 접근입니다."); res.status(500).send("잘못된 접근입니다.");
} }
} }
// 프로필 변경
const uploadProfile = async (req, res) => { const uploadProfile = async (req, res) => {
try { try {
const image = req.file.filename; const image = req.file.filename;
...@@ -328,7 +314,7 @@ const uploadProfile = async (req, res) => { ...@@ -328,7 +314,7 @@ const uploadProfile = async (req, res) => {
res.status(500).send("프로필 에러"); res.status(500).send("프로필 에러");
} }
} }
// 기본 비밀번호인지 확인
const comparePw = async (req, res) => { const comparePw = async (req, res) => {
try { try {
//쿠키 안 토큰에서 id추출 //쿠키 안 토큰에서 id추출
...@@ -349,7 +335,7 @@ const comparePw = async (req, res) => { ...@@ -349,7 +335,7 @@ const comparePw = async (req, res) => {
res.status(500).send("인증 에러"); res.status(500).send("인증 에러");
} }
} }
// 회원정보 수정할 때 쓰는 함수
const overlap = async (decoded, dataType, data) => { const overlap = async (decoded, dataType, data) => {
try { try {
let overlap = await User.findOne({ where: { id: decoded.id } }); let overlap = await User.findOne({ where: { id: decoded.id } });
...@@ -369,7 +355,7 @@ const overlap = async (decoded, dataType, data) => { ...@@ -369,7 +355,7 @@ const overlap = async (decoded, dataType, data) => {
console.error(error.message); console.error(error.message);
} }
} }
// 회원정보 수정
const modifyUser = async (req, res) => { const modifyUser = async (req, res) => {
try { try {
const token = req.cookies.butterStudio; const token = req.cookies.butterStudio;
...@@ -438,7 +424,6 @@ export default { ...@@ -438,7 +424,6 @@ export default {
getUser, getUser,
login, login,
logout, logout,
compareId,
confirmMbnum, confirmMbnum,
confirmNum, confirmNum,
signup, signup,
......
server/routes/user.route.js
View file @ 19251ba0
...@@ -41,10 +41,6 @@ router ...@@ -41,10 +41,6 @@ router
.route("/pw/:pw") .route("/pw/:pw")
.get(userCtrl.comparePw) .get(userCtrl.comparePw)
router
.route("/:userId")
.get(userCtrl.compareId)
router router
.route("/phone/:phone") .route("/phone/:phone")
.post(userCtrl.confirmMbnum) .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