refactor: #330 Fixed Retrospect Design

depromeet · Sep 9, 2024 · cbbfe47 · cbbfe47
1 parent 86b26a2
commit cbbfe47
Show file tree

Hide file tree

Showing 7 changed files with 269 additions and 231 deletions.
diff --git a/apps/web/src/app/space/SpaceViewPage.tsx b/apps/web/src/app/space/SpaceViewPage.tsx
@@ -106,9 +106,7 @@ export function SpaceViewPage() {
           css={css`
             cursor: pointer;
           `}
-          onClick={() => {
-            void navigate(-1);
-          }}
+          onClick={() => navigate(PATHS.home())}
           color={DESIGN_TOKEN_COLOR.gray00}
         />
       }

diff --git a/apps/web/src/app/write/RetrospectWriteCompletePage.tsx b/apps/web/src/app/write/RetrospectWriteCompletePage.tsx
@@ -1,14 +1,14 @@
 import { css, keyframes } from "@emotion/react";
 import Lottie from "lottie-react";
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { CompleteCheck, CompleteIcon } from "@/assets/imgs/write/template";
 import confetti from "@/assets/lottie/template/confetti.json";
 import { Button, ButtonProvider } from "@/component/common/button";
 import { HeaderProvider } from "@/component/common/header";
-import { Icon } from "@/component/common/Icon";
 import { LoadingModal } from "@/component/common/Modal/LoadingModal.tsx";
+import { useApiGetSpacePrivate } from "@/hooks/api/space/useGetSpace.ts";
 import { DefaultLayout } from "@/layout/DefaultLayout.tsx";
 import { ANIMATION } from "@/style/common/animation.ts";
 
