style: card banner border fix!

depromeet · Feb 10, 2024 · 88e0cfa · 88e0cfa
1 parent 1599fd0
commit 88e0cfa
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/src/components/Banner/CardBanner.tsx b/src/components/Banner/CardBanner.tsx
@@ -4,32 +4,44 @@ import { css } from '@/styled-system/css';
 
 function CardBanner(props: CardBannerType) {
   return (
-    <div className={containerCss}>
-      <div>
-        <Image src={props.iconUrl} width={20} height={20} alt={props.title} />
+    <div className={outerContainerCss}>
+      <div className={containerCss}>
+        <div>
+          <Image src={props.iconUrl} width={20} height={20} alt={props.title} />
+        </div>
+        <p className={descriptionCss}>{props.description}</p>
+        <p className={titleCss}>{props.title}</p>
       </div>
-      <p className={descriptionCss}>{props.description}</p>
-      <p className={titleCss}>{props.title}</p>
     </div>
   );
 }
 
 export default CardBanner;
 
 const containerCss = css({
-  minWidth: 'fit-content',
   width: '100%',
+  height: '100%',
+  minWidth: 'fit-content',
   overflow: 'hidden',
-  borderRadius: '22px',
   boxShadow: '0px 10px 30px 4px rgba(78, 80, 122, 0.20) inset, 0px 4px 20px 0px rgba(15, 16, 23, 0.30)',
-  border: ' 1px solid #474A5D',
   padding: '20px 16px 16px',
   background: 'linear-gradient(136deg, rgba(168, 184, 240, 0.02) 15.95%, rgba(165, 143, 255, 0.02) 85.07%)',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
 });
 
+const outerContainerCss = css({
+  overflow: 'hidden',
+  border: '1px solid transparent',
+  borderRadius: '22px',
+  padding: '0px !', // NOTE: padding 0 필수,
+  backgroundOrigin: 'border-box',
+  backgroundClip: 'content-box, border-box',
+  backgroundImage:
+    'linear-gradient(token(colors.bg.surface3), token(colors.bg.surface3)), token(colors.gradients.stroke)',
+});
+
 const descriptionCss = css({
   marginTop: '8px',
   textStyle: 'body4',