Refactor: theme 상수 컨벤션에 맞게 변경

GDSC-PKNU-Official · Apr 10, 2023 · 186b8bd · 186b8bd
1 parent e10821c
commit 186b8bd
Showing 1 changed file with 5 additions and 7 deletions.
diff --git a/src/components/Card/InformCard/index.tsx b/src/components/Card/InformCard/index.tsx
@@ -1,7 +1,7 @@
 import Icon from '@components/Icon';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { theme } from '@styles/ThemeProvider/theme';
+import { THEME } from '@styles/ThemeProvider/theme';
 import { IconKind } from '@type/styles/icon';
 import { setSize } from '@utils/styles/size';
 import { useNavigate } from 'react-router-dom';
@@ -12,8 +12,6 @@ interface InformCardProps {
   path: string;
 }
 
-// 1. Card1 을 호출할 때, 넘겨주는 2개의 아이콘 종류(notification, school) 에 따라서 아이콘의 색깔과, 배경화면 색이 달라진다
-
 const InformCard = ({ icon, title, path }: InformCardProps) => {
   const navigate = useNavigate();
   const onClick = () => navigate(path);
@@ -22,7 +20,7 @@ const InformCard = ({ icon, title, path }: InformCardProps) => {
     <Card data-testid="card" icon={icon} onClick={onClick}>
       <Icon
         kind={icon}
-        color={icon === 'school' ? theme.text.gray : theme.text.white}
+        color={icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE}
       />
       <span
         css={css`
@@ -48,16 +46,16 @@ export default InformCard;
 
 type CardProps = Pick<InformCardProps, 'icon'>;
 
-const Card = styled.div<CardProps>(({ icon, theme }) => {
+const Card = styled.div<CardProps>(({ icon }) => {
   return {
     display: 'flex',
     flexDirection: 'column',
     padding: '15px',
 
     borderRadius: '15px',
 
-    backgroundColor: icon === 'school' ? theme.background : theme.primary,
-    color: icon === 'school' ? theme.text.gray : theme.text.white,
+    backgroundColor: icon === 'school' ? THEME.BACKGROUND : THEME.PRIMARY,
+    color: icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE,
 
     '& > svg': {
       margin: '10px 0',