feat: add slope height post app message

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}

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);

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

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}

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(