Skip to content

feat: 요일 헤더에 자동 날짜 표시 추가 #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
yoohyun-1203 wants to merge 1 commit into from
Closed

feat: 요일 헤더에 자동 날짜 표시 추가 #116

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 25 additions & 15 deletions src/app/schedule/[id]/ScheduleRoomClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ interface HostSchedule extends PublicSchedule {
commonSlots: TimeSlot[];
}

const DAY_LABELS: Record<DayCode, string> = {
const DAY_LABELS: Record<string, string> = {
MON: "월요일",
TUE: "화요일",
WED: "수요일",
Expand All @@ -61,6 +61,26 @@ const DAY_LABELS: Record<DayCode, string> = {
SUN: "일요일",
};

const DAY_CODE_TO_JS_DAY: Record<string, number> = {
SUN: 0,
MON: 1,
TUE: 2,
WED: 3,
THU: 4,
FRI: 5,
SAT: 6,
};

function formatDayWithDate(dayCode: string): string {
const now = new Date();
const diff = (DAY_CODE_TO_JS_DAY[dayCode] - now.getDay() + 7) % 7;
const target = new Date(now);
target.setDate(now.getDate() + diff);
const m = target.getMonth() + 1;
const d = target.getDate();
return `${DAY_LABELS[dayCode] ?? dayCode} ${m}/${d}`;
}
Comment on lines +64 to +82

@coderabbitai coderabbitai Bot Jun 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

formatDayWithDate에서 잘못된 dayCode 입력 시 NaN 날짜 생성 가능

DAY_CODE_TO_JS_DAY[dayCode]가 undefined를 반환하면 diff가 NaN이 되어 잘못된 날짜가 표시된다. 현재 호출부가 모두 DayCode[]를 사용하므로 런타임 위험은 낮으나, 타입이 string으로 완화된 만큼 방어 코드가 필요하다.

♻️ 방어 코드 추가 제안 
 function formatDayWithDate(dayCode: string): string {
+  const jsDay = DAY_CODE_TO_JS_DAY[dayCode];
+  if (jsDay === undefined) {
+    return DAY_LABELS[dayCode] ?? dayCode;
+  }
   const now = new Date();
-  const diff = (DAY_CODE_TO_JS_DAY[dayCode] - now.getDay() + 7) % 7;
+  const diff = (jsDay - now.getDay() + 7) % 7;
   const target = new Date(now);
   target.setDate(now.getDate() + diff);
   const m = target.getMonth() + 1;
   const d = target.getDate();
   return `${DAY_LABELS[dayCode] ?? dayCode} ${m}/${d}`;
 }
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/schedule/`[id]/ScheduleRoomClient.tsx around lines 64 - 82, The
formatDayWithDate function does not validate whether the dayCode parameter
exists in the DAY_CODE_TO_JS_DAY mapping, which can cause diff to become NaN
when an invalid dayCode is passed, resulting in incorrect dates. Add defensive
code to the formatDayWithDate function to check if the dayCode exists in the
DAY_CODE_TO_JS_DAY record before using it, and either throw an error for invalid
inputs or provide a fallback behavior to prevent NaN calculations.


export function ScheduleRoomClient({
scheduleId,
hostToken,
Expand Down Expand Up @@ -295,7 +315,7 @@ export function ScheduleRoomClient({
slots.push({
key: `${day}-${hour}`,
slot: { day, startHour: hour, endHour: hour + 1 },
label: `${DAY_LABELS[day]} ${formatHour(hour)}-${formatHour(hour + 1)}`,
label: `${formatDayWithDate(day)} ${formatHour(hour)}-${formatHour(hour + 1)}`,
});
}
}
Expand Down Expand Up @@ -405,7 +425,7 @@ export function ScheduleRoomClient({
);
return;
}
if (!isImage && file.size > 100 * 1024) {
if (!isIcs && file.size > 100 * 1024) {
setImportMessage("ICS 파일 크기는 100KB 이하여야 합니다.");
return;
}
Comment on lines +428 to 431

@coderabbitai coderabbitai Bot Jun 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# 다른 파일의 ICS 검증 로직과 일관성 확인
rg -n "100.*1024|100KB" --type ts -C 3 | head -80

Repository: Siul49/moim

Length of output: 2152

🏁 Script executed:

sed -n '420,435p' src/app/schedule/[id]/ScheduleRoomClient.tsx

Repository: Siul49/moim

Length of output: 487

조건 반전 버그 — 이미지 파일에 ICS 크기 제한 메시지 표시

라인 428의 !isIcs 조건은 "이미지 파일"을 필터링하는데, 에러 메시지는 "ICS 파일 크기" 제한을 안내한다. 라인 422-427 검증을 통과한 파일은 isIcs || isImage이므로, !isIcs는 곧 isImage를 의미한다. 따라서 현재 코드는 이미지 파일 > 100KB 시 "ICS 파일 크기는..." 메시지를 표시하게 되어 사용자를 혼동시킨다.

calendar/connect/page.tsx와 api/everytime/timetable/route.ts는 모두 ICS 파일에만 100KB 제한을 적용한다. 조건을 isIcs로 수정해야 한다.

🐛 조건 수정 
-    if (!isIcs && file.size > 100 * 1024) {
+    if (isIcs && file.size > 100 * 1024) {
       setImportMessage("ICS 파일 크기는 100KB 이하여야 합니다.");
       return;
     }
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/schedule/`[id]/ScheduleRoomClient.tsx around lines 428 - 431, The
condition checking file size validation in the ScheduleRoomClient.tsx file is
inverted. The current condition `!isIcs` applies the size limit and ICS-specific
error message to image files instead of ICS files. Change the condition from
`!isIcs` to `isIcs` so that the 100KB file size limit with the message "ICS 파일
크기는 100KB 이하여야 합니다." only applies to actual ICS files, preventing incorrect
error messages from appearing for image files.

Expand Down Expand Up @@ -652,7 +672,7 @@ export function ScheduleRoomClient({
key={day}
className="flex h-8 items-center justify-center pb-2 text-center text-sm font-bold text-brand-purple"
>
{DAY_LABELS[day]}
{formatDayWithDate(day)}
</div>
))}

Expand Down Expand Up @@ -1130,7 +1150,7 @@ function HostResultPanel({
}, [schedule.candidateStartHour, schedule.candidateEndHour]);

const heatmapDays = useMemo(() => {
return schedule.candidateDays.map((d) => DAY_LABELS[d] || d);
return schedule.candidateDays.map((d) => formatDayWithDate(d));
}, [schedule.candidateDays]);

const heatmapColors = useMemo(() => {
Expand Down Expand Up @@ -1446,16 +1466,6 @@ function HostResultPanel({
);
}

const DAY_CODE_TO_JS_DAY: Record<DayCode, number> = {
SUN: 0,
MON: 1,
TUE: 2,
WED: 3,
THU: 4,
FRI: 5,
SAT: 6,
};

// 확정 슬롯은 요일 기반({day,startHour,endHour})이므로,
// 다가오는 해당 요일의 실제 날짜로 환산해 캘린더 일정 start/end를 만든다.
function nextOccurrence(slot: TimeSlot): { start: Date; end: Date } {
Expand Down
Loading