<div id="nuri-widget-root">
  

  
  <div id="nuri-modal-overlay" onclick="toggleSearchModal()"></div>
  <div id="nuri-modal-container">
    <div class="nuri-modal-header">
      <h3>단가표 검색</h3>
      <button class="close-btn" onclick="toggleSearchModal()">✕</button>
    </div>
    <div class="nuri-search-box-area">
      <input type="text" id="nuri-search-input" placeholder="품목명 검색 (예: 연어, 새우)" autocomplete="off">
    </div>
    <div id="nuri-result-list">
      <div class="nuri-msg">검색어를 입력하세요.</div>
    </div>
  </div>
</div>

<style>
  /* ▼▼▼ [수정] 모바일 햄버거 메뉴(줄 세개) 숨기기 강력 버전 ▼▼▼ */
  /* 우피/노션의 다양한 테마에 대응하는 모든 선택자를 추가했습니다 */
  
  /* 1. 우피(Oopy) 전용 클래스들 */
  .oopy-top-navigation-mobile-hamburger,
  .oopy-overlay-menu-button,
  .frame-header .right, /* 헤더 오른쪽 영역 전체 숨김 (메뉴가 보통 여기에 있음) */
  .navbar-toggle,
  
  /* 2. 노션(Notion) 관련 클래스들 */
  .notion-navbar__menu,
  .notion-navbar .hamburger,
  .notion-topbar-mobile-menu,
  
  /* 3. 공통적으로 쓰이는 속성들 (ARIA 라벨 등) */
  [aria-label="Open menu"],
  [aria-label="Menu"],
  [aria-label="메뉴 열기"],
  [aria-label="메뉴"],
  button[class*="hamburger"],
  div[class*="hamburger"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* --- 1. 모달 스타일 --- */
  #nuri-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: none; backdrop-filter: blur(2px); }
  #nuri-modal-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; height: 80vh; max-height: 700px; background: #fff; z-index: 10001; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); display: none; flex-direction: column; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Pretendard", sans-serif; }
  body.nuri-modal-open #nuri-modal-overlay, body.nuri-modal-open #nuri-modal-container { display: flex; }
  .nuri-modal-header { padding: 16px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: #fff; }
  .nuri-modal-header h3 { margin: 0; font-size: 18px; color: #333; }
  .close-btn { background:none; border:none; font-size: 20px; cursor: pointer; color:#999; }
  .nuri-search-box-area { padding: 16px 20px; background: #f9f9f9; border-bottom: 1px solid #eee; }
  #nuri-search-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; outline: none; }
  #nuri-search-input:focus { border-color: #333; }
  #nuri-result-list { flex: 1; overflow-y: auto; padding: 10px; background: #fff; -webkit-overflow-scrolling: touch; }
  
  /* 카드 디자인 수정됨 */
  .nuri-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 16px; margin-bottom: 10px; }
  
  .n-row-top { display:flex; justify-content:space-between; align-items: flex-start; margin-bottom: 8px; }
  .n-name { font-weight: bold; font-size: 16px; color: #333; line-height: 1.3; }
  .n-brand { font-size: 11px; background: #f1f3f5; padding: 3px 6px; border-radius: 4px; color: #666; white-space: nowrap; margin-left: 8px; height: fit-content; }
  
  /* 상세 정보와 가격을 감싸는 컨테이너 (Flexbox) */
  .n-info-wrapper { display: flex; justify-content: space-between; align-items: flex-end; }
  
  .n-details { font-size: 13px; color: #666; line-height: 1.6; }
  /* 가격 스타일 (오른쪽 정렬) */
  .n-price { font-weight: 700; font-size: 18px; color: #e53935; white-space: nowrap; margin-left: 12px; text-align: right; }
  
  .nuri-msg { text-align: center; color: #999; margin-top: 40px; }
</style>

<script>
  // 1. 데이터 URL
  const JSON_URL = 'https://raw.githubusercontent.com/adqwdqwdasdasdasd/nuritrading-search/main/data.json';
  let nuriData = [];

  // 2. 모달 기능
  function toggleSearchModal() {
    const body = document.body;
    const input = document.getElementById('nuri-search-input');
    if (body.classList.contains('nuri-modal-open')) {
      body.classList.remove('nuri-modal-open');
    } else {
      body.classList.add('nuri-modal-open');
      if(nuriData.length === 0) loadNuriData();
      setTimeout(() => input.focus(), 100);
    }
  }

  async function loadNuriData() {
    const listDiv = document.getElementById('nuri-result-list');
    try {
      listDiv.innerHTML = '<div class="nuri-msg">데이터 불러오는 중...</div>';
      const res = await fetch(JSON_URL);
      if (!res.ok) throw new Error('Network error');
      nuriData = await res.json();
      listDiv.innerHTML = '<div class="nuri-msg">검색어를 입력하세요.</div>';
    } catch (e) {
      listDiv.innerHTML = '<div class="nuri-msg">데이터 로드 실패</div>';
    }
  }

  // 3. 검색 로직
  document.getElementById('nuri-search-input').addEventListener('input', function() {
    const keyword = this.value.toLowerCase().trim();
    const listDiv = document.getElementById('nuri-result-list');
    if (keyword === '') { listDiv.innerHTML = '<div class="nuri-msg">검색어를 입력하세요.</div>'; return; }
    
    const filtered = nuriData.filter(item => 
      Object.values(item).some(val => val && val.toString().toLowerCase().includes(keyword))
    );

    if (filtered.length === 0) { listDiv.innerHTML = `<div class="nuri-msg">'${keyword}' 검색 결과가 없습니다.</div>`; return; }

    let html = '';
    filtered.forEach(item => {
      const price = item.단가 ? item.단가.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '0';
      
      // 순서 변경: 규격 -> 원산지 -> 중량 -> 창고
      // 가격을 상세 정보 옆(n-info-wrapper 안)으로 이동
      html += `
        <div class="nuri-card">
          <div class="n-row-top">
            <span class="n-name">${item.품목 || ''}</span>
            ${item.브랜드 ? `<span class="n-brand">${item.브랜드}</span>` : ''}
          </div>
          <div class="n-info-wrapper">
            <div class="n-details">
              <div>규격: ${item.규격 || '-'} | 원산지: ${item.원산지 || '-'}</div>
              <div>중량: ${item.중량 || '-'} | 창고: ${item.창고 || '-'}</div>
            </div>
            <div class="n-price">${price}원</div>
          </div>
        </div>`;
    });
    listDiv.innerHTML = html;
  });

  // 4. [핵심] 노션 버튼(링크) 클릭 감지
  // 사용자가 '#nuri-search' 링크가 걸린 버튼을 누르면 -> 페이지 이동을 막고 -> 검색창을 띄움
  document.addEventListener('click', function(e) {
    // 클릭된 요소가 a 태그(링크)이거나 a 태그 안에 있는 요소인지 확인
    const anchor = e.target.closest('a');
    
    // 링크가 존재하고, 그 링크 주소에 '#nuri-search'가 포함되어 있다면
    if (anchor && anchor.href.includes('#nuri-search')) {
      e.preventDefault(); // 기본 동작(페이지 이동/새로고침) 차단
      toggleSearchModal(); // 검색창 실행
    }
  });
</script>

www.nuritrading.co.kr

색상

재고

유통기한

제조사

구매일

비고

제품사진

창고

브랜드

규격

단가

원산지

품목

중량

업체

전체상품

명태