MyInfo.js 17.3 KB
Newer Older
한규민's avatar
한규민 committed
1
2
3
import styles from "./my-info.module.scss";
import { useState, useEffect } from "react";
import authApi from "../../apis/auth.api";
한규민's avatar
한규민 committed
4
import catchErrors from "../../utils/catchErrors.js";
한규민's avatar
한규민 committed
5
6

const MyInfo = () => {
한규민's avatar
한규민 committed
7
    const [userNickName, setUserNickName] = useState("사용자");
한규민's avatar
한규민 committed
8
9
    const [img, setImg] = useState("");
    const [profile, setProfile] = useState("");
한규민's avatar
한규민 committed
10

11
    const [startTime, setStartTime] = useState("");
한규민's avatar
한규민 committed
12
    // 사용자 이름 가져오는 함수
한규민's avatar
한규민 committed
13
14
15
16
    const getMember = async () => {
        const member = await authApi.getMember();
        setUserNickName(member.nickname);
        setProfile(member.img);
한규민's avatar
한규민 committed
17
    }
한규민's avatar
한규민 committed
18
    const [page, setPage] = useState(true);
한규민's avatar
한규민 committed
19

한규민's avatar
한규민 committed
20
21
22
23
24
    //현재 비밀번호 state
    const [presentPw, setPresentPw] = useState("");
    const [loading, setLoading] = useState(false);

    //변경할 데이터 입력받는 state
한규민's avatar
한규민 committed
25
    const [userRe, setUserRe] = useState({
26
        userName: "",
한규민's avatar
한규민 committed
27
28
29
30
31
32
        userEmail: "",
        userNickName: "",
        userMbnum: "",
        userPassword: "",
        userRePassword: ""
    })
33
34
    const [confirmMb, setConfirmMb] = useState(false);
    const [number, setNumber] = useState(null);
한규민's avatar
한규민 committed
35
36

    //각 타입별 error 유무 state
37
    const [mbError,setMbError] = useState(false);
한규민's avatar
한규민 committed
38
39
    const [error, setError] = useState("");
    const [errorMsg, setErrorMsg] = useState({
40
        errorName: false,
한규민's avatar
한규민 committed
41
42
43
44
45
46
        errorEmail: false,
        errorNickName: false,
        errorMbnum: false,
        errorPassword: false,
    })

한규민's avatar
한규민 committed
47
    useEffect(() => {
한규민's avatar
한규민 committed
48
        getMember();
한규민's avatar
한규민 committed
49
50
    }, [])

한규민's avatar
한규민 committed
51
52
53
    const handlePwOnChange = (e) => {
        setPresentPw(e.target.value)
    }
한규민's avatar
한규민 committed
54
55
56
57
58
59
60
61
62
63
64
65
66
67

    //입력할때마다 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)
            })
        }
    }
한규민's avatar
한규민 committed
68
69
70
71
72
    const enterKey = (e) => {
        if (e.key === "Enter") {
            handleOnSummitVerify(e);
        }
    }
한규민's avatar
한규민 committed
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

    const handleOnChange = (e) => {
        setImg(e.target.files[0]);
    }

    const handleOnSummitForm = async (e) => {
        e.preventDefault();
        try {
            setError("")
            const formData = new FormData();
            formData.append("image", img);
            const image = await authApi.profile(formData);
            setProfile(image.img);
        } catch (error) {
            catchErrors(error, setError);
        }
    }
한규민's avatar
한규민 committed
90
91
92
93
    //기존 비밀번호 확인 
    const handleOnSummitVerify = async (e) => {
        e.preventDefault();
        try {
한규민's avatar
한규민 committed
94
95
            setError("");
            setLoading(true);
한규민's avatar
한규민 committed
96
            const pw = presentPw;
한규민's avatar
한규민 committed
97
            console.log(pw);
한규민's avatar
한규민 committed
98
            const confirmPw = await authApi.comparePw(pw);
한규민's avatar
한규민 committed
99
            console.log("confirmPw : ", confirmPw);
한규민's avatar
한규민 committed
100
            if (confirmPw) {
한규민's avatar
한규민 committed
101
                setPage(false);
한규민's avatar
한규민 committed
102
                setPresentPw("");
한규민's avatar
한규민 committed
103
104
105
106
107
108
109
110
111
            } else {
                alert("비밀번호가 일치하지 않습니다.");
            }
        } catch (error) {
            catchErrors(error, setError);
        } finally {
            setLoading(false);
        }
    }