@@ -22,7 +22,10 @@ type UserInfoType = {
 export function RetrospectWriteCompletePage() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { spaceId, retrospectId } = location.state as { spaceId: number; retrospectId: number };
+  const { spaceId } = location.state as { spaceId: number; retrospectId: number };
+  const { data, isLoading } = useApiGetSpacePrivate(spaceId);
+  const isTeam = data?.category === "TEAM";
+  const completeWord = isTeam ? "모든 인원의 회고가 제출되면 AI 분석을 시작해요" : "회고가 제출되면 AI 분석을 시작해요";
 
   const [isAnimation, setAnimation] = useState(false);
   const [userInfo, _] = useState(() => {
@@ -57,155 +60,144 @@ export function RetrospectWriteCompletePage() {
   }, []);
 
   return (
-    <DefaultLayout
-      theme={"transparent"}
-      LeftComp={
-        <Icon
-          icon={"ic_arrow_left"}
-          onClick={() =>
-            navigate("/write", {
-              state: {
-                spaceId: spaceId,
-                retrospectId: retrospectId,
-              },
-            })
-          }
-        />
-      }
-    >
-      {!userInfo && <LoadingModal />}
-      <HeaderProvider>
-        {/*  FIXME: 추후 API 연동 후 닉네임 값이 들어와야해요 */}
-        <HeaderProvider.Subject contents={`${userInfo ? userInfo.name : null}님의\n회고 작성이 완료되었어요!`} />
-      </HeaderProvider>
-      <div
-        css={css`
-          padding-top: 2.2rem;
-          width: 100%;
-          height: 100%;
-        `}
-      >
+    <Fragment>
+      {isLoading && <LoadingModal />}
+      <DefaultLayout theme={"transparent"} LeftComp={<Fragment />}>
+        {!userInfo && <LoadingModal />}
+        <HeaderProvider>
+          {/*  FIXME: 추후 API 연동 후 닉네임 값이 들어와야해요 */}
+          <HeaderProvider.Subject contents={`${userInfo ? userInfo.name : null}님의\n회고가 제출되었어요!`} />
+          <HeaderProvider.Description contents={completeWord} />
+        </HeaderProvider>
         <div
           css={css`
-            width: 20rem;
-            height: auto;
-            aspect-ratio: 2 / 2.6;
-
-            display: flex;
-            align-items: center;
-            justify-content: center;
+            padding-top: 2.2rem;
+            width: 100%;
+            height: 100%;
+          `}
+        >
+          <div
+            css={css`
+              width: 20rem;
+              height: auto;
+              aspect-ratio: 2 / 2.6;
 
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            animation: ${ANIMATION.FADE_IN} 0.8s ease-in-out;
+              display: flex;
+              align-items: center;
+              justify-content: center;
 
-            div {
-              width: 100%;
-              height: 100%;
-              border-radius: 0.8rem;
-              aspect-ratio: auto;
               position: absolute;
-              transition: 0.4s all;
-            }
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              animation: ${ANIMATION.FADE_IN} 0.8s ease-in-out;
+
+              div {
+                width: 100%;
+                height: 100%;
+                border-radius: 0.8rem;
+                aspect-ratio: auto;
+                position: absolute;
+                transition: 0.4s all;
+              }
 
-            div:nth-of-type(1) {
-              background-color: #243753;
-              z-index: 3;
-              position: relative;
-            }
+              div:nth-of-type(1) {
+                background-color: #243753;
+                z-index: 3;
+                position: relative;
+              }
 
-            div:nth-of-type(2) {
-              background-color: #c4d7fd;
-              z-index: 2;
-              transform: rotate(-8deg);
-              animation: ${CARD_ANIMATION.FIRST_CARD} 0.6s ease-in-out;
-            }
+              div:nth-of-type(2) {
+                background-color: #c4d7fd;
+                z-index: 2;
+                transform: rotate(-8deg);
+                animation: ${CARD_ANIMATION.FIRST_CARD} 0.6s ease-in-out;
+              }
 
-            div:nth-of-type(3) {
-              background-color: #a7c4fc;
-              z-index: 1;
-              transform: rotate(-16deg);
-              animation: ${CARD_ANIMATION.SECOND_CARD} 0.8s ease-in-out;
-            }
-          `}
-        >
-          <div
-            id="card-1"
-            css={css`
-              position: relative;
+              div:nth-of-type(3) {
+                background-color: #a7c4fc;
+                z-index: 1;
+                transform: rotate(-16deg);
+                animation: ${CARD_ANIMATION.SECOND_CARD} 0.8s ease-in-out;
+              }
             `}
           >
-            <CompleteCheck
-              css={css`
-                position: absolute;
-                top: -10%;
-                right: -5%;
-                width: 20%;
-                height: auto;
-                z-index: 4;
-              `}
-            />
             <div
+              id="card-1"
               css={css`
-                position: absolute;
-                top: 45%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 100%;
-
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                row-gap: 2.5rem;
+                position: relative;
               `}
             >
-              <CompleteIcon
+              <CompleteCheck
                 css={css`
-                  width: 60%;
+                  position: absolute;
+                  top: -10%;
+                  right: -5%;
+                  width: 20%;
                   height: auto;
-                  margin-top: 2rem;
+                  z-index: 4;
                 `}
               />
-              <span
+              <div
                 css={css`
-                  color: white;
-                  font-size: 1.9rem;
-                  font-weight: 500;
+                  position: absolute;
+                  top: 45%;
+                  left: 50%;
+                  transform: translate(-50%, -50%);
+                  width: 100%;
+
                   display: flex;
+                  flex-direction: column;
                   justify-content: center;
+                  align-items: center;
+                  row-gap: 2.5rem;
                 `}
               >
-                {userInfo ? userInfo.name : null}님의 회고
-              </span>
+                <CompleteIcon
+                  css={css`
+                    width: 60%;
+                    height: auto;
+                    margin-top: 2rem;
+                  `}
+                />
+                <span
+                  css={css`
+                    color: white;
+                    font-size: 1.9rem;
+                    font-weight: 500;
+                    display: flex;
+                    justify-content: center;
+                  `}
+                >
+                  {userInfo ? userInfo.name : null}님의 회고
+                </span>
+              </div>
             </div>
+            <div id="card-2"></div>
+            <div id="card-3"></div>
           </div>
-          <div id="card-2"></div>
-          <div id="card-3"></div>
-        </div>
 
-        {isAnimation && (
-          <Lottie
-            animationData={confetti}
-            loop={false}
-            id="confetti"
-            css={css`
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-              width: 90%;
-              height: 80%;
-              z-index: -1;
-            `}
-          />
-        )}
-      </div>
-      <ButtonProvider>
-        <Button onClick={() => navigate("/")}> 완료 </Button>
-      </ButtonProvider>
-    </DefaultLayout>
+          {isAnimation && (
+            <Lottie
+              animationData={confetti}
+              loop={false}
+              id="confetti"
+              css={css`
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 90%;
+                height: 80%;
+                z-index: -1;
+              `}
+            />
+          )}
+        </div>
+        <ButtonProvider>
+          <Button onClick={() => navigate(`/space/${spaceId}`)}> 완료 </Button>
+        </ButtonProvider>
+      </DefaultLayout>
+    </Fragment>
   );
 }
diff --git a/apps/web/src/component/write/ItemsButton.tsx b/apps/web/src/component/write/ItemsButton.tsx
@@ -1,14 +1,19 @@
 import { css } from "@emotion/react";
 
 import { Icon } from "@/component/common/Icon";
+import { Typography } from "@/component/common/typography";
 
-export function ItemsButton({ ...props }) {
+type ItemsButtonProps = {
+  title: string | React.ReactElement;
+} & Omit<React.HTMLAttributes<HTMLButtonElement>, "type">;
+
+export function ItemsButton({ title = "질문 전체보기", ...props }: ItemsButtonProps) {
   return (
     <button
       css={css`
         min-height: 4.2rem;
-        min-width: 16.4rem;
-        padding: 0.9rem 2.6rem;
+        width: fit-content;
+        padding: 0.9rem 1.5rem;
         cursor: pointer;
 
         display: flex;
@@ -21,14 +26,9 @@ export function ItemsButton({ ...props }) {
       `}
       {...props}
     >
-      <span
-        css={css`
-          color: #666b75;
-          font-size: 1.6rem;
-        `}
-      >
-        질문 전체보기
-      </span>
+      <Typography color={"gray900"} variant={"subtitle16SemiBold"}>
+        {title}
+      </Typography>
       <Icon icon={"ic_arrow"} size={1.2} />
     </button>
   );