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() { +