diff --git a/client/index.html b/client/index.html index 5691394..b74f1fd 100644 --- a/client/index.html +++ b/client/index.html @@ -1,5 +1,5 @@ - + diff --git a/client/src/components/Calendar.tsx b/client/src/components/Calendar.tsx index ba02cd9..6e8b2d6 100644 --- a/client/src/components/Calendar.tsx +++ b/client/src/components/Calendar.tsx @@ -59,6 +59,7 @@ type Props = { editingSlots: EditingSlot[]; viewingSlots: ViewingSlot[]; guestIdToName: Record; + guestIdToComment: Record; participationOptions: ParticipationOption[]; currentParticipationOptionId: string; editMode: boolean; @@ -96,6 +97,7 @@ export const Calendar = ({ editingSlots, viewingSlots, guestIdToName, + guestIdToComment, participationOptions, currentParticipationOptionId, editMode, @@ -172,7 +174,10 @@ export const Calendar = ({ .filter((option) => optionGroups.has(option.id)) .map((option) => { const guestIds = optionGroups.get(option.id) || []; - const guestNames = guestIds.map((guestId) => guestIdToName[guestId] || guestId); + const guestNames = guestIds.map((guestId) => { + const name = guestIdToName[guestId] || guestId; + return guestIdToComment[guestId] ? `${name} 💬` : name; + }); const optionOpacity = 1 - (1 - OPACITY) ** guestIds.length; return { @@ -228,7 +233,7 @@ export const Calendar = ({ }); setEvents([...editingEvents, ...viewingEvents]); - }, [editingSlots, viewingSlots, guestIdToName, participationOptions]); + }, [editingSlots, viewingSlots, guestIdToName, guestIdToComment, participationOptions]); // viewing events の背景スタイルを動的に注入 useEffect(() => { @@ -313,14 +318,15 @@ export const Calendar = ({ duration: { days: Math.min(countDays, 7) }, dayHeaderContent: (args: DayHeaderContentArg) => { return ( -
+
{dayjs.utc(args.date).tz().format("M/D")}
{dayjs.utc(args.date).tz().format("(ddd)")}
); }, slotLabelContent: (args: SlotLabelContentArg) => { - return
{dayjs.utc(args.date).tz().format("HH:mm")}
; + // -translate-y-1/2 で時刻ラベルをグリッド線上に中央揃えする + return
{dayjs.utc(args.date).tz().format("HH:mm")}
; }, slotLabelInterval: "00:30:00", validRange: { @@ -454,7 +460,7 @@ export const Calendar = ({ } if (info.event.classNames.includes(EDITING_EVENT)) { return ( -
{`${dayjs.utc(info.event.start).tz().format("HH:mm")} - ${dayjs.utc(info.event.end).tz().format("HH:mm")}`}
+
{`${dayjs.utc(info.event.start).tz().format("HH:mm")} - ${dayjs.utc(info.event.end).tz().format("HH:mm")}`}
); } }, []); diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx index bc327a7..683b86a 100644 --- a/client/src/components/Footer.tsx +++ b/client/src/components/Footer.tsx @@ -2,25 +2,25 @@ import { EXTERNAL_LINKS } from "../constants/links"; export default function Footer() { return ( -