[JavaScript] 2020년도 지방기능경기대회 과제(웹디자인 및 개발) 공부하기4

* 본 포스팅은 필자가 개인적으로 학습한 내용정리 및 리뷰를 위해 포스팅합니다.

---

// 구매하기 버튼 눌렀을 시 동작
      $("#buy_btn").on("click", function () {
        $(".black-bg").addClass("show-modal");
      });

▲ 구매하기 버튼을 눌렀을 시 black-bg div에 show-modal 클래스 추가

 

.black-bg,
.canvas-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 6;
  padding: 30px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
}

▲ 모달창 배경에 관한 CSS

 

.white-bg,
.canvas-in-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

▲ 모달창에 관한 CSS

 

.show-modal {
  visibility: visible;
  opacity: 1;
}

▲ 구매하기 버튼을 눌렀을 시 추가되는 CSS

 

 

 

// 닫기 버튼 눌렀을 시 동작
      $("#close").on("click", function () {
        $(".black-bg").removeClass("show-modal");
      });

▲ 닫기 버튼을 눌렀을 시 클래스를 지움으로 인해서 다시 hidden으로 만든다

 

var canvas = document.getElementById("canvas");
      var c = canvas.getContext("2d");
      c.font = "16px dotum";
      // 입력완료 버튼 눌렀을 시 동작
      $("#submit-btn").on("click", function () {
        $(".black-bg").removeClass("show-modal");
        $(".canvas-bg").addClass("show-modal");
        // 입력완료 누를때마다 canvas 초기화
        c.clearRect(0, 0, canvas.width, canvas.height);
        c.beginPath();
        c.fillText("영수증", 30, 50);
        c.fillText(checkdate(), 30, 70);
        var childrens = $(".drag-point").children();
        // 자간 조절을 위해서 i를 1부터 시작
        for (var i = 0; i < childrens.length; i++) {
          var name = $(`#${childrens[i].id} :nth-child(2)`).html();
          var brand = $(`#${childrens[i].id} :nth-child(3)`).html();
          var price = $(`#${childrens[i].id} :nth-child(4)`).html();
          var amount = $(`#${childrens[i].id} :nth-child(5)`).val();
          c.fillText(name, 200 * (i + 1) - 170, 120);
          c.fillText(brand, 200 * (i + 1) - 170, 150);
          c.fillText("가격 : " + price, 200 * (i + 1) - 170, 180);
          c.fillText("수량 : " + amount, 200 * (i + 1) - 170, 210);
          c.fillText("합계 : " + price * amount, 200 * (i + 1) - 170, 240);
        }
        c.fillText("총 합계 : " + $(".result_form_price").html(), 30, 330);
      });

▲ canvas 설정 및 입력완료를 눌렀을 시 모달창을 숨기고 canvas를 띄우기

(장바구니에 담긴 객체의 정보를 가져오기 위해서 children을 통해 요소를 찾고 nth-child를 통해 정보를 가져왔다)

 

// canvas 배경 눌렀을 시 닫힘 동작
      $(".canvas-bg").on("click", function (e) {
        if (e.target == document.querySelector(".canvas-bg")) {
          $(".canvas-bg").removeClass("show-modal");
        }
      });

▲ canvas의 배경내부에 canvas의 내부 div가 존재하므로 canvas외부를 눌렀을 때만 닫히게 동작하기 위해 사이에 if문을 추가하였다.

 

 

 

---

검색 기능, 드래그 기능, 정보입력 기능, 영수증 기능을 구현한 웹이 완성되었다..

 

 

 

 

결론

자바스크립트(jquery)를 사용한 처음 만든 프로젝트였지만 재미있었다. 기능을 구현하려고 고민하고 노력하다 보니 코드가 깔끔하지 못한 것이 아쉬웠다. 데이터를 재사용하거나 사용된 데이터를 가져오는 작업이 상당히 어색하였다. 또 제한된 데이터를 가지고 작업하다 보니 id값을 4 늘리거나 하는 행위는 무수히 많은 데이터를 관리하기에는 적절하지 않다는 생각이 들었다. jquery나 자바스크립트 문법적인 면에서도 더 쉽게 사용할 수 있는 것들이 무엇이 있는지 찾아봐야겠다... 드래그 앤 드롭을 했을 때 장바구니를 벗어나는 현상에 대해서는 더 고민해야 할 것 같다.