문제의 모습
아래 사진과 같이 현재 달에 보여지는 다음 달의 날짜들이 보여지긴 보여지는데, 문제는 아래와 같이 레이아웃에 넘치게 보여진다는 것이었다.
다음 달 날짜들이 빨강색으로 표시한 레이아웃 밖으로 나온다.
시도했던 두 가지 로직
1.
만약 다음 달 날짜가 7개 미만이라면, 다음 주까지 날짜를 7개 까지 추가한다는 로직을 추가했다.
const nextDates = [];
// 다음 달의 첫 번째 날짜가 시작할 요일을 구하기
const firstDayNextMonth = (currentMonthLastDay + 1) % 7;
// 최소한 한 주를 채우고, 필요한 경우 두 번째 주까지 날짜를 추가
for (let i = 1; i <= 14 - firstDayNextMonth; i++) {
nextDates.push(i);
}
// 만약 다음 달 날짜가 7개 미만이라면, 다음 주까지 날짜를 추가
if (nextDates.length < 7) {
for (let i = 7 - firstDayNextMonth; i < 7 - firstDayNextMonth; i++) {
nextDates.push(i);
}
}
TypeScript
복사
하지만 다음 달 날짜가 7개 이상인 경우, 레이아웃에 모자르게 들어감 2.
만약 다음 달 날짜가 7개 미만이라면, 다음 주까지 날짜를 14개 까지 추가한다.
const nextDates = [];
// 다음 달의 첫 번째 날짜가 시작할 요일을 구하기
const firstDayNextMonth = (currentMonthLastDay + 1) % 7;
// 최소한 한 주를 채우고, 필요한 경우 두 번째 주까지 날짜를 추가
for (let i = 1; i <= 14 - firstDayNextMonth; i++) {
nextDates.push(i);
}
// 만약 다음 달 날짜가 7개 미만이라면, 다음 주까지 날짜를 추가
if (nextDates.length < 7) {
for (let i = 7 - firstDayNextMonth; i < 14 - firstDayNextMonth; i++) {
nextDates.push(i);
}
}
TypeScript
복사
하지만 다음 달 날짜가 14개 이하인 경우, 레이아웃에 넘치게 들어감 해결에 도움된 로직 (꽤나 간단)
만약 다음 달 날짜가 7개 미만이라면, 다음 주까지 날짜를 14개 추가한다. 다음 달 날짜가 14개 이상 추가되는 달은 없기 때문에 아예 14개로 확 추가해 버린다.
단, 여기서 핵심은 숫자가 레이아웃을 넘칠 수 있으므로 ‘총 날짜 수’를 계산 후, 이를 42개 이하로 맞추어야 한다!
수정한 코드
// 다음 달 날짜들을 계산
const nextDates = [];
// 다음 달의 첫 번째 날짜가 시작할 요일을 구하기
const firstDayNextMonth = (currentMonthLastDay + 1) % 7;
// 최소한 한 주를 채우고, 필요한 경우 두 번째 주까지 날짜를 추가
for (let i = 1; i <= 14 - firstDayNextMonth; i++) {
nextDates.push(i);
}
// 만약 다음 달 날짜가 7개 미만이라면, 다음 주까지 날짜를 14개 추가
if (nextDates.length < 7) {
for (let i = 7 - firstDayNextMonth; i < 14 - firstDayNextMonth; i++) {
nextDates.push(i);
}
}
// 이전 달, 현재 달, 다음 달 날짜를 합쳐 총 날짜 수를 계산
const totalDays = prevDates.length + thisDates.length + nextDates.length;
// 총 날짜가 42를 넘지 않도록 다음 달 날짜 배열을 조정
if (totalDays > 42) {
const excessDays = totalDays - 42;
nextDates.splice(nextDates.length - excessDays, excessDays);
// 초과하는 날짜들을 제거
}
TypeScript
복사
해결된 모습
빨강색으로 표시한 레이아웃 안에 다음달 날짜가 잘 들어왔다.