한규민's avatar
한규민 committed
112

113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
    const handleOnClickMbnum = async (e) => {
        e.preventDefault();
        try {
            setStartTime("");
            setError("");
            setLoading(true);
            const phone = userRe.userMbnum;
            const message = await authApi.confirmMbnum(phone);
            
            if(message.isSuccess){
            setMbError("보냄");
            setStartTime(message.startTime);
            }
        } catch (error) {
            console.log('error'+ error)
        }finally {
            setLoading(false);
        }
    }

    const handleOnChangeMb = (e) => {
        setNumber(String(e.target.value));
    }

    const handleOnClickMbConfirm = async (e) => {
        e.preventDefault();
        try {
            setError("");
            setLoading(true);
            const confirmNum = {userMbnum : userRe.userMbnum, number : number, startTime : startTime};
            const message = await authApi.confirmNum(confirmNum);
            setMbError(message);
            if(message === "성공"){
                setConfirmMb(true);
                console.log("인증완료");
            }
        } catch (error) {
            catchErrors(error, setError);
        }finally {
            setLoading(false);
        }
    }

한규민's avatar
한규민 committed
156
157
158
159
    const validationPw = () => {
        if(userRe.userPassword !== userRe.userRePassword){
            return false;
        }else{return true;}
한규민's avatar
한규민 committed
160
    }
한규민's avatar
한규민 committed
161
            
한규민's avatar
한규민 committed
162
163
164
    const handleOnSummit = async (e) => {
        e.preventDefault();
        try {
한규민's avatar
한규민 committed
165
            setError("");
한규민's avatar
한규민 committed
166
            //처리가 될때까지 버튼(가입하기)이 안눌리게 지정
한규민's avatar
한규민 committed
167
            setLoading(true);
한규민's avatar
한규민 committed
168
            let validPw = validationPw();
한규민's avatar
한규민 committed
169
170
171
172
173
174
175
176
177
178
179
180
181
182
            if(confirmMb){
                if(validPw){
                    const userData = userRe;
                    //서버로 전송
                    const error = await authApi.modifyUser(userData);
                    if(error === "성공"){
                        alert("회원정보수정에 성공하였습니다.")
                    }else{
                        setErrorMsg(error);
                        alert("형식에 맞게 다시 작성해주세요");
                    }
                }else{
                    throw new Error("비밀번호가 일치하지 않습니다.");
                }
한규민's avatar
한규민 committed
183
            }else{
한규민's avatar
한규민 committed
184
                throw new Error("핸드폰 번호를 인증해주세요.");
한규민's avatar
한규민 committed
185
            }
한규민's avatar
한규민 committed
186
187
188
189
        } catch (error) {
            //에러전송
            catchErrors(error, setError);
        } finally {
한규민's avatar
한규민 committed
190
            setLoading(false);
한규민's avatar
한규민 committed
191
192
        }
    }
한규민's avatar
한규민 committed
193
194
195
    const handleOnclickOut = (e) => {
        setConfirmMb(false);
    }
한규민's avatar
한규민 committed
196
197
    const handleOnClick = (e) => {
        e.preventDefault();
한규민's avatar
한규민 committed
198
        handleOnclickOut(e);
한규민's avatar
한규민 committed
199
200
        setPage(true);
    }
