<div id="header">
  <a href="/" class="home_button">
  	<img loading="lazy" class="css-l68de9 e5kxa4l0" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F384b8e7f-b8c9-4b39-81c0-049a1a3f34eb%2F1a7713ee-6f7e-4ee4-81e0-8dce80f00f7e%2Fhome.svg&amp;blockId=eb14e6f8-6019-4033-98fd-72ba7ac84563">
   	제품보기
  </a>
  <a href="/about" class="about_button">
    <img loading="lazy" class="css-l68de9 e5kxa4l0" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F384b8e7f-b8c9-4b39-81c0-049a1a3f34eb%2F4ff13ddb-572a-44a1-8e8a-810f76a053a1%2Finfo.svg&amp;blockId=d28b8cee-00a6-44e1-a7c3-9590c6f78c1d">
    소개
  </a>
</div>


<script>
  const isItemPage = document.querySelector('.notion-topbar a[href="/369bc469-c0e2-4a42-8430-5a76cef4694f"]')
  let items
  if (isItemPage) {
    items = [{
      url: location.pathname.substring(1),
      image: document.querySelector('.notion-page-content img').src,
      title: document.querySelector('h1.page-title').textContent
    }]
    const script1 = document.createElement('script');
    script1.src = "https://cdn.jsdelivr.net/npm/sweetalert2@11.11.1/dist/sweetalert2.all.min.js";
    document.head.appendChild(script1);

    const link = document.createElement('link');
    link.href = "https://cdn.jsdelivr.net/npm/sweetalert2@11.11.1/dist/sweetalert2.min.css";
    link.rel = "stylesheet";
    document.head.appendChild(link);

    const script2 = document.createElement('script');
    script2.src = "https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.js";
    document.head.appendChild(script2);
    const ctaHTML = `
    <div id="cta" style="display:none;">
      <button class="reset_items">
        <img loading="lazy" class="css-l68de9 e5kxa4l0"
          src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F384b8e7f-b8c9-4b39-81c0-049a1a3f34eb%2F04fba5ed-4e2a-4479-a18c-7cf2ea8b9393%2Freset.svg&amp;blockId=47486aa7-297f-424c-8c63-fb122cdfd8a6">
      </button>
      <button class="call_price">
        <img loading="lazy" class="css-l68de9 e5kxa4l0"
          src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F384b8e7f-b8c9-4b39-81c0-049a1a3f34eb%2F66614c40-6690-44e3-8434-3819ca6a6b45%2Fphone-call.svg&amp;blockId=8647d170-d9b9-40cd-bde5-74dd944e5ece">
        견적 문의
        (<span class="selected_item_count">0</span>)
      </button>
      <button class="select_item">
        이 상품 담기
      </button>
    </div>
    `
    document.body.insertAdjacentHTML('beforeend', ctaHTML)

    document.querySelector('button.call_price').addEventListener('click', callPrice)
    document.querySelector('button.reset_items').addEventListener('click', resetSelectedItems)

    document.querySelector('.select_item').addEventListener('click', (e) => {
      const callItems = JSON.parse(localStorage.getItem('callItems')) || []
      const item = items[0]
      const itemIsSelected = callItems.find(callItem => callItem.url == item.url)
      if (itemIsSelected) {
        removeItem(item)
      } else {
        addItem(item)
      }
      renderSelectedItem()
      renderCta()
    })
    renderCta()
    renderSelectedItem()
  }

  function callPrice() {
    const callItems = JSON.parse(localStorage.getItem('callItems')) || []
    if (callItems.length == 0) {
      Swal.fire({
        icon: "error",
        title: "선택한 상품이 없습니다",
        text: "상품을 먼저 선택하고 견적을 문의해주세요"
      });
      return
    }
    // 메시지 앱을 호출하여 items 메시지 전달
    let message = `견적 문의드립니다\n${callItems.map(item => `https://www.dvdbnh.com/${item.url}`).join('\n')}`
    message = message.replace(/(\n|\r\n)/g, "%0a");
    const userAgent = navigator.userAgent.toLocaleLowerCase()

    let smsUrl
    const phoneNumber = '010-7762-8946'

    if (userAgent.search('android') > -1) {
      smsUrl = `sms:${phoneNumber}?body=${message}`
      window.open(smsUrl, '_blank')
    } else if (userAgent.search('iphone') > -1 || userAgent.search('ipad') > -1) {
      smsUrl = `sms:${phoneNumber}&body=${message}`
      window.open(smsUrl, '_blank')
    } else {
      Swal.fire({
        icon: "info",
        title: "PC 견적 문의",
        text: "견적을 문의할 핸드폰 종류를 알려주세요",
        showDenyButton: true,
        showCancelButton: true,
        confirmButtonText: "안드로이드",
        denyButtonText: "아이폰 & 아이패드",
      }).then((result) => {
        if (result.isConfirmed) {
          smsUrl = `sms:${phoneNumber}?body=${message}`
        } else if (result.isDenied) {
          smsUrl = `sms:${phoneNumber}&body=${message}`
        } else if (result.isDismissed) {
          return
        }
        Swal.fire({
          icon: "info",
          title: "QR을 찍어서 문의하세요",
          html: `<div id="qrcode"></div>`
        })
        const qrcode = new QRCode(document.getElementById('qrcode'), {
          text: smsUrl,
          width: 256,
          height: 256,
          colorDark : '#000',
          colorLight : '#fff',
          correctLevel : QRCode.CorrectLevel.L
        });
      })
    }
  }

  function resetSelectedItems() {
    Swal.fire({
      icon: "warning",
      title: "담긴 상품을 초기화하시겠습니까?",
      text: "지금까지 담은 상품 목록을 모두 삭제하시겠습니까?",
      showCancelButton: true,
      confirmButtonText: "초기화할게요",
      cancelButtonText: "취소할게요",
    }).then((result) => {
      if (result.value) {
        localStorage.removeItem('callItems')
        renderCta()
        renderSelectedItems()
      }
    });
  }

  function addItem(item) {
    const callItems = JSON.parse(localStorage.getItem('callItems')) || []
    // 이미 선택된 아이템이 있는지 확인
    if (callItems.find(callItem => callItem.url == item.url)) {
      return
    }
    callItems.push({
    	url: item.url,
    	image: item.image,
      title: item.title
    })
    localStorage.setItem('callItems', JSON.stringify(callItems))
  }

  function removeItem(item) {
    const callItems = JSON.parse(localStorage.getItem('callItems')) || []
    const newCallItems = callItems.filter(callItem => callItem.url != item.url)
    localStorage.setItem('callItems', JSON.stringify(newCallItems))
  }

  function renderSelectedItem() {
    const callItems = JSON.parse(localStorage.getItem('callItems')) || []
    const item = items[0]
    const selectItem = document.querySelector('.select_item')
    // 담긴 아이템을 선택된 상태로 렌더링
    if (callItems.find(callItem => callItem.url == item.url)) {
      selectItem.classList.add('selected')
      selectItem.textContent = '선택 취소'
    } else {
      selectItem.classList.remove('selected')
      selectItem.textContent = '이 상품 담기'
    }
  }

  function renderCta() {
    const callItems = JSON.parse(localStorage.getItem('callItems')) || []
    const cta = document.querySelector('#cta')
    cta.style.display = 'flex';
    cta.querySelector('.selected_item_count').textContent = callItems.length
  }
  
  document.querySelector('.oopy-footer').innerHTML += '<div>다비다 | 사업자등록번호: 404-09-54550</div>'
