From 6792df016b98abf2d001196764cf39b0b615f904 Mon Sep 17 00:00:00 2001
From: nakaterm <104970808+nakaterm@users.noreply.github.com>
Date: Tue, 12 May 2026 16:17:55 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A5=E7=A8=8B=E6=8F=90=E5=87=BA?=
 =?UTF-8?q?=E6=99=82=E3=81=AB=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88=E3=82=92?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E3=81=A7=E3=81=8D=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Calendar.tsx            |   9 +-
 client/src/pages/Project.tsx                  |   3 +
 client/src/pages/eventId/Submission.tsx       | 129 +++++++++++++-----
 client/src/revivers.ts                        |   2 +
 client/src/types.ts                           |   3 +
 common/validators.ts                          |   7 +-
 .../migration.sql                             |   2 +
 server/prisma/schema.prisma                   |   1 +
 server/src/routes/projects.ts                 |   6 +-
 9 files changed, 118 insertions(+), 44 deletions(-)
 create mode 100644 server/prisma/migrations/20260328053217_add_comment_to_guest/migration.sql

diff --git a/client/src/components/Calendar.tsx b/client/src/components/Calendar.tsx
index ba02cd9..5623039 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<string, string>;
+  guestIdToComment: Record<string, string>;
   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(() => {
diff --git a/client/src/pages/Project.tsx b/client/src/pages/Project.tsx
index bbcc6b2..4f5ad98 100644
--- a/client/src/pages/Project.tsx
+++ b/client/src/pages/Project.tsx
@@ -320,6 +320,7 @@ export default function ProjectPage() {
                     <input
                       {...register("name")}
                       id="input-name"
+                      maxLength={100}
                       className={`w-full rounded-lg border px-3 py-2 text-base transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:px-4 sm:py-2.5 ${errors.name ? "border-red-500" : "border-slate-300"}`}
                       placeholder="例: 〇〇サークル 対面定例会議"
                       onBlur={() => trigger("name")}
@@ -333,6 +334,7 @@ export default function ProjectPage() {
                     <textarea
                       {...register("description")}
                       id="input-description"
+                      maxLength={1000}
                       className={`w-full rounded-lg border px-3 py-2 text-base transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:px-4 sm:py-2.5 ${errors.description ? "border-red-500" : "border-slate-300"}`}
                       placeholder="イベントの詳細や注意事項などを入力"
                       rows={3}
@@ -592,6 +594,7 @@ export default function ProjectPage() {
                               type="text"
                               {...register(`participationOptions.${index}.label`)}
                               defaultValue={field.label}
+                              maxLength={50}
                               placeholder="参加形態名（例：対面、オンライン）"
                               className={`flex-1 rounded-lg border px-3 py-2 text-base transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:px-4 sm:py-2.5 ${errors.participationOptions?.[index]?.label ? "border-red-500" : "border-slate-300"}`}
                               onBlur={() => {
diff --git a/client/src/pages/eventId/Submission.tsx b/client/src/pages/eventId/Submission.tsx
index c52c2cd..fedaa13 100644
--- a/client/src/pages/eventId/Submission.tsx
+++ b/client/src/pages/eventId/Submission.tsx
@@ -141,7 +141,10 @@ export default function SubmissionPage() {
 
   const [selectedParticipationOptionId, setSelectedParticipationOptionId] = useState<string | null>(null);
 
+  const [comment, setComment] = useState(meAsGuest?.comment ?? "");
+
   const [descriptionExpanded, setDescriptionExpanded] = useState(false);
+  const [guestListExpanded, setGuestListExpanded] = useState(true);
 
   const [toast, setToast] = useState<{
     message: string;
@@ -153,6 +156,7 @@ export default function SubmissionPage() {
       setPostLoading(true);
       const payload = {
         name: guestName,
+        comment: comment.trim() || null,
         projectId: projectId || "",
         slots: slots.map((slot) => ({
           start: slot.start.toISOString(),
@@ -210,12 +214,13 @@ export default function SubmissionPage() {
       await Promise.all([fetchProject()]);
       setPostLoading(false);
     },
-    [guestName, projectId, fetchProject],
+    [guestName, comment, projectId, fetchProject],
   );
 
   useEffect(() => {
     if (meAsGuest) {
       setGuestName(meAsGuest.name);
+      setComment(meAsGuest.comment ?? "");
       setEditMode(false);
     }
   }, [meAsGuest]);
@@ -232,6 +237,11 @@ export default function SubmissionPage() {
     return Object.fromEntries(project.guests.map((g) => [g.id, g.name]));
   }, [project]);
 
+  const guestIdToComment = useMemo(() => {
+    if (!project) return {};
+    return Object.fromEntries(project.guests.filter((g) => g.comment).map((g) => [g.id, g.comment as string]));
+  }, [project]);
+
   // init viewing slots
   const viewingSlots = useMemo(() => {
     if (!project) return [];
@@ -383,58 +393,103 @@ export default function SubmissionPage() {
                 editingSlots={editMode ? editingSlots : []}
                 viewingSlots={viewingSlots}
                 guestIdToName={guestIdToName}
+                guestIdToComment={guestIdToComment}
                 participationOptions={project.participationOptions}
                 currentParticipationOptionId={selectedParticipationOptionId}
                 editMode={editMode}
                 onChangeEditingSlots={setEditingSlots}
               />
+
+              {/* 参加者一覧 */}
+              {project.guests.length > 0 && (
+                <div className="mt-1 border-slate-200 border-t pt-3 pb-2">
+                  <button
+                    type="button"
+                    onClick={() => setGuestListExpanded((prev) => !prev)}
+                    className="flex items-center gap-1.5 font-medium text-slate-700 text-sm hover:text-slate-900"
+                  >
+                    参加者 ({project.guests.length}人)
+                    {guestListExpanded ? <LuChevronUp className="h-4 w-4" /> : <LuChevronDown className="h-4 w-4" />}
+                  </button>
+                  {guestListExpanded && (
+                    <ul className="mt-1 divide-y divide-slate-100">
+                      {project.guests.map((guest) => {
+                        const commentText = guestIdToComment[guest.id];
+                        return (
+                          <li key={guest.id} className="py-2.5">
+                            <div className="font-medium text-slate-800 text-sm">{guest.name}</div>
+                            {commentText && (
+                              <div className="mt-0.5 whitespace-pre-wrap break-words text-slate-500 text-sm">
+                                {commentText}
+                              </div>
+                            )}
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  )}
+                </div>
+              )}
             </div>
 
             <div className="sticky bottom-0 z-10 border-slate-200 border-t bg-white">
               <div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 sm:py-3 lg:px-8">
                 {editMode ? (
-                  <div className="flex items-center gap-2">
-                    <input
-                      type="text"
-                      placeholder="名前"
-                      value={guestName}
-                      onChange={(e) => setGuestName(e.target.value)}
-                      className="min-w-0 flex-1 rounded-lg border border-slate-300 px-3 py-2 text-base transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:px-4 sm:py-2.5"
+                  <div className="flex flex-col gap-2">
+                    <textarea
+                      placeholder="コメント（任意）"
+                      value={comment}
+                      onChange={(e) => setComment(e.target.value)}
+                      rows={2}
+                      maxLength={500}
+                      className="w-full resize-none rounded-lg border border-slate-300 px-3 py-2 text-base transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:px-4"
                     />
-                    {!!myGuestId && (
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="text"
+                        placeholder="名前"
+                        value={guestName}
+                        onChange={(e) => setGuestName(e.target.value)}
+                        maxLength={50}
+                        className="min-w-0 flex-1 rounded-lg border border-slate-300 px-3 py-2 text-base transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:px-4 sm:py-2.5"
+                      />
+                      {!!myGuestId && (
+                        <button
+                          type="button"
+                          className="btn btn-outline shrink-0"
+                          disabled={loading}
+                          onClick={async () => {
+                            if (confirm("更新をキャンセルします。よろしいですか？")) {
+                              setEditingSlots([]);
+                              setGuestName(meAsGuest?.name ?? "");
+                              setComment(meAsGuest?.comment ?? "");
+                              setEditMode(false);
+                            }
+                          }}
+                        >
+                          <span>キャンセル</span>
+                        </button>
+                      )}
                       <button
                         type="button"
-                        className="btn btn-outline shrink-0"
-                        disabled={loading}
-                        onClick={async () => {
-                          if (confirm("更新をキャンセルします。よろしいですか？")) {
-                            setEditingSlots([]);
-                            setEditMode(false);
-                          }
+                        className="btn btn-primary inline-flex shrink-0 gap-1.5 sm:gap-2"
+                        disabled={loading || !guestName}
+                        onClick={() => {
+                          if (!guestName) return;
+                          postSubmissions(
+                            editingSlots.map((slot) => ({
+                              start: slot.from.toDate(),
+                              end: slot.to.toDate(),
+                              participationOptionId: slot.participationOptionId,
+                            })),
+                            myGuestId ?? "",
+                          );
                         }}
                       >
-                        <span>キャンセル</span>
+                        <LuSend className="sm:h-5 sm:w-5" />
+                        <span>{meAsGuest ? "更新" : "提出"}</span>
                       </button>
-                    )}
-                    <button
-                      type="button"
-                      className="btn btn-primary inline-flex shrink-0 gap-1.5 sm:gap-2"
-                      disabled={loading || !guestName}
-                      onClick={() => {
-                        if (!guestName) return;
-                        postSubmissions(
-                          editingSlots.map((slot) => ({
-                            start: slot.from.toDate(),
-                            end: slot.to.toDate(),
-                            participationOptionId: slot.participationOptionId,
-                          })),
-                          myGuestId ?? "",
-                        );
-                      }}
-                    >
-                      <LuSend className="sm:h-5 sm:w-5" />
-                      <span>{meAsGuest ? "更新" : "提出"}</span>
-                    </button>
+                    </div>
                   </div>
                 ) : (
                   <div className="flex items-center justify-between">
diff --git a/client/src/revivers.ts b/client/src/revivers.ts
index 6924949..70f9b39 100644
--- a/client/src/revivers.ts
+++ b/client/src/revivers.ts
@@ -22,6 +22,7 @@ export function projectReviver(project: ISOStringProject): Project {
     hosts: project.hosts.map((host) => ({ ...host })),
     guests: project.guests.map((guest) => ({
       ...guest,
+      comment: guest.comment ?? undefined,
       slots: guest.slots.map((slot) => ({
         ...slot,
         from: dayjs.utc(slot.from).tz(),
@@ -31,6 +32,7 @@ export function projectReviver(project: ISOStringProject): Project {
     meAsGuest: project.meAsGuest
       ? {
           ...project.meAsGuest,
+          comment: project.meAsGuest.comment ?? undefined,
           slots: project.meAsGuest.slots.map((slot) => ({
             ...slot,
             from: dayjs.utc(slot.from).tz(),
diff --git a/client/src/types.ts b/client/src/types.ts
index d309300..abbf1ad 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -32,6 +32,7 @@ type Guest = {
   id: string;
   name: string;
   projectId: string;
+  comment?: string;
   slots: Slot[];
 };
 
@@ -73,6 +74,7 @@ export type ISOStringProject = {
     id: string;
     name: string;
     projectId: string;
+    comment: string | null;
     slots: {
       id: string;
       projectId: string;
@@ -87,6 +89,7 @@ export type ISOStringProject = {
     id: string;
     name: string;
     projectId: string;
+    comment: string | null;
     slots: {
       id: string;
       projectId: string;
diff --git a/common/validators.ts b/common/validators.ts
index 130fbea..273e187 100644
--- a/common/validators.ts
+++ b/common/validators.ts
@@ -19,8 +19,9 @@ export const participationOptionCreateSchema = z.object({
 });
 
 export const submitReqSchema = z.object({
-  name: z.string(),
+  name: z.string().min(1, "名前を入力してください").max(50, "名前は50文字以内で入力してください"),
   projectId: z.string().length(21),
+  comment: z.string().max(500, "コメントは500文字以内で入力してください").nullable().optional(),
   slots: z.array(
     z.object({
       start: isoStrToDate,
@@ -36,8 +37,8 @@ const isQuarterHour = (time: string): boolean => {
 };
 
 const baseProjectReqSchema = z.object({
-  name: z.string().min(1, "イベント名を入力してください"),
-  description: z.string(),
+  name: z.string().min(1, "イベント名を入力してください").max(100, "イベント名は100文字以内で入力してください"),
+  description: z.string().max(1000, "説明は1000文字以内で入力してください"),
   startDate: z.string().min(1, "開始日を入力してください"),
   // TODO: 新規作成時のみ、過去日付を制限する必要
   // .refine(
diff --git a/server/prisma/migrations/20260328053217_add_comment_to_guest/migration.sql b/server/prisma/migrations/20260328053217_add_comment_to_guest/migration.sql
new file mode 100644
index 0000000..9092b16
--- /dev/null
+++ b/server/prisma/migrations/20260328053217_add_comment_to_guest/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Guest" ADD COLUMN     "comment" TEXT;
diff --git a/server/prisma/schema.prisma b/server/prisma/schema.prisma
index 38b74e0..ee261c9 100644
--- a/server/prisma/schema.prisma
+++ b/server/prisma/schema.prisma
@@ -68,6 +68,7 @@ model Host {
 model Guest {
   id        String  @id @default(uuid())
   name      String
+  comment   String?
   browserId String  @default(uuid())
   projectId String
   project   Project @relation(fields: [projectId], references: [id], onDelete: Cascade)
diff --git a/server/src/routes/projects.ts b/server/src/routes/projects.ts
index 4938a80..d4b0bc7 100644
--- a/server/src/routes/projects.ts
+++ b/server/src/routes/projects.ts
@@ -254,7 +254,7 @@ const router = new Hono<{ Variables: AppVariables }>()
     async (c) => {
       const browserId = c.get("browserId");
       const { projectId } = c.req.valid("param");
-      const { name, slots } = c.req.valid("json");
+      const { name, comment, slots } = c.req.valid("json");
 
       const existingGuest = await prisma.guest.findUnique({
         where: {
@@ -271,6 +271,7 @@ const router = new Hono<{ Variables: AppVariables }>()
       await prisma.guest.create({
         data: {
           name,
+          comment: comment?.trim() || null,
           browserId,
           project: { connect: { id: projectId } },
           slots: {
@@ -296,7 +297,7 @@ const router = new Hono<{ Variables: AppVariables }>()
     async (c) => {
       const browserId = c.get("browserId");
       const { projectId } = c.req.valid("param");
-      const { name, slots } = c.req.valid("json");
+      const { name, comment, slots } = c.req.valid("json");
 
       const existingGuest = await prisma.guest.findUnique({
         where: { browserId_projectId: { browserId, projectId } },
@@ -320,6 +321,7 @@ const router = new Hono<{ Variables: AppVariables }>()
         data: {
           slots: { create: slotData },
           name,
+          comment: comment?.trim() || null,
         },
         include: { slots: true },
       });