한규민's avatar
한규민 committed
201
202

    return (
한규민's avatar
한규민 committed
203
204
205
206
        <>
            {/* 마이페이지 창 */}
            <div className="d-flex flex-column">
                <span className={styles.title}>마이페이지</span>
한규민's avatar
한규민 committed
207
208
                <div className={`d-flex justify-content-around`}>
                    <div className={`${styles.box}`}>
한규민's avatar
한규민 committed
209
                        <p className={`${styles.hoverTxt}`}>프로필 변경</p>
한규민's avatar
한규민 committed
210
                        <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" />
한규민's avatar
한규민 committed
211
                    </div>
한규민's avatar
한규민 committed
212
                    <div className="d-flex flex-column py-2 justify-content-around">
한규민's avatar
한규민 committed
213
                        <span className={`${styles.userName}`}>{`${userNickName}`} 반갑습니다!</span>
한규민's avatar
한규민 committed
214
                        <button className={`rounded my-2 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} data-bs-toggle="modal" href="#verifyPassword" >회원정보 수정</button>
한규민's avatar
한규민 committed
215
                    </div>
한규민's avatar
한규민 committed
216
217
                </div>
            </div>
218
219
        {/* 프로필 변경 모달창 */}
            <div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
한규민's avatar
한규민 committed
220
221
222
223
224
                <div className="modal-dialog modal-dialog-centered">
                    <form className="modal-content" onSubmit={handleOnSummitForm}>
                        <div className="modal-header">
                            <h5 className="modal-title" id="staticBackdropLabel">프로필변경</h5>
                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
한규민's avatar
한규민 committed
225
                        </div>
한규민's avatar
한규민 committed
226
227
228
229
230
231
232
233
234
                        <div className="modal-body">
                            <input type="file" onChange={handleOnChange} />
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                            <button type="submit" className={`rounded  fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`}>변경</button>
                        </div>
                    </form>
                </div>
한규민's avatar
한규민 committed
235
236
            </div>

한규민's avatar
한규민 committed
237
            {/* 기존 비밀번호 확인 모달창 */}
238
            <div className="modal fade" id="verifyPassword" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true" aria-labelledby="verifyPasswordLabel" tabIndex="-1">
한규민's avatar
한규민 committed
239
240
241
242
243
                <div className="modal-dialog modal-dialog-centered modal-dialog-centered">
                    {page ?
                        <><form className="modal-content" onSubmit={handleOnSummitVerify}>
                            <div className="modal-header">
                                <h5 className="modal-title" id="verifyPasswordLabel">기존 비밀번호 확인</h5>
244
                                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={handleOnClick}></button>
한규민's avatar
한규민 committed
245
                            </div>
246
                            <div className="modal-body">
한규민's avatar
한규민 committed
247
248
249
                                <div className="d-flex flex-column">
                                    <div className="d-flex justify-content-around align-items-center my-4">
                                        <label className={styles.signupLabel}>현재 비밀번호</label>
한규민's avatar
한규민 committed
250
                                        <input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handlePwOnChange} onKeyPress={enterKey} maxLength="11"  />
한규민's avatar
한규민 committed
251
252
                                    </div>
                                </div>
한규민's avatar
한규민 committed
253
                            </div>
한규민's avatar
한규민 committed
254
255
256
257
258
259
260
                            <div className="modal-footer">
                                <button type="submit" className={`rounded my-3 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} disabled={loading}>확인</button>
                            </div>
                        </form></>
                        : <><form className={`modal-content d-flex col-md-6 col-12 justify-content-center d-flex flex-column`} onSubmit={handleOnSummit}>
                            <div className="modal-header">
                                <h5 className="modal-title" id="modifyLabel">회원정보 수정</h5>
261
                                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={handleOnClick}></button>
한규민's avatar
한규민 committed
262
263
                            </div>
                            <div className={`modal-body`}>
264
265
266
                            <div className="d-flex flex-column">
                                    <div className={styles.inputContent}>
                                        <label className={styles.signupLabel}>이름</label>
한규민's avatar
한규민 committed
267
                                        <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userName" placeholder="이름을 입력해주세요" onChange={handleUserOnChange} maxLength="11"  />
268
269
270
                                    </div>
                                    {errorMsg.errorName && <p className={styles.passwordConfirmError}>이름을 입력해주세요</p>}
                                </div>
한규민's avatar
한규민 committed
271
272
273
                                <div className="d-flex flex-column">
                                    <div className={styles.inputContent}>
                                        <label className={styles.signupLabel}>이메일</label>
한규민's avatar
한규민 committed
274
                                        <input className={`${styles.input} ${styles.inputSize}`} type="email" name="userEmail" placeholder="이메일을 입력해주세요" onChange={handleUserOnChange} maxLength="20"  />
한규민's avatar
한규민 committed
275
276
277
278
279
280
                                    </div>
                                    {errorMsg.errorEmail && <p className={styles.passwordConfirmError}>이메일을 입력해주세요</p>}
                                </div>
                                <div className="d-flex flex-column">
                                    <div className={styles.inputContent}>
                                        <label className={styles.signupLabel}>별명</label>
한규민's avatar
한규민 committed
281
                                        <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userNickName" placeholder="10자리 이내" onChange={handleUserOnChange} maxLength="10"  />
한규민's avatar
한규민 committed
282
283
284
                                    </div>
                                    {errorMsg.errorNickName && <p className={styles.passwordConfirmError}>10 이내로 입력해주세요.</p>}
                                </div>
한규민's avatar
한규민 committed
285

한규민's avatar
한규민 committed
286
287
288
289
                                <div className="d-flex flex-column">
                                    <div className={styles.inputContent}>
                                        <label className={styles.signupLabel}>휴대폰 번호</label>
                                        <div className="d-flex col-md-auto">
한규민's avatar
한규민 committed
290
                                            <input className={`${styles.input} `} type="number" name="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} min="" max="99999999999"  />
291
                                            <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>
한규민's avatar
한규민 committed
292
293
294
                                        </div>
                                    </div>
                                    {errorMsg.errorMbnum && <p className={styles.passwordConfirmError}>-없이 숫자 11자리를 입력해주세요.</p>}
295
296
297
298
299
                                    <div className="collapse" id="collapseExample">
                                        {/* <div className="d-flex col-md-auto justify-content-end"> */}
                                        <div className="d-flex justify-content-around mt-3">
                                            <label className={`${styles.confirm}`}>인증하기</label>
                                            <div>
한규민's avatar
한규민 committed
300
                                                <input className={`${styles.input}`} type="number" placeholder="인증번호를 입력" onChange={handleOnChangeMb} />
301
302
303
304
305
306
307
308
309
                                                <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>}
                                    </div>
