feat(fe): implement session termination (#218)

* feat: implement session termination and update session state handling

* feat: add session termination modal

Author: cjeongmin

apps/client/src/components/modal/SessionTerminateModal.tsx

@@ -0,0 +1,51 @@
+import { useModalContext } from '@/features/modal';
+
+import { Button } from '@/components';
+
+interface SessionTerminateModalProps {
+  onCancel?: () => void;
+  onConfirm?: () => void;
+}
+
+function SessionTerminateModal({
+  onCancel,
+  onConfirm,
+}: SessionTerminateModalProps) {
+  const { closeModal } = useModalContext();
+
+  return (
+    <div className='inline-flex flex-col items-center justify-center gap-2.5 rounded-lg bg-gray-50 p-8 shadow'>
+      <div className='flex h-[8dvh] min-w-[20dvw] flex-col justify-center gap-2'>
+        <div className='w-full text-center font-bold'>
+          <span>정말 세션을 종료하시겠습니까?</span>
+        </div>
+        <div className='mx-auto mt-4 inline-flex w-full items-start justify-center gap-2.5'>
+          <Button
+            className='w-full bg-gray-500'
+            onClick={() => {
+              onCancel?.();
+              closeModal();
+            }}
+          >
+            <span className='flex-grow text-sm font-medium text-white'>
+              취소하기
+            </span>
+          </Button>
+          <Button
+            className='w-full bg-indigo-600 transition-colors duration-200'
+            onClick={() => {
+              onConfirm?.();
+              closeModal();
+            }}
+          >
+            <span className='flex-grow text-sm font-medium text-white'>
+              종료하기
+            </span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SessionTerminateModal;

apps/client/src/components/qna/QuestionList.tsx

@@ -1,17 +1,19 @@
+import { isAxiosError } from 'axios';
 import { motion } from 'motion/react';
 import { useRef, useState } from 'react';
 import { GrValidate } from 'react-icons/gr';
 import { IoClose, IoShareSocialOutline } from 'react-icons/io5';
 
 import { useModal } from '@/features/modal';
-import { useSessionStore } from '@/features/session';
+import { postSessionTerminate, useSessionStore } from '@/features/session';
 import { useToastStore } from '@/features/toast';
 
 import {
   Button,
   CreateQuestionModal,
   SessionParticipantsModal,
 } from '@/components';
+import SessionTerminateModal from '@/components/modal/SessionTerminateModal';
 import QuestionSection from '@/components/qna/QuestionSection';
 import SessionSettingsDropdown from '@/components/qna/SessionSettingsDropdown';
 
@@ -22,6 +24,8 @@ function QuestionList() {
     questions,
     sessionId,
     sessionTitle,
+    sessionToken,
+    setExpired,
     setSelectedQuestionId,
   } = useSessionStore();
 
@@ -35,6 +39,36 @@ function QuestionList() {
     openModal: openSessionParticipantsModal,
   } = useModal(<SessionParticipantsModal />);
 
+  const { Modal: SessionTerminate, openModal: openSessionTerminateModal } =
+    useModal(
+      <SessionTerminateModal
+        onConfirm={() => {
+          if (!sessionId || !sessionToken) return;
+
+          postSessionTerminate({ sessionId, token: sessionToken })
+            .then((response) => {
+              if (response.expired) {
+                setExpired(true);
+                addToast({
+                  type: 'SUCCESS',
+                  message: '세션이 종료되었습니다',
+                  duration: 3000,
+                });
+              }
+            })
+            .catch((err) => {
+              if (isAxiosError(err) && err.response?.status === 403) {
+                addToast({
+                  type: 'ERROR',
+                  message: '세션 생성자만 세션을 종료할 수 있습니다',
+                  duration: 3000,
+                });
+              }
+            });
+        }}
+      />,
+    );
+
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -98,7 +132,7 @@ function QuestionList() {
     {
       icon: <IoClose />,
       label: '세션 종료',
-      onClick: () => {},
+      onClick: () => openSessionTerminateModal(),
     },
   ];
 
@@ -150,6 +184,7 @@ function QuestionList() {
       </div>
       {CreateQuestion}
       {SessionParticipants}
+      {SessionTerminate}
     </>
   );
 }

apps/client/src/features/session/session.api.ts

@@ -17,6 +17,9 @@ import {
   PostSessionRequestSchema,
   PostSessionResponseDTO,
   PostSessionResponseSchema,
+  PostSessionTerminateRequestDTO,
+  PostSessionTerminateRequestSchema,
+  PostSessionTerminateResponseSchema,
 } from '@/features/session/session.dto';
 
 export const postSession = (body: PostSessionRequestDTO) =>
@@ -73,3 +76,14 @@ export const patchSessionHost = (
       PatchSessionHostRequestSchema.parse(body),
     )
     .then((res) => PatchSessionHostResponseSchema.parse(res.data));
+
+export const postSessionTerminate = ({
+  token,
+  sessionId,
+}: PostSessionTerminateRequestDTO & { sessionId: string }) =>
+  axios
+    .post(
+      `/api/sessions/${sessionId}/terminate`,
+      PostSessionTerminateRequestSchema.parse({ token }),
+    )
+    .then((res) => PostSessionTerminateResponseSchema.parse(res.data));

apps/client/src/features/session/session.dto.ts

@@ -48,6 +48,14 @@ export const PatchSessionHostResponseSchema = z.object({
   user: UserSchema,
 });
 
+export const PostSessionTerminateRequestSchema = z.object({
+  token: z.string(),
+});
+
+export const PostSessionTerminateResponseSchema = z.object({
+  expired: z.boolean(),
+});
+
 export type PostSessionRequestDTO = z.infer<typeof PostSessionRequestSchema>;
 export type PostSessionResponseDTO = z.infer<typeof PostSessionResponseSchema>;
 export type GetSessionsResponseDTO = z.infer<typeof GetSessionsResponseSchema>;
@@ -66,3 +74,9 @@ export type PatchSessionHostRequestDTO = z.infer<
 export type PatchSessionHostResponseDTO = z.infer<
   typeof PatchSessionHostResponseSchema
 >;
+export type PostSessionTerminateRequestDTO = z.infer<
+  typeof PostSessionTerminateRequestSchema
+>;
+export type PostSessionTerminateResponseDTO = z.infer<
+  typeof PostSessionTerminateResponseSchema
+>;

apps/client/src/features/socket/socket.service.ts

@@ -132,6 +132,15 @@ export class SocketService {
           });
       },
     );
+
+    this.socket.on('sessionEnded', () => {
+      store.setExpired(true);
+      useToastStore.getState().addToast({
+        type: 'INFO',
+        message: '세션이 종료되었습니다.',
+        duration: 3000,
+      });
+    });
   }
 
   sendChatMessage(message: string) {