Daily10Minute_FrontSample/view_project_proof.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
168
169
170
171
172
173
174
175
176
<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>
        날짜별 인증 내역 조회 </br>

        인증 확인 날짜 <input id='date' type="date">

        <ul id='proofList'>

        </ul>

        <script>

            // 몇번 프로젝트를 보러 온건지 주소창 확인

            // 주소창의 데이터를 분석해주는 클래스를 변수에 담자.
            let searchParams = new URLSearchParams(window.location.search)
            // 주소창에 project_id가 뭐라고 적혀있는지 찾아서 저장.
            let projectId = searchParams.get('project_id')


            // #date 에 적힌 날짜가 바뀌면

            $('#date').change(function() {
                let proofDate = $(this).val()

                $('#proofList').empty()

                //  서버에서 해당 날짜로 인증내역 불러오기.
                // 프로젝트 상세조회 API 호출 => /project/1  와 같이 주소에 id를 이어붙이자.
                // 인증 목록을 보고싶은 날짜를 파라미터로 추가 => params 활용 첨부
                axiosInstance.get(`/project/${projectId}`, {
                    params: {
                        'proof_date': proofDate
                    }
                })
                .then(function (res) {


                    res.data.data.project.proofs.forEach(proof => {

                        console.log(proof)

                        // 좋아요 갯수 / 취소여부 문구 설정
                        let likeCount = proof.like_count
                        let likeButtonTitle = "좋아요"

                        // 댓글 갯수로 댓글버튼 문구 생성
                        let replyBtnTitle = `댓글 : ${proof.reply_count}`

                        if (proof.my_like) {
                            likeButtonTitle = "좋아요 취소"
                        }

                        if (proof.images.length > 0) {
                            $('#proofList').append(`<li proof_id=${proof.id}>
                                                        <div>
                                                            <img class="projectListItem" src=${proof.images[0].img_url}>
                                                            ${proof.content}
                                                            <button class='likeBtn'>${likeButtonTitle}</button>
                                                            <span class='likeCount'>${likeCount}개</span>
                                                            <button class='replyBtn'>${replyBtnTitle}</button>
                                                        </div>
                                                    </li>`)
                        }
                        else {
                            $('#proofList').append(`<li proof_id=${proof.id}>
                                                        <div>
                                                            ${proof.content}
                                                            <button class='likeBtn'>${likeButtonTitle}</button>
                                                            <span class='likeCount'>${likeCount}개</span>
                                                            <button class='replyBtn'>${replyBtnTitle}</button>
                                                        </div>
                                                    </li>`)
                        }

                    });

                    // 각각의 댓글버튼에 대한 이벤트를 일괄처리. => class 기반 이벤트
                    $('.replyBtn').click(function() {

                        // 어떤 인증글을 상세히 보러 이동할건지 id를 추출
                        // 눌린 버튼의 조상중 li를 찾고, 그 속성중 proof_id 에 적힌 값 추출
                        let proofId = $(this).parents('li').attr('proof_id')
                        console.log('눌린 버튼의 인증글id : ', proofId)

                        // 해당 인증글 상세보기 화면으로 이동.
                        // query파라미터로 몇번글인지 전달.
                        $(location).attr('href', `view_proof.html?proof_id=${proofId}`)

                    })

                    $('.likeBtn').click(function() {
                        let proofId = $(this).parents('li').attr('proof_id')

                        // 인증글 좋아요에 필요한 데이터를 담아둘 FormData 클래스
                        const form = new FormData()
                        // 인증글 ID만 첨부
                        form.append('proof_id', proofId)

                        // 좋아요 버튼을 별개 변수에 저장 => 서버 호출 결과 안에서 사용하려고
                        let likeBtn = $(this)

                        // 커스텀 axios로 실제 인증글 좋아요 호출
                        axiosInstance.post('/like_proof', form)
                            .then(function (res) {

                                // 서버에서 주는 메세지 (좋아요 등록 / 취소 여부) 출력
                                alert(res.data.message)


                                // 변경되어야 할 값들을 체크
                                // 좋아요 몇개인지?
                                let count = res.data.data.like.like_count

                                // 좋아요인지 / 좋아요 취소인지
                                let buttonTitle = "좋아요"
                                if (res.data.data.like.my_like) {
                                    buttonTitle = "좋아요 취소"
                                }

                                // 좋아요 버튼의 문구 변경
                                likeBtn.text(buttonTitle)

                                // 그 옆의 (형제/사촌) 좋아요 갯수 변경
                                likeBtn.siblings('.likeCount').text(`${count}개`)


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


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


            })


            // 날짜 변경 이벤트가 세팅 되고 나면
            // 오늘 날짜를 yyyy-MM-dd 양식으로 받아와서

            let now = new Date()
            let year = now.getFullYear()
            let month = String(now.getMonth()+1).padStart(2, '0')
            let day = String(now.getDate()).padStart(2, '0')

            let today = `${year}-${month}-${day}`
            console.log('오늘날짜 : ', today)

            // $('#date') 의 값으로 세팅. => 값이 변경되니까 서버에서 로딩.
            $('#date').val(today)
            // 코드로 값을 수정하면 change 이벤트 발생 X. => change 이벤트 강제 실행
            $('#date').trigger('change')


        </script>

    </body>
</html>