Daily10Minute_FrontSample/my_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
<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>

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

            </tbody>
        </table>

        <script>

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

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

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

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

                    // 서버에서 주는 리뷰 목록 tr로 추가
                    res.data.data.my_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>