Daily10Minute_FrontSample/my_profile.html at master · cho881020/Daily10Minute_FrontSample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
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
156
157
158
159
160
161
162
163
164
165
166
167
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
        <!-- 커스터마이징한 axiosInstace 들고있는 파일 -->
        <script src="/custom_axios.js"></script>

    </head>
    <body>
        프로필 수정

        <div>
            닉네임 : <span id='nickNameSpan'></span> <br>
            새 닉네임 : <input type="text" id='newNickNameInput' placeholder="변경할 닉네임 입력"> <button id='changeNickBtn'>닉네임 변경</button>
        </div>

        <div id='profileImagesDiv'>

        </div>

        <form id='profileImgUploadForm'>
            추가할 프사 첨부 : <input name="profile_images" type="file" accept="image/*"> </br>
        </form>
        <button id='uploadProfileBtn'>프사 업로드</button>

        <div>
            <button id='changePwBtn'>비밀번호 변경하러 가기</button>
        </div>


        <script>

            // localStorage에 저장된 사용자 정보를 가지고 화면에 대입.
            // 서버에서 내 정보 불러오기 X

            // 저장해둔 사용자 정보 String 추출
            let userInfoStr = localStorage.getItem('userInfo')

            // 추출한 String => JSON으로 변환
            let loginUser = JSON.parse(userInfoStr)

            console.log('로그인사용자 : ', loginUser)


            // 내 정보중 닉네임 저장
            let nickName = loginUser.nick_name
            // 저장한 닉네임을 span에 출력
            $('#nickNameSpan').text(nickName)

            // 프로필 사진 목록을 div에 img 태그들로 추가

            loginUser.profile_images.forEach(pfImg => {
                console.log('프사 : ', pfImg)

                // 추가해줄 img 태그 => Jquery로 만든 결과를 변수로 저장
                // 이 사진이 몇번 사진인지도 추가 기록
                let pfImage = $(`
                <img image_id=${pfImg.id} class='userProfileImg' src=${pfImg.img_url}>
                `)

                // 완성된 태그를 프사 목록 div에 추가
                $('#profileImagesDiv').append(pfImage)


            });

            // 추가된 이미지들에게 이벤트 일괄 부여
            $('.userProfileImg').click(function () {

                // 몇번 이미지를 클릭했는지?
                let imageId = $(this).attr('image_id')
                console.log(imageId)

                // 정말 사진을 지울건지? 확인
                let deleteOk = confirm('정말 해당 사진을 삭제하시겠습니까?')

                if (deleteOk) {
                    // 해당 이미지를 삭제 => DELETE => GET과 유사.
                    axiosInstance.delete('/user_profile_image', {
                        params: {
                            'image_id':imageId
                        }
                    })
                    .then(function (res) {
                        console.log(res)
                        alert('프사를 삭제 했습니다.')
                        // 화면 새로고침
                        location.reload()
                    })
                    .catch(function (err) {
                        console.log(err)
                    })
                }


            })


        </script>
        <script>
            // 이벤트 처리 전담


            // 비번 변경 버튼

            $('#changePwBtn').click(function () {
                $(location).attr('href', 'change_pw.html')
            })


            // 프사 업로드 버튼
            $('#uploadProfileBtn').click(function () {
                // 폼데이터에는 id로 찾은 객체에서도 0번째로 명시.
                const form = new FormData($('#profileImgUploadForm')[0])

                // 이 폼데이터를 서버에 put - /user_profile_image 로 전송 => axios
                axiosInstance.put('/user_profile_image', form)
                    .then(function (res) {

                        console.log(res)

                    })
                    .catch(function (error) {
                        // 실패시 error의 응답에 담긴 message를 얼럿으로
                        alert(error.response.data.message)
                    })
            })

            // 닉네임 변경 버튼
            $('#changeNickBtn').click(function () {
                let newNickName = $('#newNickNameInput').val()

                if (newNickName.length < 5) {
                    alert('닉네임은 5글자 이상이어야 합니다.')
                    return
                }

                // 검사를 통과한 닉네임을 서버에 변경요청
                // PATCH - /user 에 보내자.

                // 프로필 변경 요청 데이터를 담아둘 FormData 클래스
                const form = new FormData()
                form.append('nick_name', newNickName)

                // 커스텀 axios로 실제 프로필 변경 호출

                axiosInstance.patch('/user', form)
                    .then(function (res) {

                        console.log(res)
                        alert('닉네임 변경 완료')
                        location.reload()

                    })
                    .catch(function (error) {
                        // 실패시 error의 응답에 담긴 message를 얼럿으로
                        alert(error.response.data.message)
                    })

            })

        </script>
    </body>
</html>