[JavaScript] 나만 쓰는 맛집 리스트 만들기 (카드 UI 구현) - 4. 구글 시트 UPDATE

 

지난포스팅에서 못했던 수정모드 추가! 

맛집 리스트 카드에서 수정 버튼을 클릭하면, 신규등록창을 수정모드로 바꾸고 수정할수 있게 했다.

---

1. Apps Script 에 수정모드 추가

지난 포스팅에서 삭제모드 추가한것과 동일하게, Apps Script의 Code.gs를 수정한다.

시트의 컬럼순서는 아래와 같다.

1: id
2: name
3: category
4: price
5: comment
6: createdAt
7: createdBy

 

doPost(e) 함수 내부의 기존 로직 아래에 update 분기를 추가한다.

 // 수정
  if (data.action === "update") {
  const rows = sheet.getDataRange().getValues();

  for (let i = 1; i < rows.length; i++) {
    if (String(rows[i][0]) === String(data.id)) {
      sheet.getRange(i + 1, 2).setValue(data.name);
      sheet.getRange(i + 1, 3).setValue(data.category);
      sheet.getRange(i + 1, 4).setValue(data.price);
      sheet.getRange(i + 1, 5).setValue(data.comment);
      sheet.getRange(i + 1, 7).setValue(data.createdBy);
      break;
    }
  }

  return ContentService
    .createTextOutput(JSON.stringify({ result: "updated" }))
    .setMimeType(ContentService.MimeType.JSON);
}

위의 코드를 추가로 작성해주고 저장후 지난 포스팅과 같이 새버전으로 배포해주면 수정 입력 받을 준비는 끝

 

2-1. 프론트 수정 (카드에 수정 버튼 추가)

맛집 리스트 카드에 '수정' 버튼을 삭제 버튼 옆에 추가했다.

 

script.js의 renderList() 에서 card.innerHTML 부분을 다음과 같이 변경한다.

 card.innerHTML = `
  <div class="card-header">
    <div class="title">${item.name}</div>
    ${item.price ? `<div class="price">${item.price}원</div>` : ""}
  </div>

  <div class="category">${categoryLabel[item.category]}</div>
  <div class="desc">${item.comment || ""}</div>

  <button class="delete-btn" onclick="deleteItem('${item.id}')">
    삭제
  </button>
  <button class="edit-btn" onclick="editItem('${item.id}')">수정</button>
`;

 

수정버튼 css도 추가

.edit-btn {
  margin-top: 10px;
  margin-left: 6px;
  padding: 6px 10px;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  background: #4dabf7;
  color: white;
  cursor: pointer;
}

.edit-btn:hover {
  background: #339af0;
}

 

추가로,

기존에 있던 입력 영역에 모드를 추가해서 수정버튼을 클릭하면 기존 입력 영역에 데이터를 불러와 수정할 수 있게 구현할것이기 때문에 우선 기존 입력 영역에 수정모드를 구분할수 있는 div를 추가한다.

index.html의 입력 폼 위에 아래 div를 추가한다.

<div id="editStatus" class="edit-status"></div>

 

 

2-2. 프론트 수정 (수정 기능 추가) 

이제 script.js에 수정 기능을 추가해본다. 

상태 전역변수를 상단에 추가한다

let editMode = false;
let editId = null;

 

수정기능을 하는 editItem 함수를 아래와 같이 추가한다.

async function editItem(id) {
  const data = await fetchData();

  const item = data.find((v) => String(v.id) === String(id));

  if (!item) {
    alert("데이터를 찾지 못했어요");
    return;
  }

  document.getElementById("editStatus").innerText = "✏️ 수정 모드입니다";
  document.getElementById("editStatus").style.display = "block";

  document.querySelector(".add-panel").classList.add("edit-mode");
  document.querySelector(".primary-btn").innerText = "수정 완료하기";

  document.getElementById("nameInput").value = item.name;
  document.getElementById("categoryInput").value = item.category;
  document.getElementById("priceInput").value = item.price || "";
  document.getElementById("commentInput").value = item.comment || "";
  document.getElementById("createdByInput").value = item.createdBy || "";

  editMode = true;
  editId = id;

  document.querySelector(".add-panel").scrollIntoView({ behavior: "smooth" });
}

 

 

 

기존 submit로직도 수정이 필요하다. 

submit영역을 다음과 같이 수정한다.

document
  .getElementById("addRestaurantForm")
  .addEventListener("submit", async function (e) {
    e.preventDefault();

    const data = {
      id: editMode ? editId : Date.now().toString(),
      name: document.getElementById("nameInput").value,
      category: document.getElementById("categoryInput").value,
      price: document.getElementById("priceInput").value || "0",
      comment: document.getElementById("commentInput").value,
      createdAt: new Date().toISOString(),
      createdBy: document.getElementById("createdByInput").value || "익명",
      action: editMode ? "update" : "create",
    };

    try {
      await fetch(API_URL, {
        method: "POST",
        body: JSON.stringify(data),
      });

      alert(editMode ? "수정 완료!" : "등록 완료!");

      this.reset();

      // 상태 초기화 
      editMode = false;
      editId = null;

      // UI 원복 
      document.getElementById("editStatus").style.display = "none";
      document.querySelector(".add-panel").classList.remove("edit-mode");
      document.querySelector(".primary-btn").innerText = "맛집 추가하기";

      renderList();
    } catch (err) {
      console.error(err);
      alert("실패 😢");
    }
  });

id값은 수정모드일때는 기존 id가 되어야 하고,

action값도 수정모드일때는 update가 되어야 한다.

수정 후에는 상태값도 초기화 하고, UI도 기존 입력모드로 원복해준다.

 

 

여기까지 하면 수정 모드도 끝!

---

 

추후 포스팅할 추가사항 : 

- 리뷰 시스템 (별점, 한줄평)

- 필터링 (카테고리, 키워드 검색 등)