From 88e0cfa177e3f181c68d22002c23222fb95de20e Mon Sep 17 00:00:00 2001
From: sumi-0011 <selina2000@naver.com>
Date: Sun, 11 Feb 2024 01:47:04 +0900
Subject: [PATCH] style: card banner border fix!

---
 src/components/Banner/CardBanner.tsx | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/Banner/CardBanner.tsx b/src/components/Banner/CardBanner.tsx
index 1ff53863..4bf2041a 100644
--- a/src/components/Banner/CardBanner.tsx
+++ b/src/components/Banner/CardBanner.tsx
@@ -4,12 +4,14 @@ 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>
   );
 }
@@ -17,12 +19,11 @@ function CardBanner(props: CardBannerType) {
 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',
@@ -30,6 +31,17 @@ const containerCss = css({
   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',