From b2c0f4eaf19adb5965f0cf1efb64e1a96e943947 Mon Sep 17 00:00:00 2001
From: NAJEONG KIM <73640737+Najeong-Kim@users.noreply.github.com>
Date: Wed, 6 Nov 2024 22:20:32 +0900
Subject: [PATCH] fix: update card ui, slope camera click range and toast (#45)

* fix: update card ui

* fix: fix slope camera click range and toast
---
 src/features/slop/ui/slop-camera.tsx        | 16 +++++++++++-----
 src/shared/lib/postAppMessage.ts            |  6 ++----
 src/shared/ui/card.tsx                      |  2 +-
 src/widgets/discovery/ui/discovery-card.tsx |  2 +-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/features/slop/ui/slop-camera.tsx b/src/features/slop/ui/slop-camera.tsx
index f9902d0..e9cb36a 100644
--- a/src/features/slop/ui/slop-camera.tsx
+++ b/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 --git a/src/shared/lib/postAppMessage.ts b/src/shared/lib/postAppMessage.ts
index 7251ff5..5ba953c 100644
--- a/src/shared/lib/postAppMessage.ts
+++ b/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 --git a/src/shared/ui/card.tsx b/src/shared/ui/card.tsx
index 7086fba..1d83272 100644
--- 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(
-      '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 --git a/src/widgets/discovery/ui/discovery-card.tsx b/src/widgets/discovery/ui/discovery-card.tsx
index 070bab3..af40e0d 100644
--- a/src/widgets/discovery/ui/discovery-card.tsx
+++ b/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}`)}
     >