イベントの説明欄を追加 (#50)

* feat: イベント説明欄を追加

* マイグレーションファイルを追加

Author: nakaterm

client/src/pages/Project.tsx

@@ -89,6 +89,7 @@ export default function ProjectPage() {
     mode: "onChange",
     defaultValues: {
       name: "",
+      description: "",
       startDate: eventId ? "" : dayjs().format("YYYY-MM-DD"),
       endDate: eventId ? "" : dayjs().add(6, "day").format("YYYY-MM-DD"),
       allowedRanges: [{ startTime: "00:00", endTime: "23:45" }],
@@ -109,6 +110,7 @@ export default function ProjectPage() {
     if (!project) return;
     reset({
       name: project.name,
+      description: project.description,
       startDate: dayjs(project.startDate).format("YYYY-MM-DD"),
       endDate: dayjs(project.endDate).format("YYYY-MM-DD"),
       allowedRanges: [
@@ -136,6 +138,7 @@ export default function ProjectPage() {
 
     const eventData = {
       name: data.name ?? "",
+      description: data.description ?? "",
       startDate: startDateTime,
       endDate: endDateTime,
       allowedRanges: rangeWithDateTime ?? [],
@@ -235,6 +238,19 @@ export default function ProjectPage() {
                 />
                 {errors.name && <p className="mt-1 text-red-500 text-sm">{errors.name.message}</p>}
               </div>
+              <div>
+                <label className="text-gray-400 text-sm" htmlFor="input-description">
+                  イベントの説明（任意）
+                </label>
+                <textarea
+                  {...register("description")}
+                  id="input-description"
+                  className={`textarea w-full text-base ${errors.description ? "textarea-error border-red-500" : ""}`}
+                  placeholder="イベントの詳細や注意事項などを入力"
+                  rows={3}
+                />
+                {errors.description && <p className="mt-1 text-red-500 text-sm">{errors.description.message}</p>}
+              </div>
               {!project || (project && project.guests.length === 0) ? (
                 <>
                   <div className="collapse-arrow collapse mb-4 border border-blue-200 bg-blue-50">

client/src/pages/eventId/Submission.tsx

@@ -169,6 +169,9 @@ export default function SubmissionPage() {
                 </NavLink>
               )}
             </div>
+            {project.description && (
+              <p className="mb-4 whitespace-pre-wrap text-gray-600 text-sm">{project.description}</p>
+            )}
             <Calendar project={project} myGuestId={myGuestId ?? ""} mySlotsRef={mySlotsRef} editMode={editMode} />
             <div className="flex w-full items-center justify-between gap-2 p-2">
               {editMode ? (

client/src/types.ts

@@ -28,6 +28,7 @@ type Guest = {
 export type Project = {
   id: string;
   name: string;
+  description: string;
   startDate: Date;
   endDate: Date;
   allowedRanges: AllowedRange[];
@@ -41,6 +42,7 @@ export type Project = {
 export type ISOStringProject = {
   id: string;
   name: string;
+  description: string;
   startDate: string;
   endDate: string;
   allowedRanges: {

common/validators.ts

@@ -23,6 +23,7 @@ const isQuarterHour = (time: string): boolean => {
 
 const baseProjectReqSchema = z.object({
   name: z.string().min(1, "イベント名を入力してください"),
+  description: z.string(),
   startDate: z.string().min(1, "開始日を入力してください"),
   // TODO: 新規作成時のみ、過去日付を制限する必要
   // .refine(

server/prisma/migrations/20251116043209_add_description_to_project/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "description" TEXT;

server/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"

server/prisma/schema.prisma

@@ -17,8 +17,9 @@ datasource db {
 model Project {
   id            String         @id @db.VarChar(21)
   name          String
+  description   String? /// イベントの説明（オプショナル）
   /// 注: 日付部分のみ利用。時間は考慮しない。
-  startDate     DateTime 
+  startDate     DateTime
   /// 注: 日付部分のみ利用。時間は考慮しない。
   endDate       DateTime
   /// 注: 現在は 1 つのみ設定可能

server/src/routes/projects.ts

@@ -26,6 +26,7 @@ const router = new Hono()
         data: {
           id: nanoid(),
           name: data.name,
+          description: data.description.trim() || null,
           startDate: new Date(data.startDate),
           endDate: new Date(data.endDate),
           allowedRanges: {
@@ -79,6 +80,7 @@ const router = new Hono()
         select: {
           id: true,
           name: true,
+          description: true,
           startDate: true,
           endDate: true,
           hosts: {
@@ -93,6 +95,7 @@ const router = new Hono()
         involvedProjects.map((p) => ({
           id: p.id,
           name: p.name,
+          description: p.description ?? "",
           startDate: p.startDate,
           endDate: p.endDate,
           isHost: p.hosts.some((host) => host.browserId === browserId),
@@ -136,6 +139,7 @@ const router = new Hono()
 
       const data = {
         ...projectRow,
+        description: projectRow.description ?? "",
         hosts: projectRow.hosts.map((h) => {
           const { browserId: _, ...rest } = h;
           return rest;
@@ -187,9 +191,13 @@ const router = new Hono()
       const updatedEvent = await prisma.project.update({
         where: { id: projectId },
         data: existingGuest
-          ? { name: data.name } // ゲストがいれば名前だけ
+          ? {
+              name: data.name,
+              description: data.description?.trim() || null,
+            } // ゲストがいれば名前と説明だけ
           : {
               name: data.name,
+              description: data.description?.trim() || null,
               startDate: data.startDate ? new Date(data.startDate) : undefined,
               endDate: data.endDate ? new Date(data.endDate) : undefined,
               allowedRanges: {