[Django] 최종 프로젝트 : 지금은 전시상황!(10) - [FE]메인페이지 접속 시 좋아요 유무에 따른 하트색 세팅

<현재 상황>

• 이 글을 참고하면 알겠지만 현재 아래 전시회 4개 중 1,2,4번째 전시회에 좋아요를 누른 상태다

• 그럼에도 하트색이 빨간색으로 되어 있지 않아 내가 좋아요를 누른 전시회인지 알 수가 없다
• 로그인 한 유저가 누른 전시회와 비교하여 좋아요를 눌렀다면 빨간 하트, 누르지 않았다면 빈 하트가 보이게 수정해 보자!

---

<수정하기>

- api.js

// api.js

export const payload = localStorage.getItem("payload")
export const payloadParse = JSON.parse(payload);
...
// 마이 페이지 API
export async function myPageAPI(user_id) {
    const response = await fetch(`${backendBaseURL}/users/${user_id}`)
    const responseJson = await response.json();
    console.log(response, responseJson);
    return { response, responseJson };
}

• 우선 api.js의 payload, payloadParse 변수와 myPageAPI 함수가 필요하다(다른 팀원분이 이미 api.js에 구현해주셨다)

---

- index.js

• 수정된 코드를 보면 위와 같다

// index.js

import { frontendBaseURL, getExhibitionsAPI, exhibitionLikeAPI, myPageAPI, payload, payloadParse } from "./api.js";
...
window.onload = function loadExhibitions() {
    getExhibitionsAPI().then(({ response, responseJson }) => {
        const exhibitionsDATA = responseJson.results
        ...
        exhibitionsDATA.forEach(exhibition => {
            ...

            // 전시회 좋아요 하트색 세팅
            if (payload) {
                myPageAPI(payloadParse.user_id).then(({ responseJson }) => {
                    responseJson.exhibition_likes.forEach((obj) => {
                        if (exhibition.id == obj.id){
                            const heartElement = document.querySelector(`#like${exhibition.id}`);
                            heartElement.style.backgroundImage = 'url("../static/img/filled-heart.png")';
                        }
                    })
                })
            }

            ...
        })
    })
}

• 로직은 이전 프로젝트 때 해서 아는데 responseJson.exhibition_likes에서 각 id를 불러오는 게 너무 안 됐다
• 그 순간을 쭉 기록하진 않았지만 여튼 원하는 정보가 계속 안 나와서...좀 헤맸다.;...;
• 알고보니 for문에 조건식과 증감식 위치를 바꿔써서 그랬던 거였다 ㅋㅋㅋ허무..~
• 처음에 for문을 써서 했는데 그것보다 forEach가 더 깔끔해서 forEach로 바꿨다
• 각 객체의 id값에 접근하는 방법(responseJson.exhibition_likes[i]["id"])을 찾는 것도 좀 걸렸는데 forEach를 쓰니까 obj.id만 하면 끝이라 좋았다

// for문 사용했을 때 코드

if (payload) {
    myPageAPI(payloadParse.user_id).then(({ responseJson }) => {
        for (let i = 0 ; responseJson.exhibition_likes.length ; i++) {
            if (exhibition.id == responseJson.exhibition_likes[i]["id"]){
                const heartElement = document.querySelector(`#like${exhibition.id}`);
                heartElement.style.backgroundImage = 'url("../static/img/filled-heart.png")';
            }
        }
    })
}

---

<시연>

• 메인페이지에 접속했을 때 유저의 좋아요 정보에 따라 하트색이 결정된다