diff --git a/src/components/Block.tsx b/src/components/Block.tsx index a2c1bc5..fab5c0b 100644 --- a/src/components/Block.tsx +++ b/src/components/Block.tsx @@ -87,6 +87,7 @@ const Block = ({ ` /* margin-bottom: 3.3125rem; */ /* overflow: hidden; */ @@ -175,7 +190,11 @@ export const GraphProgress = styled.div<{ blockProgress: number }>` `; /* 블록 스타일*/ -export const BlockContainer = styled.div<{ marginValue: string; dayCount: number }>` +export const BlockContainer = styled.div<{ + marginValue: string; + dayCount: number; + isDone: boolean; +}>` background: ${theme.color.white}; padding: 1.375rem 1.375rem 1.375rem 1.375em; border: 1px solid #f4f4f4; @@ -210,13 +229,20 @@ export const BlockContainer = styled.div<{ marginValue: string; dayCount: number } span { + /* 날짜 색상 : 만료일 가까워지면 다른 스타일 */ + font-size: ${theme.font.size.caption}; - /* color: ${theme.color.gray}; */ - /* font-weight: ${theme.font.weight.light}; */ - /* 날짜 색상 : 만료일 가까워지면 빨갛고 두껍게 */ - color: ${({ dayCount }) => (dayCount < 8 ? 'red' : theme.color.gray)}; - font-weight: ${({ dayCount }) => - dayCount < 4 ? theme.font.weight.bold : theme.font.weight.light}; + color: ${theme.color.gray}; + font-weight: ${theme.font.weight.light}; + + color: ${({ dayCount, isDone }) => (dayCount < 8 && !isDone ? 'red' : theme.color.gray)}; + /* font-weight: ${({ dayCount }) => + dayCount < 4 ? theme.font.weight.bold : theme.font.weight.light}; */ + + animation-name: ${({ dayCount, isDone }) => (dayCount < 8 && !isDone ? shake : 'none')}; + + animation-duration: 0.5s; /* 애니메이션 지속 시간 설정 */ + animation-iteration-count: infinite; /* 애니메이션 반복 설정 */ } &:hover {