diff --git a/js/sub4.js b/js/sub4.js
new file mode 100644
index 0000000..c657bfe
--- /dev/null
+++ b/js/sub4.js
@@ -0,0 +1,67 @@
+const url = "restAPI/phone.php";
+
+const result = fetch(url)
+.then(res => res.json())
+.then(data => {
+ if(data.statusCd !== "200") {
+ alert("조회에 실패했습니다");
+
+ return location.href = "index.html";
+ };
+
+ return [...data.items].reduce(((item, { sn, deptNm, name, telNo }) => {
+ item[deptNm] = [...item[deptNm] || [], {sn, name, telNo}]
+
+ return item;
+ }), {});
+});
+
+const $tabBox = document.querySelector("#tab-box");
+const $phoneBox = document.querySelector("#phone-box");
+
+result.then(items => {
+ const tabs = Object.keys(items);
+
+ tabs.forEach(tab => {
+ $tabBox.insertAdjacentHTML("beforeend", `
${tab}`);
+
+ $phoneBox.insertAdjacentHTML("beforeend", `
+
+ `);
+
+ items[tab].forEach(item => {
+ const $phone = [...$phoneBox.children].filter(element => element.dataset.tab === tab)[0];
+ $phone.children[1].insertAdjacentHTML("beforeend", `
+
+
${item["name"]}
+ ${item["telNo"]}
+
+ `);
+ });
+ });
+});
+
+$tabBox.addEventListener("click", ({ target }) => {
+ if(!target.classList.contains("tab")) return false;
+
+ const tabs = [...target.parentNode.children];
+ const index = tabs.findIndex(element => element === target);
+
+ tabs.forEach(element => element.classList.remove("active-tab"));
+ tabs[index].classList.add("active-tab");
+
+ if(target.getAttribute("name") === "all") {
+ return [...$phoneBox.children].forEach(element => element.style.display = "flex");
+ };
+
+ const $phone = [...$phoneBox.children].filter(element => element.dataset.tab === tabs[index].textContent)[0];
+ [...$phoneBox.children].forEach(element => element.style.display = "none");
+
+ $phone.style.display = "flex";
+});
\ No newline at end of file