{"id":112,"date":"2025-09-14T02:00:34","date_gmt":"2025-09-14T02:00:34","guid":{"rendered":"https:\/\/kbs4208.mycafe24.com\/?page_id=112"},"modified":"2025-09-14T02:00:34","modified_gmt":"2025-09-14T02:00:34","slug":"2-2","status":"publish","type":"page","link":"https:\/\/kbs4208.mycafe24.com\/?page_id=112","title":{"rendered":"2"},"content":{"rendered":"<!DOCTYPE html>\r\n<html lang=\"ko\">\r\n<head>\r\n  <meta charset=\"utf-8\" \/>\r\n  <style>\r\n    body { font-family: Arial, Helvetica, sans-serif; padding: 20px; }\r\n\r\n    .form-inline { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:6px; }\r\n    .form-inline label { display:flex; align-items:center; gap:6px; margin:0; }\r\n    .form-inline input { width: 180px; padding:6px; }\r\n    .form-inline button { padding: 6px 12px; cursor: pointer; }\r\n\r\n    #status, #regStatus { margin: 8px 0 16px; color: green; }\r\n\r\n    table { border-collapse: collapse; margin-top: 12px; width: 100%; }\r\n    th, td { border: 1px solid #ccc; padding: 6px; text-align: center; }\r\n    th { background: #f4f4f4; }\r\n\r\n    td.price-cell { color: red; font-weight: bold; }\r\n\r\n    \/* \u2705 \uc5f4 \ud3ed \uace0\uc815 *\/\r\nth:nth-child(2), td:nth-child(2) { width: 200px; }  \/* \uc544\uc774\ud15c *\/\r\nth:nth-child(3), td:nth-child(3) { width: 160px; }  \/* \uc544\uc774\ub514 *\/\r\nth:nth-child(4), td:nth-child(4) { width: 100px; }  \/* \uc785\ucc30\uac00 *\/\r\nth:nth-child(5), td:nth-child(5) { width: 160px; }  \/* \ub4f1\ub85d\uc790 *\/\r\nth:nth-child(6), td:nth-child(6) { width: 160px; }  \/* \ub0a8\uc740 \uc2dc\uac04 *\/\r\nth:nth-child(7), td:nth-child(7) { width: 100px; }  \/* \ud589 \uc0ad\uc81c *\/\r\n\r\n    @media (max-width: 640px) {\r\n      .form-inline { gap:8px; }\r\n      .form-inline input { width: 140px; }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <h2>\uc544\uc774\ud15c \ub4f1\ub85d<\/h2>\r\n  <div class=\"form-inline\">\r\n    <label>\ub4f1\ub85d\uc790: <input type=\"text\" id=\"regUser\" placeholder=\"\ub4f1\ub85d\uc790\"><\/label>\r\n    <label>\uc785\ucc30\uac00: <input type=\"text\" id=\"regPrice\" placeholder=\"\uc785\ucc30\uac00(\uc22b\uc790)\"><\/label>\r\n    <label>\uc544\uc774\ud15c: <input type=\"text\" id=\"regItem\" placeholder=\"\uc544\uc774\ud15c\uba85\"><\/label>\r\n    <button id=\"btnReg\">\ub4f1\ub85d<\/button>\r\n  <\/div>\r\n  <div id=\"regStatus\"><\/div>\r\n\r\n  <h2>\uc785\ucc30 \uc815\ubcf4<\/h2>\r\n  <div class=\"form-inline\">\r\n    <label>\ubc88\ud638: <input type=\"text\" id=\"rowKey\" placeholder=\"\uc544\uc774\ud15c\ubc88\ud638\"><\/label>\r\n    <label>\uc544\uc774\ub514: <input type=\"text\" id=\"userId\" placeholder=\"\uc544\uc774\ub514\"><\/label>\r\n    <label>\uc785\ucc30\uac00: <input type=\"text\" id=\"bidPrice\" placeholder=\"\uc785\ucc30\uac00(\uc22b\uc790)\"><\/label>\r\n    <button id=\"btnBid\">\uc785\ucc30<\/button>\r\n  <\/div>\r\n  <div id=\"status\"><\/div>\r\n\r\n  <div id=\"data-table\"><\/div>\r\n\r\n  <script>\r\n    (function(){\r\n      const API_BASE = \"https:\/\/kbs4208.mycafe24.com\/index.php?rest_route=\/auction\/v1\/\";\r\n      const API = {\r\n        getData: () => fetch(API_BASE + 'data').then(r=>r.json()),\r\n        bid: (rowKey, userId, bidPrice) =>\r\n          fetch(API_BASE + 'bid', {\r\n            method: 'POST',\r\n            headers: {'Content-Type':'application\/json'},\r\n            body: JSON.stringify({ rowKey, userId, bidPrice })\r\n          }).then(r=>r.json()),\r\n        register: (user, price, item) =>\r\n          fetch(API_BASE + 'register', {\r\n            method: 'POST',\r\n            headers: {'Content-Type':'application\/json'},\r\n            body: JSON.stringify({ user, price, item })\r\n          }).then(r=>r.json()),\r\n        deleteRow: (rowKey) =>\r\n          fetch(API_BASE + 'row\/' + encodeURIComponent(rowKey), { method: 'DELETE' })\r\n            .then(r=>r.json())\r\n      };\r\n\r\n      window.onload = () => {\r\n        fetchData();\r\n        setInterval(fetchData, 1000);\r\n        document.getElementById('btnReg').addEventListener('click', registerItem);\r\n        document.getElementById('btnBid').addEventListener('click', submitForm);\r\n      };\r\n\r\n      function fetchData() {\r\n        API.getData().then(res => {\r\n          renderTable(res.data, res.endTimes);\r\n        }).catch(err=>{\r\n          console.error(err);\r\n          document.getElementById('data-table').innerHTML = '<p>\ub85c\ub4dc \uc2e4\ud328<\/p>';\r\n        });\r\n      }\r\n\r\n      function renderTable(data, endTimes) {\r\n        if (!Array.isArray(data) || data.length < 2) {\r\n          document.getElementById('data-table').innerHTML = '<p>\ub370\uc774\ud130\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>';\r\n          return;\r\n        }\r\n        const now = Date.now();\r\n\r\n        const header = ['\ubc88\ud638', '\uc544\uc774\ud15c', '\uc544\uc774\ub514', '\uc785\ucc30\uac00', '\ub4f1\ub85d\uc790', '\ub0a8\uc740 \uc2dc\uac04', '\ud589 \uc0ad\uc81c'];\r\n        const rows = data.slice(1);\r\n        let html = '<table><thead><tr>' +\r\n                    header.map(h => `<th>${h}<\/th>`).join('') +\r\n                    '<\/tr><\/thead><tbody>';\r\n        rows.forEach(row => {\r\n          const key = (row[0] ?? '').toString();\r\n          html += '<tr>';\r\n          html += `<td>${key}<\/td>`;\r\n          html += `<td>${row[1] || ''}<\/td>`;\r\n          html += `<td>${row[2] || ''}<\/td>`;\r\n          html += `<td class=\"price-cell\">${row[3] || ''}<\/td>`;\r\n          html += `<td>${row[5] || ''}<\/td>`; \/\/ \ub4f1\ub85d\uc790\r\n          let timerText = '';\r\n          const endMs = endTimes[key];\r\n          if (endMs !== undefined) {\r\n            const diff = endMs - now;\r\n            if (diff <= 0) timerText = '\uc785\ucc30 \uc885\ub8cc';\r\n            else {\r\n              const m = String(Math.floor(diff \/ 60000)).padStart(2, '0');\r\n              const s = String(Math.floor((diff % 60000) \/ 1000)).padStart(2, '0');\r\n              timerText = `${m}:${s}`;\r\n            }\r\n          }\r\n          html += `<td>${timerText}<\/td>`;\r\n          html += `<td><button onclick=\"deleteRow('${key}')\">\ud589 \uc0ad\uc81c<\/button><\/td>`;\r\n          html += '<\/tr>';\r\n        });\r\n        html += '<\/tbody><\/table>';\r\n        document.getElementById('data-table').innerHTML = html;\r\n      }\r\n\r\n      window.submitForm = function () {\r\n        const key = document.getElementById('rowKey').value.trim();\r\n        const uid = document.getElementById('userId').value.trim();\r\n        const bid = document.getElementById('bidPrice').value.trim();\r\n        if (!key || !uid || !bid) return alert('\ubc88\ud638\/\uc544\uc774\ub514\/\uc785\ucc30\uac00\ub97c \uc785\ub825\ud558\uc138\uc694.');\r\n        if (!confirm(`\uc785\ucc30\uac00 ${bid}\uc6d0\uc73c\ub85c \uc785\ucc30\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?`)) return;\r\n        document.getElementById('status').textContent = '';\r\n        API.bid(key, uid, bid).then(resp => {\r\n          const msg = {\r\n            ok: `\uc804\uc1a1 \uc644\ub8cc (\ubc88\ud638: ${key})`,\r\n            low: '\uc785\ucc30 \uc2e4\ud328: \ud604\uc7ac\uac00\ubcf4\ub2e4 \ub192\uac8c \uc785\ub825',\r\n            invalid: '\uc720\ud6a8\ud55c \uc22b\uc790\/\uac12\uc744 \uc785\ub825',\r\n            notfound: '\ubc88\ud638\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4',\r\n            ended: '\uc785\ucc30\uc774 \uc885\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4'\r\n          }[resp] || '\uc624\ub958';\r\n          document.getElementById('status').textContent = msg;\r\n          if (resp === 'ok') fetchData();\r\n        }).catch(err=>{\r\n          console.error(err);\r\n          document.getElementById('status').textContent = '\uc624\ub958';\r\n        });\r\n      };\r\n\r\n      window.registerItem = function () {\r\n        const user = document.getElementById('regUser').value.trim();\r\n        const price = document.getElementById('regPrice').value.trim();\r\n        const item = document.getElementById('regItem').value.trim();\r\n        if (!user || !price || !item) {\r\n          document.getElementById('regStatus').textContent = \"\ubaa8\ub4e0 \ud56d\ubaa9\uc744 \uc785\ub825\ud558\uc138\uc694.\";\r\n          return;\r\n        }\r\n        API.register(user, price, item).then(res => {\r\n          const map = {\r\n            ok: \"\ub4f1\ub85d \uc131\uacf5!\",\r\n            invalid: \"\u274c \uc785\ub825\uac12\uc744 \ub2e4\uc2dc \ud655\uc778\ud558\uc138\uc694. (\uc544\uc774\ud15c \uae00\uc790\/\uac00\uaca9\uc740 \uc22b\uc790)\"\r\n          };\r\n          document.getElementById('regStatus').textContent = map[res] || (\"\ub4f1\ub85d \uc2e4\ud328 (\" + res + \")\");\r\n          if (res === 'ok') {\r\n            document.getElementById('regUser').value = '';\r\n            document.getElementById('regPrice').value = '';\r\n            document.getElementById('regItem').value = '';\r\n            fetchData();\r\n          }\r\n        }).catch(err=>{\r\n          console.error(err);\r\n          document.getElementById('regStatus').textContent = '\ub4f1\ub85d \uc2e4\ud328(\ub124\ud2b8\uc6cc\ud06c)';\r\n        });\r\n      };\r\n\r\n      window.deleteRow = function (rowKey) {\r\n        if (!confirm(`\ubc88\ud638 ${rowKey} \ud589 \uc804\uccb4\ub97c \uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?`)) return;\r\n        API.deleteRow(rowKey).then(res => {\r\n          if (res === 'ok') fetchData();\r\n          else alert(\"\uc0ad\uc81c \uc2e4\ud328: \" + res);\r\n        }).catch(err=>{\r\n          console.error(err);\r\n          alert(\"\uc0ad\uc81c \uc2e4\ud328\");\r\n        });\r\n      };\r\n    })();\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kbs4208.mycafe24.com\/index.php?rest_route=\/wp\/v2\/pages\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kbs4208.mycafe24.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kbs4208.mycafe24.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kbs4208.mycafe24.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kbs4208.mycafe24.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=112"}],"version-history":[{"count":1,"href":"https:\/\/kbs4208.mycafe24.com\/index.php?rest_route=\/wp\/v2\/pages\/112\/revisions"}],"predecessor-version":[{"id":113,"href":"https:\/\/kbs4208.mycafe24.com\/index.php?rest_route=\/wp\/v2\/pages\/112\/revisions\/113"}],"wp:attachment":[{"href":"https:\/\/kbs4208.mycafe24.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}