fix: 답변 페이지 만료 대응

packages/web-domains/src/answer/features/progressing-question/containers/ProgressingQuestionContainer.tsx

@@ -1,7 +1,10 @@
 'use client';
 
-import { Txt } from '@sambad/sds/components';
+import { Button, Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
+import Link from 'next/link';
+
+import { EmptyView } from '@/common/components';
 
 import { AnswerCountDown } from '../../../common/components/Countdown/AnswerCountdown';
 import { StartButton } from '../../floating-button/components/StartButton';
@@ -11,12 +14,44 @@ import { useProgressingQuestionService } from '../services/useProgressingQuestio
 
 export const ProgressingQuestionContainer = () => {
   const { progressingQuestion, meetingId } = useProgressingQuestionService();
+
   const isNowAnswered = !progressingQuestion?.isAnswered;
 
   if (!progressingQuestion) {
     return null;
   }
 
+  if (!progressingQuestion.isQuestionRegistered) {
+    return (
+      <section css={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <EmptyView
+          title={
+            !progressingQuestion?.isQuestionRegistered ? '답변 시간이 만료되었어요!' : '현재 진행중인 질문이 없어요!'
+          }
+          style={{ height: '50%' }}
+          css={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)' }}
+        />
+        <Link
+          href="/home"
+          css={{
+            position: 'fixed',
+            bottom: '40px',
+            margin: '0 auto',
+            width: '100%',
+            maxWidth: '600px',
+            padding: '0 20px',
+          }}
+        >
+          <Button size="large">
+            <Txt typography="subtitle1" color={colors.white}>
+              홈으록 가기
+            </Txt>
+          </Button>
+        </Link>
+      </section>
+    );
+  }
+
   return (
     <section css={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
       <div css={{ padding: '14px 20px', textAlign: 'center' }}>

packages/web-domains/src/answer/features/progressing-question/services/useProgressingQuestionService.tsx

@@ -1,14 +1,31 @@
+import { useQueryClient } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { useSetAtom } from 'jotai';
 import { useParams } from 'next/navigation';
+import { useEffect } from 'react';
 
 import { answerAtoms } from '@/answer/common/atoms/answer.atom';
+import { useUpdateLastMeeting } from '@/home/common/apis/mutations/useUpdateLastMeeting';
+import { MEETING_INFO_QUERY_KEY } from '@/home/common/apis/queries/useGetMeetingName';
+import { PROGRESSING_QUESTION_QUERY_KEY } from '@/home/common/apis/queries/useGetProgressingQuestion';
 
 import { useGetProgressingQuestion } from '../../../common/apis/queries/useGetProgressingQuestion';
 
 export const useProgressingQuestionService = () => {
+  const queryClient = useQueryClient();
   const { meetingId } = useParams<{ meetingId: string }>();
   const setAnswerGlobalTime = useSetAtom(answerAtoms.answerGlobalTime);
+  const { mutateAsync } = useUpdateLastMeeting({
+    options: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: [MEETING_INFO_QUERY_KEY] });
+        queryClient.invalidateQueries({ queryKey: [PROGRESSING_QUESTION_QUERY_KEY] });
+      },
+      onError: (error) => {
+        console.log(error);
+      },
+    },
+  });
 
   const { data: progressingQuestion } = useGetProgressingQuestion({
     params: { meetingId: parseInt(meetingId) },
@@ -23,6 +40,10 @@ export const useProgressingQuestionService = () => {
     },
   });
 
+  useEffect(() => {
+    mutateAsync({ meetingId: parseInt(meetingId) });
+  }, []);
+
   return {
     meetingId,
     gatherName: '삼봤드의 모험',

packages/web-domains/src/answer/features/top-bar/containers/TopBarContainer.tsx

@@ -3,5 +3,5 @@
 import { ActionBar } from '../../../../common/components/ActionBar/ActionBar';
 
 export const TobBarContainer = () => {
-  return <ActionBar css={{ marginBottom: '8px' }} />;
+  return <ActionBar css={{ marginBottom: '8px' }} pushLink="/home" />;
 };

packages/web-domains/src/common/components/ActionBar/ActionBar.tsx

@@ -10,16 +10,21 @@ import { actionBarWrapperStyles, addOnStyles, buttonStyles } from './ActionBar.s
 
 interface ActionBarProps extends HTMLAttributes<HTMLHeadElement> {
   disableBack?: boolean;
+  pushLink?: string;
   title?: string;
   rightDecor?: ReactNode;
   onBack?: () => void;
 }
 
-export const ActionBar = ({ disableBack = false, title, rightDecor, onBack, ...rest }: ActionBarProps) => {
-  const { back } = useRouter();
+export const ActionBar = ({ disableBack = false, pushLink, title, rightDecor, onBack, ...rest }: ActionBarProps) => {
+  const { back, push } = useRouter();
 
   const handleBack = () => {
-    back();
+    if (pushLink) {
+      push(pushLink);
+    } else {
+      back();
+    }
     onBack?.();
   };
 

packages/web-domains/src/home/common/apis/mutations/useUpdateLastMeeting.ts

@@ -1,5 +1,4 @@
 import { UseMutationOptions, useMutation } from '@tanstack/react-query';
-import { isAxiosError } from 'axios';
 
 import { Http } from '@/common/apis/base.api';
 
@@ -12,14 +11,8 @@ interface Args {
 export const useUpdateLastMeeting = ({ options }: Args = {}) => {
   return useMutation({
     mutationFn: async (params: Params) => {
-      try {
-        const data = await updateLastMeeting(params);
-        return data;
-      } catch (error) {
-        if (isAxiosError(error)) {
-          console.error(error);
-        }
-      }
+      const data = await updateLastMeeting(params);
+      return data;
     },
     ...options,
   });