feat: Card를 클릭할 때 배경색 변경

woowacourse-teams · Aug 19, 2024 · 49e2f86 · 49e2f86
1 parent 40ec900
commit 49e2f86
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/frontend/src/components/NotificationCard/NotificationCard.style.ts b/frontend/src/components/NotificationCard/NotificationCard.style.ts
@@ -1,11 +1,15 @@
 import { theme } from '@_common/theme/theme.style';
 import { css, Theme } from '@emotion/react';
 
-export const CardBox = css`
+export const CardBox = (props: { theme: Theme }) => css`
   display: flex;
   gap: 1rem;
   align-items: center;
   width: 100%;
+  border-radius: 1rem;
+  &:active {
+    background-color: ${props.theme.colorPalette.grey[100]};
+  }
 `;
 
 export const TextInfoBox = css`

diff --git a/frontend/src/components/NotificationCard/NotificationCard.tsx b/frontend/src/components/NotificationCard/NotificationCard.tsx
@@ -12,7 +12,7 @@ export default function NotificationCard(props: NotificationCardProps) {
   const theme = useTheme();
   const typeColor = notificationTypeColors(theme)[notification.type];
   return (
-    <div css={S.CardBox}>
+    <div css={S.CardBox({ theme })}>
       <div css={S.colorDot({ theme, typeColor })}>{'·'}</div>
       <div css={S.TextInfoBox}>
         <div css={S.Title({ theme })}>{notification.message}</div>