πŸ“Œ Cordova ν•˜μ΄λΈŒλ¦¬λ“œ μ•± 곡지사항 κΈ°λŠ₯ λ¦¬νŒ©ν„°λ§

πŸ“ κ°œμš”

곡지사항 κΈ°λŠ₯을 κ°œλ°œν•˜λŠ” κ³Όμ •μ—μ„œ λ³€μˆ˜ μ„ μ–Έ μœ„μΉ˜μ™€ μ „μ—­/μ§€μ—­ λ³€μˆ˜ μ‚¬μš© λ°©μ‹μœΌλ‘œ 인해 λ°œμƒν•œ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ μ½”λ“œ λ¦¬νŒ©ν„°λ§μ„ μ§„ν–‰ν–ˆλ‹€.

λΆˆν•„μš”ν•œ μ „μ—­ λ³€μˆ˜ μ‚¬μš©μ„ μ΅œμ†Œν™”ν•˜κ³ , 보닀 μœ μ§€λ³΄μˆ˜ν•˜κΈ° μ‰¬μš΄ ꡬ쑰둜 κ°œμ„ ν•˜μ˜€λ‹€.


πŸš€ κ΅¬ν˜„ λ‚΄μš©

πŸ”Ή κΈ°μ‘΄ 문제점

βœ… 곡지사항을 μ €μž₯ν•˜λŠ” noticeUids, readNoticeList, selfDeletedNoticeList λ³€μˆ˜κ°€ μ „μ—­μœΌλ‘œ μ„ μ–Έλ˜μ–΄ μžˆμ–΄ μ˜ˆμƒμΉ˜ λͺ»ν•œ λ™μž‘μ΄ λ°œμƒ

βœ… λ³€μˆ˜μ˜ 값이 λ™μ μœΌλ‘œ 변경될 λ•Œ, μ—¬λŸ¬ ν•¨μˆ˜μ—μ„œ μ ‘κ·Όν•˜λ©΄μ„œ 데이터 뢈일치 λ¬Έμ œκ°€ λ°œμƒ

βœ… νŠΉμ • ν•¨μˆ˜ μ‹€ν–‰ ν›„ 데이터가 μ œλŒ€λ‘œ κ°±μ‹ λ˜μ§€ μ•Šκ±°λ‚˜, UIκ°€ λ°˜μ˜λ˜μ§€ μ•ŠλŠ” λ¬Έμ œκ°€ λ‚˜νƒ€λ‚¨


πŸ”Ή ν•΄κ²° 방법

βœ… ν•„μš”ν•œ κ²½μš°μ—λ§Œ μ „μ—­ λ³€μˆ˜ μ‚¬μš©ν•˜κ³ , ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œλ§Œ ν•„μš”ν•œ λ³€μˆ˜λŠ” μ§€μ—­ λ³€μˆ˜λ‘œ ν•œμ •ν•˜μ—¬ μ‚¬μš©

βœ… 데이터λ₯Ό 뢈러온 ν›„ UI μ—…λ°μ΄νŠΈκ°€ λ™κΈ°μ μœΌλ‘œ 보μž₯λ˜λ„λ‘ ꡬ쑰λ₯Ό λ³€κ²½

βœ… getNotices() ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ λΆˆν•„μš”ν•˜κ²Œ 쀑볡 호좜되던 λ‘œμ§μ„ μ œκ±°ν•˜κ³ , 콜백 λ°©μ‹μœΌλ‘œ 데이터 흐름을 λͺ…ν™•νžˆ κ°œμ„ 

πŸ“Œ λ¦¬νŒ©ν„°λ§ ν›„ 곡지사항 데이터 뢈러였기 μ½”λ“œ

function getNotices(categoryFilter, callback) {
    let alarmValue = $("#alarmSelect").val();
    let alarmFilter = alarmValue === "Y" ? "Y" : alarmValue === "N" ? "N" : "";
    let apiUrl = server_host + server_port + "/api/notices";

    categoryFilter = categoryFilter || "all";

    cordova.plugin.http.get(apiUrl, {}, {
        Authorization: 'Bearer ' + userData.token
    }, function(response) {
        let jsonData = JSON.parse(response.data);
        let notices = jsonData.data;

        notices.sort((a, b) => b.uid - a.uid);
        let filteredNotices = filterNoticesByAlarm(notices, alarmFilter);

        updateNoticeUI(filteredNotices, categoryFilter);
        markReadNotices(filteredNotices);
        localStorage.setItem('readNoticeList', JSON.stringify(readNoticeList));

        if (typeof callback === "function") {
            callback();
        }
    }, function(error) {
        console.error("곡지사항 뢈러였기 μ‹€νŒ¨:", error);
    });
}

πŸ“Œ λ¦¬νŒ©ν„°λ§ ν›„ UI μ—…λ°μ΄νŠΈ μ½”λ“œ

function updateNoticeUI(notices, categoryFilter) {
    let noticeList = $("#noticeList");
    noticeList.empty();

    notices.forEach(function(notice) {
        if (selfDeletedNoticeList.includes(notice.uid)) return;
        if (categoryFilter !== "all" && notice.category !== categoryFilter) return;

        let formattedDate = notice.create_time ? formatDate(new Date(notice.create_time)) : "-";
        let isNewClass = readNoticeList.includes(notice.uid) ? '' : '<span class="new">N</span>';

        let noticeItem = `
            <li class="notice-item" data-uid="${notice.uid}">
                <div>
                    <h4 class="btn_notice_view" id="${notice.uid}">${isNewClass} ${notice.title}</h4>
                    <p>${formattedDate} / ${notice.creator_name || "μ•Œ 수 μ—†μŒ"}</p>
                </div>
            </li>`;

        noticeList.append(noticeItem);
    });
}