fix: 릴레이 질문 도착시 CTA 버튼 노출 조건 수정

packages/web-domains/src/answer/common/apis/queries/useGetProgressingQuestion.ts

@@ -3,8 +3,8 @@ import { QueryClient, useQuery } from '@tanstack/react-query';
 import { isAxiosError } from 'axios';
 import { ReadonlyRequestCookies } from 'next/dist/server/web/spec-extension/adapters/request-cookies';
 
-import { ProgressingQuestionType } from '@/answer/common/apis/schema/useGetProgressingQuestionQuery.type';
 import { Http } from '@/common/apis/base.api';
+import { ProgressingQuestionType } from '@/home/common/apis/schema/useGetProgressingQuestionQuery.type';
 
 type Params = { meetingId: number };
 

packages/web-domains/src/answer/common/apis/schema/useGetProgressingQuestionQuery.type.ts

@@ -1,20 +1 @@
-export type ProgressingQuestionType = {
-  meetingQuestionId: number;
-  questionImageFileUrl: string;
-  title: string;
-  questionNumber: number;
-  startTime: Date;
-  engagementRate: number;
-  totalMeetingMemberCount: number;
-  responseCount: number;
-  isAnswered: boolean;
-  isQuestionRegistered: boolean;
-  targetMember: MemberType;
-};
 
-export type MemberType = {
-  meetingMemberId: number;
-  name: string;
-  profileImageFileUrl?: string;
-  role: 'OWNER' | 'ADMIN' | 'MEMBER';
-};

packages/web-domains/src/home/common/apis/schema/useGetProgressingQuestionQuery.type.ts

