fix: #391 Fixed Plain Text Container Style

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 },
             });
           }}
         >

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>

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>

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;
-            flex: 1;
           `}
         >
           {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;
                   `}

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;

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();
     },