일정 캘린더 리디자인

배경

board.html의 일정 게시판 캘린더(#calendar)는 FullCalendar가 아니라 assets/js/board.js의 renderCalendar()가 직접 만드는 순수 HTML <table>이다. 현재 문제:

• 각 날짜 셀이 height:60px 인라인 스타일로 고정되어 있어, 이벤트가 2~3개만 있어도 잘리거나 넘친다.
• table table-bordered 스타일의 진한 격자선 때문에 표 느낌이 강하다.
• 오늘 날짜, 주말 강조 등 시각적 신호가 전혀 없다.
• 이벤트가 파란 사각 배지(background:#0d6efd)로 딱딱하게 표시된다.
• 월 이동 버튼(◀▶)이 부트스트랩 기본 버튼 스타일 그대로다.

assets/css/board.css에는 사용되지 않는 .fc-* (FullCalendar) 규칙이 남아있음 — 실제로는 커스텀 테이블이므로 이 죽은 CSS는 정리 대상.

목표

• 데스크톱에서 볼 때 셀이 납작하지 않고 정사각형에 가깝게, 이벤트가 한눈에 들어오게.
• 표가 아니라 카드형 캘린더로 보이도록 시각적으로 부드럽게.
• 오늘 날짜, 주말 강조로 스캔하기 쉽게.
• 이벤트가 많은 날은 최대 2개만 미리 보여주고 나머지는 “+N”으로 축약, 클릭 시 팝오버로 전체 목록 표시.

아키텍처

기존과 동일하게 의존성 추가 없이 순수 JS/CSS로 구현한다 (현재도 커스텀 렌더링이므로 이 접근이 일관적).

• 레이아웃: <table> → CSS Grid (display:grid; grid-template-columns: repeat(7, 1fr))로 교체. 각 셀은 aspect-ratio: 1 / 0.85 정도로 지정해 뷰포트 너비에 비례해 커지도록 하고, height:60px 고정을 제거한다.
• 셀 스타일: 진한 격자선 대신 옅은 1px 헤어라인 구분선(border-bottom/border-right만, 바깥 테두리는 카드 라운드 처리)으로 교체.
• 오늘 강조: 오늘 날짜 셀에 .is-today 클래스 → 배경색 tint + 날짜 숫자에 원형 배지.
• 주말 강조: 일요일 열은 빨간 계열, 토요일 열은 파란 계열 텍스트 색상 (요일 헤더 + 날짜 숫자).
• 이벤트 렌더링: 셀당 최대 2개 이벤트 pill 표시 (배경색은 은은한 톤, 사각 배지보다 둥글고 얇게). 3개 이상이면 +N개 칩 표시.
• 팝오버: 날짜 셀 또는 +N 칩 클릭 시, 해당 셀 바로 아래에 작은 드롭다운 패널을 렌더링해 그 날의 전체 이벤트 목록(제목 + 클릭 시 /post/?id= 이동)을 보여준다. 다른 곳 클릭 시 닫힘. 팝오버는 그리드 레이아웃 밖에 position:absolute로 배치해 다른 셀을 밀어내지 않는다.
• 월 이동 버튼: 부트스트랩 아웃라인 버튼 대신 미니멀한 원형 아이콘 버튼으로 교체 (기존 다크 팔레트 #1a1a1a 톤 유지).
• 정리: board.css의 미사용 .fc-* 규칙 삭제.

데이터 흐름

변경 없음. loadEvents()가 Firestore에서 이벤트를 가져오고, renderCalendar(events)가 월별로 필터링해 그리는 기존 흐름을 그대로 따른다. 팝오버는 이미 메모리에 있는 monthEvents[day] 배열을 그대로 사용하며 추가 데이터 페칭 없음.

에러 처리

기존과 동일 — 이벤트 로드 실패 시 빈 배열로 폴백하는 로직(loadEvents catch)은 그대로 유지. 팝오버는 이벤트가 없는 날은 열리지 않도록(빈 셀 클릭 무시) 처리.

테스트

수동 브라우저 확인:

• 이벤트 0개/1개/2개/3개 이상인 날짜 각각에서 셀 표시와 “+N” 동작 확인.
• 팝오버 열기/바깥 클릭으로 닫기.
• 오늘 날짜, 토요일/일요일 강조 확인.
• 월 이동 버튼 동작 확인 (기존 로직 변경 없음).
• 데스크톱 폭(예: 1440px)에서 셀 높이가 납작하지 않은지 확인.

자동화 테스트는 없음 (프로젝트에 기존 JS 테스트 인프라 없음, 시각적 회귀이므로 수동 확인이 적절).