Skip to content

Commit

Permalink
✨ feat: 회의 종료 페이지 UI 작성 (#55)
Browse files Browse the repository at this point in the history 
* feat: 회의 종료 페이지 라우터에 추가

* feat: 회의 종료 step1 UI 작성

* feat: 회의 종료 step2 UI 작성

* feat: 아이콘 추가

* feat: 회의 제 시간 종료 UI 작성

* feat: 폴더 아이콘 추가
  • Loading branch information
@shubug1015
shubug1015 authored Jun 5, 2024
1 parent 422adbc commit 2aeed7d
Show file tree
Hide file tree
Showing 11 changed files with 426 additions and 1 deletion.
3 changes: 3 additions & 0 deletions public/icons/clip.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions public/icons/folder.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions public/icons/meeting_complete.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 75 additions & 0 deletions src/assets/Complete/FolderIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
export const FolderIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="348"
height="173"
viewBox="0 0 348 173"
fill="none">
<g clipPath="url(#clip0_1970_12265)">
<path
d="M106.523 5.93768L118.377 14.7199C124.922 19.5687 132.852 22.186 140.998 22.186H320.346C335.257 22.186 347.346 34.2743 347.346 49.186V221.85C347.346 236.762 335.257 248.85 320.346 248.85H28.0003C13.0887 248.85 1.00036 236.762 1.00034 221.85L1.00003 21.6328C1.00001 10.0349 10.402 0.632812 22 0.632812H90.4504C96.238 0.632812 101.872 2.4925 106.523 5.93768Z"
fill="#4976F0"
/>
<rect
x="24.9531"
y="19.2852"
width="311.318"
height="103.353"
rx="20"
transform="rotate(7.38278 24.9531 19.2852)"
fill="#F6F7F9"
/>
<path
d="M1 70.2891C1 63.6616 6.37258 58.2891 13 58.2891H335.346C341.973 58.2891 347.346 63.6616 347.346 70.2891V172.626H1V70.2891Z"
fill="url(#paint0_linear_1970_12265)"
/>
<path
d="M106.523 5.93768L118.377 14.7199C124.922 19.5687 132.852 22.186 140.998 22.186H320.346C335.257 22.186 347.346 34.2743 347.346 49.186V221.85C347.346 236.762 335.257 248.85 320.346 248.85H28.0003C13.0887 248.85 1.00036 236.762 1.00034 221.85L1.00003 21.6328C1.00001 10.0349 10.402 0.632812 22 0.632812H90.4504C96.238 0.632812 101.872 2.4925 106.523 5.93768Z"
fill="#4976F0"
/>
<rect
x="24.9531"
y="19.2852"
width="311.318"
height="103.353"
rx="20"
transform="rotate(7.38278 24.9531 19.2852)"
fill="#F6F7F9"
/>
<path
d="M1 70.2891C1 63.6616 6.37258 58.2891 13 58.2891H335.346C341.973 58.2891 347.346 63.6616 347.346 70.2891V172.626H1V70.2891Z"
fill="url(#paint1_linear_1970_12265)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_1970_12265"
x1="174.173"
y1="58.2891"
x2="174.173"
y2="172.626"
gradientUnits="userSpaceOnUse">
<stop stopColor="#86A7FF" />
<stop offset="1" stopColor="#5784FD" />
</linearGradient>
<linearGradient
id="paint1_linear_1970_12265"
x1="174.173"
y1="58.2891"
x2="174.173"
y2="172.626"
gradientUnits="userSpaceOnUse">
<stop stopColor="#86A7FF" />
<stop offset="1" stopColor="#5784FD" />
</linearGradient>
<clipPath id="clip0_1970_12265">
<rect
width="346.344"
height="172.365"
fill="white"
transform="translate(0.969727 0.634766)"
/>
</clipPath>
</defs>
</svg>
);
3 changes: 3 additions & 0 deletions src/components/common/SvgIcon/assets.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ export { default as arrow_left } from '@public/icons/arrow_left.svg';
export { default as arrow_right } from '@public/icons/arrow_right.svg';
export { default as check_circle } from '@public/icons/check_circle.svg';
export { default as check } from '@public/icons/check.svg';
export { default as clip } from '@public/icons/clip.svg';
export { default as crown } from '@public/icons/crown.svg';
export { default as hamburger_menu } from '@public/icons/hamburger_menu.svg';
export { default as kebab_menu } from '@public/icons/kebab_menu.svg';
export { default as mega_phone } from '@public/icons/mega_phone.svg';
export { default as memo } from '@public/icons/memo.svg';
export { default as meeting_complete } from '@public/icons/meeting_complete.svg';
export { default as pencil } from '@public/icons/pencil.svg';
export { default as share } from '@public/icons/share.svg';
export { default as star } from '@public/icons/star.svg';
Expand All @@ -33,6 +35,7 @@ export { default as meeting_room_thumbnail_7 } from '@public/icons/meeting_room_
export { default as meeting_room_thumbnail_8 } from '@public/icons/meeting_room_thumbnail_8.svg';
export { default as date_picker_arrow_left } from '@public/icons/date_picker_arrow_left.svg';
export { default as date_picker_arrow_right } from '@public/icons/date_picker_arrow_right.svg';
export { default as folder } from '@public/icons/folder.svg';
// grahpics
export { default as onboarding_background } from '@public/graphics/onboarding_background.svg';
export { default as join_complete } from '@public/graphics/join_complete.svg';
2 changes: 1 addition & 1 deletion src/components/common/SvgIcon/sprite/symbol/sprite.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/components/complete/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './step1';
107 changes: 107 additions & 0 deletions src/components/complete/step1.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
/** @jsxImportSource @emotion/react */
import { Space } from '@/components/Wrapper';
import { Button, SvgIcon } from '@/components/common';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { Dispatch, SetStateAction } from 'react';

