Daily10Minute_FrontSample/notification_list.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
<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>
        알림 목록 화면 (최신 50개의 알림만 지원됩니다.)

        <ul id='notificationList'>

        </ul>

        <script>

            // 알림 목록 가져오기

            axiosInstance.get('/notification')
            .then(function (res) {

                // 맨 앞의 알림 : 제일 최신 알림.
                // 이 알림까지는 읽었다고 서버에 전달

                // 예외로 알림이 아직 한번도 없는 경우는 배제
                if (res.data.data.notifications.length > 0) {

                    // 받은 알림 내역중 제일 최신 (맨 위) 알림의 id 추출
                    let lastNotiId = res.data.data.notifications[0].id
                    console.log('최신 알림 id : ', lastNotiId)

                    // 서버에게 이 id값을 전달

                    let form = new FormData()
                    form.append('noti_id', lastNotiId)

                    // 이 값을 서버에 던지면 => 서버가 알아서 여기까지 다 읽은걸로 변경처리.
                    axiosInstance.post('/notification', form)
                    .then(function (res) {

                    })
                    .catch(function (error) {

                    })

                }


                res.data.data.notifications.forEach(noti => {

                    console.log(noti)

                    // li에 기록 사항 : 누르면어느화면?goto_ui, 알림이달린이유?noti_type, 눌렀을때 몇번을 보러 가야하는지?target_id
                    let notiItem = $(`
                    <li target_id=${noti.focus_object_id} noti_type=${noti.type} goto_ui=${noti.reference_ui}>
                        ${noti.title}
                    </li>
                    `)

                    $('#notificationList').append(notiItem)

                });

                // 알림 목록 각각 눌린 이벤트
                $('#notificationList li').click(function () {

                    // 어느화면으로?
                    let gotoUi = $(this).attr('goto_ui')

                    // 인증화면?
                    if (gotoUi == 'ProofDetail') {

                        // target_id 에 적혀있는 값을 인증 id로 활용
                        let proofId = $(this).attr('target_id')

                        // 해당 인증 상세 화면으로 이동 => 인증 id만 가공
                        location.href = `view_proof.html?proof_id=${proofId}`

                    }
                    // 리뷰화면?
                    else if (gotoUi == 'ReviewDetail') {

                        // target_id 에 적힌값을 리뷰의 id로 활용
                        let reviewId = $(this).attr('target_id')

                        // 해당 리뷰 화면으로 이동
                        location.href = `review_detail.html?review_id=${reviewId}`


                    }
                    else {
                        alert('잘못된 접근입니다.')
                    }

                })

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


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