← 인계 문서 목록

퍼블리싱 인계 변경 요약 — 2026-08-28

오늘 커밋 5건. HTML 마크업 변경은 없음 — 이번 회차는 예외적으로 동작·스타일 인계(SCSS/JS)만 정리합니다. 개발팀이 Thymeleaf 옮길 때 "화면 위 동작이 이렇게 바뀌었다" 를 잃지 않도록 하는 게 목적.

대상 커밋 5건 · 크게 A) 일자피커 "연도 → 월 그리드" 확장 + B) 테이블 툴바 "N건" 하단정렬 원복 + C) 벤더 flatpickr 화살표 위치.

※ 이번 회차는 마크업 변경이 없어 파일별 매트릭스 대신 동작·규칙 서술 위주. A는 src/js/ui/_common.js의 datepicker 초기화 로직에 부착 — 마크업(data-datepicker) 규약 그대로.

LOG오늘 커밋 이력

커밋	메시지	주 파일	영역
`9ef81f8`	fix : datePick 개선	`_common.js` · `_datepicker.scss`	A
`917b7d8`	datepick 스타일 개선	`_datepicker.scss`	A
`1ff43c3`	fix : datepicker 동작 개선	`_common.js`	A
`7617f64`	fix: date picker 정렬 수정	`vendor/_flatpickr.scss` · `_datepicker.scss`	C
`c386f89`	fix : 테이블 상단 n건 정렬 수정	pages 5개 SCSS	B

A일자피커 — "연도 클릭 → 월 그리드" 확장

기존 data-datepicker는 좌·우 화살표로만 월 단위 이동이 가능해 몇 년치 뒤로 가기 어려웠음. 헤더의 연도(예: 2026)를 클릭하면 3×4 월 그리드로 전환(data-monthpicker와 동일 시각)되고, 월 셀 클릭 시 해당 Y.m의 일 뷰로 복귀하도록 확장. 마크업/속성 규약은 변경 없음.

적용 범위

[data-datepicker] — 단일 일자 (전 페이지)
[data-daterange] 안의 [data-datepicker-start] / [data-datepicker-end] — 범위(시작 ≤ 종료 연동 그대로 유지)
[data-monthpicker] — 부착 안 함 (자체 월 그리드 이미 있음)

사용자 흐름

일 뷰 → 헤더의 연도 텍스트 클릭 → 월 뷰 (요일/일자 감춤, 12개 월 셀 표시) → 이 상태에서 좌·우 화살표는 ±1년 (일 뷰의 ±1월과 다름) → 원하는 월 셀 클릭 → 해당 Y.m로 이동, 일 뷰 복귀. 캘린더가 닫힐 때 다음 오픈은 항상 일 뷰.

구현 파일

파일 변경 요지

파일	변경 요지
`src/js/ui/_common.js` (datepicker 초기화 블록)	`attachYearJump(fp)` 헬퍼 추가. `onReady`에서 부착. `input.cur-year`를 `readonly`로 만들고 mousedown에서 `.is-monthview` 토글 `.flatpickr-rContainer`에 `.flatpickr-monthSelect-months.flatpickr-dp-monthgrid` + 12개 `.flatpickr-monthSelect-month[data-month]` 셀 동적 생성 월 셀 click → `fp.changeMonth(mo - fp.currentMonth, true)` + 월 뷰 종료 화살표는 월 뷰일 때만 capture 단계에서 mousedown+click 을 모두 삼켜 벤더 기본(`changeMonth(±1)`) 무력화 후 `fp.changeYear(±1)` 실행. click 만 잡으면 벤더가 함께 실행돼 연도 −1 + 월 −1 이 이중 적용되는 버그가 있어 반드시 둘 다 캡처. `onYearChange`/`onMonthChange`에 `syncCells` 훅 추가(외부 조작 대비) `data-yearjump="on"` 마커로 이중 부착 방지
`src/scss/modules/_datepicker.scss`	`.numInputWrapper`의 `pointer-events: none` 제거 (연도 클릭 가능하게) `input.cur-year`: `cursor: pointer` + `user-select: none` + `caret-color: transparent` + `::selection { background: transparent }` — 벤더가 클릭 시 `.select()`로 텍스트를 전체선택하며 생기는 파란 하이라이트 잔재 제거 `.flatpickr-dp-monthgrid` 기본 `display: none` `.flatpickr-calendar.is-monthview`: 요일·일자 `display: none`, 헤더의 `.cur-month` `visibility: hidden`(중앙 정렬 유지), 월 그리드 `display: flex` 기존 `.flatpickr-monthSelect-month` 스타일을 그대로 재사용 — 월 뷰의 셀 색·간격·선택 상태 시각은 `data-monthpicker`와 100% 동일

src/js/ui/_common.js
(datepicker 초기화 블록)

attachYearJump(fp) 헬퍼 추가. onReady에서 부착.

