[TIL 2024. 05. 28] 프롬프트 로직 수정에 따른 오류 수정

 

elder_start.html에서 받아오는 gpt의 메뉴 추천 결과는 메뉴 이름을 대표로 표시한 객체였는데, 이 정보가 local storage에 저장되어서 elder_menu.html로 넘어오는 과정에서 메뉴 이름, 가격, 이미지 등의 정보를 모두 가진 객체가 아닌 메뉴 이름만이 남는 "문자열"로 저장되는 문제가 있었다.

 

이를 해결하기 위해 찾아본 결과 elder_start에서 local storage에 저장해주기 전에 stringify()를 통해 해당 객체를 문자열로 변환한 뒤에 setItem()으로 local storage에 저장하고, elder_menu에서는 local storage에 저장되어 있는 정보를 parse.json()으로 파싱해서 사용하면 문제를 해결할 수 있다는 것을 구글링을 통해 알게 되었다.

 

---

 

그리고 기존에는 axio를 get_menus에 대해 post방식으로 진행했는데, 현준님이 작성하신 view의 API 중 orders/aibot이 정확히 우리가 구현하려고 하던 내용과 같아서 이를 요청을 넣는 방식으로 변경하니 오류를 해결할 수 있었다

 

위에 문자열로만 가져온 정보에 대해서 해당 내용의 메뉴 이름이 DB에 저장된 메뉴의 이름과 같은 경우를 필터해서 인덱싱을 통해 사용할 수 있도록 리스트에 담는 과정이 필요했는데, 위의 API View가 정확히 그런 역활을 하고 있어서 이 과정을 별도로 작성하지 않아도, 이 view를 호출하는 것으로 문제를 해결할 수 있었다.

 

                    axios.post('/orders/aibot/', { inputText: transcript },
                        {
                            headers: {
                                'X-CSRFToken': csrfToken
                            }
                        })
                        .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);
                        })
                        .catch(function (error) {
                            console.error('에러:', error);
                        });

    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" onclick="addItem('${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>
                `;