interface Props {
setCurrentStep: Dispatch<SetStateAction<number>>;
}

export const Step1 = ({ setCurrentStep }: Props) => {
const agendaList = [
{
id: 0,
name: '아이스 브레이킹',
time: 3
},
{
id: 1,
name: '주제 논의',
time: 20
},
{
id: 2,
name: '아이데이션',
time: 20
}
];

return (
<>
{true && (
<>
<StyledTitle>
회의가 종료되었어요!
<br />
오늘도 수고 많으셨습니다.
</StyledTitle>

<div
css={css`
display: flex;
justify-content: center;
`}>
<SvgIcon id="meeting_complete" size={260} />
</div>
</>
)}

{false && (
<>
<StyledTitle>
25분 더 이야기 나누셨네요.
<br />
제시간에 끝내도록 분발해봅시다!
</StyledTitle>

<Space height={16} />

{agendaList.map((agenda) => (
<StyledAgenda key={agenda.id}>
<span>{agenda.name}</span>
<span>+{agenda.time}분</span>
</StyledAgenda>
))}

<Space height={60} />
</>
)}

<StyledButtonContainer>
<StyledButton>
<Button
size="sm"
backgroundColor="main_blue"
onClick={() => setCurrentStep(2)}>
다음으로
</Button>
</StyledButton>
</StyledButtonContainer>
</>
);
};

const StyledTitle = styled.div`
${({ theme }) => theme.typo.T2}
color: ${({ theme }) => theme.palette.dark_gray2};
`;

const StyledAgenda = styled.div`
${({ theme }) => theme.typo.B1}
display: flex;
justify-content: space-between;
color: ${({ theme }) => theme.palette.dark_gray2};
padding: 2rem 1rem;
border-bottom: 1px dashed ${({ theme }) => theme.palette.light_gray3};
`;

const StyledButtonContainer = styled.div`
display: flex;
justify-content: end;
`;

const StyledButton = styled.div`
width: 7.5rem;
`;
100 changes: 100 additions & 0 deletions src/components/complete/step2.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/** @jsxImportSource @emotion/react */
import { Space } from '@/components/Wrapper';
import { Button, Input, SvgIcon } from '@/components/common';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { Dispatch, SetStateAction } from 'react';
import { useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';

interface Props {
setCurrentStep: Dispatch<SetStateAction<number>>;
}

export const Step2 = ({ setCurrentStep }: Props) => {
const navigate = useNavigate();

const {
register,
watch,
formState: { errors }
} = useForm({
defaultValues: {
feedback: ''
},
mode: 'onChange'
});
return (
<>
<StyledTitle>
회의에 대한 회고를 남겨주세요!
<br />
나만 볼 수 있는 기록이에요
</StyledTitle>

<Space height={16} />

<Input
{...register('feedback', {
maxLength: {
message: '최대 100자까지 입력가능해요',
value: 100
}
})}
multiline={true}
value={watch('feedback')}
type="default"
placeholder="내용 입력"
maxLength={100}
isError={errors?.feedback ? true : false}
errorText={errors?.feedback?.message as string}
height={200}
/>

<Space height={60} />

<StyledButtonContainer>
<SvgIcon id="arrow_back" onClick={() => setCurrentStep(1)} />

<div
css={css`
display: flex;
`}>
<StyledButton>
<Button
size="sm"
backgroundColor="white"
textColor="main_blue"
onClick={() => navigate('/')}>
건너뛰기
</Button>
</StyledButton>

<StyledButton>
<Button
size="sm"
backgroundColor="main_blue"
onClick={() => navigate('/')}>
완료하기
</Button>
</StyledButton>
</div>
</StyledButtonContainer>
</>
);
};

const StyledTitle = styled.div`
${({ theme }) => theme.typo.T2}
color: ${({ theme }) => theme.palette.dark_gray2};
`;

const StyledButtonContainer = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
`;

const StyledButton = styled.div`
width: 7.5rem;
`;
Loading

0 comments on commit 2aeed7d

Please sign in to comment.