Merge branch 'develop' into feat/#49/datepicker-view

src/assets/svg/index.ts

@@ -1,6 +1,7 @@
 import Icn_arrow_narrow_right from '@/assets/svg/arrow-narrow-right.svg?react';
 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 DeleteIcon from '@/assets/svg/Delete.svg?react';
 import DoneIcon from '@/assets/svg/DoneIcon.svg?react';
@@ -69,6 +70,7 @@ const Icons = {
 	DoneIcon,
 	ProgressIcon,
 	TimelineDelete,
+	ClockCheck,
 	plus_circle,
 };
 

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};
+`;

src/components/SettingPage/AccountArea.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import google_calendar from '@/assets/images/google_calendar.png';
 import Icons from '@/assets/svg/index';
-import SettingXBtn from '@/components/common/button/settingBtn/SettingXBtn';
+import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn';
 import USERS from '@/constants/users';
 
 function AccountArea() {
@@ -19,7 +19,7 @@ function AccountArea() {
 				</CalendarContainer>
 				<InputBox>
 					<EmailWrapper>{USERS.data.email}</EmailWrapper>
-					<SettingXBtn />
+					<SettingCheckBtn size="small" type="close" isHover isPressed={false} isActive />
 				</InputBox>
 			</AccountWrapper>
 		</AccountAreaWrapper>

src/components/calendarPage/CategoryBox.tsx

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+function CategoryBox() {
+	return (
+		<CategoryBoxLayout>
+			<TitleSection>카테고리</TitleSection>
+		</CategoryBoxLayout>
+	);
+}
+
+const CategoryBoxLayout = styled.div`
+	width: 31.7rem;
+	height: 49rem;
+
+	border: 1px solid #e4e4e4;
+	border-radius: 12px;
+`;
+
+const TitleSection = styled.section`
+	width: 100%;
+	height: 6.6rem;
+	padding: 2rem 0.8rem 1.8rem 2.8rem;
+    
+	${({ theme }) => theme.fontTheme.HEADLINE_02}
+`;
+export default CategoryBox;

src/components/common/BtnTask/BtnTask.tsx

@@ -2,16 +2,15 @@ import { css, Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
-import BtnDate from '../BtnDate/BtnDate';
-import StatusDoneBtn from '../button/statusBtn/StatusDoneBtn';
-import StatusInProgressBtn from '../button/statusBtn/StatusInProgressBtn';
-import StatusStagingBtn from '../button/statusBtn/StatusStagingBtn';
-import StatusTodoBtn from '../button/statusBtn/StatusTodoBtn';
-
 import Icons from '@/assets/svg/index';
+import BtnDate from '@/components/common/BtnDate/BtnDate';
+import StatusDoneBtn from '@/components/common/button/statusBtn/StatusDoneBtn';
+import StatusInProgressBtn from '@/components/common/button/statusBtn/StatusInProgressBtn';
+import StatusStagingBtn from '@/components/common/button/statusBtn/StatusStagingBtn';
+import StatusTodoBtn from '@/components/common/button/statusBtn/StatusTodoBtn';
 
 interface BtnTaskProps {
-	btnType: number;
+	btnType: 'staging' | 'target' | 'delayed';
 	status?: string;
 	isDescription?: boolean;
 }
@@ -21,7 +20,7 @@ interface BorderColorProps {
 	isClicked: boolean;
 	iconHovered: boolean;
 	theme: Theme;
-	btnType: number;
+	btnType: string;
 }
 
 function BtnTask(props: BtnTaskProps) {
@@ -65,19 +64,19 @@ function BtnTask(props: BtnTaskProps) {
 	};
 
 	const renderStatusButton = () => {
-		if (btnType === 3) {
+		if (btnType === 'delayed') {
 			return <StagingIconHoverIndicator />;
 		}
 
 		if (!iconHovered && !iconClicked) {
 			return <IconHoverIndicator />;
 		}
 
-		if (btnType === 1) {
+		if (btnType === 'staging') {
 			return <StatusStagingBtn />;
 		}
 
-		if (btnType === 2) {
+		if (btnType === 'target') {
 			switch (status) {
 				case 'Done':
 					return <StatusDoneBtn />;
@@ -104,7 +103,7 @@ function BtnTask(props: BtnTaskProps) {
 					{isDescription && <IconFile />}
 					넛쉘 UT 진행하기
 				</BtnTaskTextWrapper>
-				<BtnDate date="2024.07.11" time="22:22" size="small" isDelayed={btnType === 3} />
+				<BtnDate date="2024.07.11" time="22:22" size="small" isDelayed={btnType === 'delayed'} />
 			</BtnTaskContainer>
 			<IconHoverContainer
 				onClick={handleIconClick}
@@ -125,7 +124,7 @@ const getBorderColor = ({ isHovered, isClicked, iconHovered, theme, btnType }: B
 	const clickColor = theme.palette.Primary;
 	const orangeColor = theme.palette.Orange.Orange8;
 	let borderColor = defaultColor;
-	if (btnType === 3) {
+	if (btnType === 'delayed') {
 		borderColor = orangeColor;
 	} else if (iconHovered || isHovered) {
 		borderColor = hoverColor;
@@ -141,7 +140,7 @@ const BtnTaskLayout = styled('div', { target: 'BtnTaskLayout' })<{
 	isClicked: boolean;
 	isHovered: boolean;
 	iconHovered: boolean;
-	btnType: number;
+	btnType: string;
 }>`
 	display: flex;
 	align-items: center;