์ด์ ์ฑํฐ์์ Schedule, Date Picker์ ๋ง๋ค์์ง๋ง ์(month)์ ์ด๋ํ ์ ์์ด ์ด์ , ๋ค์ ๋ฌ์ ๋ณผ ์ ์๋ ์์ฌ์์ด ์์์ต๋๋ค. ์ด๋ฒ ์ฑํฐ์์๋ ์ด๋ฅผ ๊ฐ์ ํ๊ณ ์ Shift Month Button์ ๋ง๋ค์ด๋ณด๊ฒ ์ต๋๋ค.
1. Calendar class์ ๊ธฐ๋ฅ ์ถ๊ฐํ๊ธฐ
Calendar class์ private filed์ ๋ณด๋ฉด #year, #month๊ฐ ์์ต๋๋ค. ์ด๋ฅผ ๋ฐํ์ผ๋ก ํ์ฌ ๋ , ์์ ํด๋นํ๋ ๋ ์ ๋ํ ๋ฐ์ดํฐ๋ฅผ getCalendarStorage() ๋ฉ์๋์์ ๋ง๋ค๊ณ ์์ต๋๋ค. ๋๋ฌธ์ ์(month)์ ์ด๋ํ๊ธฐ ์ํด์ #month ๊ฐ์ ์ ๋ฐ์ดํธํด์ผ ํฉ๋๋ค.
์ด์ ๊ด๋ จ๋ ๋ก์ง์ Calendar class์ ๋ค์๊ณผ ๊ฐ์ด ์ถ๊ฐํฉ๋๋ค.
// Calendar.ts
shiftMonth = (type: 'next' | 'prev' | 'today') => {
if (type === 'today') {
const today = new Date();
this.#year = today.getFullYear();
this.#month = today.getMonth() + 1;
return;
}
const changedMonth = this.#month + (type === 'next' ? +1 : -1);
if (changedMonth === 0) {
this.#year -= 1;
this.#month = 12;
return;
}
if (changedMonth === 13) {
this.#year += 1;
this.#month = 1;
return;
}
this.#month = changedMonth;
};
๋ฉ์๋ ์ด๋ฆ์ shiftMonth์ ๋๋ค. ๋งค๊ฐ๋ณ์๋ก๋ next, prev, today๋ง ๋ฐ์ ์ ์์ผ๋ฉฐ ๊ฐ๊ฐ, ๋ค์ ๋ฌ, ์ด์ ๋ฌ, ์ค๋์ด๋ผ๋ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค.
๊ฐ๊ฐ์ ํ์ ์ ๋ฐ๋ผ ์ด๋ป๊ฒ ์ฒ๋ฆฌ๋ฅผ ํ๋์ง ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์ฐ์ type์ด today์ผ ๋, ์ค๋ ๋ ์ง๋ฅผ ๊ตฌํด ๋ (year), ์(month)์ ๊ตฌํด #year, #month๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค.
ํ์ ์ด next์ผ ๋, #month์ +1์ prev์ผ ๋, #month์ -1๋ง ํด์๋ ์ด๋ํ๊ฒ ๋ ์(month)์ ์ ์ ์์๊น์? ๋ฐ์ ๋ง๊ณ ๋ฐ์ ํ๋ ธ๋ค๊ณ ํ ์ ์์ต๋๋ค.
๋ค์๊ณผ ๊ฐ์ ์ํฉ์ ์๊ฐํด๋ณด๊ฒ ์ต๋๋ค.
1. 12์์์ next๋ฅผ ํ๊ฒ ๋๋ค๋ฉด 13์์ด ๋๋ค.
2. 1์์์ prev๋ฅผ ํ๊ฒ ๋๋ค๋ฉด 0์์ด ๋๋ค.
13์๊ณผ 0์ ์ด์ํฉ๋๋ค. ๋๋ฌธ์ ์ด์ ๋ํ ์กฐ๊ฑด๋ฌธ ์ฒ๋ฆฌ๊ฐ ํ์ํฉ๋๋ค. ๊ทธ์ ์ next, prev๋ฅผ ๋ฐํ์ผ๋ก ์ด๋ํ๊ฒ ๋ ์(month)์ ๊ตฌํฉ๋๋ค. ์ ์ฝ๋์์๋ ํด๋น ์(month)์ changedMonth ๋ณ์์ ์ ์ฅํ๊ณ ์์ต๋๋ค.
์ดํ changedMonth๊ฐ 0์ด๋ผ๋ฉด ๋ (year)์ 1 ๊ฐ์์ํค๊ณ ์(month)์ 12์๋ก ํฉ๋๋ค. ๋ฐ๋๋ก changedMonth๊ฐ 12์ด๋ผ๋ฉด ๋ (year)์ 1 ์ฆ๊ฐ์ํค๊ณ ์(month)์ 1์๋ก ํฉ๋๋ค.
๋ง์ง๋ง์ผ๋ก 0, 12๊ฐ ์๋๋ผ๋ฉด ๋ (year)์ ๋ณ๊ฒฝํ์ง ์๊ณ ์(month)์ changedMonth๋ก ํฉ๋๋ค.
๋ก์ง ์์ฒด๋ ๊ฐ๋จํฉ๋๋ค. ๊ทธ๋ ๋ค๋ฉด shiftMonth ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด ๋ฒํผ์ ์ด์ด์ ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค.
๋ค์์ ์ด๋ฒ ์์ ์ ๋ํ commit์ ๋๋ค.
feat: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ 3 - Shift Month Button ๋ง๋ค๊ธฐ · nlom0218/vanilla-calenda
1. Calendar class์ ๊ธฐ๋ฅ ์ถ๊ฐํ๊ธฐ
github.com
2. Schedule์ Shift Month Button ๋ง๋ค๊ธฐ
์ ๋ ํ์ฌ ๋ฌ๋ ฅ์ ๋ , ์ ํ ์คํธ ์ค๋ฅธ์ชฝ ๋์ ๋ณด์ฌ์ฃผ๋ฉด ์ข๋ค๊ณ ์๊ฐํ๊ธฐ ๋๋ฌธ์ ๊ทธ๊ณณ์ Shift Month Button์ ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค.
ํ์ฌ ๋ฌ๋ ฅ์ ๋ , ์ ํ ์คํธ๋ Schedule class, renderCalendar ๋ฉ์๋์ yearMonthTemplate์ ์ํด ๊ทธ๋ ค์ง๋๋ค. ์ด template์ ๋ฒํผ์ ์ํ ์ฝ๋๋ฅผ ์์ฑํ๊ฒ ์ต๋๋ค.
๊ธฐ์กด์ yearMonthTemplate๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์์ ํฉ๋๋ค.
// Schedule.ts
const yearMonthTemplate = `
<div class="schedule-year-month">
<span>${this.#calendar.getYear()}๋
${this.#calendar.getMonth()}์</span>
<div class="shift-month-button-container">
<button class="shift-month-button shift-mont-today-button" data-type="today">TODAY</button>
<button class="shift-month-button shift-mont-arrow-button" data-type="prev">โ๏ธ</button>
<button class="shift-month-button shift-mont-arrow-button" data-type="next">โถ๏ธ</button>
</div>
</div>
`;
schedule-year-month์ ํฌ๊ฒ ๋ ๋ถ๋ถ์ผ๋ก ๋๋์์ต๋๋ค. ํ๋๋ ํ์ฌ ๋ฌ๋ ฅ์ ๋ , ์์ด๊ณ ๋ค๋ฅธ ํ๋๋ ๋ฌ๋ ฅ์ ์(month)์ ์ด๋์ํฌ ์ ์๋ ๋ฒํผ๋ค์ ๋๋ค.
css์ ๋ค์์ github ์ฃผ์์์ ํ์ธํ ์ ์์ต๋๋ค. shift-month-button์ ์ํ css๋ Date Picker Calendar์์๋ ๋ค์ ์ฐ์ด๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก ํ์ผ์ ๋๋์์ต๋๋ค. ์์ธํ ๋ด์ฉ์ ์ด๋ฒ ํํธ ํ๋จ์ commit๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์.
https://github.com/nlom0218/vanilla-calendar/blob/main/src/css/shiftMonthButton.css
์ด์ด์ ๋ฒํผ์๋
1. ์ค๋์ ํด๋นํ๋ ๋ , ์๋ก ์ด๋ํ ์ ์๋ TODAY ๋ฒํผ
2. ์ด์ ๋ฌ๋ก ์ด๋ํ ์ ์๋ โ๏ธ ๋ฒํผ
3. ๋ค์ ๋ฌ๋ก ์ด๋ํ ์ ์๋ โถ๏ธ ๋ฒํผ
์ด ์์ต๋๋ค. ์ด ๋ฒํผ๋ค์๋ data-set ์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ ํ์ฉํ์ฌ ๋ฒํผ์ type๋ฅผ ์ ์ฅํ๊ณ ์์ต๋๋ค. ์ด๋ ๊ฒ ์ ์ฅ๋ type์ Calendar ์ธ์คํด์ค์ shiftMonth ๋ฉ์๋์ ์ธ์๋ก ์ ๋ฌ๋ฉ๋๋ค.
์์ฑ๋ Shift Month Button์ ๋ชจ์ต์ ๋๋ค.
๋ค์์ด ์ด๋ฒ ์์ ์ ๋ํ commit์ ๋๋ค.
feat: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ 3 - Shift Month Button ๋ง๋ค๊ธฐ · nlom0218/vanilla-calenda
2. Schedule์ Shift Month Button ๋ง๋ค๊ธฐ
github.com
3. Shift Month Button์ Shift Month Event ๋ฑ๋กํ๊ธฐ
Shift Month Button์ด ์์ฑ๋์์ผ๋ ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํ์ฌ ์ค์ ๋ก ์(month)์ ์ด๋์ํค๋๋ก ํ๊ฒ ์ต๋๋ค.
๋จผ์ ํด์ผ ํ ์ผ์ Shift Month Button์ด ๊ทธ๋ ค์ง ํ ๋ฒํผ์ click ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ ๋๋ค. ์ด๋ฅผ ์ํด ๋ค์๊ณผ ์ด๋ฒคํธ ์ถ๊ฐ ๋ก์ง์ ์์ฑํฉ๋๋ค.
// Schedule.ts
private renderCalendar = () => {
// ...
$('.schedule-container').innerHTML = yearMonthTemplate + calendarTemplate;
this.registerEventListener();
};
private registerEventListener = () => {
$('.shift-month-button-container').addEventListener(
'click',
this.handleShiftMonth
);
};
์ด๋ ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ๋ ๋ฉ์๋๋ก renderCalendar ๋ฉ์๋์์ ํธ์ถํฉ๋๋ค.
์ดํ ํด๋ฆญ์ ๋ํ ์ด๋ฒคํธํธ๋ค๋ฌ ๋ฉ์๋๋ฅผ ๋ง๋ค์ด์ผ ํฉ๋๋ค. ์ ์ฝ๋์์ ์ ์ ์๋ฏ์ด ํด๋น ๋ฉ์๋๋ช ์ handleShiftMonth์ ๋๋ค. ์ด ๋ฉ์๋๋ ๋ค์๊ณผ ๊ฐ์ ๋ก์ง์ ๊ฐ์ง๋๋ค.
// Schedule.ts
private handleShiftMonth: EventListener = (event) => {
const button = event.target; // ์ฌ์ฉ์๊ฐ ํด๋ฆญํ ๋ฒํผ ํ์
if (!(button instanceof HTMLButtonElement)) return; // ํด๋ฆญํ ์์๊ฐ ButtonElement์ธ์ง ํ์ธ
const type = button.dataset.type as 'next' | 'prev' | 'today'; // data-set ๊ฐ ํ์ธ
this.#calendar.shiftMonth(type);
this.renderCalendar();
};
์ฌ์ฉ์๊ฐ ํด๋ฆญ ํ ๋ฒํผ์ data-set ๊ฐ์ ๋ฐํ์ผ๋ก type์ ๊ฐ์ ธ์จ ๋ค, Calendar ์ธ์คํด์ค์ shiftMonth ๋ฉ์๋์ ์ธ์๋ก ์ ๋ฌํด์ผํฉ๋๋ค. ์ด๋ ๊ฒ ๋จ์ผ๋ก์จ Calendar ์ธ์คํด์ค๋ ์์ฒด์ ์ผ๋ก ๋ (year), ์(month)์ ์ ๋ฐ์ดํธํ๊ฒ ๋ฉ๋๋ค.
๋ง์ง๋ง์ผ๋ก renderCalendar ๋ฉ์๋๋ฅผ ํธ์ถํ์ฌ ์๋ก์ด ๋ฌ๋ ฅ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ ์ด๋ฅผ ๋ฐํ์ผ๋ก ํ๋ฉด์ ๊ทธ๋ฆฌ๊ฒ ๋ฉ๋๋ค.
1. this.#calendar.shiftButton(type): Calendar ์ธ์คํด์ค์ ๋ด๋ถ private filed์ธ #year, #month์ ์ ๋ฐ์ดํธํ๋ค.
2. renderCalendar(): ๋ฌ๋ ฅ์ ๋ค์ render ํ์ฌ ์ ๋ฐ์ดํธํ ๋ , ์์ ๋ฐ์ํฉ๋๋ค.
์ต์ข ๊ฒฐ๊ณผ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ค์์ ์ด๋ฒ ์์ ์ ๋ํ commit์ ๋๋ค.
feat: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ 3 - Shift Month Button ๋ง๋ค๊ธฐ · nlom0218/vanilla-calenda
3. Shift Month Button์ Shift Month Event ๋ฑ๋กํ๊ธฐ
github.com
๋ํ ๋ค์์ Schedule class๋ฅผ ๋ฆฌํฉํฐ๋ง ํ ๋ถ๋ถ์ ๋๋ค. ์์ ๋น๊ตํด์๋ remove๋ฅผ ์ ๊ฑฐํ์ต๋๋ค.
refactor: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ 3 - Shift Month Button ๋ง๋ค๊ธฐ · nlom0218/vanilla-cal
3. Shift Month Button์ Shift Month Event ๋ฑ๋กํ๊ธฐ remove ๋ฉ์๋ ์ ๊ฑฐ
github.com
4. ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ก์ง ๋ถ๋ฆฌํ๊ธฐ
Schedule class์ ์(month)์ ์ด๋ํ๊ธฐ ์ํ ๋ก์ง์ ์์ฑํ์ต๋๋ค. ์ด๋ DatePicker class์์๋ ํ์ํฉ๋๋ค. ๋๋ฌธ์ ๋๊ฐ์ ๋ก์ง์ ๋ ๋ฒ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค, ๊ฐ์ ๊ธฐ๋ฅ์ ํ๋ ๋ก์ง์ ๋ถ๋ฆฌํ์ฌ ์ฌ๋ฌ ๊ณณ์์ ์ฌ์ฉ(์ฌ์ฌ์ฉ)ํ ์ ์๋๋ก ๋ถ๋ฆฌํ๋ ๊ฒ์ด ํ์ํฉ๋๋ค.(๋ฌผ๋ก ๋๊ฐ์ ๋ก์ง์ ๊ทธ๋๋ก ์ฌ์ฉํด๋ ๋ฉ๋๋ค.)
์ด๋ค ๋ก์ง์ด ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๊น์? ๋ ๊ฐ์ ๊ด์ ์์ ์๊ฐํด ๋ณผ ์ ์์ต๋๋ค.
1. UI: ๋ฌ๋ ฅ์ ์(month) ์ด๋์ ๋ํ ๋ฒํผ์ ์ค๋ณต๋ฉ๋๋ค.
2. ๊ธฐ๋ฅ: Calendar์ #year, #month์ ์ ๋ฐ์ดํธํ๊ธฐ ์ํ ๋ก์ง์ด ์ค๋ณต๋ฉ๋๋ค.
์ด๋ฅผ ๋ถ๋ฆฌํ์ฌ DatPicker class์์ ์ฌ์ฉํ๋ฉด ์ข์ ๋ฏํฉ๋๋ค.
4-1. ์ค๋ณต๋๋ UI ๋ถ๋ฆฌํ๊ธฐ
๋จผ์ Schedule class์์ ์์ฑํ ๋ฒํผ์ ๋ํ template๋ฅผ ๋ณด๊ฒ ์ต๋๋ค.
const yearMonthTemplate = `
<div class="schedule-year-month">
<span>${this.#calendar.getYear()}๋
${this.#calendar.getMonth()}์</span>
<div class="shift-month-button-container">
<button class="shift-month-button shift-mont-today-button" data-type="today">TODAY</button>
<button class="shift-month-button shift-mont-arrow-button" data-type="prev">โ๏ธ</button>
<button class="shift-month-button shift-mont-arrow-button" data-type="next">โถ๏ธ</button>
</div>
</div>
`;
๊ฐ์ฅ ๋ถ๋ชจ์ div๋ฅผ ์ ์ธํ ๋ถ๋ถ์ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค. font-size์ padding๊ณผ ๊ฐ์ ์คํ์ผ์ Schedule์ Date Picker์์ ์๋ก ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ๋๋ค.
์ด๋ calendar๊ฐ schedule์ธ์ง? datePicker์ธ์ง?์ ๋ฐ๋ผ ๋ถ๋ชจ div์ class name์ ์ ํจ์ผ๋ก์จ ํด๊ฒฐํ ์ ์์ต๋๋ค. ์ฆ, ๋ค์๊ณผ ๊ฐ์ด ํจ์๋ฅผ ๋ง๋ค์ด๋ณผ ์ ์์ต๋๋ค.
const yearMonthTemplate = (
calendar: 'schedule' | 'datePicker',
year: number,
month: number
) => `
<div class=${
calendar === 'schedule' ? 'schedule-year-month' : 'date-picker-year-month'
}>
<span>${year}๋
${month}์</span>
<div class="shift-month-button-container">
<button class="shift-month-button shift-mont-today-button" data-type="today">TODAY</button>
<button class="shift-month-button shift-mont-arrow-button" data-type="prev">โ๏ธ</button>
<button class="shift-month-button shift-mont-arrow-button" data-type="next">โถ๏ธ</button>
</div>
</div>
`;
export default yearMonthTemplate;
์ ํจ์๋ 3๊ฐ์ ๋งค๊ฐ๋ณ์๋ฅผ ๋ฐ์ต๋๋ค.
1. calendar: schedule์ธ์ง, datePicker์ธ์ง ํ๋จํฉ๋๋ค. ์ด์ ๋ฐ๋ผ ๋ถ๋ชจ div์ class name์ด ๋ฌ๋ผ์ง๋๋ค.
2. year: ๋ฌ๋ ฅ์ ๋ ๋(year)์ ๋๋ค.
3. month: ๋ฌ๋ ฅ์ ์(month)์ ๋๋ค.
์ ๋ ์ด์ ๊ฐ์ ํจ์๋ฅผ ts/template ํด๋์ ํ์ผ์ ๋ง๋ค์ด ๋ถ๋ฆฌํ์ต๋๋ค.
์ด๋ ๊ฒ ๋ถ๋ฆฌ๋ฅผ ํ๊ฒ ๋๋ค๋ฉด ์ด์ ๋ Schedule class์์ yearMonthTemplate๋ฅผ ์ง์ ๋ง๋ค์ง ์์๋ ๋ฉ๋๋ค. ์ ํจ์๋ฅผ ํธ์ถํ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค. ๋ค์๊ณผ ๊ฐ์ด ๋ง์ด์ฃ .
$('.schedule-container').innerHTML =
yearMonthTemplate(
'schedule',
this.#calendar.getYear(),
this.#calendar.getMonth()
) + calendarTemplate;
ํจ์๋ฅผ ๋ฐ๋ก ํธ์ถํ๊ณ ์ด๋ฅผ ๋ฐ๋ก calendarTemplate๊ณผ ํจ๊ป schedule-container ๋ด๋ถ์ ๋ฃ๋ ๋ก์ง์ ๋๋ค. ๊ธฐ์กด yearMonthTemplate๋ฅผ ์ญ์ ๋ฅผ ํด์ผ ํฉ๋๋ค.
๋์ด์ผ ์๊ฐํด ๋ณด๋ ํจ์์ด๊ธฐ ๋๋ฌธ์ ์์ get- ์ ๋ถ์ด๋ ๊ฒ์ด ๋ ์ข์ ๋ค์ด๋ฐ์ด ๋๊ฒ ๋ค์.
4-2. ์ค๋ณต๋๋ ๊ธฐ๋ฅ ๋ถ๋ฆฌํ๊ธฐ
์ค๋ณต๋๋ ๊ธฐ๋ฅ์ด๋ผ๊ณ ํ๋ฉด ์ฌ์ฉ์๊ฐ ๋ฒํผ์ ๋๋ ์ ๋, ์ผ์ด๋๋ ๋์์ ๋๋ค. ์ฆ, ์์ ๋ง๋ handleShiftMonth์ ํด๋นํฉ๋๋ค. ์ด ํจ์๋ฅผ ๋ค์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
private handleShiftMonth: EventListener = (event) => {
const button = event.target;
if (!(button instanceof HTMLButtonElement)) return;
const type = button.dataset.type as 'next' | 'prev' | 'today';
this.#calendar.shiftMonth(type);
this.renderCalendar();
};
๋ง์ง๋ง ๋ผ์ธ์ ์๋ this.renderCalendar()๋ฅผ ์ ์ธํ ๋ถ๋ถ์ ๋์ผํ๊ฒ ์คํ๋ ๊ฒ์ ๋๋ค. ๋๋ฌธ์ ๋ง์ง๋ง ๋ผ์ธ์ ํด๋นํ๋ ๋ถ๋ถ์ callback์ผ๋ก ๋๊ณ ๋๋จธ์ง๋ ๊ทธ๋๋ก ์ฌ์ฉํ๋ฉด ์ข์ ๊ฒ์ ๋๋ค.
์ ๋ ์ด ๋ถ๋ถ์ ์ฌ์ฌ์ฉํ๊ธฐ ์ํด ๋ค์๊ณผ ๊ฐ์ด ๋ถ๋ฆฌํ์ต๋๋ค.
import Calendar from '../Calendar';
interface MonthClickEventListener {
(evt: Event, calendar: Calendar, callback: () => void): void;
}
const handleShiftMonth: MonthClickEventListener = (
event,
calendar: Calendar,
callback
) => {
const button = event.target;
if (!(button instanceof HTMLButtonElement)) return;
const type = button.dataset.type as 'next' | 'prev' | 'today';
calendar.shiftMonth(type);
callback();
};
export default handleShiftMonth;
ํจ์์ด๋ฆ์ ๊ธฐ์กด๊ณผ ๋์ผํฉ๋๋ค. ํ์ง๋ง ํ์ ์ด ๋ค๋ฆ ๋๋ค. ๋ถ๋ฆฌํ handleShiftMonth ํจ์๋ MonthClickEventListener ํ์ ์ ๋๋ค. ์ด๋ 3๊ฐ์ ๋งค๊ฐ๋ณ์๋ฅผ ๋ฐ์ต๋๋ค.
1. event: ๊ธฐ์กด Event Listener์ ๊ฐ์ Event ํ์ ์ ๋๋ค.
2. calendar: Calendar์ #year, #month์ ์ ๋ฐ์ดํธํ๊ธฐ ์ํด์ ์ด๋ค Calendar์ธ์ง ์์์ผ ํฉ๋๋ค.
3. callback: ๋ง์ง๋ง์ ์คํ๋ ๋ก์ง์ ๋ฐ์ต๋๋ค.
์ฌ์ฉํ๋ ๊ณณ์์ ๋ค์๊ณผ ๊ฐ์ด ์ฌ์ฉํฉ๋๋ค. ์ด๋, ๊ธฐ์กด์ handleShiftMonth ํจ์๋ ์ญ์ ํฉ๋๋ค.
private registerEventListener = () => {
$('.shift-month-button-container').addEventListener('click', (event) =>
handleShiftMonth(event, this.#calendar, this.renderCalendar)
);
};
์ฌ์ฉํ๋ ๊ณณ์์ ๋์ฑ ๊ฐ๊ฒฐํด์ก์ต๋๋ค.
4-3. ๋ง๋ฌด๋ฆฌ
Schedule class์์ ์ถ๊ฐํ ๋ก์ง์ ๋ฐํ์ผ๋ก ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ถ๋ถ์ ๋ถ๋ฆฌํ์ต๋๋ค. ์ด๋ ๊ฒ ๋ถ๋ฆฌํจ์ผ๋ก์จ ๋ ๋น ๋ฅด๊ณ ๊ฐ๊ฒฐํ๊ฒ ๊ธฐ๋ฅ์ ์ถ๊ฐํ ์ ์๊ฒ ๋์์ต๋๋ค.
๋ค์์ ์ด๋ฒ ์์ ์ ๋ํ commit์ ๋๋ค.
feat: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ 3 - Shift Month Button ๋ง๋ค๊ธฐ · nlom0218/vanilla-calenda
4. ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ก์ง ๋ถ๋ฆฌํ๊ธฐ
github.com
5. Date Picker์ Shift Month ๊ธฐ๋ฅ ์ถ๊ฐํ๊ธฐ
์์ ์์ ์ผ๋ก ์ธํด DatePicker class์์๋ ์์ฃผ ๊ฐ๋จํ ์์ ๋ง ํ๋ฉด ๋ฉ๋๋ค.
5-1. Shift Month Button ๋ง๋ค๊ธฐ
yearMonthTemplate ํจ์๋ฅผ ํตํด ๋น ๋ฅด๊ฒ Shift Month Button์ด ํฌํจ๋ UI๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ๋จผ์ ๊ธฐ์กด์ DatePicker class์ renderCalendar ๋ฉ์๋์ yearMonthTemplate๋ฅผ ์ ๊ฑฐํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ innerHTML ๋ถ๋ถ์ ๋ค์๊ณผ ๊ฐ์ด ์์ ํฉ๋๋ค.
$('.date-picker-calendar-layout').innerHTML =
yearMonthTemplate(
'datePicker',
this.#datePickerCalendar.getYear(),
this.#datePickerCalendar.getMonth()
) + calendarTemplate;
์ฒซ ๋ฒ์งธ ์ธ์๋ง ๋ค๋ฅด๊ฒ ์ ๋ฌํ๋ฉด ์คํ์ผ ๋ณ๊ฒฝ ์์ด ๋ฒํผ๋ง ์๊น๋๋ค.
5-2. Shift Month Event ๋ฑ๋กํ๊ธฐ
UI๋ฅผ ๋ง๋ค์์ผ๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํด ๋ด ์๋ค. ์ด ๋ํ ๊ฐ๋จํ๊ฒ ํ ์ ์์ต๋๋ค.
๊ธฐ์กด registerCalendarEventListener ๋ฉ์๋์ ๋ค์๊ณผ ๊ฐ์ด ์๋ก์ด event listener๋ฅผ ์ถ๊ฐํ๋ฉด ๋ฉ๋๋ค.
$('.shift-month-button-container').addEventListener('click', (event) =>
handleShiftMonth(event, this.#datePickerCalendar, this.renderCalendar)
);
5-4. ๋ง๋ฌด๋ฆฌ ๋ฐ ์ต์ข ๊ฒฐ๊ณผ
๋ง์ง๋ง ํํธ๋ ์ด์ ํํธ๋ค๊ณผ ๋ค๋ฅด๊ฒ ๋งค์ฐ ๊ฐ๋จํ์ต๋๋ค. ์ด์ ํํธ๋ค์์ ์ด๋ค ๋ก์ง์ธ์ง ํ์ ์ ํ๊ณ ์ด๋ฅผ ๋ถ๋ฆฌํ ๋ค ์ฌ์ฌ์ฉ๋ง ํ๊ธฐ ๋๋ฌธ์ ๋๋ค. ๊ฐ๋จํด๋ ๊ธฐ๋ํ๋ ๋์์ ์ ์คํ๋ฉ๋๋ค.
๋ค์์ ์ด๋ฒ ์์ ์ ๋ํ commit์ ๋๋ค. ์ฌ๊ธฐ์ datePicker.css์์ ๋ฐ๋ ๋ถ๋ถ๋ ํ์ธํ ์ ์์ต๋๋ค.
feat: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ 3 - Shift Month Button ๋ง๋ค๊ธฐ · nlom0218/vanilla-calenda
5. Date Picker์ Shift Month ๊ธฐ๋ฅ ์ถ๊ฐํ๊ธฐ
github.com