📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈 - 일정 데이터 관리하기 – 이벤트 추가 및 저장 구조 설계

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈 - 일정 데이터 관리하기 – 이벤트 추가 및 저장 구조 설계

---

이번 편에서는 캘린더 플러그인에 꼭 필요한 기능인
“일정(Event)”을 등록하고, 저장하며, 렌더링하는 데이터 흐름을 설계합니다.

이제 달력을 넘기고, 날짜를 선택할 수 있게 되었으니,
각 날짜에 일정을 추가하고 확인할 수 있어야겠죠?

---

🎯 목표

• 일정(Event) 데이터 구조 정의 및 저장 방식 설계
• 날짜를 클릭하여 일정을 추가하는 기능 구현
• 각 날짜별로 등록된 일정이 캘린더에 표시되도록 처리

---

🧠 데이터 설계

✅ CalendarEvent 타입 다시 확인

// src/types.ts
export interface CalendarEvent {
  id: string;
  title: string;
  date: string; // YYYY-MM-DD (ISO 형식)
}

✅ 상태에 이벤트 저장소 추가

반응형

export interface CalendarState {
  year: number;
  month: number;
  selectedDate?: Date;
  events: CalendarEvent[]; // 💡 추가됨
}

---

📦 1. 간단한 일정 추가 UI 구성

✅ prompt()를 활용한 입력 방식 (간단 MVP용)

// src/components/Calendar.ts
function handleAddEvent(date: Date, state: CalendarState): void {
  const title = prompt(`${date.toDateString()} 일정 제목을 입력하세요:`);
  if (!title) return;

  const newEvent: CalendarEvent = {
    id: crypto.randomUUID(),
    title,
    date: date.toISOString().split("T")[0],
  };

  state.events.push(newEvent);
}

---

🧩 2. 날짜 클릭 시 일정 추가 기능 연결

✅ 날짜 셀 클릭 이벤트에서 추가 실행

// src/components/Calendar.ts
import { handleAddEvent } from "./EventUtils";

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;
        handleAddEvent(date, state); // 일정 추가
        rerender();
      }
    });
  });

  // ... 생략된 월 전환 코드 유지
}

---

🖼️ 3. 날짜 셀에 일정 표시

✅ renderCalendar 내부에 일정 렌더링 추가

// 각 날짜 셀 안에서 일정 렌더링
const eventsForDate = state.events.filter(
  (e) => e.date === date?.toISOString().split("T")[0]
);
const eventHTML = eventsForDate
  .map((e) => `<div class="event">${e.title}</div>`)
  .join("");

return `<div class="calendar-cell${inMonth ? "" : " out"}${isSelected ? " selected" : ""}" data-date="${dateStr}">
  ${day}
  ${eventHTML}
</div>`;

---

🎨 4. CSS 스타일 추가

.event {
  font-size: 0.75rem;
  background-color: #f2f2f2;
  margin-top: 4px;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

---

🚀 5. index.ts 업데이트

✅ 초기 상태 정의에 events 포함

const state: CalendarState = {
  year: new Date().getFullYear(),
  month: new Date().getMonth(),
  events: [],
};

---

✅ 결과 확인

npm run dev

• 날짜 클릭 → prompt 창에 일정 입력
• 입력 완료 시 해당 날짜에 일정이 표시됨
• 일정 데이터는 현재 상태(state.events)에 저장됨 (페이지 새로고침 시 사라짐)

---

🔄 확장 아이디어

기능 설명

✅ 로컬스토리지에 저장	새로고침 후에도 일정 유지
✅ 일정 수정/삭제	일정 항목 클릭 시 수정/삭제 기능 제공
✅ 일정 카테고리	"업무", "개인" 등의 분류 추가
✅ 모달 입력창	prompt 대신 UI 기반 입력 폼 제공

---

📚 참고자료

• MDN – JavaScript Date
• MDN – prompt()

---

 

다음 편 예고:
📘 7편 – 일정 저장소 개선하기: LocalStorage 또는 JSON 파일 연동
페이지 새로고침에도 일정이 유지되도록 데이터 영속화(Storage) 기능을 추가합니다! 🧠
플러그인의 완성도가 한 단계 높아집니다!