Merge pull request #7 from titicacadev/feature/triple-image-carousel

💫 Image에 overlayType 추가

Author: yceffort

packages/triple-design-system/src/elements/image.tsx

@@ -1,9 +1,24 @@
 import * as React from 'react'
-import styled, { css } from 'styled-components'
+import styled, { css, InterpolationValue } from 'styled-components'
 import Icon from './icon'
 import { MarginPadding, GlobalSizes } from '../commons'
 import * as CSS from 'csstype'
 
+type OverlayType = 'gradient' | 'dark'
+
+const OverlayStyle: { [key in OverlayType]: InterpolationValue[] } = {
+  gradient: css`
+    background-color: rgba(0, 0, 0, 0.8);
+  `,
+  dark: css`
+    background-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.6),
+      rgba(0, 0, 0, 0)
+    );
+  `,
+}
+
 const IMAGE_HEIGHT_OPTIONS: Partial<Record<GlobalSizes, string>> = {
   mini: '80px',
   small: '110px',
@@ -52,20 +67,19 @@ const SourceUrl = styled.div`
 const ImageOverlay = styled.div<{
   borderRadius?: number
   overlayPadding?: MarginPadding
+  overlayType?: OverlayType
 }>`
   box-sizing: border-box;
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
-  background-image: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0.6),
-    rgba(0, 0, 0, 0)
-  );
+
   border-radius: ${({ borderRadius }) =>
     borderRadius === 0 ? 0 : borderRadius || 6}px;
 
+  ${({ overlayType = 'gradient' }) => OverlayStyle[overlayType]}
+
   ${({ overlayPadding }) =>
     overlayPadding &&
     css`
@@ -91,14 +105,16 @@ const ImageFrameContent = ({
   ImageSource,
   overlay,
   overlayPadding,
+  overlayType,
   withLinkIndicator,
 }: {
   imageUrl?: string
   borderRadius?: number
   sourceUrl?: string
   ImageSource?: any
-  overlay?: boolean
+  overlay?: React.ReactNode
   overlayPadding?: MarginPadding
+  overlayType?: OverlayType
   withLinkIndicator?: boolean
 }) => (
   <>
@@ -115,7 +131,11 @@ const ImageFrameContent = ({
       </SourceUrl>
     )}
     {overlay && (
-      <ImageOverlay borderRadius={borderRadius} overlayPadding={overlayPadding}>
+      <ImageOverlay
+        borderRadius={borderRadius}
+        overlayPadding={overlayPadding}
+        overlayType={overlayType}
+      >
         {overlay}
       </ImageOverlay>
     )}
@@ -208,6 +228,7 @@ function Image({
   ImageSource,
   overlay,
   overlayPadding,
+  overlayType,
   withLinkIndicator,
   onClick,
   floated,
@@ -223,8 +244,9 @@ function Image({
   frame?: GlobalSizes
   size?: GlobalSizes
   ImageSource?: any
-  overlay?: boolean
+  overlay?: React.ReactNode
   overlayPadding?: MarginPadding
+  overlayType?: OverlayType
   withLinkIndicator?: boolean
   onClick?: (e?: React.SyntheticEvent) => any
   floated?: CSS.FloatProperty
@@ -278,6 +300,7 @@ function Image({
           ImageSource={ImageSource}
           overlay={overlay}
           overlayPadding={overlayPadding}
+          overlayType={overlayType}
           withLinkIndicator={withLinkIndicator}
         />
       )}