Daily10Minute_FrontSample/reviews.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
<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>
        리뷰 화면 <span id='nickNameTxt'>닉네임 : ??</span>  <button id='writeReviewBtn'>리뷰 작성하러 가기</button>
        <button id='my_reviews'>내 후기 모아보기</button>

        <table border="1" id='reviewTable'>
            <thead>
                <th>번호</th>
                <th>리뷰 제목</th>
                <th>작성자</th>
                <th>작성일</th>
            </thead>
            <tbody>

            </tbody>
        </table>

        페이지번호<input id='pageNum' placeholder="페이지번호" value="1">
        <button id='loadReviewBtn'>조회</button>

        <script>

            $('#my_reviews').click(function () {
                location.href = 'my_reviews.html'
            })

            $('#writeReviewBtn').click(function () {
                location.href = 'write_review.html'
            })

            // 리뷰가 총 몇페이지인지 저장할 변수 생성
            let totalPageCount = 0

            // 서버에서 리뷰 목록 받아오는 기능을 별도 함수로 분리
            function getReviews(pageNum) {
                axiosInstance.get('/review', {
                    params: {
                        'page_num': pageNum
                    }
                })
                .then(function (res) {
                    console.log(res)

                    // 리뷰가 총 몇페이지인지 실제 저장
                    totalPageCount = res.data.data.total_page

                    // 테이블 내용 지우기
                    $('#reviewTable > tbody').empty()

                    // 서버에서 주는 리뷰 목록 tr로 추가
                    res.data.data.reviews.forEach((review, index) => {
                        console.log(review)
                        console.log(index)

                        // 게시글 번호 : 프론트에서 계산 (1p당 10개)
                        // Ex. 2페이지의 3번째 : 13
                        // 10*(페이지수-1)+몇번째+1

                        let reviewNum = 10 * (pageNum-1) + index+1

                        // 날짜 데이터 양식 수정
                        let year = review.created_at.substr(0,4)
                        let month = review.created_at.substr(5,2)
                        let dayOfMonth = review.created_at.substr(8,2)

                        let row = $(`
                        <tr review_id=${review.id}>
                            <td>${reviewNum}</td>
                            <td>${review.title} (참여프로젝트 : ${review.project.title})</td>
                            <td>${review.writer.nick_name}</td>
                            <td>${year}-${month}-${dayOfMonth}</td>
                        </tr>
                        `)

                        // 테이블 내부의 tbody에 row 추가
                        $('#reviewTable > tbody').append(row)


                    });

                    // 테이블의 줄이 모두 추가되고 난 후 tr에 클릭 이벤트 추가
                    $('#reviewTable > tbody > tr').click(function () {
                        console.log('클릭된 리뷰 아이디 : ', $(this).attr('review_id'))

                        // 리뷰아이디를 들고 reviewdetail로 이동

                        location.href = `review_detail.html?review_id=${$(this).attr('review_id')}`

                    })


                })
                .catch(function (err) {
                    console.log(err)
                })
            }

            // 화면이 로딩 되자마자 서버에 1페이지 리뷰목록 요청
            getReviews(1)

            // 조회버튼이 눌리면 해당 페이지에 맞는 목록 불러오기
            $('#loadReviewBtn').click(function() {
                let pageNum = $('#pageNum').val()

                // 가능한 페이지보다 큰 숫자가 적혀있으면 alert / 강제종료
                if (pageNum > totalPageCount) {
                    alert('불러올 수 없는 페이지 숫자 입니다.')
                    return
                }

                getReviews(pageNum)
            })


            // localStorage에 저장된 사용자정보 (String) 를 확인.
            // 저장된 정보를 => JSONObject로 변경 => 화면에 뿌려주기

            // JSON.parse로 String을 JSON으로 변환.
            // 사용자 정보 객체가 loginUser 에 담겨있게 된다.
            let loginUser = JSON.parse(localStorage.getItem('userInfo'))


            // 닉네임 반영 처리

            $('#nickNameTxt').text(`닉네임 : ${loginUser.nick_name}`)


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