Skip to content

Commit

Permalink
refactor: #330 Fixed Retrospect Design
Browse files Browse the repository at this point in the history
  • Loading branch information
@klmhyeonwoo
klmhyeonwoo committed Sep 10, 2024
1 parent 700454c commit 4468813
Show file tree
Hide file tree
Showing 7 changed files with 269 additions and 231 deletions.
4 changes: 1 addition & 3 deletions apps/web/src/app/space/SpaceViewPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,7 @@ export function SpaceViewPage() {
css={css`
cursor: pointer;
`}
onClick={() => {
void navigate(-1);
}}
onClick={() => navigate(PATHS.home())}
color={DESIGN_TOKEN_COLOR.gray00}
/>
}
Expand Down
246 changes: 119 additions & 127 deletions apps/web/src/app/write/RetrospectWriteCompletePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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(() => {
Expand Down Expand Up @@ -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>
);
}
22 changes: 11 additions & 11 deletions apps/web/src/component/write/ItemsButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>
);
Expand Down
Loading

0 comments on commit 4468813

Please sign in to comment.