feat: apply glass morphism (#39)

Nexters · Nov 1, 2024 · 1a28681 · 1a28681
1 parent 99df796
commit 1a28681
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/shared/ui/card.tsx b/src/shared/ui/card.tsx
@@ -7,7 +7,7 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 const Card = ({ className, children, ...props }: CardProps) => (
   <div
     className={cn(
-      'rounded-[15px] border border-white bg-gradient-to-br from-white/90 to-white/60 shadow-[2px_10px_29px_0px_rgba(47,49,65,0.02)] backdrop-blur-[25px]',
+      'backdrop-blur-px rounded-[15px] border border-white/15 bg-gradient-to-br from-white/15 to-white/30 shadow-[2px_10px_29px_0px_rgba(47,49,65,0.02)]',
       className
     )}
     {...props}

diff --git a/src/widgets/discovery/ui/discovery-card.tsx b/src/widgets/discovery/ui/discovery-card.tsx
@@ -13,20 +13,20 @@ const DiscoveryCard = ({ id, name, slope, weather, weeklyWeather }: Discovery) =
     <Card
       className={cn(
         'box-border flex cursor-pointer flex-col gap-[15px] pb-4 pt-[34px] md:pb-[26px] md:pt-10',
-        'transition-all hover:scale-[1.02] hover:border-2 hover:border-main-1 hover:pb-[15px] hover:pt-[33px] hover:md:pb-[25px] hover:md:pt-[39px]'
+        'transition-all hover:scale-[1.02] hover:border-2 hover:border-main-1/30 hover:pb-[15px] hover:pt-[33px] hover:md:pb-[25px] hover:md:pt-[39px]'
       )}
       onClick={() => router.push(`/${id}`)}
     >
-      <div className={cn('mx-[30px] flex flex-col gap-[5px] items-center md:mx-[42px]')}>
-        <div className={cn('w-full flex justify-between items-center')}>
-        <h2 className={cn('title1 md:h2 text-gray-90')}>{name}</h2>
-        <div className={cn('flex gap-2 items-center')}>
+      <div className={cn('mx-[30px] flex flex-col items-center gap-[5px] md:mx-[42px]')}>
+        <div className={cn('flex w-full items-center justify-between')}>
+          <h2 className={cn('title1 md:h2 text-gray-90')}>{name}</h2>
+          <div className={cn('flex items-center gap-2')}>
             <WeatherIcon className={cn('origin-right scale-[1.17]')} weather={weather.weather} />
-            <p className={cn('font-semibold text-[30px] leading-tight')}>{weather.temperature}°</p>
+            <p className={cn('text-[30px] font-semibold leading-tight')}>{weather.temperature}°</p>
           </div>
         </div>
-        <div className={cn('w-full flex justify-between')}>
-        <p className={cn('body1-medium text-gray-60')}>
+        <div className={cn('flex w-full justify-between')}>
+          <p className={cn('body1-medium text-gray-60')}>
             {slope ? `운행중인 슬로프 ${slope}개` : '개장일이 곧 공개될 예정이에요'}
           </p>
           <p className={cn('body1-semibold text-gray-60')}>{weather.description}</p>