From 784a35408483f74384170b70bb7fb683d65fc6b3 Mon Sep 17 00:00:00 2001
From: bananajeong <73640737+Najeong-Kim@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:24:19 +0900
Subject: [PATCH] feat: add slope height post app message

---
 src/features/slope/ui/slope-camera.tsx          |  2 +-
 src/shared/lib/postAppMessage.ts                | 16 ++++++++++++----
 src/views/slope-status/ui/slope-status-page.tsx | 11 +++++++++--
 src/views/webcam/ui/webcam-mobile-map-page.tsx  | 11 +++++++++--
 src/widgets/header/ui/slope-status-time.tsx     |  1 -
 5 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/features/slope/ui/slope-camera.tsx b/src/features/slope/ui/slope-camera.tsx
index ad2fd95..1918b31 100644
--- a/src/features/slope/ui/slope-camera.tsx
+++ b/src/features/slope/ui/slope-camera.tsx
@@ -48,7 +48,7 @@ const SlopeCamera = ({
     setOpenCamera();
 
     if (!url) {
-      postAppMessage('선택한 웹캠은 아직 준비중 이에요', isWebview, (message) =>
+      postAppMessage('showToast', '선택한 웹캠은 아직 준비중 이에요', isWebview, (message) =>
         toast(
           <>
             <NeutralFace /> {message}
diff --git a/src/shared/lib/postAppMessage.ts b/src/shared/lib/postAppMessage.ts
index 421ca33..275fe52 100644
--- a/src/shared/lib/postAppMessage.ts
+++ b/src/shared/lib/postAppMessage.ts
@@ -1,28 +1,36 @@
+type AppMessageMethod = 'showToast' | 'setHeight';
+
 declare global {
   interface Window {
     Android: {
       showToast: (message: string) => void;
+      setHeight: (message: string) => void;
     };
     webkit: {
       messageHandlers: {
         weski: {
-          postMessage: ({ method, message }: { method: "showToast", message: string }) => void;
+          postMessage: ({ method, message }: { method: AppMessageMethod, message: string }) => void;
         };
       };
     };
   }
 }
 
-const postAppMessage = (message: string, isWebview: boolean, showToast: (message: string) => void) => {
+const postAppMessage = (method: AppMessageMethod, message: string, isWebview: boolean, showToast: (message: string) => void) => {
   const userAgent = navigator.userAgent.toLowerCase();
   const android = userAgent.match(/android/i);
   const iphone = userAgent.match(/iphone/i);
 
   if (isWebview) {
     if (android !== null) {
-      return window.Android.showToast(message);
+      switch (method) {
+        case 'showToast':
+          return window.Android.showToast(message);
+        case 'setHeight':
+          return window.Android.setHeight(message);
+      }
     } else if (iphone !== null) {
-      return window.webkit.messageHandlers.weski.postMessage({ method: "showToast", message: message });
+      return window.webkit.messageHandlers.weski.postMessage({ method: method, message: message });
     }
   }
   return showToast(message);
diff --git a/src/views/slope-status/ui/slope-status-page.tsx b/src/views/slope-status/ui/slope-status-page.tsx
index 3cfe489..cb73436 100644
--- a/src/views/slope-status/ui/slope-status-page.tsx
+++ b/src/views/slope-status/ui/slope-status-page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { useLayoutEffect, useMemo, useRef } from 'react';
 import SlopeStatusHeader from '@/widgets/header/ui/slope-status-header';
 import SlopeStatusTime from '@/widgets/header/ui/slope-status-time';
 import useMapPinch from '@/features/slope/hooks/useMapPinch';
@@ -12,9 +12,11 @@ import { slopeApi } from '@/entities/slope';
 import type { Slope } from '@/entities/slope/model';
 import { RESORT_DOMAIN } from '@/entities/slope/model';
 import { cn } from '@/shared/lib';
+import postAppMessage from '@/shared/lib/postAppMessage';
 
 const SlopeStatusPage = ({ resortId }: { resortId: number }) => {
   const { ref, style, containerRef } = useMapPinch();
+  const mainRef = useRef<HTMLElement>(null);
 
   const { data: slopeRawData } = useQuery(slopeApi.slopeQueries.slope(resortId ?? 0));
   const key = ResortData.find((resort) => resort.id === resortId)
@@ -49,10 +51,15 @@ const SlopeStatusPage = ({ resortId }: { resortId: number }) => {
     [slopeRawData]
   );
 
+  useLayoutEffect(() => {
+    if (!mainRef.current) return;
+    postAppMessage('setHeight', mainRef.current?.offsetHeight.toString(), true, () => {});
+  }, [slopeRawData]);
+
   if (!slopes) return;
 
   return (
-    <main className={cn('mb-3 w-full')}>
+    <main className={cn('mb-3 w-full')} ref={mainRef}>
       <SlopeStatusHeader />
       <section className={cn('relative mx-[20px] overflow-hidden')} ref={containerRef}>
         <SlopeMap
diff --git a/src/views/webcam/ui/webcam-mobile-map-page.tsx b/src/views/webcam/ui/webcam-mobile-map-page.tsx
index f196357..8df21c8 100644
--- a/src/views/webcam/ui/webcam-mobile-map-page.tsx
+++ b/src/views/webcam/ui/webcam-mobile-map-page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { WebcamMap, WebcamSlopeList } from '@/widgets/webcam/ui';
 import useMapPinch from '@/features/slope/hooks/useMapPinch';
 import calculateWebcamPosition from '@/features/slope/lib/calculateWebcamPosition';
@@ -10,6 +10,7 @@ import { slopeApi } from '@/entities/slope';
 import type { Slope, Webcam } from '@/entities/slope/model';
 import { RESORT_DOMAIN, type Position } from '@/entities/slope/model';
 import { cn } from '@/shared/lib';
+import postAppMessage from '@/shared/lib/postAppMessage';
 
 const WebCamMobileMapPage = ({ resortId }: { resortId?: number }) => {
   const { data: slopeRawData } = useQuery(slopeApi.slopeQueries.slope(resortId ?? 0));
@@ -32,6 +33,7 @@ const WebCamMobileMapPage = ({ resortId }: { resortId?: number }) => {
       ...RESORT_DOMAIN[key].webcams.find((webcamConstant) => webcamConstant.id === webcam.number),
     })) as Webcam[];
 
+  const mainRef = useRef<HTMLDivElement>(null);
   const [cameraPositions, setCameraPositions] = useState<{
     [key: number]: Position;
   }>({});
@@ -55,10 +57,15 @@ const WebCamMobileMapPage = ({ resortId }: { resortId?: number }) => {
     api.start({ scale: scale, x: boundedX, y: boundedY });
   };
 
+  useEffect(() => {
+    if (!mainRef.current) return;
+    postAppMessage('setHeight', mainRef.current?.offsetHeight.toString(), true, () => {});
+  }, [slopeRawData]);
+
   if (!slopes || !webcams) return;
 
   return (
-    <main className={cn('w-full')}>
+    <main className={cn('w-full')} ref={mainRef}>
       <WebcamMap
         ref={ref}
         style={style}
diff --git a/src/widgets/header/ui/slope-status-time.tsx b/src/widgets/header/ui/slope-status-time.tsx
index 180046f..e8751bb 100644
--- a/src/widgets/header/ui/slope-status-time.tsx
+++ b/src/widgets/header/ui/slope-status-time.tsx
@@ -18,7 +18,6 @@ type SlopeStatusTimeProps = {
 };
 
 const SlopeStatusTime = ({ times }: SlopeStatusTimeProps) => {
-  console.log(times);
   return (
     <div
       className={cn(