feat(card): card shadow, bordercolor 옵션 추가

DingX2 · May 20, 2024 · bb0725d · bb0725d
1 parent f459e29
commit bb0725d
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/src/components/molecules/Card.ts b/src/components/molecules/Card.ts
@@ -7,20 +7,21 @@ interface Props {
     top?: boolean;
     middle?: boolean;
     bottom?: boolean;
+    shadow?: boolean;
+    borderColor?: string;
 }
 
 export const Card: ParentComponent<Props> = styled.div`
+    display: flex;
+    flex-direction: column;
     width: ${({ width }) => width || 300}px;
     height: ${({ height }) => height || 300}px;
     background: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    ${({ shadow }) => (shadow ? 'box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);' : '')};
     backdrop-filter: blur(2.5px);
     -webkit-backdrop-filter: blur(2.5px);
     border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.18);
-
-    display: flex;
-    flex-direction: column;
+    ${({ borderColor }) => (borderColor ? `border: 1px solid ${borderColor};` : 'rgba(255, 255, 255, 0.18)')};
     ${({ top, middle, bottom }) => {
         if (top) {
             return 'justify-content: flex-start;';