[FEAT] #38 신규 쓰레기통 제보 뷰 퍼블 & 웹뷰 작업 마무리

BinVoyage · Oct 15, 2024 · 64416c1 · 64416c1
1 parent 912c87a
commit 64416c1
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 22 deletions.
diff --git a/app/src/assets/images/reportNewBin/AddressSvg.tsx b/app/src/assets/images/reportNewBin/AddressSvg.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Svg, {Path} from 'react-native-svg';
+export default function AddressSvg({width, height, fill}: SvgProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M12 21.0037C10.7369 19.9263 9.56619 18.7452 8.5 17.4727C6.9 15.5617 5 12.7157 5 10.0037C4.99858 7.17126 6.70425 4.6171 9.32107 3.53311C11.9379 2.44912 14.9501 3.04895 16.952 5.05271C18.2685 6.36332 19.0059 8.1461 19 10.0037C19 12.7157 17.1 15.5617 15.5 17.4727C14.4338 18.7452 13.2631 19.9263 12 21.0037ZM12 7.00371C10.9282 7.00371 9.93782 7.57551 9.40193 8.50371C8.86603 9.43192 8.86603 10.5755 9.40193 11.5037C9.93782 12.4319 10.9282 13.0037 12 13.0037C13.6569 13.0037 15 11.6606 15 10.0037C15 8.34686 13.6569 7.00371 12 7.00371Z"
+        fill="#278FFF"
+      />
+    </Svg>
+  );
+}
diff --git a/app/src/components/HomeNavigator.tsx b/app/src/components/HomeNavigator.tsx
@@ -1,15 +1,13 @@
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import Home from 'screens/home/Home';
 import PassPort from 'screens/passport/PassPort';
-import ReportNewBin from 'screens/reportNewBin/ReportNewBin';
 
 export default function HomeNavigator() {
   const Stack = createNativeStackNavigator<RootHomeParamList>();
   return (
     <Stack.Navigator initialRouteName="Home" screenOptions={{headerShown: false, gestureEnabled: true}}>
       <Stack.Screen name="Home" component={Home} />
       <Stack.Screen name="PassPort" component={PassPort} />
-      <Stack.Screen name="ReportNewBin" component={ReportNewBin} />
     </Stack.Navigator>
   );
 }
diff --git a/app/src/components/MyBottomSheet.tsx b/app/src/components/MyBottomSheet.tsx
@@ -1,14 +1,15 @@
 import BottomSheet, {BottomSheetView} from '@gorhom/bottom-sheet';
 import {Palette} from 'constants/palette';
 import {useRef, useMemo, useState, useEffect} from 'react';
-import {Dimensions, StyleSheet} from 'react-native';
+import {Dimensions, StyleSheet, ViewStyle} from 'react-native';
 
 interface Props {
   onSheetChange: (offset: number) => void;
   children: React.ReactNode;
+  wrapperStyle?: ViewStyle;
 }
 