한규민's avatar
한규민 committed
310
                                </div>
한규민's avatar
한규민 committed
311
312
313
                                <div className="d-flex flex-column">
                                    <div className={styles.inputContent}>
                                        <label className={styles.signupLabel}> 비밀번호</label>
한규민's avatar
한규민 committed
314
                                        <input className={`${styles.input} ${styles.inputSize}`} type="password" name="userPassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="11"  />
한규민's avatar
한규민 committed
315
316
                                    </div>
                                    {errorMsg.errorPassword && <p className={styles.passwordConfirmError}>8~11자리 사이로 입력해주세요.</p>}
한규민's avatar
한규민 committed
317

한규민's avatar
한규민 committed
318
                                </div>
한규민's avatar
한규민 committed
319

한규민's avatar
한규민 committed
320
321
322
                                <div className="d-flex flex-column">
                                    <div className={styles.inputContent}>
                                        <label className={styles.signupLabel}> 비밀번호 확인</label>
한규민's avatar
한규민 committed
323
                                        <input className={`${styles.input} ${styles.inputSize}`} type="password" name="userRePassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="11"  />
한규민's avatar
한규민 committed
324
325
                                    </div>
                                    {errorMsg.errorRePassword && <p className={styles.passwordConfirmError}>비밀번호가 일치하지 않습니다.</p>}
한규민's avatar
한규민 committed
326

한규민's avatar
한규민 committed
327
                                </div>
한규민's avatar
한규민 committed
328

한규민's avatar
한규민 committed
329
330
331
332
333
334
335
                            </div>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-secondary rounded my-3 py-2 fs-5" data-bs-dismiss="modal" onClick={handleOnClick} disabled={loading}>닫기</button>
                                <button type="submit" className={`rounded my-3 py-2 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} disabled={loading}>수정하기</button>
                            </div>
                        </form></>}
                </div>
한규민's avatar
한규민 committed
336
            </div>
한규민's avatar
한규민 committed
337
        </>
한규민's avatar
한규민 committed
338
339
340
341
    )
}

export default MyInfo