[FEAT] 대시보드 뷰 하단 UI 구현

src/assets/svg/index.ts

@@ -3,6 +3,9 @@ import Arrow_up from '@/assets/svg/arrow-up.svg?react';
 import Icn_calander from '@/assets/svg/calendar-minus-01.svg?react';
 import ClockCheck from '@/assets/svg/clock-check.svg?react';
 import Icn_date_clock from '@/assets/svg/clock.svg?react';
+import Dashboard_Complete from '@/assets/svg/Dashboard_Complete_Icon.svg?react';
+import DashboardPostpone from '@/assets/svg/Dashboard_Postpone_Icon.svg?react';
+import DashboardProgress from '@/assets/svg/Dashboard_Progress_Icon.svg?react';
 import DeleteIcon from '@/assets/svg/Delete.svg?react';
 import DoneIcon from '@/assets/svg/DoneIcon.svg?react';
 import TimelineDelete from '@/assets/svg/ic_delete.svg?react';
@@ -76,6 +79,9 @@ const Icons = {
 	plus_circle,
 	Icn_selectbox_selected,
 	Icn_selectbox_Unselected,
+	Dashboard_Complete,
+	DashboardPostpone,
+	DashboardProgress,
 };
 
 export default Icons;

src/components/DashboardPage/DatePickerPlaceholder.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import Icons from '@/assets/svg/index';
-import formatDatetoStrinKor from '@/utils/formatDatetoStringKor';
+import formatDatetoStringKor from '@/utils/formatDatetoStringKor';
 
 interface DatePickerPlaceholderProps {
 	isHover: boolean;
@@ -16,9 +16,9 @@ function DatePickerPlaceholder({ isHover, isPressed, startDate, endDate, handleC
 	return (
 		<PlaceholderWrapper isHover={isHover} isPressed={isPressed} onClick={handleClick}>
 			<StlyedCalendarIcon />
-			<DateText>{formatDatetoStrinKor(startDate)}</DateText>
+			<DateText>{formatDatetoStringKor(startDate)}</DateText>
 			<StyledArrowIcon />
-			<DateText>{formatDatetoStrinKor(endDate)}</DateText>
+			<DateText>{formatDatetoStringKor(endDate)}</DateText>
 		</PlaceholderWrapper>
 	);
 }

src/components/DashboardPage/TaskSummary.tsx

@@ -1,17 +1,19 @@
 import styled from '@emotion/styled';
 
-import sampleImg from '@/assets/images/sample.png';
-
 interface TaskSummaryProps {
 	text: string;
 	data: number;
 	unit: string;
+	icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+	image: string;
 }
 
-function TaskSummary({ text, data, unit }: TaskSummaryProps) {
+function TaskSummary({ text, data, unit, icon: Icon, image }: TaskSummaryProps) {
 	return (
-		<TaskSummaryLayout>
-			<ProfileImg src={sampleImg} alt="프로필" />
+		<TaskSummaryLayout image={image}>
+			<ProfileImg>
+				<Icon />
+			</ProfileImg>
 			<TextWrapper>
 				<SummaryText>{text}</SummaryText>
 				<NumberTaskBox>
@@ -25,26 +27,33 @@ function TaskSummary({ text, data, unit }: TaskSummaryProps) {
 
 export default TaskSummary;
 
-const TaskSummaryLayout = styled.div`
+const TaskSummaryLayout = styled.div<{ image: string }>`
 	display: flex;
 	flex-direction: column;
 	gap: 2rem;
 	align-items: flex-start;
-	align-self: flex-start;
+	align-self: stretch;
 	justify-content: center;
 	box-sizing: border-box;
 	width: 41.7rem;
-	height: 18.8rem;
+	height: 18.2rem;
 	padding-left: 2.8rem;
 
-	background-color: ${({ theme }) => theme.palette.Grey.Grey1};
+	background-color: ${({ theme }) => theme.palette.Blue.Blue5};
+	background-image: url(${(props) => props.image});
+	background-size: cover;
 	border-radius: 16px;
 `;
 
-const ProfileImg = styled.img`
-	width: 4.4rem;
-	height: 4.4rem;
+const ProfileImg = styled.div`
+	width: 2.8rem;
+	height: 2.8rem;
 	margin: 3rem 34.5rem 0 0;
+
+	svg {
+		width: 100%;
+		height: 100%;
+	}
 `;
 
 const TextWrapper = styled.div`
@@ -54,26 +63,28 @@ const TextWrapper = styled.div`
 	align-self: stretch;
 	width: 38.9rem;
 	height: 6.4rem;
-	margin-bottom: 3rem;
+	margin-bottom: 3.5rem;
 `;
 
 const SummaryText = styled.p`
 	${({ theme }) => theme.fontTheme.HEADLINE_03}
-	color: ${({ theme }) => theme.palette.Grey.Grey7}
+	color: ${({ theme }) => theme.palette.Grey.White}
 `;
 
 const NumberTaskBox = styled.div`
 	display: flex;
-	align-items: center;
+	align-items: flex-end;
 	justify-content: center;
 `;
 
 const Number = styled.p`
 	${({ theme }) => theme.fontTheme.TITLE_02};
-	color: ${({ theme }) => theme.palette.Grey.Grey8};
+	color: ${({ theme }) => theme.palette.Grey.White};
 `;
 
 const NumberText = styled.p`
+	margin-bottom: 0.4rem;
+
 	${({ theme }) => theme.fontTheme.HEADLINE_02};
-	color: ${({ theme }) => theme.palette.Grey.Grey7};
+	color: ${({ theme }) => theme.palette.Grey.White};
 `;

src/pages/DashBoard.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import Icons from '@/assets/svg/index';
 import DashboardTaskWrapper from '@/components/DashboardPage/DashboardTaskWrapper';
 import DateArea from '@/components/DashboardPage/DateArea';
 import TaskSummary from '@/components/DashboardPage/TaskSummary';
@@ -14,18 +15,24 @@ function DashBoard() {
 			text: '완료한 할 일 갯수',
 			data: PERIOD.data.completeTasks,
 			unit: '개',
+			icon: Icons.Dashboard_Complete,
+			imagePate: 'src/assets/images/Dashboard_Complete.png',
 		},
 		{
 			name: 'postponed',
 			text: '평균 지연율',
 			data: PERIOD.data.avgDeferredRate,
 			unit: '%',
+			icon: Icons.DashboardPostpone,
+			imagePate: 'src/assets/images/Dashboard_Postpone.png',
 		},
 		{
 			name: 'inprogress',
 			text: '평균 진행중인 할 일 갯수',
 			data: PERIOD.data.avgInprogressTasks,
 			unit: '개',
+			icon: Icons.DashboardProgress,
+			imagePate: 'src/assets/images/Dashboard_Progress.png',
 		},
 	];
 	const today = new Date();
@@ -46,7 +53,14 @@ function DashBoard() {
 			</DataWrapper>
 			<TaskSummaryWrapper>
 				{SUMMARY_INFO.map((info) => (
-					<TaskSummary key={info.name} text={info.text} data={info.data} unit={info.unit} />
+					<TaskSummary
+						key={info.name}
+						text={info.text}
+						data={info.data}
+						unit={info.unit}
+						icon={info.icon}
+						image={info.imagePate}
+					/>
 				))}
 			</TaskSummaryWrapper>
 		</DashBoardLayout>

src/utils/formatDatetoStringKor.ts

@@ -1,7 +1,7 @@
 /** Date 형식을 0000년 00월 00일 형식 string 으로 반환합니다
  * undefined, null 의 경우 '시간' 텍스트를 반환합니다
  */
-const formatDatetoStrinKor = (date: Date | undefined | null) => {
+const formatDatetoStringKor = (date: Date | undefined | null) => {
 	if (date) {
 		const year = date.getFullYear();
 		const month = '0'.concat((date.getMonth() + 1).toString()).slice(-2);
@@ -11,4 +11,4 @@ const formatDatetoStrinKor = (date: Date | undefined | null) => {
 	return '';
 };
 
-export default formatDatetoStrinKor;
+export default formatDatetoStringKor;