-export default function MyBottomSheet({onSheetChange, children}: Props) {
+export default function MyBottomSheet({onSheetChange, children, wrapperStyle}: Props) {
   const height = Dimensions.get('window').height;
   // const [index, setIndex] = useState<number>(1);
   const bottomSheetRef = useRef<BottomSheet>(null);
@@ -29,7 +30,7 @@ export default function MyBottomSheet({onSheetChange, children}: Props) {
       backgroundStyle={styles.container}
       handleIndicatorStyle={styles.handleIndicator}
       onChange={handleSheetChanges}>
-      <BottomSheetView style={styles.wrapper}>{children}</BottomSheetView>
+      <BottomSheetView style={[styles.wrapper, wrapperStyle]}>{children}</BottomSheetView>
     </BottomSheet>
   );
 }

diff --git a/app/src/components/ReportNewBinNavigator.tsx b/app/src/components/ReportNewBinNavigator.tsx
@@ -0,0 +1,12 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import ReportNewBin from "screens/reportNewBin/ReportNewBin";
+
+export default function ReportNewBinNavigator() {
+  const Stack = createNativeStackNavigator<RootReportNewBinParamList>();
+
+  return (
+    <Stack.Navigator initialRouteName="ReportNewBin" screenOptions={{headerShown: false}}>
+      <Stack.Screen name="ReportNewBin" component={ReportNewBin} />
+    </Stack.Navigator>
+  );
+}
diff --git a/app/src/components/StackNavigator.tsx b/app/src/components/StackNavigator.tsx
@@ -5,6 +5,7 @@ import UserInput from 'screens/UserInput';
 import Login from 'screens/login/Login';
 import Onboarding from 'screens/OnBoarding';
 import BinDetailNavigator from './BinDetailNavigator';
+import ReportNewBinNavigator from './ReportNewBinNavigator';
 
 type StackNavigatorProps = {
   isLoggedIn: boolean;
@@ -21,6 +22,7 @@ export default function StackNavigator({isLoggedIn}: StackNavigatorProps) {
         <Stack.Screen name="OnBoarding" component={Onboarding} />
         <Stack.Screen name="UserInput" component={UserInput} />
         <Stack.Screen name="BinDetailNavigator" component={BinDetailNavigator} />
+        <Stack.Screen name="ReportNewBinNavigator" component={ReportNewBinNavigator} />
       </Stack.Navigator>
     </NavigationContainer>
   );

diff --git a/app/src/screens/home/Home.tsx b/app/src/screens/home/Home.tsx
@@ -11,6 +11,7 @@ export default function Home() {
   useBackHandler();
   const navigation1 = useNavigation<NavigationProp<RootTabParamList>>();
   const navigation2 = useNavigation<NavigationProp<RootHomeParamList>>();
+  const navigation3 = useNavigation<NavigationProp<RootStackParamList>>();
   const {userInfo, isLoggedIn, setUserInfo} = userStore();
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
@@ -71,7 +72,7 @@ export default function Home() {
               <S.IconPassPort source={require('assets/images/icon-passport.png')} resizeMode="contain" />
             </S.PassPort>
           </S.PassPortBg>
-          <S.Button onPress={() => navigation2.navigate('ReportNewBin')}>
+          <S.Button onPress={() => navigation3.navigate('ReportNewBinNavigator')}>
             <S.ButtonText>Find any new bin? Let us know!</S.ButtonText>
           </S.Button>
         </S.Body>

diff --git a/app/src/screens/reportNewBin/ReportNewBin.style.ts b/app/src/screens/reportNewBin/ReportNewBin.style.ts
@@ -0,0 +1,32 @@
+import DefaultText from "components/DefaultText";
+import { Palette } from "constants/palette";
+import { Typo } from "constants/typo";
+import styled from "styled-components/native";
+
+export const AddressWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const TextAddress = styled(DefaultText)`
+  font-size: ${Typo.B2.fontSize};
+  font-weight: ${Typo.B2.fontWeight};
+  color: ${Palette.Gray6};
+`;
+
+export const Button = styled.TouchableOpacity`
+  width: 100%;
+  padding: 16px 30px;
+  justify-content: center;
+  align-items: center;
+  background: ${Palette.Primary};
+  border-radius: 10px;
+  margin-bottom: 20px;
+`;
+
+export const ButtonText = styled(DefaultText)`
+  font-size: ${Typo.Button1.fontSize};
+  font-weight: ${Typo.Button1.fontWeight};
+  color: ${Palette.White};
+`;
diff --git a/app/src/screens/reportNewBin/ReportNewBin.tsx b/app/src/screens/reportNewBin/ReportNewBin.tsx
@@ -1,16 +1,20 @@
+import MyBottomSheet from 'components/MyBottomSheet';
 import React, {useEffect, useRef, useState} from 'react';
-import {Platform, Alert, StyleSheet, View, Image, TouchableOpacity, Dimensions} from 'react-native';
+import {Platform, Alert, StyleSheet, View, Image, TouchableOpacity, Dimensions, Text} from 'react-native';
 import {request, PERMISSIONS, RESULTS} from 'react-native-permissions';
 import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated';
-import WebView from 'react-native-webview';
+import WebView, { WebViewMessageEvent } from 'react-native-webview';
 import {mapStore} from 'store/Store';
+import * as S from 'screens/reportNewBin/ReportNewBin.style';
+import AddressSvg from 'assets/images/reportNewBin/AddressSvg';
 
 export default function ReportNewBin() {
   const webViewRef = useRef<WebView>(null);
   const {startWatchingPosition, stopWatchingPosition, setCurrentPosition, setCenterPosition} = mapStore();
   const [isWebViewLoaded, setIsWebViewLoaded] = useState<boolean>(false); // WebView 로드 상태
   const [bottomSheetOffset, setBottomSheetOffset] = useState<number>(0); // BottomSheet의 높이 또는 offset 상태
-  const URL = 'https://binvoyage.netlify.app/reportNewBin';
+  // const URL = 'https://binvoyage.netlify.app/reportNewBin';
+  const URL = 'https://feature-38--binvoyage.netlify.app/reportNewBin';
   const alertShown = useRef(false);
 
   const {width, height} = Dimensions.get('window');
@@ -108,6 +112,17 @@ export default function ReportNewBin() {
     }
   };
 
+  const handleMessage = (e: WebViewMessageEvent) => {
+    try {
+      const data = JSON.parse(e.nativeEvent.data);
+      if (data.type === 'newBinPoint') {
+        console.log("newBinPoint:", data.payload.position);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return (
     <View style={styles.container}>
       <WebView
@@ -117,7 +132,7 @@ export default function ReportNewBin() {
         javaScriptEnabled={true}
         domStorageEnabled={true} // DOM 저장소 사용
         cacheMode={'LOAD_CACHE_ELSE_NETWORK'} // 캐시 우선 로딩
-        // onMessage={handleMessage}
+        onMessage={handleMessage}
         onLoadStart={() => setIsWebViewLoaded(false)} // 로딩 시작
         onLoadEnd={() => setIsWebViewLoaded(true)} // 로딩 완료/>
       />
@@ -126,6 +141,17 @@ export default function ReportNewBin() {
           <Image source={require('assets/images/icon-refresh.png')} style={{width: 60, height: 60}} />
         </TouchableOpacity>
       </Animated.View>
+      <MyBottomSheet onSheetChange={setBottomSheetOffset} wrapperStyle={{paddingHorizontal: 16 }}>
+        <View style={styles.view}>
+          <S.AddressWrapper>
+            <AddressSvg width='24' height='24'/>
+            <S.TextAddress>서울 성북구 삼선교로 16길 16-3</S.TextAddress>
+          </S.AddressWrapper>
+          <S.Button>
+            <S.ButtonText>There’s a bin here!</S.ButtonText>
+          </S.Button>
+        </View>
+      </MyBottomSheet>
     </View>
   );
 }
@@ -137,8 +163,9 @@ const styles = StyleSheet.create({
   webview: {
     flex: 1,
   },
-  View: {
+  view: {
     flex: 1,
+    justifyContent: 'space-between'
   },
   refresh: {
     position: 'absolute',

diff --git a/app/src/types/navigator.d.ts b/app/src/types/navigator.d.ts
@@ -23,6 +23,7 @@ type RootStackParamList = {
       isVerifyVisit?: boolean;
     };
   };
+  ReportNewBinNavigator: undefined;
 };
 
 type RootHomeParamList = {
@@ -55,6 +56,10 @@ type RootBinDetailParamList = {
   };
 };
 
+type RootReportNewBinParamList = {
+  ReportNewBin: undefined;
+}
+
 type RootMyParamList = {
   MyPage: undefined;
   MyFeedback: undefined;

diff --git a/web/src/components/ReportNewBin.tsx b/web/src/components/ReportNewBin.tsx
@@ -24,7 +24,6 @@ const ReportNewBin = ({latitude, longitude}: ReportNewBinProps) => {
 
         setIsMapLoaded(true);
 
-        // 마커 클릭 이벤트 추가
         window.kakao.maps.event.addListener(map, 'click', function (mouseEvent: any) {
             const clickPosition = mouseEvent.latLng;
 
@@ -49,10 +48,8 @@ const ReportNewBin = ({latitude, longitude}: ReportNewBinProps) => {
             const message = {
                 type: 'newBinPoint',
                 payload: {
-                    position: {
-                        latitude: targetMarker?.getPosition().getLat(),
-                        longitude: targetMarker?.getPosition().getLng()
-                    }
+                    latitude: targetMarker?.getPosition().getLat(),
+                    longitude: targetMarker?.getPosition().getLng()
                 }
             };
             window.ReactNativeWebView?.postMessage(JSON.stringify(message));
@@ -67,19 +64,55 @@ const ReportNewBin = ({latitude, longitude}: ReportNewBinProps) => {
     };
 
     const addMarkersAndOverlays = (map: kakao.maps.Map) => {
-        const currentImageSrc = "image/Current.svg";
-        const imageSize = new window.kakao.maps.Size(30, 30);
-        const imageOption = { offset: new window.kakao.maps.Point(15, 15) };
-        const currentImage = new window.kakao.maps.MarkerImage(currentImageSrc, imageSize, imageOption);    
         const currentPosition = new window.kakao.maps.LatLng(latitude, longitude);
 
         const myMarker = new window.kakao.maps.Marker({
           position: currentPosition,
-          image: currentImage,
-          zIndex: 2,
+          image: new window.kakao.maps.MarkerImage("image/Current.svg", new window.kakao.maps.Size(30, 30),  { offset: new window.kakao.maps.Point(15, 15) }),
+          zIndex: 3,
+        });
+
+        // 마커 클릭 이벤트 추가 (현재 위치 클릭해도 마커 찍을 수 있도록)
+        window.kakao.maps.event.addListener(myMarker, 'click', function () {
+            const clickPosition = myMarker.getPosition();
+
+            // 기존 targetMarker가 있으면 삭제
+            if (targetMarker) {
+                targetMarker.setMap(null);
+            }
+
+            const imageSrc = "image/reportNewBin/targetMarker.png";
+            const imageSize = new window.kakao.maps.Size(35, 47);
+
+            // 새로운 마커 생성
+            const newMarker = new window.kakao.maps.Marker({
+                position: clickPosition,
+                image: new window.kakao.maps.MarkerImage(imageSrc, imageSize),
+                map: map,
+            });
+
+            // 새로운 마커를 상태로 저장
+            targetMarker = newMarker;
+
+            const message = {
+                type: 'newBinPoint',
+                payload: {
+                    latitude: targetMarker?.getPosition().getLat(),
+                    longitude: targetMarker?.getPosition().getLng()
+                }
+            };
+            window.ReactNativeWebView?.postMessage(JSON.stringify(message));
+        });
+
+        const newMarker = new window.kakao.maps.Marker({
+            position: currentPosition,
+            image: new window.kakao.maps.MarkerImage("image/reportNewBin/targetMarker.png", new window.kakao.maps.Size(35, 47)),
+            zIndex: 4,
         });
 
         myMarker.setMap(map);
+        newMarker.setMap(map);
+        targetMarker = newMarker;
         setCurrentMarker(myMarker);
     };