(실전) 웹개발 기능대회 예제 canvas 표기 문제

[크레소티]

안녕하세요. (실전) 웹개발 기능대회 예제 부분을 진행하고 있는데 안풀리는 부분이 있습니다.

굵게 표기한 부분인 canvas 관련하여 설정하고 모달 실행하는 부분에서
화면에 제대로 표기가 되지 않습니다. F12로 확인했을 때는 
해당 부분에 이미지가 생성되어있고 이미지를 내려받았고 확인하면
정상적으로 생성이 되는 것도 확인하였습니다.

z-index 문제인 것 같아 그 해당 태그의 z-index의 값을 '100'으로 설정하였지만 표기가 되지 않았습니다.
무엇이 문제인지 모르겠습니다. 도와주세요.




<div class="black-bg">
        <div class="white-bg">
            <div class="my-3">
                <h5>성함</h5>
                <input type="text" class="form-control" id="buyerNm">
            </div>
                <div class="my-3">
                <h5>연락처</h5>
                <input type="text" class="form-control" id="buyerHp">
            </div>
            <button id="submit">입력완료</button>
            <button id="close">닫기</button>
        </div>
    </div>
    
    <div class="rep-bg">
        <div class="repCon-bg">
            <canvas id="canvas" width="450" height="350"></canvas>
            <button id="repClose">닫기</button>
        </div>
    </div>

    <nav class="nav bg-body-tertiary p-3">
        <span class="navbar-brand h1">집꾸미기</span>
        Home
        스토어
        시공견적
    </nav>
    <div class="mt-3 ms-5">
        <input class="search" type="text" placeholder="검색어입력">
        
        <div class="productList p-3">
            <div class="row">

            </div>
        </div>
        
        <div class="orderSection p-3 mt-3">
            <p>장바구니</p>
            <div class="orderList mt-3 mb-3" ondrop="drop(event)" ondragover="allowDrop(event)">
                <p class="dragText">여기에 드래그</p>  
            </div>
        </div>

        <div>
            <h5>최종가격</h5>
            <p>합계 : <span id="tot-amt">0</span></p>
            <button class="buy">구매하기</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script>

        let totAmt = 0;
        let itemObj = [];
        let buyerName = "";
        let buyerHp = "";

        function setList () {
            $.get('store.json').done(function (data){
                addList(data, "");
            });
        }

        setList();

        function addList(arr, txt) {
            
            while(document.querySelector('.row').firstChild) {
                document.querySelector('.row').removeChild(document.querySelector('.row').firstChild);
            }

            Object.keys(arr).forEach((key) => {
                const el = arr[key];

                let arr2 = el;
                if(txt == "") {
                    Object.keys(arr2).forEach((key, idx) => {
                        const el = arr2[key];
                        
                        var tag = `<div id="item-${el.id}" class="order-item col-sm-4" draggable="true" ondragstart="drag(event)">
                                    < img src="${el.photo}" class="w-100">
                                    <h5>${el.title}</h5>
                                    <p>${el.brand}</p>
                                    <p>가격 : ${el.price}</p>
                                    <button class="add">담기</button>
                                </div>`;
                                
                        document.querySelector('.row').insertAdjacentHTML('beforeend', tag);
                        
                    });
                } else {
                    let arr3 = arr2.filter(el => el.title.includes(txt));

                    Object.keys(arr3).forEach((key, idx) => {
                        const el = arr3[key];
                        
                        var tag = `<div id="item-${el.id}" class="order-item col-sm-4 draggable="true" ondragstart="drag(event)">
                                    < img src="${el.photo}" class="w-100">
                                    <h5>${el.title}</h5>
                                    <p>${el.brand}</p>
                                    <p>가격 : ${el.price}</p>
                                    <button class="add">담기</button>
                                </div>`;
                                
                        document.querySelector('.row').insertAdjacentHTML('beforeend', tag);
                    });
                }
            });
        }

        document.querySelector('.search').addEventListener('change', function () {
            var inputText = document.querySelector('.search').value;

            $.get('store.json').done(function (data){
                addList(data, inputText);
            });
        });

        function allowDrop(ev) {
           ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData('item', ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            let data = ev.dataTransfer.getData('item');
            let tag = document.getElementById(data)
            
            let tmpArr = (tag.querySelectorAll('p')[1].innerHTML).split(":");
            let amt = tmpArr[1].replace(" ","");
            let productName = tag.querySelector('h5').innerHTML;
            itemObj.push({
                            "id": data, 
                            "product": productName, 
                            "price": amt, 
                            "amount": 1
                        });

            var insertTag = `<input class="productCnt" type="number" value="1" min="1" max="10">`;
            tag.insertAdjacentHTML('beforeend', insertTag);
            tag.removeChild(tag.querySelector('button'));

            ev.target.appendChild(tag);
            document.querySelector('.dragText').innerHTML = '';

            for(let i=0;i<document.querySelectorAll('.productCnt').length;i++) {
                document.querySelectorAll('.productCnt')[i].addEventListener('change', function (e) {
                    
                    let curTag = e.currentTarget.parentElement.id;
                    let curCnt = e.currentTarget.value;

                    totAmt=0;
                    
                    for(key in itemObj) {
                        
                        if(itemObj[key].id == curTag) {
                            itemObj[key].amount = parseInt(curCnt);
                        }
                        totAmt += (parseInt(itemObj[key].price) * parseInt(itemObj[key].amount));
                    }
                    document.querySelector('#tot-amt').innerHTML = totAmt;
                });
            }

            totAmt=0;
            for(key in itemObj) {
                totAmt += (parseInt(itemObj[key].price) * parseInt(itemObj[key].amount));
            }
            document.querySelector('#tot-amt').innerHTML = totAmt;
            setList();
        }

        document.querySelector('.buy').addEventListener('click', function () {
            if(document.querySelector('#tot-amt').innerHTML == "0") {
                alert('구매할 항목을 선택 후 진행해주세요.');
                return;
            }

            document.querySelector('.black-bg').classList.add('show-modal');
        });

        document.querySelector('#close').addEventListener('click', function () {
            document.querySelector('.black-bg').classList.remove('show-modal');
        });

        document.querySelector('#submit').addEventListener('click', function () {

            buyerName = document.querySelector('#buyerNm').value;
            buyerHp = document.querySelector('#buyerHp').value;

            document.querySelector('.black-bg').classList.remove('show-modal');

            document.querySelector('.rep-bg').style.display = 'block';
            let canvas = document.getElementById('canvas'); 
        
            let c = canvas.getContext('2d');
            
            c.font = '16px dotum';
            c.fillText('구매자 : ' + buyerName, 20, 30)
            c.fillText('연락처 : ' + buyerHp, 20, 60)
            c.fillText('----------------------------------------------', 20, 90);

            c.fillText('상품명', 30, 120);
            c.fillText('금액', 200, 120);
            c.fillText('갯수', 250, 120);
            c.fillText('합계액', 300, 120);
            for(key in itemObj) {
                c.fillText(`${itemObj[key].product}`, 30, (key*30)+150);
                c.fillText(`${itemObj[key].price}`, 200, (key*30)+150);
                c.fillText(`${itemObj[key].amount}`, 250, (key*30)+150);
                c.fillText(`${parseInt(itemObj[key].amount)*itemObj[key].price}`, 300, (key*30)+150);
            }

            c.fillText('----------------------------------------------', 20, (itemObj.length*30)+150);
            c.fillText('총금액 : ' + buyerName, 20, (itemObj.length*30)+180);
            c.fillText(`${totAmt}` + buyerName, 300, (itemObj.length*30)+180);

        });
  
        document.querySelector('#repClose').addEventListener('click', function () {
            document.querySelector('.rep-bg').style.display = 'none';
        });

    </script>

[codingapple]

z-index쓰려면 position absolute나 fixed 같은것도 줍시다

[글쓴이]

글