input.cur-year를 readonly로 만들고 mousedown에서 .is-monthview 토글
.flatpickr-rContainer에 .flatpickr-monthSelect-months.flatpickr-dp-monthgrid + 12개 .flatpickr-monthSelect-month[data-month] 셀 동적 생성
월 셀 click → fp.changeMonth(mo - fp.currentMonth, true) + 월 뷰 종료
화살표는 월 뷰일 때만 capture 단계에서 mousedown+click 을 모두 삼켜 벤더 기본(changeMonth(±1)) 무력화 후 fp.changeYear(±1) 실행. click 만 잡으면 벤더가 함께 실행돼 연도 −1 + 월 −1 이 이중 적용되는 버그가 있어 반드시 둘 다 캡처.
onYearChange/onMonthChange에 syncCells 훅 추가(외부 조작 대비)
data-yearjump="on" 마커로 이중 부착 방지

src/scss/modules/_datepicker.scss

.numInputWrapper의 pointer-events: none 제거 (연도 클릭 가능하게)
input.cur-year: cursor: pointer + user-select: none + caret-color: transparent + ::selection { background: transparent } — 벤더가 클릭 시 .select()로 텍스트를 전체선택하며 생기는 파란 하이라이트 잔재 제거
.flatpickr-dp-monthgrid 기본 display: none
.flatpickr-calendar.is-monthview: 요일·일자 display: none, 헤더의 .cur-month visibility: hidden(중앙 정렬 유지), 월 그리드 display: flex
기존 .flatpickr-monthSelect-month 스타일을 그대로 재사용 — 월 뷰의 셀 색·간격·선택 상태 시각은 data-monthpicker와 100% 동일

테스트 위치

/guide/datepicker — 4개 카드 모두에서 연도 클릭 → 월 뷰 → ±1년 → 월 클릭 → 일 뷰 복귀 확인
범위 카드(시작~종료): 각각 독립적으로 월 뷰 동작. 시작 ≤ 종료 연동은 그대로.

개발팀 유의사항

Thymeleaf 이관 시 마크업/속성(data-datepicker·data-datepicker-start/-end·data-monthpicker) 규약 변경 없음. JS·CSS만 재정의 시에도 이 규약을 유지해 주세요.
화살표 재매핑은 월 뷰(.is-monthview) 상태일 때만 적용 — 일 뷰 좌·우 화살표는 벤더 기본(±1월) 그대로.
월 뷰 진입 시 flatpickr-calendar에 .is-monthview 클래스가 붙는 것이 시각 스위치의 핵심 훅.

B테이블 툴바 "N건" 하단정렬 원복

앞선 회차에서 Figma "OP_table_resolute" 스펙에 맞춰 .table-toolbar { align-items: flex-end } 로 "총 N건" 텍스트를 등록 버튼과 하단정렬했었으나, 이번에 그 규칙을 주석 처리(비활성화) — flex 기본(시작 정렬)로 되돌림.

파일 (src/scss/pages/)	변경
`faq.scss`	`.table-box .table-toolbar { align-items: flex-end }` → 주석 처리
`user-admin.scss`	동상 (같은 셀렉터, 규칙 주석 처리)
`content/manual-manage.scss`	`.table-toolbar` 내 `align-items: flex-end` 만 주석 처리 (내부 `.count { padding-bottom: 0 }` 등은 유지)
`content/trouble-manage.scss`	동상
`kms/keygen.scss`	별도 변경 동봉: 스텝퍼/콘텐츠 카드 padding 조정 `.kg-stepper-card` padding `28px 40px` → `24px 42px 24px 24px` `.kg-card` padding `32px 40px` → `24px`

개발팀 유의: 위 페이지들 툴바에서 "N건" 텍스트와 우측 등록 버튼의 수직 정렬이 이전(hand-off 이전) 기본값으로 돌아갑니다. Figma 최신본이 items-end 를 요구하지 않는 방향으로 정정됨.

Cflatpickr 벤더 — prev/next 화살표 위치 정렬

기존엔 modules/_datepicker.scss에서 left: 36px / right: 36px 로 오버라이드했었는데, 이번에 벤더 파일(src/scss/vendor/_flatpickr.scss)에 직접 반영하고 모듈 오버라이드는 제거. 오버라이드 계층이 줄어 예측이 쉬워짐.

파일	변경
`src/scss/vendor/_flatpickr.scss`	`.flatpickr-months .flatpickr-prev-month / .flatpickr-next-month`: `top: 0 → 4px` (세로 정렬) prev: `left: 0 → 36px` next: `right: 0 → 36px`
`src/scss/modules/_datepicker.scss`	중복이 된 `.flatpickr-prev-month { left: 36px }` / `.flatpickr-next-month { right: 36px }` 블록 제거. svg 색·hover 규칙만 남김.

개발팀 유의: 벤더 파일을 직접 손댔음. 향후 flatpickr 업그레이드 시 이 3줄 재확인 필요.