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

✅ 4편: 캘린더 플러그인 구조 설계 – 날짜 렌더링을 위한 UI 기본 구성

이번 편에서는 드디어 본격적으로 캘린더 플러그인의 UI 구조를 설계하고,
기본 날짜 렌더링 기능을 구현해보겠습니다.
우리는 이미 TypeScript 기반의 개발 환경과 Webpack 설정을 완료했으므로,
이번 글부터는 **“화면에 달력을 출력하는 실질적인 기능 구현”**에 집중할 수 있습니다.

🎯 목표

한 달 달력 구조를 설계하고 렌더링하는 함수 만들기
Date, TypeScript, DOM 조작을 활용해 UI 구성
캘린더 데이터를 화면에 그릴 수 있는 최소 기능 완성

🧠 캘린더 기본 구조 이해하기

✅ 필요한 구성 요소

요소 설명

연/월 헤더	현재 표시 중인 날짜
요일 헤더	일~~토 혹은 월~~일
날짜 셀	한 달 간의 날짜를 그리드 형태로 표시
이전/다음 달 이동	월 전환 기능

📦 1. 폴더 및 파일 구조 확장

src/
├── components/
│   └── Calendar.ts
├── types.ts
└── index.ts

✍️ 2. 달력 렌더링을 위한 유틸 함수 만들기

✅ getCalendarMatrix – 날짜 그리드 생성

// src/components/Calendar.ts
export function getCalendarMatrix(year: number, month: number): (Date | null)[][] {
  const matrix: (Date | null)[][] = [];
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const startWeekDay = firstDay.getDay(); // 일:0, 월:1, ..., 토:6

  let current = new Date(year, month, 1 - startWeekDay);
  for (let week = 0; week < 6; week++) {
    const weekRow: (Date | null)[] = [];
    for (let day = 0; day < 7; day++) {
      weekRow.push(new Date(current));
      current.setDate(current.getDate() + 1);
    }
    matrix.push(weekRow);
  }

  return matrix;
}

6주(최대) * 7일 = 42칸의 그리드 달력을 생성합니다.
이전 달, 다음 달의 날짜도 포함하여 날짜 위치를 맞춥니다.

🖼️ 3. 캘린더 UI DOM 구성하기

✅ renderCalendar 함수 만들기

// src/components/Calendar.ts
export function renderCalendar(target: HTMLElement, year: number, month: number): void {
  const matrix = getCalendarMatrix(year, month);

  target.innerHTML = `
    <div class="calendar-header">
      <h2>${year}년 ${month + 1}월</h2>
    </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;
          return `<div class="calendar-cell${inMonth ? "" : " out"}">${day}</div>`;
        })
        .join("")}
    </div>
  `;
}

🧩 4. 캘린더 초기화 및 실행

✅ index.ts

import { renderCalendar } from "./components/Calendar";

const root = document.getElementById("calendar-root");
if (root) {
  const today = new Date();
  renderCalendar(root, today.getFullYear(), today.getMonth());
}

🎨 5. CSS 스타일 예시

✅ dist/style.css

.calendar-header {
  text-align: center;
  margin-bottom: 1rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-cell {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  min-height: 40px;
}

.calendar-cell.header {
  font-weight: bold;
  background: #f0f0f0;
}

.calendar-cell.out {
  color: #999;
}

✅ HTML에 연결

<link rel="stylesheet" href="style.css">

✅ 결과 확인

npm run dev

http://localhost:8080 접속 시, 한 달치 달력이 그리드 형태로 잘 렌더링되면 성공!

📚 참고자료

다음 편 예고:
📘 5편 – 사용자 이벤트 추가: 날짜 선택, 월 이동 기능 구현
화면에 달력을 그렸다면, 이제는 **“동작하는 달력”**을 만들어야죠.
이벤트 처리, DOM 바인딩 등 실전으로 들어갑니다! 🙌