코딩 교육 TIL

2024-05-21 AI 코딩 TIL

HyunjunPark 2024. 5. 21. 19:41
트러블 슈팅을 위해 엄청난 고생을 했습니다.
  • 이번 주 과제
    • 얼굴인식으로 나오는 결과 값을 받아오는 방법 조사 (numpy array) (진행중) → gpt-4o 얼굴인식 기능으로 변경하여 적용 예정
    • 메뉴 user CRUD 생성 (진행중) → USER, MENU, HASHTAG 모델의 데이터 베이스 생성 및 수정 삭제 가능 → 키오스크에 결제 메뉴 데이터 전송 가능 (전송된 데이터 데이터베이스에 추가하는 기능 必)
    • 음성인식 Django에 반영 (진행중) → 키오스크 데이터 베이스가 작성이 되면 얼굴인식기능과 함께 동작할 수 있도록 조정 필요
    • 키오스크 간단한 템플릿 만들기 (완료) → 메뉴 음성인식 설정을 수정해야 할 필요가 있음
    • 장바구니 기능을 조사하기 (완료) → javascript를 이용하여 template과 views.py와 데이터를 주고 받을 수 있도록 설정
    • 키오스크 전체적인 흐름도 작성 (진행중) → 기본적인 키오스크의 흐름도 작성 했으나 추가 되는 기능에 맞추어 흐름도를 수정 할 필요 有

문제점 : 템플릿(키오스크 주문화면 → 결제완료후 주문번호 출력화면)이동시 데이터 전송 및 화면이동 오류 발생

  • 결제하기 버튼은 눌러도 동작하지 않는 문제 발생
  • 원인 : AJAX요청에서 서버로부터 예상치 못한 응답을 받았거나 요청을 보내는 데 문제가 발생했을 때 발생
  • 오류 코드
 주문 처리 중 오류가 발생했습니다: 
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
error	@	menu/:168
c	@	jquery.min.js:2
fireWith	@	jquery.min.js:2
l	@	jquery.min.js:2
(익명)	@	jquery.min.js:2
load(비동기)		
send	@	jquery.min.js:2
ajax	@	jquery.min.js:2
(익명)	@	menu/:152
  • 해결 방안 : 기존의 데이터 전송 방법 교체
    • 기존 : html (AJAX) 데이터 → views.py( submit_order )데이터 저장 후 주문번호 전송
      → views.py( order_complete ) 입력받은 주문번호에 맞추어 탬플릿 전송 → html (주문번호 출력)
    • 수정 안 : html (AJAX) 데이터 → views.py( submit_order )데이터 저장 후 주문번호 전송 → html (AJAX) 주문번호를 받아서 /orders/order_complete/' + data.order_number + '/ 입력 → views.py( order_complete ) 입력받은 주문번호에 맞추어 탬플릿 전송 → html (주문번호 출력)

키오스크에서 주문이 완료가 되면 주문영수증 출력(실제로 나오지는 않음)되면서 화면에 해당 주문 번호를 표기 하여 표기해줌

  • 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>주문 완료</title>
    <!-- 부트스트랩 CSS 추가 -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #00A3E0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            color: white;
            text-align: center;
        }

        .order-confirmation {
            background-color: #ffffff;
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            color: #000;
            max-width: 500px;
        }

        .order-confirmation h2 {
            color: #FFD700;
        }

        .order-number {
            font-size: 4rem;
            font-weight: bold;
            margin-bottom: 0;
        }

        .receipt-box {
            padding: 1.5rem;
            background-color: #ffffff;
            border: 2px solid #000;
            border-radius: 10px;
            display: inline-block;
            margin-bottom: 1rem;
            min-width: 3rem; /* 최소 너비 설정 */
            text-align: center; /* 텍스트를 가운데 정렬 */
            line-height: 3rem; /* 텍스트 세로 중앙 정렬을 위해 박스 높이와 동일하게 설정 */
        }

        .thank-you {
            font-size: 1.2rem;
            color: #343a40;
        }
    </style>
</head>
<body>
    <div class="order-confirmation">
        <h2>결제가 완료되었습니다.</h2>
        <p>영수증 하단 주문번호를 확인해 주세요</p>
        <div class="receipt-box">
            <div class="order-number">{{ order_number }}</div>
        </div>
        <p class="thank-you">이용해 주셔서 감사합니다.</p>
    </div>
</body>
</html>
저작자표시 (새창열림)