fix: update card ui, slope camera click range and toast (#45)

* fix: update card ui

* fix: fix slope camera click range and toast

Author: Najeong-Kim

Diff for: src/features/slop/ui/slop-camera.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { toast } from 'sonner';
 import type { Position, Webcam } from '@/entities/slop/model/model';
 import ArrowRightIcon from '@/shared/icons/arrow-right';
+import NeutralFace from '@/shared/icons/neutral-face';
 import { cn } from '@/shared/lib';
 import postAppMessage from '@/shared/lib/postAppMessage';
 import CameraButton from '@/shared/ui/cam-button';
@@ -44,7 +46,13 @@ const SlopCamera = ({
     setOpenCamera();
 
     if (!src) {
-      postAppMessage('선택한 웹캠은 아직 준비중 이에요');
+      postAppMessage('선택한 웹캠은 아직 준비중 이에요', (message) =>
+        toast(
+          <>
+            <NeutralFace /> {message}
+          </>
+        )
+      );
     }
   };
 
@@ -68,10 +76,8 @@ const SlopCamera = ({
             }
             isOpen={isOpen}
           >
-            <div className={cn('flex items-center')}>
-              <p className={cn('body3-medium')} onClick={openVideo}>
-                {name}
-              </p>
+            <div className={cn('flex cursor-pointer items-center')} onClick={openVideo}>
+              <p className={cn('body3-medium')}>{name}</p>
               <ArrowRightIcon />
             </div>
           </Tooltip>

Diff for: src/shared/lib/postAppMessage.ts

@@ -13,23 +13,21 @@ declare global {
   }
 }
 
-const postAppMessage = (message: string) => {
+const postAppMessage = (message: string, showToast: (message: string) => void) => {
   const userAgent = navigator.userAgent.toLowerCase();
   const android = userAgent.match(/android/i);
   const iphone = userAgent.match(/iphone/i);
 
   if (android !== null) {
-    console.log("Android");
     return window.Android.showToast(message);
   } else if (iphone !== null) {
-    console.log("iOS");
     if (window.webkit.messageHandlers.weski) {
       window.webkit.messageHandlers.weski.postMessage({ method: "showToast", message: message });
     } else {
       console.error("Weski bridge is not available.");
     }
   } else {
-    return window.opener.postMessage(message);
+    return showToast(message);
   }
 }
 

Diff for: src/shared/ui/card.tsx

@@ -7,7 +7,7 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 const Card = ({ className, children, ...props }: CardProps) => (
   <div
     className={cn(
-      '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)]',
+      'backdrop-blur-px rounded-[15px] border border-white/30 bg-gradient-to-br from-white/90 to-white/30 shadow-[2px_10px_29px_0px_rgba(47,49,65,0.02)]',
       className
     )}
     {...props}

Diff for: src/widgets/discovery/ui/discovery-card.tsx

@@ -13,7 +13,7 @@ const DiscoveryCard = ({ resortId, name, openSlopes, currentWeather, weeklyWeath
     <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/30 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/60 hover:pb-[15px] hover:pt-[33px] hover:md:pb-[25px] hover:md:pt-[39px]'
       )}
       onClick={() => router.push(`/${resortId}`)}
     >