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}
>
- } text={date} isDefault={isDefaultDate} size={size} />
-
- } text={time} isDefault={isDefaultTime} size={size} />
+ } text={date} isDefault={isDefaultDate} size={size} />
+
+ } text={time} isDefault={isDefaultTime} size={size} />
);
@@ -58,34 +60,47 @@ const XIcon = styled((props: React.SVGProps & { 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() {
+
>