</script>


<style>
  /* CTA */
  #cta {
    position: fixed;
    bottom: 0;
    height: 100px;
    width: 100%;
    z-index: 99;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    left: 0;
    font-family: 'RIDIBatang';
  }

  #cta img {
    width: 16px;
    height: 16px;
  }

  #cta .call_price, #cta .select_item, #cta .reset_items {
    height: 50px;
    padding: 0 15px;
    border-radius: 10px;
    background: #4c4cff;
    border: none;
    color: white;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  #cta .call_price {
    flex: 2;
    margin-right: 10px;
    margin-left: 10px;
  }

  #cta .select_item {
    flex: 1;
  }
  
  #cta .select_item.selected {
    background: #ff4cd7;
  }

  #cta .reset_items {
    width: 50px;
    background: #696663;
  }

  #cta .reset_items img {
    width: 35px;
    height: 35px;
  }

  #qrcode {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* SWAL */
  .swal2-container {
    font-family: 'RIDIBatang';
  }
</style>

www.dvdbnh.com

제조사

모델 번호

구매 날짜

구매 가격

제품 소분류

제품 종류

출고 날짜

입고 날짜

To-do

In progress

Complete

상태

중고 여부

제품 이름

재품 대분류

이연수님의 자동화 기능

상위 항목

제품종류

판매 정가

하위 항목

생성 일시

출고 분포

전체 내역

출고날짜 없음!

적재 상품만 표시

032 - 템바보드카운터 자체제작