Merge pull request #401 from depromeet/hotfix/391/EmptyItem

hotfix: #391 Add PendingAnalysisPeople

apps/web/src/app/retrospect/analysis/RetrospectAnalysisPage.tsx

@@ -8,9 +8,11 @@ import { AnalysisContainer } from "@/component/retrospect/analysis/Analysis";
 import { PersonalForm } from "@/component/retrospect/analysis/PersonalForm.tsx";
 import { QuestionForm } from "@/component/retrospect/analysis/QuestionForm.tsx";
 import { useGetAnalysisAnswer } from "@/hooks/api/retrospect/analysis/useGetAnalysisAnswer.ts";
+import { useApiGetSpacePrivate } from "@/hooks/api/space/useGetSpace";
 import { useTabs } from "@/hooks/useTabs";
 import { DualToneLayout } from "@/layout/DualToneLayout";
 import { EmptyList } from "@/component/common/empty";
+import { PendingAnalysisingComp } from "@/component/retrospect/analysis/PendingAnalysisingComp";
 
 export const RetrospectAnalysisPage = () => {
   const { title, defaultTab } = useLocation().state as { title: string; defaultTab: "질문" | "개별" | "분석" };
@@ -25,14 +27,22 @@ export const RetrospectAnalysisPage = () => {
   const { tabs, curTab, selectTab } = useTabs(tabNames);
   const selectedTab = tabMappings[curTab];
   const queryParams = new URLSearchParams(location.search);
-  const spaceId = queryParams.get("spaceId");
-  const retrospectId = queryParams.get("retrospectId");
-  const { data, isLoading } = useGetAnalysisAnswer({ spaceId: spaceId!, retrospectId: retrospectId! });
+  const spaceId = queryParams.get("spaceId") as string;
+  const retrospectId = queryParams.get("retrospectId") as string;
+  const { data, isLoading } = useGetAnalysisAnswer({ spaceId: spaceId, retrospectId: retrospectId });
+  const { data: spaceInfo } = useApiGetSpacePrivate(Number(spaceId));
+  let pendingPeopleCnt;
+
+  if (spaceInfo && data) {
+    pendingPeopleCnt = spaceInfo.memberCount - data.individuals.length;
+  }
+
   useEffect(() => {
     if (defaultTab) {
       selectTab(defaultTab);
     }
   }, []);
+
   return (
     <DualToneLayout
       bottomTheme="gray"
@@ -43,14 +53,19 @@ export const RetrospectAnalysisPage = () => {
         </Fragment>
       }
     >
-      {isLoading && <LoadingModal />}
-      {!data || data.individuals.length === 0 ? (
+      {isLoading || !pendingPeopleCnt ? (
+        <LoadingModal />
+      ) : !data || data.individuals.length === 0 ? (
         <EmptyList icon={"ic_clock"} message={"제출된 회고가 없어요"} />
       ) : (
         {
           QUESTIONS: <QuestionForm data={data} />,
           INDIVIDUAL_ANALYSIS: <PersonalForm data={data} />,
-          ANALYSIS: <AnalysisContainer spaceId={spaceId!} retrospectId={retrospectId!} hasAIAnalyzed={data?.hasAIAnalyzed} />,
+          ANALYSIS: data.hasAIAnalyzed ? (
+            <AnalysisContainer spaceId={spaceId} retrospectId={retrospectId} hasAIAnalyzed={data.hasAIAnalyzed} />
+          ) : (
+            <PendingAnalysisingComp pendingPeople={pendingPeopleCnt} />
+          ),
         }[selectedTab]
       )}
     </DualToneLayout>

apps/web/src/component/retrospect/analysis/PendingAnalysisingComp.tsx

@@ -0,0 +1,36 @@
+import { css } from "@emotion/react";
+
+import { Icon } from "@/component/common/Icon";
+import { Spacing } from "@/component/common/Spacing";
+import { Typography } from "@/component/common/typography";
+
+export function PendingAnalysisingComp({ pendingPeople }: { pendingPeople: number }) {
+  return (
+    <div
+      css={css`
+        height: 100dvh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      `}
+    >
+      <Icon icon="ic_clock" size={8} />
+      <Spacing size={2} />
+      <Typography
+        variant="title18Bold"
+        color="gray900"
+        css={css`
+          text-align: center;
+        `}
+      >
+        {pendingPeople}명이 더 작성하면 <br />
+        분석 확인이 가능해요!
+      </Typography>
+      <Spacing size={3} />
+      <Typography variant="body16Medium" color="gray500">
+        모두 회고를 제출한 후에 분석을 시작할게요
+      </Typography>
+    </div>
+  );
+}