feat: show end time on terminated agenda card

packages/api/src/listener/admin.agenda.ts

@@ -38,22 +38,26 @@ router.on(
 
         const startNotice = await createNotice(ongoingAgenda, user);
         io.emit("chat.received", startNotice);
-        break;
+
+        io.to("admin").emit("admin.agenda.statusUpdated", req);
+        return {};
       }
       case "terminated": {
         const terminatedAgenda = await terminateAgenda(req.id, user);
         io.emit("agenda.terminated", terminatedAgenda);
 
         const terminateNotice = await createNotice(terminatedAgenda, user);
         io.emit("chat.received", terminateNotice);
-        break;
+
+        io.to("admin").emit("admin.agenda.statusUpdated", {
+          ...req,
+          endAt: terminatedAgenda.endAt,
+        });
+        return {};
       }
       default:
         return {};
     }
-
-    io.to("admin").emit("admin.agenda.statusUpdated", req);
-    return {};
   },
 );
 

packages/interface/src/admin/agenda/client.ts

@@ -28,6 +28,7 @@ export type RetrieveAllCb = z.infer<typeof RetrieveAllCb>;
 export const StatusUpdate = z.object({
   id: z.number(),
   status: AgendaStatus,
+  endAt: z.string().optional(),
 });
 export type StatusUpdate = z.infer<typeof StatusUpdate>;
 export const StatusUpdateCb = z.object({});

packages/interface/src/admin/agenda/server.ts

@@ -18,6 +18,7 @@ export type Created = z.infer<typeof Created>;
 export const StatusUpdated = z.object({
   id: z.number(),
   status: AgendaStatus,
+  endAt: z.string().optional(),
 });
 export type StatusUpdated = z.infer<typeof StatusUpdated>;
 

packages/web/src/components/molecules/AgendaCard/TerminatedAgendaCard.tsx

@@ -8,8 +8,21 @@ import { OptionVoteResult } from "@biseo/web/components/molecules/OptionVoteResu
 import { VoteResult } from "@biseo/web/components/molecules/VoteResult";
 import { VoteDetail } from "@biseo/web/components/molecules/VoteDetail";
 import { VoteParticipate } from "@biseo/web/components/molecules/VoteParticipate";
-import { align, column, gap, justify, row, text, w } from "@biseo/web/styles";
-import { formatDateSimple } from "@biseo/web/utils/format";
+import {
+  align,
+  center,
+  column,
+  gap,
+  justify,
+  row,
+  text,
+  w,
+} from "@biseo/web/styles";
+import {
+  formatDate,
+  formatDateSimple,
+  formatTime,
+} from "@biseo/web/utils/format";
 
 const agendaTags = {
   public: true,
@@ -43,18 +56,20 @@ export const TerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
       {enabled ? (
         <div css={[column, gap(15), w("fill")]}>
           <div css={[column, gap(2)]}>
-            <div css={[row, justify.between, align.center]}>
-              <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
-              <p css={[text.subtitle, text.gray400]}>
-                {formatDateSimple(agenda.endAt)}
-              </p>
-            </div>
+            <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
             <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
           </div>
           <div>
             <p css={[text.body, text.blue600]}>{agenda.resolution}</p>
           </div>
           <Divider />
+          <div css={[row, center, justify.between, text.subtitle, text.black]}>
+            <span>투표 일시</span>
+            <span css={[row, gap(4)]}>
+              <span>{formatDate(agenda.endAt)}</span>
+              <span>{formatTime(agenda.endAt)}</span>
+            </span>
+          </div>
           <VoteParticipate
             voted={agenda.voters.voted}
             total={agenda.voters.total}

packages/web/src/services/admin-agenda.ts

@@ -11,7 +11,7 @@ interface AdminAgendaState {
   adminAgendas: AdminAgenda[];
   createAgenda: (agenda: AdminAgendaCreate) => void;
   retrieveAll: () => void;
-  statusUpdate: (id: number, status: AgendaStatus) => void;
+  statusUpdate: (id: number, status: AgendaStatus, endAt?: string) => void;
   updateAgenda: (agenda: AdminAgendaUpdate) => void;
   deleteAgenda: (id: number) => void;
   remindAgenda: (id: number) => void;
@@ -39,11 +39,12 @@ export const useAdminAgenda = create<AdminAgendaState>(set => ({
       // TODO: handle error
     }
   },
-  statusUpdate: async (id, status) => {
+  statusUpdate: async (id, status, endAt) => {
     try {
       await socket.emitAsync("admin.agenda.statusUpdate", {
         id,
         status,
+        endAt,
       });
     } catch {
       // TODO: handle error
@@ -81,11 +82,11 @@ socket.on("admin.agenda.created", adminAgenda => {
   }));
 });
 
-socket.on("admin.agenda.statusUpdated", ({ id, status }) => {
+socket.on("admin.agenda.statusUpdated", ({ id, status, endAt }) => {
   useAdminAgenda.setState(state => {
     const newAdminAgendas: AdminAgenda[] = state.adminAgendas.map(agenda => {
       if (agenda.id === id) {
-        return { ...agenda, status };
+        return { ...agenda, status, endAt: endAt || "" };
       }
       return agenda;
     });