style :: tag 종류 추가

team-xquare · May 6, 2024 · 75f7e2f · 75f7e2f
1 parent 2ab198f
commit 75f7e2f
Showing 1 changed file with 40 additions and 1 deletion.
diff --git a/src/components/Team/Tag.tsx b/src/components/Team/Tag.tsx
@@ -1,7 +1,8 @@
 import { theme } from '@/style/theme';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-type TagType = 'club' | 'team' | 'alone' | 'etc' | 'manage';
+type TagType = 'club' | 'team' | 'alone' | 'etc' | 'manage' | 'PROD' | 'STAG' | '활성' | '대기중' | '오류';
 
 export const Tag = ({ tag }: { tag: TagType }) => {
   const tagText = (): string => {
@@ -14,6 +15,17 @@ export const Tag = ({ tag }: { tag: TagType }) => {
         return '개인 프로젝트';
       case 'manage':
         return '담당자';
+      case 'STAG':
+        return 'STAG';
+      case 'PROD':
+        return 'PROD';
+      case '활성':
+        return '활성';
+      case '대기중':
+        return '대기';
+      case '오류':
+        return '오류';
+      case 'etc':
       default:
         return '기타';
     }
@@ -39,6 +51,16 @@ const Wrapper = styled.div<{ tag: TagType }>`
         return `#0C288A !important`;
       case 'alone':
         return `#876900 !important`;
+      case 'PROD':
+      case 'STAG':
+        return `${theme.color.gray6}`;
+      case '활성':
+        return `${theme.color.infoDark2}`;
+      case '대기중':
+        return `${theme.color.gray6}`;
+      case '오류':
+        return `${theme.color.errorDark2}`;
+      case 'etc':
       default:
         return `${theme.color.gray6} !important`;
     }
@@ -52,8 +74,25 @@ const Wrapper = styled.div<{ tag: TagType }>`
         return `#ECF5FF !important`;
       case 'alone':
         return `#FFFBDB !important`;
+      case 'STAG':
+      case 'PROD':
+        return `${theme.color.gray1}`;
+      case '활성':
+        return `${theme.color.infoLight}`;
+      case '대기중':
+        return `${theme.color.gray2}`;
+      case '오류':
+        return `${theme.color.errorLight}`;
+      case 'etc':
       default:
         return `${theme.color.gray2} !important`;
     }
   }};
+  border: ${({ tag }) => {
+    switch (tag) {
+      case 'PROD':
+      case 'STAG':
+        return css`1px solid ${theme.color.gray5}`;
+    }
+  }};
 `;