📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈 - 사용자 이벤트 처리 – 날짜 선택과 월 이동 기능 구현

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈 - 사용자 이벤트 처리 – 날짜 선택과 월 이동 기능 구현

---

지난 편에서 우리는 기본 달력 UI를 구성하고 현재 월의 날짜를 화면에 표시하는 기능을 만들었습니다.
이제는 실제로 동작하는 캘린더, 즉
✅ 날짜를 클릭하면 이벤트가 발생하고,
✅ 좌우 버튼을 누르면 이전/다음 달로 이동할 수 있는
기능들을 추가하겠습니다.

---

🎯 목표

• 날짜 클릭 이벤트 처리
• 이전/다음 달 이동 버튼 추가 및 상태 관리
• 클릭된 날짜의 시각적 강조

---

🧠 사용자 이벤트 설계 흐름

✅ 필요한 동작 목록

동작 설명

날짜 클릭	해당 날짜를 강조하고, 이후 기능과 연결
이전 달 클릭	현재 월에서 -1 이동
다음 달 클릭	현재 월에서 +1 이동

---

🛠️ 1. 상태를 관리할 수 있는 구조 만들기

✅ CalendarState 인터페이스 추가

// src/types.ts
export interface CalendarState {
  year: number;
  month: number;
  selectedDate?: Date;
}

---

📦 2. 월 전환 버튼 추가

✅ HTML 템플릿 수정

// src/components/Calendar.ts (renderCalendar 내부)
  target.innerHTML = `
    <div class="calendar-header">
      <button class="prev-month">◀</button>
      <h2>${year}년 ${month + 1}월</h2>
      <button class="next-month">▶</button>
    </div>
    <div class="calendar-grid">
      ${["일", "월", "화", "수", "목", "금", "토"]
        .map((d) => `<div class="calendar-cell header">${d}</div>`)
        .join("")}
      ${matrix
        .flat()
        .map((date) => {
          const day = date?.getDate();
          const inMonth = date?.getMonth() === month;
          const dateStr = date?.toISOString();
          return `<div class="calendar-cell${inMonth ? "" : " out"}" data-date="${dateStr}">${day}</div>`;
        })
        .join("")}
    </div>
  `;

---

🧩 3. 이벤트 핸들러 연결

✅ attachCalendarEvents 함수 정의

반응형

// 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) {
        state.selectedDate = new Date(dateStr);
        rerender();
      }
    });
  });

  // 월 이동 버튼
  const prevBtn = target.querySelector(".prev-month");
  const nextBtn = target.querySelector(".next-month");

  prevBtn?.addEventListener("click", () => {
    if (state.month === 0) {
      state.month = 11;
      state.year -= 1;
    } else {
      state.month -= 1;
    }
    rerender();
  });

  nextBtn?.addEventListener("click", () => {
    if (state.month === 11) {
      state.month = 0;
      state.year += 1;
    } else {
      state.month += 1;
    }
    rerender();
  });
}

---

🖼️ 4. 선택된 날짜 스타일 강조

✅ 선택된 날짜 비교 추가

// 날짜 셀 렌더링 부분 (추가)
const isSelected = date?.toDateString() === state.selectedDate?.toDateString();
return `<div class="calendar-cell${inMonth ? "" : " out"}${isSelected ? " selected" : ""}" data-date="${dateStr}">${day}</div>`;

---

🎨 5. CSS 스타일 추가

.calendar-cell.selected {
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
}

.calendar-header button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 1rem;
}

---

🚀 6. index.ts 업데이트

import { renderCalendar, attachCalendarEvents } from "./components/Calendar";
import { CalendarState } from "./types";

const root = document.getElementById("calendar-root");
const state: CalendarState = {
  year: new Date().getFullYear(),
  month: new Date().getMonth(),
};

function render() {
  if (root) {
    renderCalendar(root, state.year, state.month, state);
    attachCalendarEvents(root, state, render);
  }
}

render();

---

✅ 결과 확인

npm run dev

• 날짜 클릭 시 스타일이 강조됨
• ◀, ▶ 버튼으로 월 이동 가능
• 선택된 날짜는 유지되며 강조 표시됨

---

📚 참고자료

• JavaScript Date 객체
• DOM Event Handling

 

---

다음 편 예고:
📘 6편 – 일정 데이터 관리하기: 이벤트 추가 및 데이터 저장 구조 설계
사용자가 선택한 날짜에 일정을 추가하고 관리하는 기능을 구현해봅니다! 🗓️
드디어 “진짜 일정 플러그인”으로 진화하는 단계입니다!