diff --git a/client/src/components/Calendar.tsx b/client/src/components/Calendar.tsx index d6346fa..b748f86 100644 --- a/client/src/components/Calendar.tsx +++ b/client/src/components/Calendar.tsx @@ -219,7 +219,9 @@ export const Calendar = ({ project, myGuestId, mySlotsRef, editMode }: Props) => ); } if (info.event.id === MY_EVENT) { - return
{info.timeText}
; + return ( +
{`${dayjs(info.event.start).format("HH:mm")} - ${dayjs(info.event.end).format("HH:mm")}`}
+ ); } }, []); diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx index 9b44473..ad5a1b8 100644 --- a/client/src/pages/Home.tsx +++ b/client/src/pages/Home.tsx @@ -55,7 +55,7 @@ function ProjectDashboard({ involvedProjects }: { involvedProjects: InvolvedProj - {involvedProjects.length > 0 ? ( + {involvedProjects.length > 0 && (
{/* All Projects */}
@@ -70,8 +70,6 @@ function ProjectDashboard({ involvedProjects }: { involvedProjects: InvolvedProj
- ) : ( - )} diff --git a/client/src/pages/Project.tsx b/client/src/pages/Project.tsx index 43b552e..bdeb1a8 100644 --- a/client/src/pages/Project.tsx +++ b/client/src/pages/Project.tsx @@ -2,7 +2,13 @@ import { zodResolver } from "@hookform/resolvers/zod"; import dayjs from "dayjs"; import { useEffect, useState } from "react"; import { useFieldArray, useForm } from "react-hook-form"; -import { HiClipboardCheck, HiClipboardCopy, HiOutlineCheckCircle, HiOutlineExclamationCircle } from "react-icons/hi"; +import { + HiClipboardCheck, + HiClipboardCopy, + HiInformationCircle, + HiOutlineCheckCircle, + HiOutlineExclamationCircle, +} from "react-icons/hi"; import { NavLink, useNavigate, useParams } from "react-router"; import type { z } from "zod"; import { editReqSchema, projectReqSchema, projectResSchema } from "../../../common/schema"; @@ -36,24 +42,30 @@ export default function ProjectPage() { } | null>(null); const [copied, setCopied] = useState(false); + const [isInfoExpanded, setIsInfoExpanded] = useState(!eventId); // 新規作成時は展開、編集時は折りたたみ const { register, handleSubmit, control, reset, + trigger, formState: { errors, isValid, isDirty }, } = useForm({ resolver: zodResolver(formSchema), mode: "onChange", defaultValues: { name: "", - startDate: "", - endDate: "", + startDate: eventId ? "" : dayjs().format("YYYY-MM-DD"), + endDate: eventId ? "" : dayjs().add(6, "day").format("YYYY-MM-DD"), allowedRanges: [{ startTime: "00:00", endTime: "23:45" }], }, }); + const handleFieldFocus = () => { + trigger("name"); + }; + const { fields, replace } = useFieldArray({ control, name: "allowedRanges", @@ -80,8 +92,8 @@ export default function ProjectPage() { setSubmitLoading(true); // 日付をISO形式に変換 - const startDateTime = new Date(`${data.startDate}T00:00:00.000Z`).toISOString(); - const endDateTime = new Date(`${data.endDate}T23:59:59.999Z`).toISOString(); + const startDateTime = new Date(`${data.startDate}T00:00:00.000`).toISOString(); + const endDateTime = new Date(`${data.endDate}T23:59:59.999`).toISOString(); // range もISO形式に変換 const rangeWithDateTime = data.allowedRanges?.map((range) => ({ @@ -184,13 +196,43 @@ export default function ProjectPage() { trigger("name")} /> - {errors.name &&

{errors.name.message}

} + {errors.name &&

{errors.name.message}

} {!project || (project && project.guests.length === 0) ? ( <> +
+ setIsInfoExpanded(e.target.checked)} + /> +
+ + 開始日・終了日/時間帯について +
+
+

+ イツヒマでは、主催者側で候補日程を設定せずに日程調整します。 +
+ ここでは、参加者の日程を知りたい日付の範囲と時間帯の範囲を設定してください。 +
+ 詳しくは、 + + 使い方ページ + + をご覧ください。 +

+
+
- - {errors.endDate &&

{errors.endDate.message}

} + + {errors.endDate &&

{errors.endDate.message}

}
@@ -217,7 +266,7 @@ export default function ProjectPage() {
{ replace([ @@ -272,6 +323,7 @@ export default function ProjectPage() { }, ]); }} + onFocus={handleFieldFocus} >