feat: 참/불참 테이블 개발

Nexters · Aug 23, 2024 · 9472e7c · 9472e7c
1 parent c8dfccb
commit 9472e7c
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 19 deletions.
diff --git a/src/app/(playground)/pg/invitation-response/[responseId]/invitation-response-info.tsx b/src/app/(playground)/pg/invitation-response/[responseId]/invitation-response-info.tsx
@@ -26,14 +26,16 @@ export default function InvitationResponseInfo() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{data.participant_name}</CardTitle>
-        <CardDescription>{data.attendance ? "참석" : "불참"}</CardDescription>
+        <CardTitle>{data[0].participant_name}</CardTitle>
+        <CardDescription>
+          {data[0].attendance ? "참석" : "불참"}
+        </CardDescription>
       </CardHeader>
       <CardContent>
-        <CardDescription>ID: {data.id}</CardDescription>
-        <CardDescription>사유: {data.reason || "없음"}</CardDescription>
+        <CardDescription>ID: {data[0].id}</CardDescription>
+        <CardDescription>사유: {data[0].reason || "없음"}</CardDescription>
         <CardDescription>
-          생성일: {new Date(data.created_at).toLocaleString()}
+          생성일: {new Date(data[0].created_at).toLocaleString()}
         </CardDescription>
       </CardContent>
     </Card>

diff --git a/src/components/editor/fab/invitation-response-fab.tsx b/src/components/editor/fab/invitation-response-fab.tsx
@@ -60,7 +60,7 @@ function InvitationResponseForm() {
       await createInvitationResponses({
         invitation_id: invitationId,
         participant_name: name,
-        attendance: attendance,
+        attendance: attendance.toLowerCase() === "true",
       });
       toast("참여가 완료되었습니다.", { duration: 2000 });
     },

diff --git a/src/components/editor/sidebar/sidebar-invitation-response-tab.tsx b/src/components/editor/sidebar/sidebar-invitation-response-tab.tsx
@@ -8,7 +8,17 @@ import {
   SheetTitle,
 } from "~/components/ui/sheet";
 import { Switch } from "~/components/ui/switch";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import type { InvitationResponse } from "~/lib/db/schema/invitation_response";
 import { getInvitationResponseById } from "~/lib/db/schema/invitation_response.query";
+import { formatUTCtoKST } from "~/lib/utils";
 
 export default function SidebarInvitationResponseTab() {
   const { editor, dispatch } = useEditor();
@@ -50,22 +60,74 @@ export default function SidebarInvitationResponseTab() {
     </div>
   );
 }
-
 function InvitationResponseContent() {
-  const { editor, dispatch } = useEditor();
-  const [invitationResponse, setInvitationResponse] = useState();
+  const { editor } = useEditor();
+  const [invitationResponses, setInvitationResponses] =
+    useState<InvitationResponse[]>();
+  const [isLoading, setIsLoading] = useState(true);
+
   useEffect(() => {
-    (async () => {
-      setInvitationResponse(
-        await getInvitationResponseById(editor.config.invitationId),
-      );
-    })();
-    console.log(invitationResponse);
-  }, [invitationResponse]);
+    async function fetchResponses() {
+      try {
+        setIsLoading(true);
+        const responses = await getInvitationResponseById(
+          editor.config.invitationId,
+        );
+        setInvitationResponses(responses);
+      } catch (error) {
+        console.error("Failed to fetch invitation responses:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchResponses();
+  }, [editor.config.invitationId]);
+
+  if (isLoading) {
+    return (
+      <div className="grid w-full grid-cols-9 gap-1 border-t p-6">
+        <div className="col-span-9">
+          <p className={"mb-2 text-lg font-bold"}>참석여부</p>
+          <p>참석여부 가져오는 중..</p>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="grid w-full grid-cols-9 gap-1 border-t p-6">
-      <div className="col-span-9"></div>
+      <div className="col-span-9">
+        <p className={"mb-2 text-lg font-bold"}>참석여부</p>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className={"w-1/3 overflow-x-auto"}>이름</TableHead>
+              <TableHead className={"w-1/3 overflow-x-auto"}>
+                참석여부
+              </TableHead>
+              <TableHead className={"w-1/3 overflow-x-auto"}>
+                응답 시간
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {invitationResponses?.map((invitationResponse) => (
+              <TableRow key={invitationResponse.id}>
+                <TableCell className={"w-1/3 overflow-x-auto"}>
+                  {invitationResponse?.participant_name}
+                </TableCell>
+                <TableCell className={"w-1/3 overflow-x-auto"}>
+                  {invitationResponse?.attendance ? "참여" : "불참"}
+                </TableCell>
+                <TableCell className={"w-1/3 overflow-x-auto"}>
+                  {formatUTCtoKST(invitationResponse.created_at)}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
     </div>
   );
 }
diff --git a/src/lib/db/schema/invitation_response.query.ts b/src/lib/db/schema/invitation_response.query.ts
@@ -22,8 +22,9 @@ export async function getInvitationResponseById(id: InvitationResponse["id"]) {
   const responses = await db
     .select()
     .from(invitationResponses)
-    .where(eq(invitationResponses.id, id));
-  return responses[0];
+    .where(eq(invitationResponses.invitation_id, id));
+
+  return responses as InvitationResponse[];
 }
 
 export async function getInvitationResponseStats() {

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -4,3 +4,28 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function formatUTCtoKST(utcDateString: Date) {
+  const date = new Date(utcDateString);
+
+  const kstDate = new Date(date.getTime() + 9 * 60 * 60 * 1000);
+
+  const formatter = new Intl.DateTimeFormat("ko-KR", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+    timeZone: "Asia/Seoul",
+  });
+
+  const formattedDate = formatter
+    .format(kstDate)
+    .replace(/\. /g, "-") // 연-월-일 사이의 구분자를 '-'로 변경
+    .replace(/\./g, "") // 연-월-일 뒤의 '.' 제거
+    .replace(/(\d{4}-\d{2}-\d{2}) (\d{2})(\d{2})(\d{2})/, "$1 $2:$3:$4"); // 시간 부분에 ':' 추가
+
+  return formattedDate;
+}