메뉴 추천 - 지도 API 연결하기

메뉴 추천 페이지에서 메뉴 추천을 받게 되면
추천을 받은 메뉴의 키워드를 지도 api가 생성될 때 검색하여 지도에 그려준다.

document.addEventListener('DOMContentLoaded', () => {
  buttons(); // 페이지 로드 시 버튼 상태 확인
});

/**
 * 버튼 상태 변경 함수
 */
function buttons() {
  const storeBtn = document.getElementById('storeBtn');
  storeBtn.style.display = 'none';
}
// 버튼 클릭 시 새페이지로 창 띄움
function openKakaopage(keyword) {
  return () => {
    const kakaoUrl =
      'http://localhost:3000/kakaomap-api.html?keyword=' + keyword;
    window.open(kakaoUrl, '_blank');
  };
}

순서
1) 페이지 로드 시 버튼 상태 변경함수를 실행
==> 초기상태는 display = none

2) 버튼 클릭 시 실행할 함수를 설정
==> return 으로 함수 자체를 반환해준다.
이 때, 새 창을 열어 keyword를 querystring으로 넘겨줄 수 있도록 한다. 이렇게 하는 이유는 새 페이지를 열 때 keyword는 휘발되고 script 파싱 자체가 새로고침 되기 때문이다.

let keywordResult;

// Function to send a POST request
function sendRequest(categoryId) {
  axios
    .post('http://localhost:3000/user-actions/random-weighted-foods', {
      category_id: categoryId,
    })
    .then(response => {
      // Display the response on the webpage
      document.querySelector('.food-item.meal').textContent =
        response.data.message;

      const resultDiv = document.getElementById('result3');
      resultDiv.innerHTML = `<h2>${response.data}</h2>`;
      storeBtn.style.display = 'block';
      keywordResult = response.data;
      storeBtn.addEventListener('click', openKakaopage(keywordResult));
    })
    .catch(error => {
      console.error('Error:', error);
      alert('요청 중 오류가 발생했습니다.');
    });
}

이 부분이 메뉴추천을 클릭하면 메뉴를 추천해주는 함수이다.
이 때 storeBtn을 클릭하게 되면 addEventListener를 사용하여
위에 만들어 주었던 openKakaopage의 함수에 메뉴 키워드를 매개변수로 보내준다.
만약 아래와 같이 함수를 설정하면 클릭하기 전에 실행이 된다.

function openKakaopage(keyword) {
  const kakaoUrl =
      'http://localhost:3000/kakaomap-api.html?keyword=' + keyword;
    window.open(kakaoUrl, '_blank');
}

그 이유는 다음과 같다.

const a = () => {
	console.log('hello')
}
a()
==> hello
const b = () => {
	return () => {
    console.log('hello world')
    }
}
b()
console.log(b())
==> [Function (anonymous)]
b()()
==> hello world

위와 같이 함수 선언문을 사용하게 되면 바로 실행되게 된다.
하지만 함수 내부에서 함수 자체를 return하게 되면 바로 실행되지 않고 함수를 전달하게 된다.

따라서 addEventListener에서 바로 실행되는 것을 방지하기 위해
openKakaopage의 함수를 반환하게 끔하여 click시 실행되게끔 한다.