Merge pull request #403 from depromeet/develop

develop -> main
depromeet · Sep 14, 2024 · cb589c4 · cb589c4
2 parents 1b89d40 + 7483545
commit cb589c4
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 40 deletions.
diff --git a/apps/web/src/app/retrospect/analysis/RetrospectAnalysisPage.tsx b/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 = 0;
+
+  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 ? (
+        <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>

diff --git a/apps/web/src/app/retrospectCreate/RetrospectCreateComplete.tsx b/apps/web/src/app/retrospectCreate/RetrospectCreateComplete.tsx
@@ -12,8 +12,8 @@ import { useTestNatigate } from "@/lib/test-natigate";
 
 export function RetrospectCreateComplete() {
   const navigate = useTestNatigate();
-  const locationState = useLocation().state as { spaceId: number; retrospectId: number };
-  const { spaceId, retrospectId } = locationState;
+  const locationState = useLocation().state as { spaceId: number; retrospectId: number; title: string; introduction: string };
+  const { spaceId, retrospectId, title, introduction } = locationState;
   return (
     <DefaultLayout>
       <Spacing size={2.9} />
@@ -39,7 +39,7 @@ export function RetrospectCreateComplete() {
         <ButtonProvider.Primary
           onClick={() => {
             navigate("/write", {
-              state: { spaceId, retrospectId },
+              state: { spaceId, retrospectId, title, introduction },
             });
           }}
         >

diff --git a/apps/web/src/app/write/RetrospectWritePage.tsx b/apps/web/src/app/write/RetrospectWritePage.tsx
@@ -24,6 +24,8 @@ type PhaseContextProps = {
   decrementPhase: () => void;
   spaceId: number;
   retrospectId: number;
+  title: string;
+  introduction: string;
 };
 
 export const AdvanceQuestionsNum = 2;
@@ -32,6 +34,8 @@ export const PhaseContext = createContext<PhaseContextProps>({
   phase: 1,
   spaceId: -1,
   retrospectId: -1,
+  title: "",
+  introduction: "",
   movePhase: () => {},
   incrementPhase: () => {},
   decrementPhase: () => {},
@@ -48,7 +52,12 @@ function adjustOrder(data: QuestionData): QuestionData {
 
 export function RetrospectWritePage() {
   const location = useLocation();
-  const { spaceId, retrospectId } = location.state as { spaceId: number; retrospectId: number };
+  const { spaceId, retrospectId, title, introduction } = location.state as {
+    spaceId: number;
+    retrospectId: number;
+    title: string;
+    introduction: string;
+  };
   const [phase, setPhase] = useState(-1);
 
   const { data, isLoading } = useGetQuestions({ spaceId: spaceId, retrospectId: retrospectId });
@@ -75,7 +84,9 @@ export function RetrospectWritePage() {
   return (
     <Fragment>
       {isLoading && <LoadingModal purpose={"회고 작성을 위한 데이터를 가져오고 있어요"} />}
-      <PhaseContext.Provider value={{ data: adjustedData ?? defaultData, phase, movePhase, incrementPhase, decrementPhase, spaceId, retrospectId }}>
+      <PhaseContext.Provider
+        value={{ data: adjustedData ?? defaultData, phase, movePhase, incrementPhase, decrementPhase, spaceId, retrospectId, title, introduction }}
+      >
         {phase >= 0 ? <Write /> : <Prepare />}
       </PhaseContext.Provider>
     </Fragment>

diff --git a/apps/web/src/component/actionItem/NotActionItemBoxData.tsx b/apps/web/src/component/actionItem/NotActionItemBoxData.tsx
@@ -51,7 +51,7 @@ export function NotActionItemBoxData() {
             }
           `}
         >
-          <Typography>30일간 진행한 회고가 없어요!</Typography>
+          <Typography>설정된 실행목표가 없어요!</Typography>
           <Typography>회고를 진행해 실행목표를 설정해보세요</Typography>
         </div>
         <Spacing size={3} />

diff --git a/apps/web/src/component/home/EmptyAnalysis.tsx b/apps/web/src/component/home/EmptyAnalysis.tsx
@@ -36,7 +36,7 @@ export function EmptyAnalysis() {
           line-height: 1.5;
         `}
       >
-        완료된 회고가 없어요 <br />
+        분석 완료된 회고가 없어요 <br />
         회고를 진행해 분석을 받아보세요!
       </Typography>
       <Spacing size={3} />

diff --git a/apps/web/src/component/home/SpaceOverview.tsx b/apps/web/src/component/home/SpaceOverview.tsx
@@ -75,6 +75,7 @@ const SpaceOverview = forwardRef<HTMLDivElement, SpaceOverviewProps>(
               width: 100%;
               display: flex;
               justify-content: space-between;
+              align-items: center;
               margin-top: 1.4rem;
             `}
           >
@@ -101,16 +102,10 @@ const SpaceOverview = forwardRef<HTMLDivElement, SpaceOverviewProps>(
                 gap: 0.4rem;
               `}
             >
-              <Icon icon="ic_user" size="2rem" />
-              <div
-                css={css`
-                  margin-top: 0.3rem;
-                `}
-              >
-                <Typography variant="body12Medium" color="gray900">
-                  {memberCount}
-                </Typography>
-              </div>
+              <Icon icon="ic_user" size={1.7} />
+              <Typography variant="body14Medium" color="gray900">
+                {memberCount}
+              </Typography>
             </div>
           </div>
         </div>

diff --git a/apps/web/src/component/home/SummaryInsightBox.tsx b/apps/web/src/component/home/SummaryInsightBox.tsx
@@ -17,7 +17,7 @@ type SummaryInsightBoxProps = {
 
 export function SummaryInsightBox({ type, insightArr }: SummaryInsightBoxProps) {
   const transformPoints = transformPointsFun(insightArr);
-
+  if (transformPoints.length === 0) return;
   return (
     <div
       css={css`
@@ -43,9 +43,11 @@ export function SummaryInsightBox({ type, insightArr }: SummaryInsightBoxProps)
           gap: 1rem;
         `}
       >
-        {transformPoints.map((point, idx) => (
-          <InsightBox key={idx} type={type} insight={point} />
-        ))}
+        {transformPoints
+          .filter((v) => v.point != null)
+          .map((point, idx) => (
+            <InsightBox key={idx} type={type} insight={point} />
+          ))}
       </div>
     </div>
   );

diff --git a/apps/web/src/component/retrospect/analysis/InsightsBoxSection.tsx b/apps/web/src/component/retrospect/analysis/InsightsBoxSection.tsx
@@ -34,7 +34,7 @@ export function InsightsBoxSection({ isTeam, type, insightArr }: InsightsBoxProp
           line-height: 3.2rem;
         `}
       >
-        {`${isTeam ? "우리팀" : user.name}`}은{" "}
+        {`${isTeam ? "우리팀" : user.name + "님"}`}은{" "}
         {type === "goodPoints" && (
           <>
             <Typography

diff --git a/apps/web/src/component/retrospect/analysis/PendingAnalysisingComp.tsx b/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>
+  );
+}
diff --git a/apps/web/src/component/space/view/RetrospectBox.tsx b/apps/web/src/component/space/view/RetrospectBox.tsx
@@ -1,7 +1,9 @@
 import { css } from "@emotion/react";
+import { PATHS } from "@layer/shared";
 import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 
+import { ProceedingTextBox } from "./ProceedingTextBox";
 import { RetrospectOptions } from "./RetrospectOptions";
 
 import { Icon } from "@/component/common/Icon";
@@ -15,8 +17,6 @@ import { useToast } from "@/hooks/useToast.ts";
 import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
 import { Retrospect } from "@/types/retrospect";
 import { formatDateAndTime } from "@/utils/date";
-import { ProceedingTextBox } from "./ProceedingTextBox";
-import { PATHS } from "@layer/shared";
 
 const statusStyles = {
   PROCEEDING: DESIGN_TOKEN_COLOR.blue50,
@@ -63,6 +63,8 @@ export function RetrospectBox({
       if (analysisStatus === "NOT_STARTED" && (writeStatus === "NOT_STARTED" || writeStatus === "PROCEEDING")) {
         navigate(PATHS.write(), {
           state: {
+            title,
+            introduction,
             retrospectId,
             spaceId,
           },
@@ -154,7 +156,7 @@ export function RetrospectBox({
         css={css`
           width: 100%;
           height: auto;
-          background-color: ${retrospect.retrospectStatus === "PROCEEDING" ? statusStyles.PROCEEDING : statusStyles.DONE};
+          background-color: ${retrospectStatus === "PROCEEDING" ? statusStyles.PROCEEDING : statusStyles.DONE};
           border-radius: 1rem;
           padding: 2rem;
           display: flex;
@@ -176,7 +178,7 @@ export function RetrospectBox({
           <ProceedingTextBox writeStatus={writeStatus} analysisStatus={analysisStatus} />
           {isLeader && (
             <RetrospectOptions
-              retrospectStatus={retrospect.retrospectStatus}
+              retrospectStatus={retrospectStatus}
               isOptionsVisible={isOptionsVisible}
               toggleOptionsVisibility={toggleOptionsVisibility}
               removeBtnClickFun={removeBtnClickFun}
@@ -224,12 +226,12 @@ export function RetrospectBox({
           `}
         >
           <Typography color="gray500" variant="body14Medium">
-            {retrospect.deadline == null ? (
+            {!deadline ? (
               <>모든 인원 제출 시 마감</>
             ) : (
               <>
                 {" "}
-                {retrospect.retrospectStatus === "DONE" ? "마감일" : "마감 예정일"} | {formatDateAndTime(deadline!)}
+                {retrospectStatus === "DONE" ? "마감일" : "마감 예정일"} | {formatDateAndTime(deadline)}
               </>
             )}
           </Typography>

diff --git a/apps/web/src/component/write/phase/Write.tsx b/apps/web/src/component/write/phase/Write.tsx
@@ -43,7 +43,7 @@ export function Write() {
   const { open } = useModal();
 
   /** Write Local State */
-  const { data, incrementPhase, decrementPhase, phase, movePhase, spaceId, retrospectId } = useContext(PhaseContext);
+  const { data, incrementPhase, decrementPhase, phase, movePhase, spaceId, retrospectId, title, introduction } = useContext(PhaseContext);
   const [isEntireModalOpen, setEntireModalOpen] = useState(false);
   const [isTemporarySaveModalOpen, setTemporarySaveModalOpen] = useState(false);
   const [isAnswerFilled, setIsAnswerFilled] = useState(false);
@@ -137,6 +137,8 @@ export function Write() {
             state: {
               spaceId: spaceId,
               retrospectId: retrospectId,
+              title: title,
+              introduction: introduction,
             },
           });
           const plainTextAnswers = answers.filter(({ questionType }) => questionType === "plain_text");
@@ -334,9 +336,9 @@ export function Write() {
             margin-bottom: 0.8rem;
 
             display: flex;
+            flex: 1;
             flex-direction: column;
             row-gap: 0.8rem;
-            height: 100%;
           `}
         >
           {data?.questions.map((item) => {
@@ -423,9 +425,9 @@ export function Write() {
           {isComplete && (
             <Fragment>
               <HeaderProvider>
-                <HeaderProvider.Subject contents={`중간발표 이후 회고`} />
+                <HeaderProvider.Subject contents={title ?? ""} />
                 <HeaderProvider.Description
-                  contents={`방향성 체크 및 팀 내 개선점 구축`}
+                  contents={introduction ?? ""}
                   css={css`
                     color: #7e7c7c;
                   `}

diff --git a/apps/web/src/component/write/template/complete/ResultContainer.tsx b/apps/web/src/component/write/template/complete/ResultContainer.tsx
@@ -17,7 +17,6 @@ export function ResultContainer({ name, question, children, ...props }: PropsWit
         margin-top: 2.4rem;
         border-radius: 0.78rem;
         padding: 1.9rem 2rem 1.7rem 2rem;
-        height: 100%;
         min-height: fit-content;
         box-shadow: 0 3.886px 11.657px 0 rgba(33, 37, 41, 0.04);
         font-size: 1.6rem;

diff --git a/apps/web/src/hooks/api/retrospect/create/usePostRetrospectCreate.ts b/apps/web/src/hooks/api/retrospect/create/usePostRetrospectCreate.ts
@@ -33,7 +33,7 @@ export const usePostRetrospectCreate = (spaceId: number) => {
       });
 
       navigate(PATHS.completeRetrospectCreate(), {
-        state: { retrospectId, spaceId },
+        state: { retrospectId, spaceId, title: variables?.body?.title, introduction: variables?.body?.introduction },
       });
       resetRetroCreateData();
     },

diff --git a/apps/web/src/hooks/useEditQuestions.ts b/apps/web/src/hooks/useEditQuestions.ts
@@ -27,6 +27,9 @@ export const useEditQuestions = () => {
   };
 
   const handleDeleteConfirm = () => {
+    if (temporarilyDeletedIndexes.length === 0) {
+      return;
+    }
     setNewQuestions((prev) => prev.filter((_, i) => !isTemporarilyDeleted(i)));
     setTemporarilyDeletedIndexes([]);
     toast.success("삭제가 완료되었어요!");