fix: 모임장 생성시 질문 시작안되도록 변경 (#152)

* fix: 질문 시작하기 버튼 링크 * fix: 모임원 한명일때 진행 안하도록 수정
depromeet · Aug 26, 2024 · b1a74fe · b1a74fe
1 parent 47141ac
commit b1a74fe
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 19 deletions.
diff --git a/...ges/web-domains/src/home/features/floating-button/components/StartRelayQuestionButton.tsx b/...ges/web-domains/src/home/features/floating-button/components/StartRelayQuestionButton.tsx
@@ -3,10 +3,13 @@ import { colors, size } from '@sambad/sds/theme';
 import Link from 'next/link';
 import { HTMLAttributes } from 'react';
 
-export const StartRelayQuestionButton = ({ ...rest }: HTMLAttributes<HTMLButtonElement>) => {
+interface StartRelayQuestionButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  meetingId?: number;
+}
+
+export const StartRelayQuestionButton = ({ meetingId, ...rest }: StartRelayQuestionButtonProps) => {
   return (
-    // <Link href={`${currentMeeting?.meetingId}/start-relay-question`}>
-    <Link href="/start-relay-question">
+    <Link href={`${meetingId}/start-relay-question`}>
       <Button css={{ height: size['3xl'] }} {...rest}>
         <Txt typography="subtitle1" color={colors.white}>
           릴레이 질문 시작하기

diff --git a/...ages/web-domains/src/home/features/floating-button/containers/FloatingButtonContainer.tsx b/...ages/web-domains/src/home/features/floating-button/containers/FloatingButtonContainer.tsx
@@ -6,7 +6,7 @@ import { StartRelayQuestionButton } from '../components/StartRelayQuestionButton
 import { useFloatingButtonService } from '../services/useFloatingButtonService';
 
 export const FloatingButtonContainer = () => {
-  const { buttonType, homeGlobalTime, handleClose, isOpen, open } = useFloatingButtonService();
+  const { buttonType, homeGlobalTime, handleClose, isOpen, open, meetingId, isOnlyOne } = useFloatingButtonService();
 
   return (
     <div
@@ -19,7 +19,7 @@ export const FloatingButtonContainer = () => {
         padding: '0 20px',
       }}
     >
-      {buttonType === 'start' && <StartRelayQuestionButton />}
+      {buttonType === 'start' && !isOnlyOne && <StartRelayQuestionButton meetingId={meetingId} />}
       {buttonType === 'countdown' && <AlreadyProgressingQuestionButton time={homeGlobalTime} onClick={open} />}
       <ProgressingQuestionModal isOpen={isOpen} time={homeGlobalTime} onClose={handleClose} />
     </div>

diff --git a/packages/web-domains/src/home/features/floating-button/services/useFloatingButtonService.ts b/packages/web-domains/src/home/features/floating-button/services/useFloatingButtonService.ts
@@ -2,6 +2,7 @@ import { useAtomValue } from 'jotai';
 import { useEffect, useState } from 'react';
 
 import { useDialogContext } from '@/common/contexts/DialogProvider';
+import { useGetGatherMemberList } from '@/home/common/apis/queries/useGetGatherMemberList';
 import { HomeAtoms } from '@/home/common/atoms/home.atom';
 
 export const useFloatingButtonService = () => {
@@ -15,6 +16,13 @@ export const useFloatingButtonService = () => {
   const isSelectedTarget = useAtomValue(HomeAtoms.isSelectedTargetAtom);
   const isNextTarget = useAtomValue(HomeAtoms.isNextTargetAtom);
 
+  const { data: memberList } = useGetGatherMemberList({
+    params: { meetingId: currentMeeting?.meetingId! },
+    options: {
+      enabled: !!currentMeeting?.meetingId,
+    },
+  });
+
   useEffect(() => {
     const showButton = isProgessingQuestion;
     const startButtonActive = !showButton && isSelectedTarget;
@@ -41,20 +49,15 @@ export const useFloatingButtonService = () => {
     close();
   };
 
-  // const handleClickRelayStartButton = () => {
-  //   if (isProgessingQuestion) {
-  //     open();
-  //     return;
-  //   }
-  //   push(`${currentMeeting?.meetingId}/start-relay-question`);
-  // };
+  const isOnlyOne = !!memberList && memberList.contents.length < 2;
 
   return {
+    meetingId: currentMeeting?.meetingId,
     isOpen,
     buttonType,
     homeGlobalTime: homeGlobalTime ?? 0,
     open,
     handleClose,
-    // handleClickRelayStartButton,
+    isOnlyOne,
   };
 };
diff --git a/packages/web-domains/src/home/features/notification/containers/NotificationContainer.tsx b/packages/web-domains/src/home/features/notification/containers/NotificationContainer.tsx
@@ -4,20 +4,28 @@ import { ArrivedQuestionNotification } from '../components/ArrivedQuestionNotifi
 import { SelectedTargetMemberNotification } from '../components/SelectedTargetMemberNotification';
 import { useNotificationService } from '../services/useNotificationService';
 export const NotificationContainer = () => {
-  const { meetingId, notfication, handleClose, isOpen, isNotAnswerd, isNotRegistered, handleClickActionLater } =
-    useNotificationService();
+  const {
+    meetingId,
+    notfication,
+    handleClose,
+    isOpen,
+    isNotAnswerd,
+    isNotRegistered,
+    handleClickActionLater,
+    isOnlyOne,
+  } = useNotificationService();
 
   return (
     <>
-      {notfication?.eventType === 'QUESTION_REGISTERED' && isNotAnswerd && (
+      {notfication?.eventType === 'QUESTION_REGISTERED' && isNotAnswerd && !isOnlyOne && (
         <ArrivedQuestionNotification
           meetingId={meetingId}
           isOpen={isOpen}
           onClose={handleClose}
           onClickAnswerLater={handleClickActionLater}
         />
       )}
-      {notfication?.eventType === 'TARGET_MEMBER' && isNotRegistered && (
+      {notfication?.eventType === 'TARGET_MEMBER' && isNotRegistered && !isOnlyOne && (
         <SelectedTargetMemberNotification
           meetingId={meetingId}
           isOpen={isOpen}

diff --git a/packages/web-domains/src/home/features/notification/services/useNotificationService.ts b/packages/web-domains/src/home/features/notification/services/useNotificationService.ts
@@ -6,6 +6,7 @@ import { useEffect } from 'react';
 import { PROGRESSING_QUESTION_QUERY_KEY } from '@/answer/common/apis/queries/useGetProgressingQuestion';
 import { useDialogContext } from '@/common/contexts/DialogProvider';
 import { useInActiveEventMutation } from '@/home/common/apis/mutations/useInActiveEventMutation';
+import { useGetGatherMemberList } from '@/home/common/apis/queries/useGetGatherMemberList';
 import { useGetNotification } from '@/home/common/apis/queries/useGetNotification';
 import { ProgressingQuestionType } from '@/home/common/apis/schema/useGetProgressingQuestionQuery.type';
 import { HomeAtoms } from '@/home/common/atoms/home.atom';
@@ -23,6 +24,13 @@ export const useNotificationService = () => {
     meetingId,
   ]);
 
+  const { data: memberList } = useGetGatherMemberList({
+    params: { meetingId: meetingId! },
+    options: {
+      enabled: !!meetingId,
+    },
+  });
+
   const { data: notfication } = useGetNotification({
     params: { meetingId: meetingId! },
     options: {
@@ -57,13 +65,15 @@ export const useNotificationService = () => {
     }
   }, [notfication, currentMeeting]);
 
+  const isOnlyOne = !!memberList && memberList.contents.length < 2;
+
   return {
     meetingId,
     notfication: notfication?.contents?.[0],
     isOpen,
     handleClose,
     handleClickActionLater,
-
+    isOnlyOne,
     isNotAnswerd: !progressingQuestionData?.isAnswered,
     isNotRegistered: !progressingQuestionData?.isQuestionRegistered,
   };

diff --git a/...mains/src/home/features/progressing-question/components/QuestionInfo/InActiveQuestion.tsx b/...mains/src/home/features/progressing-question/components/QuestionInfo/InActiveQuestion.tsx
@@ -20,13 +20,35 @@ const CountdownRender = dynamic(
 interface InActiveQuestionProps {
   time: number;
   targetMember: MemberType;
+  isOnlyOne: boolean;
 }
 
-export const InActiveQuestion = ({ time, targetMember }: InActiveQuestionProps) => {
+export const InActiveQuestion = ({ time, targetMember, isOnlyOne }: InActiveQuestionProps) => {
   const { name } = targetMember;
 
   const timer = getRemainTime(time);
 
+  if (isOnlyOne) {
+    return (
+      <div css={{ backgroundColor: colors.white, padding: '32px 20px', borderRadius: '16px', height: '182px' }}>
+        <div
+          css={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            height: '100%',
+          }}
+        >
+          <Avatar Icon={ClockIcon} size={40} />
+          <Txt as="p" typography="title3" color={colors.grey600} css={{ marginTop: '12px' }}>
+            모임원이 입장해야 시작할 수 있어요!
+          </Txt>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div css={{ backgroundColor: colors.white, padding: '32px 20px', borderRadius: '16px', height: '182px' }}>
       <div css={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}>

diff --git a/...omains/src/home/features/progressing-question/containers/ProgressingQuestionContainer.tsx b/...omains/src/home/features/progressing-question/containers/ProgressingQuestionContainer.tsx
@@ -20,6 +20,7 @@ export const ProgressingQuestionContainer = () => {
     gatherName,
     progressingQuestion,
     meetingId,
+    isOnlyOne,
   } = useProgressingQuestionService();
 
   return (
@@ -46,6 +47,7 @@ export const ProgressingQuestionContainer = () => {
               <InActiveQuestion
                 targetMember={progressingQuestion.targetMember}
                 time={dayjs(progressingQuestion.startTime).valueOf()}
+                isOnlyOne={isOnlyOne}
               />
             )
           }

diff --git a/...domains/src/home/features/progressing-question/services/useProgressingQuestionService.tsx b/...domains/src/home/features/progressing-question/services/useProgressingQuestionService.tsx
@@ -2,6 +2,7 @@ import dayjs from 'dayjs';
 import { useSetAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 
+import { useGetGatherMemberList } from '@/home/common/apis/queries/useGetGatherMemberList';
 import { useGetMyInfo } from '@/home/common/apis/queries/useGetMyInfo';
 import { HomeAtoms } from '@/home/common/atoms/home.atom';
 import { useSetCurrentMeeting } from '@/home/common/hooks/useSetCurrentMeeting';
@@ -22,6 +23,13 @@ export const useProgressingQuestionService = () => {
     options: { enabled: !!meetingId },
   });
 
+  const { data: memberList } = useGetGatherMemberList({
+    params: { meetingId: meetingId! },
+    options: {
+      enabled: !!meetingId,
+    },
+  });
+
   const { data: progressingQuestion } = useGetProgressingQuestion({
     params: { meetingId: meetingId! },
     options: {
@@ -67,7 +75,10 @@ export const useProgressingQuestionService = () => {
     }
   }, [progressingQuestion, myInfo]);
 
+  const isOnlyOne = !!memberList && memberList.contents.length < 2;
+
   return {
+    isOnlyOne,
     meetingInfo,
     isOpen,
     meetingId,