Merge pull request #79 from TEAM-DAWM/feat/#74/task-summary-component

[FEAT] 대시보드 뷰 task 요약 컴포넌트 퍼블리싱 (하단 컴포넌트)
TEAM-DAWM · Jul 10, 2024 · 41d64ed · 41d64ed
2 parents 8ebc051 + dbdc121
commit 41d64ed
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 51 deletions.
diff --git a/src/components/DashboardPage/TaskSummary.tsx b/src/components/DashboardPage/TaskSummary.tsx
@@ -0,0 +1,79 @@
+import styled from '@emotion/styled';
+
+import sampleImg from '@/assets/images/sample.png';
+
+interface TaskSummaryProps {
+	text: string;
+	data: number;
+	unit: string;
+}
+
+function TaskSummary({ text, data, unit }: TaskSummaryProps) {
+	return (
+		<TaskSummaryLayout>
+			<ProfileImg src={sampleImg} alt="프로필" />
+			<TextWrapper>
+				<SummaryText>{text}</SummaryText>
+				<NumberTaskBox>
+					<Number>{data}</Number>
+					<NumberText>{unit}</NumberText>
+				</NumberTaskBox>
+			</TextWrapper>
+		</TaskSummaryLayout>
+	);
+}
+
+export default TaskSummary;
+
+const TaskSummaryLayout = styled.div`
+	display: flex;
+	flex: 1 0 0;
+	flex-direction: column;
+	gap: 2rem;
+	align-items: flex-start;
+	justify-content: center;
+	box-sizing: border-box;
+	width: 41.7rem;
+	height: 18.8rem;
+	padding-left: 2.8rem;
+
+	background-color: ${({ theme }) => theme.palette.Grey.Grey1};
+	border-radius: 16px;
+`;
+
+const ProfileImg = styled.img`
+	width: 4.4rem;
+	height: 4.4rem;
+	margin: 3rem 34.5rem 0 0;
+`;
+
+const TextWrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	align-self: stretch;
+	width: 38.9rem;
+	height: 6.4rem;
+	margin-bottom: 3rem;
+`;
+
+const SummaryText = styled.p`
+	${({ theme }) => theme.fontTheme.HEADLINE_03}
+	color: ${({ theme }) => theme.palette.Grey.Grey7}
+`;
+
+const NumberTaskBox = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+
+const Number = styled.p`
+	${({ theme }) => theme.fontTheme.TITLE_02};
+	color: ${({ theme }) => theme.palette.Grey.Grey8};
+`;
+
+const NumberText = styled.p`
+	${({ theme }) => theme.fontTheme.HEADLINE_02};
+	color: ${({ theme }) => theme.palette.Grey.Grey7};
+`;
diff --git a/src/constants/tasksPeriod.ts b/src/constants/tasksPeriod.ts
@@ -0,0 +1,12 @@
+const PERIOD = {
+	code: 'success',
+	data: {
+		completeTasks: 51,
+		avgInprogressTasks: 7,
+		avgInprogressDay: 13,
+		avgDeferredRate: 22,
+	},
+	message: null,
+};
+
+export default PERIOD;
diff --git a/src/pages/DashBoard.tsx b/src/pages/DashBoard.tsx
@@ -1,61 +1,56 @@
 import styled from '@emotion/styled';
 
-import ArrangeBtn from '@/components/common/arrangeBtn/ArrangeBtn';
+import TaskSummary from '@/components/DashboardPage/TaskSummary';
+import PERIOD from '@/constants/tasksPeriod';
 
 function DashBoard() {
-	return (
-		<>
-			{/* right */}
-			<Wrapper>
-				<ArrangeBtn type="right" color="BLUE" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="right" color="BLUE" mode="DISABLED" size="small" />
-
-				<ArrangeBtn type="right" color="WHITE" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="right" color="WHITE" mode="DISABLED" size="small" />
-
-				<ArrangeBtn type="right" color="BLACK" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="right" color="BLACK" mode="DISABLED" size="small" />
-			</Wrapper>
-
-			{/* left */}
-			<Wrapper>
-				<ArrangeBtn type="left" color="BLUE" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="left" color="BLUE" mode="DISABLED" size="small" />
-
-				<ArrangeBtn type="left" color="WHITE" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="left" color="WHITE" mode="DISABLED" size="small" />
+	const SUMMARY_INFO = [
+		{
+			name: 'complete',
+			text: '완료한 할 일 갯수',
+			data: PERIOD.data.completeTasks,
+			unit: '개',
+		},
+		{
+			name: 'postponed',
+			text: '평균 지연율',
+			data: PERIOD.data.avgDeferredRate,
+			unit: '%',
+		},
+		{
+			name: 'inprogress',
+			text: '평균 진행중인 할 일 갯수',
+			data: PERIOD.data.avgInprogressTasks,
+			unit: '개',
+		},
+	];
 
-				<ArrangeBtn type="left" color="BLACK" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="left" color="BLACK" mode="DISABLED" size="small" />
-			</Wrapper>
-
-			{/* set */}
-			<Wrapper>
-				<ArrangeBtn type="set" color="BLUE" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="set" color="BLUE" mode="DISABLED" size="small" />
-
-				<ArrangeBtn type="set" color="WHITE" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="set" color="WHITE" mode="DISABLED" size="small" />
-
-				<ArrangeBtn type="set" color="BLACK" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="set" color="BLACK" mode="DISABLED" size="small" />
-			</Wrapper>
+	return (
+		<DashBoardWrapper>
+			<TaskSummaryWrapper>
+				{SUMMARY_INFO.map((info) => (
+					<TaskSummary key={info.name} text={info.text} data={info.data} unit={info.unit} />
+				))}
+			</TaskSummaryWrapper>
+		</DashBoardWrapper>
+	);
+}
 
-			{/* calendar */}
-			<Wrapper>
-				<ArrangeBtn type="calendar" color="BLUE" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="calendar" color="BLUE" mode="DISABLED" size="small" />
+export default DashBoard;
 
-				<ArrangeBtn type="calendar" color="WHITE" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="calendar" color="WHITE" mode="DISABLED" size="small" />
+const DashBoardWrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 127.8rem;
+	height: 100vh;
+`;
 
-				<ArrangeBtn type="calendar" color="BLACK" mode="DEFAULT" size="small" />
-				<ArrangeBtn type="calendar" color="BLACK" mode="DISABLED" size="small" />
-			</Wrapper>
-		</>
-	);
-}
-const Wrapper = styled.div`
+const TaskSummaryWrapper = styled.div`
 	display: flex;
+	gap: 1rem;
+	align-items: center;
+	align-self: stretch;
+	height: 21.4rem;
+	padding: 0 0 2.8rem 0.7rem;
 `;
-export default DashBoard;