Commit @dc82cb0b77d05f358503893a03b70676b507a1bc - ansdpwn/도로위험상황

moonyeju 2023-11-14

[CHORE] modal 수정

@dc82cb0b77d05f358503893a03b70676b507a1bc

41ed2ec

dc82cb0

src/component/ModalComponent.js

--- src/component/ModalComponent.js

+++ src/component/ModalComponent.js


 import React, {useEffect} from 'react';
 import {View, Text} from 'react-native';
 import Modal from 'react-native-modal';
-import {BLACK, RED} from '../color';
+import {BLACK, RED, WHITE} from '../color';
 
 const ModalComponent = ({isVisible, toggleModal, alertTitle, alertMessage}) => {
   useEffect(() => {

       backdropOpacity={0}>
       <View
         style={{
-          backgroundColor: 'white',
+          backgroundColor: WHITE,
           padding: 22,
           borderRadius: 10,
           alignItems: 'center',

41ed2ec

dc82cb0

src/component/Photo.js

--- src/component/Photo.js

+++ src/component/Photo.js


-import React, {useRef, useEffect, useCallback, useContext} from 'react';
+import React, {
+  useRef,
+  useEffect,
+  useCallback,
+  useContext,
+  useState,
+} from 'react';
 import {Linking, Text, Alert} from 'react-native';
 import {useCameraDevices, Camera} from 'react-native-vision-camera';
 import RNFS from 'react-native-fs';
 import {url} from '../url';
+import ModalComponent from './ModalComponent';
 
 export default function Photo({onUploadFile}) {
   const {onQuery, location} = useContext(MapContext);

   const device = devices.back;
   const camera = useRef(null);
   let timerId;
+  const [isModalVisible, setModalVisible] = useState(false);
+
+  const toggleModal = () => {
+    setModalVisible(!isModalVisible);
+  };
 
   const requestCameraPermission = useCallback(async () => {
     const permission = await Camera.requestCameraPermission();

           throw 'no data';
         }
         onUploadFile(node);
-        Alert.alert('안개 발생 알람', '전방에 안개가 발생하였습니다.');
+        toggleModal();
 
         // 분석 결과 node remove 요청
         return fetch(`${url}/trip/remove`, {

         console.log(err);
       });
   };
+  return (
+    <ModalComponent
+      isVisible={isModalVisible}
+      toggleModal={toggleModal}
+      alertTitle="안개 발생 알람"
+      alertMessage="전방에 안개가 발생하였습니다."
+    />
+  );
 }

41ed2ec

dc82cb0

src/screens/DestinationList.js

--- src/screens/DestinationList.js

+++ src/screens/DestinationList.js


 import {MapContext} from './../context/MapContext';
 import {Polyline, Marker} from 'react-native-maps';
 import EndPointMarker from '../resoureces/files/images/end_point.png';
-import {PRIMERY} from '../color';
+import {PRIMERY, WHITE} from '../color';
 
 export default function DestinationList({navigation}) {
   const {searchQuery, nodes} = useContext(MapContext);

           <Button
             title={'운행 시작'}
             padding={10}
-            color={'white'}
+            color={WHITE}
             backgroundColor={PRIMERY}
             onPress={() => {
               navigation.navigate('Driving');

 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'white',
+    backgroundColor: WHITE,
   },
 });

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,7 +1,7 @@
1	1	import React, {useEffect} from 'react';
2	2	import {View, Text} from 'react-native';
3	3	import Modal from 'react-native-modal';
4		-import {BLACK, RED} from '../color';
	4	+import {BLACK, RED, WHITE} from '../color';
5	5
6	6	const ModalComponent = ({isVisible, toggleModal, alertTitle, alertMessage}) => {
7	7	useEffect(() => {
...	...	@@ -31,7 +31,7 @@
31	31	backdropOpacity={0}>
32	32	<View
33	33	style={{
34		- backgroundColor: 'white',
	34	+ backgroundColor: WHITE,
35	35	padding: 22,
36	36	borderRadius: 10,
37	37	alignItems: 'center',

...	...	@@ -1,8 +1,15 @@
1		-import React, {useRef, useEffect, useCallback, useContext} from 'react';
	1	+import React, {
	2	+ useRef,
	3	+ useEffect,
	4	+ useCallback,
	5	+ useContext,
	6	+ useState,
	7	+} from 'react';
2	8	import {Linking, Text, Alert} from 'react-native';
3	9	import {useCameraDevices, Camera} from 'react-native-vision-camera';
4	10	import RNFS from 'react-native-fs';
5	11	import {url} from '../url';
	12	+import ModalComponent from './ModalComponent';
6	13
7	14	export default function Photo({onUploadFile}) {
8	15	const {onQuery, location} = useContext(MapContext);
...	...	@@ -11,6 +18,11 @@
11	18	const device = devices.back;
12	19	const camera = useRef(null);
13	20	let timerId;
	21	+ const [isModalVisible, setModalVisible] = useState(false);
	22	+
	23	+ const toggleModal = () => {
	24	+ setModalVisible(!isModalVisible);
	25	+ };
14	26
15	27	const requestCameraPermission = useCallback(async () => {
16	28	const permission = await Camera.requestCameraPermission();
...	...	@@ -85,7 +97,7 @@
85	97	throw 'no data';
86	98	}
87	99	onUploadFile(node);
88		- Alert.alert('안개 발생 알람', '전방에 안개가 발생하였습니다.');
	100	+ toggleModal();
89	101
90	102	// 분석 결과 node remove 요청
91	103	return fetch(`${url}/trip/remove`, {
...	...	@@ -110,4 +122,12 @@
110	122	console.log(err);
111	123	});
112	124	};
	125	+ return (
	126	+ <ModalComponent
	127	+ isVisible={isModalVisible}
	128	+ toggleModal={toggleModal}
	129	+ alertTitle="안개 발생 알람"
	130	+ alertMessage="전방에 안개가 발생하였습니다."
	131	+ />
	132	+ );
113	133	}

...	...	@@ -11,7 +11,7 @@
11	11	import {MapContext} from './../context/MapContext';
12	12	import {Polyline, Marker} from 'react-native-maps';
13	13	import EndPointMarker from '../resoureces/files/images/end_point.png';
14		-import {PRIMERY} from '../color';
	14	+import {PRIMERY, WHITE} from '../color';
15	15
16	16	export default function DestinationList({navigation}) {
17	17	const {searchQuery, nodes} = useContext(MapContext);
...	...	@@ -45,7 +45,7 @@
45	45	<Button
46	46	title={'운행 시작'}
47	47	padding={10}
48		- color={'white'}
	48	+ color={WHITE}
49	49	backgroundColor={PRIMERY}
50	50	onPress={() => {
51	51	navigation.navigate('Driving');
...	...	@@ -60,6 +60,6 @@
60	60	const styles = StyleSheet.create({
61	61	container: {
62	62	flex: 1,
63		- backgroundColor: 'white',
	63	+ backgroundColor: WHITE,
64	64	},
65	65	});

Delete comment