From 6e0cb21c23a4d08d6efcce0823bfb237a1047c30 Mon Sep 17 00:00:00 2001
From: Kjiw0n <rwd0904@naver.com>
Date: Mon, 8 Jul 2024 23:30:59 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=80=EC=97=B0=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=EC=9D=BC=EB=95=8C=EC=9D=98=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/BtnDate/BtnDate.tsx | 40 ++++++++++++++++++-----
 src/pages/Today.tsx                       |  1 +
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/common/BtnDate/BtnDate.tsx b/src/components/common/BtnDate/BtnDate.tsx
index bdc37118..f424a277 100644
--- a/src/components/common/BtnDate/BtnDate.tsx
+++ b/src/components/common/BtnDate/BtnDate.tsx
@@ -10,10 +10,11 @@ interface BtnDateProps {
 	date?: string;
 	time?: string;
 	size?: string;
+	isDelayed?: boolean;
 }
 
 function BtnDate(props: BtnDateProps) {
-	const { date = '마감 기한', time = '마감 시간', size = 'big' } = props;
+	const { date = '마감 기한', time = '마감 시간', size = 'big', isDelayed = false } = props;
 	const [isPressed, setIsPressed] = useState(false);
 	const [isClicked, setIsClicked] = useState(false);
 
@@ -34,14 +35,15 @@ function BtnDate(props: BtnDateProps) {
 			isPressed={isPressed}
 			isClicked={isClicked}
 			size={size}
+			isDelayed={isDelayed}
 			isDefaultDate={isDefaultDate}
 			isDefaultTime={isDefaultTime}
 			onMouseDown={handleMouseDown}
 			onMouseUp={handleMouseUp}
 		>
-			<BtnDateText icon={<CalanderIcon />} text={date} isDefault={isDefaultDate} size={size} />
-			<LineIcon size={size} />
-			<BtnDateText icon={<ClockIcon />} text={time} isDefault={isDefaultTime} size={size} />
+			<BtnDateText icon={<CalanderIcon isDelayed={isDelayed} />} text={date} isDefault={isDefaultDate} size={size} />
+			<LineIcon size={size} isDelayed={isDelayed} />
+			<BtnDateText icon={<ClockIcon isDelayed={isDelayed} />} text={time} isDefault={isDefaultTime} size={size} />
 			<XIcon isClicked={isClicked} />
 		</BtnDateLayout>
 	);
@@ -58,34 +60,47 @@ const XIcon = styled((props: React.SVGProps<SVGSVGElement> & { isClicked: boolea
 	height: 2rem;
 `;
 
-const CalanderIcon = styled(Icons.Icn_calander, { target: 'CalanderIcon' })`
+const CalanderIcon = styled(Icons.Icn_calander, { target: 'CalanderIcon' })<{ isDelayed: boolean }>`
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 1.4rem;
 	height: 1.4rem;
+
+	path {
+		stroke: ${({ isDelayed, theme }) => (isDelayed ? theme.palette.Orange.Orange4 : 'currentColor')};
+	}
 `;
 
-const ClockIcon = styled(Icons.Icn_date_clock, { target: 'ClockIcon' })`
+const ClockIcon = styled(Icons.Icn_date_clock, { target: 'ClockIcon' })<{ isDelayed: boolean }>`
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 1.4rem;
 	height: 1.4rem;
+
+	path {
+		stroke: ${({ isDelayed, theme }) => (isDelayed ? theme.palette.Orange.Orange4 : 'currentColor')};
+	}
 `;
 
-const LineIcon = styled(Icons.Icn_line, { target: 'LineIcon' })<{ size: string }>`
+const LineIcon = styled(Icons.Icn_line, { target: 'LineIcon' })<{ size: string; isDelayed: boolean }>`
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 0.1rem;
 	height: ${({ size }) => (size === 'big' ? '2.2rem' : '1.2rem')};
+
+	line {
+		stroke: ${({ isDelayed, theme }) => (isDelayed ? theme.palette.Orange.Orange5 : 'currentColor')};
+	}
 `;
 
 const BtnDateLayout = styled.div<{
 	isPressed: boolean;
 	isClicked: boolean;
 	size: string;
+	isDelayed: boolean;
 	isDefaultDate: boolean;
 	isDefaultTime: boolean;
 }>`
@@ -102,13 +117,22 @@ const BtnDateLayout = styled.div<{
 	border-color: ${({ isClicked, theme }) => (isClicked ? theme.palette.Primary : theme.palette.Grey.Grey3)};
 	border-radius: 8px;
 
+	${({ isDelayed, theme }) =>
+		isDelayed &&
+		css`
+			background: ${theme.palette.Orange.Orange1};
+			border-color: ${theme.palette.Orange.Orange5};
+
+			pointer-events: none;
+		`}
+
 	${({ isClicked, size, theme }) =>
 		isClicked &&
 		css`
 			padding-right: ${size === 'big' ? '0.6rem' : '0.2rem'};
 
 			border-color: ${theme.palette.Primary};
-			border-width: 2px;
+			border-width: ${size === 'big' ? '2px' : '1px'};
 		`}
 
 	${({ isPressed, theme }) =>
diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx
index 241cd5a1..6bda2829 100644
--- a/src/pages/Today.tsx
+++ b/src/pages/Today.tsx
@@ -25,6 +25,7 @@ function Today() {
 			<TextInputTime time="total" />
 			<TextInputStaging />
 			<BtnDate date="2024.07.11" size="big" />
+			<BtnDate date="2024.07.11" size="small" isDelayed />
 			<BtnStagingDate />
 			<TargetArea />
 		</>