TIL Day 72.

Django 최종 팀 프로젝트

프론트엔드

버그 픽스

1. 팝업 관련 오류 수정

• 팝업으로 첫번째 추천 메뉴를 조회하고 창을 닫는 것은 가능, 카트에 추가 불가능

• 이후 수정하여 장바구니에 더해지는 것 구현했으나 닫기 버튼을 누르면 카트에 추가되면서 팝업 닫힘

• 팝업에 setAttribute() 를 더해 클릭 시 메뉴가 카트에 담기도록 함

• 이후 팝업 닫는 EventListener에 stopPropagation() 을 주어 해당 버튼에 대해서는 적용되지 않도록 함

            if (index === 0) {
                popupImage.src = menu.img_url;
                popupName.textContent = menu.food_name;
                popupPrice.textContent = `₩${menu.price}`;
                popupContainer.setAttribute('onclick', `addItem('${menu.food_name}', ${menu.price}, '${menu.img_url}')`); // 수정된 부분
                popupOverlay.style.display = 'flex';
            }

closePopup.addEventListener("click", function() {
            event.stopPropagation(); // Stop event from bubbling up // 수정된 부분
            popupOverlay.style.display = "none"; // Hide the popup // 수정된 부분
        });

2. 프롬프트 수정으로 반환 값이 달라져 생기는 문제

• 프롬프트를 수정하면서 안내 메시지와 추천 메뉴가 분리되어 반환됨

• 문제
  - 음성 안내가 나오지 않음

  • 추천된 메뉴로 메뉴가 불러와지지 않음: 추천 메뉴가 string으로 저장되어 불러올 때 리스트화 해주어야 했으며 그 리스트에 담긴 메뉴 이름으로 데이터베이스에 접근해 해당 메뉴의 정보를 꺼내와야 했음

• 음성 안내, 메뉴 추천을 각각 받아 local storage에 저장해 줌

• 원하는 로직이 들어있는 API를 불러와서 사용: MenuAPI 에서 AIbot으로 바꿔줌

.then(function (response) {
                            const responseText = response.data.responseText;
                            const recommended_menu = response.data.recommended_menu;
                            console.log('서버 응답:', responseText);
                            localStorage.setItem('recommended_menu', JSON.stringify(recommended_menu)); // 수정된 부분 recommended_menu를 JSON.stringify()로 저장해줌
                            localStorage.setItem('customer_message', responseText); // 수정된 부분 - responseText와 recommended_menu를 분리해줌
                            window.location.href = '/orders/elder_menu/';
                            console.log("customer_message>>>>>>>", responseText);
                            console.log("recommended_menu>>>>>>>", recommended_menu);
                        })

각각 저장해줌

document.addEventListener('DOMContentLoaded', function() {
        const recommended_menu_string = localStorage.getItem('recommended_menu'); // recommended_menu_string을 불러와주고
        const recommended_menu = JSON.parse(recommended_menu_string); // 다시 리스트화
        const responseText = localStorage.getItem('customer_message'); // 안내 메시지 불러옴
        
      axios.get('/orders/aibot/', { params: { recommended_menu: recommended_menu_string } }) // 사용하는 API를 변경
        .then(response => {
            const menuData = response.data.recommends; // assuming your API returns menus as an array
            //const recommendations = document.getElementById('recommendations');
            recommendations.innerHTML = '';

            menuData.forEach((menu, index) => {
                const menuItem = `
                    <div class="recommendation"token interpolation">${menu.food_name}', ${menu.price}, '${menu.img_url}')">
                        <h2>${menu.food_name}</h2>
                        <div class="menu-image">
                            <img src="${menu.img_url}" alt="${menu.food_name} 이미지">
                        </div>
                        <p>₩${menu.price}</p>
                    </div>
                `;

README.MD 작성

• 팀 프로젝트 개요, 팀 역할, 개발 기간, 기술 스택, 기능 등을 적어주는 것
• 영어로도 번역해서 적어두는 것이 좋을 듯!