[FE] '체크리스트 배너 후버 색상을 넣는다' 를 dev 에 반영한다. (#1055)

Author: ooherin

frontend/src/components/ChecklistList/CustomBanner.tsx

@@ -10,16 +10,22 @@ interface Props {
   buttonText: string;
   Icon: React.ReactElement;
   buttonDetailText: string;
+  hoverButtonColor: string;
 }
 
-const CustomBanner = ({ onClick, Icon, title, buttonColor, buttonText, buttonDetailText }: Props) => {
+const CustomBanner = ({ hoverButtonColor, onClick, Icon, title, buttonColor, buttonText, buttonDetailText }: Props) => {
   return (
     <S.Banner onClick={onClick}>
       <S.Wrapper>
         {Icon}
         <S.Title>{title}</S.Title>
       </S.Wrapper>
-      <S.Button aria-label={buttonDetailText} label={buttonText} buttonColor={buttonColor} />
+      <S.Button
+        aria-label={buttonDetailText}
+        label={buttonText}
+        buttonColor={buttonColor}
+        hoverButtonColor={hoverButtonColor}
+      />
     </S.Banner>
   );
 };
@@ -51,7 +57,7 @@ const S = {
   Title: styled.span`
     ${flexCenter}
   `,
-  Button: styled(Button)<{ buttonColor: string }>`
+  Button: styled(Button)<{ buttonColor: string; hoverButtonColor: string }>`
     padding: 0.6rem 1rem;
 
     background-color: ${({ buttonColor }) => buttonColor};
@@ -62,5 +68,9 @@ const S = {
     font-size: ${({ theme }) => theme.text.size.small};
 
     cursor: pointer;
+
+    &:hover {
+      background-color: ${({ hoverButtonColor }) => hoverButtonColor};
+    }
   `,
 };

frontend/src/pages/ChecklistListPage.tsx

@@ -47,14 +47,16 @@ const ChecklistListPage = () => {
             buttonColor={theme.palette.green500}
             buttonText="편집하기"
             buttonDetailText={'체크리스트 질문을 편집하려면 이 버튼을 누르세요.'}
+            hoverButtonColor={theme.palette.green600}
           />
           <CustomBanner
             onClick={handleClickMoveQuestionSelectPage}
             Icon={<LampIcon width={30} height={30} aria-hidden="true" />}
-            title={'체크리스트를 비교'}
+            title={'체크리스트 비교'}
             buttonColor={theme.palette.yellow600}
             buttonText="비교하기"
             buttonDetailText={'체크리스트 질문을 편집하려면 이 버튼을 누르세요.'}
+            hoverButtonColor={theme.palette.yellow700}
           />
         </FlexBox.Vertical>
         <S.Spacer height="1.4rem" />