<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

제조사

가격

출시일

재고수량

할인율

배송비

제품 대분류

제품 소분류

구매처 정보

제품명

맞춤제작가능여부

재고 출납 현황

전체 제품

맞춤제작만

네일시술대