📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈 - 일정 삭제 및 수정 기능 추가하기 – 인터랙션 강화

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈

✅ 8편: 일정 삭제 및 수정 기능 추가하기 – 인터랙션 강화

---

지난 글에서는 LocalStorage 연동을 통해 일정 데이터를 저장하고 유지하는 기능을 추가했습니다.
이번 글에서는 사용자가 입력한 일정을 수정하거나 삭제할 수 있는 기능을 구현합니다.

지금까지 일정은 추가만 가능했지만,
실제 사용 가능한 캘린더가 되려면 삭제 및 수정 기능도 필수적으로 필요합니다.

---

🎯 목표

• 일정 목록에서 특정 일정을 삭제
• 일정 클릭 시 수정 가능
• LocalStorage 업데이트로 새로고침 후에도 반영

---

📦 1. 일정 수정 및 삭제 로직 만들기

✅ handleEditEvent() 함수 추가

// src/components/EventUtils.ts
import { CalendarEvent, CalendarState } from "../types";
import { saveEvents } from "../utils/EventStorage";

export function handleEditEvent(eventId: string, state: CalendarState): void {
  const event = state.events.find((e) => e.id === eventId);
  if (!event) return;

  const newTitle = prompt("새 일정 제목을 입력하세요:", event.title);
  if (!newTitle) return;

  event.title = newTitle;
  saveEvents(state.events); // 🧠 수정된 데이터 저장
}

---

✅ handleDeleteEvent() 함수 추가

반응형

export function handleDeleteEvent(eventId: string, state: CalendarState): void {
  const confirmed = confirm("이 일정을 삭제하시겠습니까?");
  if (!confirmed) return;

  state.events = state.events.filter((e) => e.id !== eventId);
  saveEvents(state.events); // 🧠 삭제 후 저장
}

---

🖼️ 2. 일정 UI에 수정/삭제 기능 추가

✅ 캘린더 셀 안에 수정 및 삭제 이벤트 추가

// src/components/Calendar.ts
import { handleEditEvent, handleDeleteEvent } from "./EventUtils";

const eventHTML = eventsForDate
  .map(
    (e) => `
      <div class="event" data-id="${e.id}">
        ${e.title}
        <button class="edit-btn" data-id="${e.id}">✏️</button>
        <button class="delete-btn" data-id="${e.id}">🗑️</button>
      </div>
    `
  )
  .join("");

---

✅ 3. 수정 및 삭제 이벤트 핸들러 연결

// src/components/Calendar.ts
export function attachCalendarEvents(
  target: HTMLElement,
  state: CalendarState,
  rerender: () => void
) {
  // 기존 날짜 클릭 핸들러 유지
  const cells = target.querySelectorAll(".calendar-cell:not(.header)");
  cells.forEach((cell) => {
    cell.addEventListener("click", () => {
      const dateStr = cell.getAttribute("data-date");
      if (dateStr) {
        const date = new Date(dateStr);
        state.selectedDate = date;
        rerender();
      }
    });
  });

  // 수정 버튼 이벤트 연결
  target.querySelectorAll(".edit-btn").forEach((btn) => {
    btn.addEventListener("click", (e) => {
      const eventId = (e.target as HTMLElement).getAttribute("data-id");
      if (eventId) {
        handleEditEvent(eventId, state);
        rerender();
      }
    });
  });

  // 삭제 버튼 이벤트 연결
  target.querySelectorAll(".delete-btn").forEach((btn) => {
    btn.addEventListener("click", (e) => {
      const eventId = (e.target as HTMLElement).getAttribute("data-id");
      if (eventId) {
        handleDeleteEvent(eventId, state);
        rerender();
      }
    });
  });
}

---

🎨 4. 스타일 업데이트 (선택 사항)

.event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: #f8f8f8;
  margin-top: 4px;
  border-radius: 4px;
}

.edit-btn,
.delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  margin-left: 6px;
}

---

🚀 5. 테스트

npm run dev

🛠️ 테스트 시나리오

✅ 일정 클릭 후 수정 가능:

1. 일정 입력 후, ✏️ 버튼을 클릭
2. 새로운 제목을 입력
3. 일정이 업데이트됨

✅ 일정 삭제 가능:

1. 일정 입력 후, 🗑️ 버튼을 클릭
2. 확인 창에서 "확인" 선택
3. 일정이 삭제됨

✅ 새로고침 후 데이터 유지:

• 수정 및 삭제 후에도 LocalStorage에 반영됨을 확인

---

📚 참고자료

• MDN – JavaScript 이벤트 바인딩
• LocalStorage 활용하기

 

---

다음 편 예고:
📘 9편 – 코드 리팩토링: 플러그인 구조화 및 유지보수 최적화
지금까지 만든 기능들을 더 깔끔하고 확장 가능한 코드 구조로 개선해봅니다! 🚀
더 좋은 캘린더 플러그인을 만들기 위해 한 단계 업그레이드! 🎯