@@ -10,6 +10,7 @@ export type ProgressingQuestionType = {
   isAnswered: boolean;
   isQuestionRegistered: boolean;
   targetMember: MemberType;
+  nextTargetMember: MemberType | null;
 };
 
 export type MemberType = {

packages/web-domains/src/home/common/atoms/home.atom.ts

@@ -5,3 +5,5 @@ export const isProgessingQuestionAtom = atom<boolean>(false);
 export const isSelectedTargetAtom = atom<boolean>(false);
 
 export const homeGlobalTimeAtom = atom<number | null>(null);
+
+export const isNextTargetAtom = atom<boolean>(false);

packages/web-domains/src/home/features/floating-button/components/AlreadyProgressingQuestionButton.tsx

@@ -2,49 +2,39 @@
 
 import { Button, Txt } from '@sambad/sds/components';
 import { colors, size } from '@sambad/sds/theme';
+import dynamic from 'next/dynamic';
 import Countdown from 'react-countdown';
 
-// import { useDialogContext } from '../../../../common/contexts/DialogProvider';
 import { getRemainTime } from '../../../common/utils/getRemainTime';
 
 interface AlreadyProgressingQuestionButtonProps {
   time: number | string | Date;
+  onClick: () => void;
 }
 
-export const AlreadyProgressingQuestionButton = ({ time }: AlreadyProgressingQuestionButtonProps) => {
+const CountdownRender = dynamic(
+  () =>
+    import('./AlreadyProgressingQuestionButtonCountdownRender.tsx').then(
+      (mod) => mod.AlreadyProgressingQuestionButtonCountdownRender,
+    ),
+  {
+    ssr: true,
+  },
+);
+
+export const AlreadyProgressingQuestionButton = ({ time, onClick }: AlreadyProgressingQuestionButtonProps) => {
   const countdownTimer = getRemainTime(time);
 
   return (
-    <Button css={{ height: size['3xl'], backgroundColor: colors.grey500 }}>
+    <Button css={{ height: size['3xl'], backgroundColor: colors.grey500 }} onClick={onClick}>
       <Txt typography="subtitle1" color={colors.grey500}>
-        <Countdown date={countdownTimer} renderer={CountdownRender} />
+        <Countdown
+          date={countdownTimer}
+          renderer={({ hours, minutes, seconds }) => (
+            <CountdownRender hours={hours} minutes={minutes} seconds={seconds} />
+          )}
+        />
       </Txt>
     </Button>
   );
 };
-
-const CountdownRender = ({ hours, minutes, seconds }: { hours: number; minutes: number; seconds: number }) => {
-  const renderHours = hours < 10 ? `0${hours}` : `${hours}`;
-  const renderMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
-  const renderseconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
-
-  return (
-    <div>
-      <Txt typography="subtitle1" color={colors.grey600}>
-        {renderHours}
-      </Txt>
-      <Txt typography="subtitle1" color={colors.grey600} css={{ padding: '0 4px' }}>
-        :
-      </Txt>
-      <Txt typography="subtitle1" color={colors.grey600}>
-        {renderMinutes}
-      </Txt>
-      <Txt typography="subtitle1" color={colors.grey600} css={{ padding: '0 4px' }}>
-        :
-      </Txt>
-      <Txt typography="subtitle1" color={colors.grey600}>
-        {renderseconds}
-      </Txt>
-    </div>
-  );
-};

packages/web-domains/src/home/features/floating-button/components/AlreadyProgressingQuestionButtonCountdownRender.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Txt } from '@sds/components';
+import { colors } from '@sds/theme';
+
+export const AlreadyProgressingQuestionButtonCountdownRender = ({
+  hours,
+  minutes,
+  seconds,
+}: {
+  hours: number;
+  minutes: number;
+  seconds: number;
+}) => {
+  const renderHours = hours < 10 ? `0${hours}` : `${hours}`;
+  const renderMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
+  const renderseconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+
+  return (
+    <div>
+      <Txt typography="subtitle1" color={colors.grey600}>
+        {renderHours}
+      </Txt>
+      <Txt typography="subtitle1" color={colors.grey600} css={{ padding: '0 4px' }}>
+        :
+      </Txt>
+      <Txt typography="subtitle1" color={colors.grey600}>
+        {renderMinutes}
+      </Txt>
+      <Txt typography="subtitle1" color={colors.grey600} css={{ padding: '0 4px' }}>
+        :
+      </Txt>
+      <Txt typography="subtitle1" color={colors.grey600}>
+        {renderseconds}
+      </Txt>
+    </div>
+  );
+};

packages/web-domains/src/home/features/floating-button/components/ProgressingQuestionModal.tsx

@@ -1,6 +1,7 @@
 import { Button, Txt } from '@sambad/sds/components';
-import { borderRadiusVariants, colors } from '@sambad/sds/theme';
+import { colors } from '@sambad/sds/theme';
 import dayjs from 'dayjs';
+import dynamic from 'next/dynamic';
 import Countdown from 'react-countdown';
 
 import { Modal, ModalProps } from '../../../../common/components/Modal/Modal';
@@ -10,6 +11,14 @@ interface ProgressingQuestionModalProps extends ModalProps {
   countdownTimer: number | string | Date;
 }
 
+const CountdownRender = dynamic(
+  () =>
+    import('./ProgressingQuestionModalCountdownRender.tsx').then((mod) => mod.ProgressingQuestionModalCountdownRender),
+  {
+    ssr: true,
+  },
+);
+
 export const ProgressingQuestionModal = ({ countdownTimer, ...rest }: ProgressingQuestionModalProps) => {
   const { isOpen, close } = useDialogContext();
 
@@ -31,7 +40,12 @@ export const ProgressingQuestionModal = ({ countdownTimer, ...rest }: Progressin
           <Txt as="p" typography="body3" color={colors.grey600}>
             릴레이 질문을 생성할 수 있어요
           </Txt>
-          <Countdown date={timer} renderer={CountdownRender} />
+          <Countdown
+            date={timer}
+            renderer={({ hours, minutes, seconds }) => (
+              <CountdownRender hours={hours} minutes={minutes} seconds={seconds} />
+            )}
+          />
           <Button variant="sub">
             <Txt typography="title3" color={colors.black}>
               닫기
@@ -42,42 +56,3 @@ export const ProgressingQuestionModal = ({ countdownTimer, ...rest }: Progressin
     </Modal>
   );
 };
-
-const CountdownRender = ({ hours, minutes, seconds }: { hours: number; minutes: number; seconds: number }) => {
-  const renderHours = hours < 10 ? `0${hours}` : `${hours}`;
-  const renderMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
-  const renderseconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
-
-  return (
-    <div
-      css={{
-        width: '198px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '76px',
-        padding: '20px 28px',
-        borderRadius: borderRadiusVariants.medium,
-        backgroundColor: colors.grey200,
-        marginTop: '20px',
-        marginBottom: '28px',
-      }}
-    >
-      <Txt typography="heading1" color={colors.black}>
-        {renderHours}
-      </Txt>
-      <Txt typography="heading1" color={colors.grey500} css={{ padding: '0 8px' }}>
-        :
-      </Txt>
-      <Txt typography="heading1" color={colors.black}>
-        {renderMinutes}
-      </Txt>
-      <Txt typography="heading1" color={colors.grey500} css={{ padding: '0 8px' }}>
-        :
-      </Txt>
-      <Txt typography="heading1" color={colors.black}>
-        {renderseconds}
-      </Txt>
-    </div>
-  );
-};

packages/web-domains/src/home/features/floating-button/components/ProgressingQuestionModalCountdownRender.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Txt } from '@sds/components';
+import { borderRadiusVariants, colors } from '@sds/theme';
+
+export const ProgressingQuestionModalCountdownRender = ({
+  hours,
+  minutes,
+  seconds,
+}: {
+  hours: number;
+  minutes: number;
+  seconds: number;
+}) => {
+  const renderHours = hours < 10 ? `0${hours}` : `${hours}`;
+  const renderMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
+  const renderseconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+
+  return (
+    <div
+      css={{
+        width: '198px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '76px',
+        padding: '20px 28px',
+        borderRadius: borderRadiusVariants.medium,
+        backgroundColor: colors.grey200,
+        marginTop: '20px',
+        marginBottom: '28px',
+      }}
+    >
+      <Txt typography="heading1" color={colors.black}>
+        {renderHours}
+      </Txt>
+      <Txt typography="heading1" color={colors.grey500} css={{ padding: '0 8px' }}>
+        :
+      </Txt>
+      <Txt typography="heading1" color={colors.black}>
+        {renderMinutes}
+      </Txt>
+      <Txt typography="heading1" color={colors.grey500} css={{ padding: '0 8px' }}>
+        :
+      </Txt>
+      <Txt typography="heading1" color={colors.black}>
+        {renderseconds}
+      </Txt>
+    </div>
+  );
+};

packages/web-domains/src/home/features/floating-button/containers/FloatingButtonContainer.tsx

@@ -6,14 +6,15 @@ import { StartRelayQuestionButton } from '../components/StartRelayQuestionButton
 import { useFloatingButtonService } from '../services/useFloatingButtonService';
 
 export const FloatingButtonContainer = () => {
-  const { buttonType, homeGlobalTime, handleClose, isOpen, handleClickRelayStartButton } = useFloatingButtonService();
+  const { buttonType, homeGlobalTime, handleClose, isOpen, handleClickRelayStartButton, open } =
+    useFloatingButtonService();
 
   return (
     <div
       css={{ position: 'fixed', bottom: '40px', margin: '0 auto', width: '100%', maxWidth: '600px', padding: '0 20px' }}
     >
       {buttonType === 'start' && <StartRelayQuestionButton onClick={handleClickRelayStartButton} />}
-      {buttonType === 'countdown' && <AlreadyProgressingQuestionButton time={homeGlobalTime} />}
+      {buttonType === 'countdown' && <AlreadyProgressingQuestionButton time={homeGlobalTime} onClick={open} />}
       <ProgressingQuestionModal isOpen={isOpen} countdownTimer={homeGlobalTime} onClose={handleClose} />
     </div>
   );

packages/web-domains/src/home/features/floating-button/services/useFloatingButtonService.ts

@@ -2,7 +2,12 @@ import { useAtomValue } from 'jotai';
 import { useRouter } from 'next/navigation';
 
 import { useDialogContext } from '@/common/contexts/DialogProvider';
-import { homeGlobalTimeAtom, isProgessingQuestionAtom, isSelectedTargetAtom } from '@/home/common/atoms/home.atom';
+import {
+  homeGlobalTimeAtom,
+  isNextTargetAtom,
+  isProgessingQuestionAtom,
+  isSelectedTargetAtom,
+} from '@/home/common/atoms/home.atom';
 
 export const useFloatingButtonService = () => {
   const { isOpen, open, close } = useDialogContext();
@@ -11,12 +16,13 @@ export const useFloatingButtonService = () => {
   const homeGlobalTime = useAtomValue(homeGlobalTimeAtom);
   const isProgessingQuestion = useAtomValue(isProgessingQuestionAtom);
   const isSelectedTarget = useAtomValue(isSelectedTargetAtom);
+  const isNextTarget = useAtomValue(isNextTargetAtom);
   let buttonType: 'start' | 'countdown' | null = null;
 
   const showButton = isProgessingQuestion;
 
   const startButtonActive = !showButton && isSelectedTarget;
-  const countDownButtonActive = showButton && !isSelectedTarget;
+  const countDownButtonActive = showButton && isNextTarget;
 
   if (startButtonActive) {
     buttonType = 'start';

packages/web-domains/src/home/features/notification/services/useNotificationService.ts

@@ -2,10 +2,10 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useEffect } from 'react';
 
 import { PROGRESSING_QUESTION_QUERY_KEY } from '@/answer/common/apis/queries/useGetProgressingQuestion';
-import { ProgressingQuestionType } from '@/answer/common/apis/schema/useGetProgressingQuestionQuery.type';
 import { useDialogContext } from '@/common/contexts/DialogProvider';
 import { useGetMeetingInfo } from '@/home/common/apis/queries/useGetMeetingName';
 import { useGetNotification } from '@/home/common/apis/queries/useGetNotification';
+import { ProgressingQuestionType } from '@/home/common/apis/schema/useGetProgressingQuestionQuery.type';
 
 export const useNotificationService = () => {
   const queryClient = useQueryClient();

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

@@ -3,14 +3,20 @@ import { useSetAtom } from 'jotai';
 
 import { useGetMeetingInfo } from '@/home/common/apis/queries/useGetMeetingName';
 import { useGetMyInfo } from '@/home/common/apis/queries/useGetMyInfo';
-import { homeGlobalTimeAtom, isProgessingQuestionAtom, isSelectedTargetAtom } from '@/home/common/atoms/home.atom';
+import {
+  homeGlobalTimeAtom,
+  isNextTargetAtom,
+  isProgessingQuestionAtom,
+  isSelectedTargetAtom,
+} from '@/home/common/atoms/home.atom';
 
 import { useGetProgressingQuestion } from '../../../common/apis/queries/useGetProgressingQuestion';
 
 export const useProgressingQuestionService = () => {
   const setIsProgressingQuestion = useSetAtom(isProgessingQuestionAtom);
   const setHomeGlobalTime = useSetAtom(homeGlobalTimeAtom);
   const setSelectedTarget = useSetAtom(isSelectedTargetAtom);
+  const setIsNextTarget = useSetAtom(isNextTargetAtom);
   const { data: meetingInfo } = useGetMeetingInfo({
     options: { gcTime: Infinity },
   });
@@ -38,6 +44,10 @@ export const useProgressingQuestionService = () => {
         if (data?.startTime) {
           setHomeGlobalTime(dayjs(data.startTime).valueOf());
         }
+
+        if (data?.nextTargetMember?.meetingMemberId === myInfo?.meetingMemberId) {
+          setIsNextTarget(true);
+        }
         return data;
       },
       enabled: !!meetingId,