[feat]레전드분석결과출력

Regular-Pharmasist · Feb 24, 2024 · 25b9be4 · 25b9be4
1 parent 3a8fcd3
commit 25b9be4
Show file tree

Hide file tree

Showing 5 changed files with 284 additions and 203 deletions.
diff --git a/components/DrugCard.js b/components/DrugCard.js
@@ -0,0 +1,47 @@
+import React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+
+const DrugCard = ({ item }) => {
+  const { itemName, efcyQesitm, warn, sideEffect, image, typeName } = item;
+
+  return (
+    <View style={styles.card}>
+      <Text style={styles.title}>제품 명: {itemName}</Text>
+      <Text>효능: {efcyQesitm}</Text>
+      <Text>주의사항: {warn}</Text>
+      <Text>부작용: {sideEffect}</Text>
+      {image && <Image source={{ uri: image }} style={styles.image} />}
+      <Text>위험분류: {typeName}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "#fff",
+    borderRadius: 8,
+    padding: 20,
+    marginBottom: 20,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  image: {
+    width: 100,
+    height: 100,
+    resizeMode: "cover",
+    marginBottom: 10,
+  },
+});
+
+export default DrugCard;
diff --git a/components/ImagePickerComponent.js b/components/ImagePickerComponent.js
@@ -5,8 +5,11 @@ import Constants from "expo-constants";
 import axios from "axios";
 import { withNavigation } from "@react-navigation/compat";
 
+
+
 const ImagePickerComponent = ({ navigation }) => {
   const [selectedImage, setSelectedImage] = useState(null);
+  const [selectedImageData, setSelectedImageData] = useState(null);
 
   useEffect(() => {
     (async () => {
@@ -22,6 +25,16 @@ const ImagePickerComponent = ({ navigation }) => {
     })();
   }, []);
 
+  // ImagePickerComponent
+useEffect(() => {
+  if (selectedImageData) {
+    navigation.push("NewStackScreen", {
+      selectedImageData: selectedImageData,
+    });
+  }
+}, [selectedImageData]);
+
+
   const pickImageAndSend = async () => {
     let result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ImagePicker.MediaTypeOptions.Images,
@@ -52,14 +65,17 @@ const ImagePickerComponent = ({ navigation }) => {
           headers: {
             "Content-Type": "multipart/form-data",
           },
-          timeout: 100000000000000000000000, // 10초 시간 제한 설정
+          timeout: 1000000000, // 10초 시간 제한 설정
         }
       );
       // Handle response from backend
       console.log(response.data);
+      setSelectedImageData(response.data);
 
       // Open a new stack screen after image selection
-      navigation.push("NewStackScreen", { selectedImage });
+      navigation.push("NewStackScreen", {
+        selectedImageData: selectedImageData,
+      });
     } catch (error) {
       console.error(error);
     }

diff --git a/components/ModalComponent.js b/components/ModalComponent.js
@@ -0,0 +1,151 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Modal,
+  Button,
+  TouchableOpacity,
+} from "react-native";
+import RadioButton from "react-native-radio-button";
+import { Picker } from "@react-native-picker/picker";
+import DateTimePicker from "@react-native-community/datetimepicker";
+
+const ModalComponent = (props) => {
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={props.modalVisible}
+      onRequestClose={props.onRequestClose}
+    >
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.modalTitle}>복용 정보 입력</Text>
+          <Text style={styles.modalText}>{props.drugName}</Text>
+
+          <View style={styles.datePicker}>
+            <Text style={styles.modalSubtitle}>복용시작일:</Text>
+            <DateTimePicker
+              value={props.startDate}
+              onChange={props.onStartDateChange}
+            />
+          </View>
+
+          <View style={styles.datePicker}>
+            <Text style={styles.modalSubtitle}>복용마감일:</Text>
+            <DateTimePicker
+              value={props.endDate}
+              onChange={props.onEndDateChange}
+            />
+          </View>
+
+          <View style={styles.rowContainer}>
+            <Text style={styles.modalSubtitle}>현재 복용중 여부:</Text>
+            <View style={styles.row}>
+              <RadioButton
+                animation={"bounceIn"}
+                isSelected={props.isTaking}
+                onPress={props.onTakingPress}
+              />
+              <Text style={styles.radioText}>Yes</Text>
+              <RadioButton
+                animation={"bounceIn"}
+                isSelected={!props.isTaking}
+                onPress={props.offTakingPress}
+              />
+              <Text style={styles.radioText}>No</Text>
+            </View>
+          </View>
+
+          <View style={styles.rowContainer}>
+            <Text style={styles.modalSubtitle}>하루 복용 횟수:</Text>
+            <Picker
+              selectedValue={props.timesPerDay}
+              onValueChange={props.onTimesPerDayChange}
+              style={styles.picker}
+            >
+              <Picker.Item label="1회" value={1} />
+              <Picker.Item label="2회" value={2} />
+              <Picker.Item label="3회" value={3} />
+              <Picker.Item label="4회" value={4} />
+              <Picker.Item label="5회" value={5} />
+            </Picker>
+          </View>
+          <View style={{ flex: 1, justifyContent: "flex-end" }}>
+            <Button title="제출" onPress={props.onSubmit} />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22,
+  },
+  modalView: {
+    margin: 30,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 30,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalTitle: {
+    marginBottom: 15,
+    textAlign: "center",
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  modalSubtitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginRight: 10,
+  },
+  modalText: {
+    fontSize: 14,
+    marginBottom: 15,
+  },
+  datePicker: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  rowContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 20,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  radioText: {
+    fontSize: 14,
+  },
+  pickerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 10,
+  },
+  picker: {
+    height: 40,
+    width: 100,
+    fontSize: 16,
+  },
+});
+
+export default ModalComponent;
diff --git a/screens/Home.js b/screens/Home.js
@@ -112,8 +112,7 @@ class Home extends React.Component {
   };
 
   pickImageAndSend = async () => {
-    // Implementation of pickImageAndSend method
-    // You can implement this method as per your requirement to pick an image from gallery and send it to backend
+    this.props.navigation.push("NewStackScreen", { data }); 
   };
 
   renderCameraModal = () => {
@@ -248,7 +247,7 @@ class Home extends React.Component {
 
   render() {
     const { navigation } = this.props;
-    
+
     return (
       <Stack.Navigator initialRouteName="Home">
         <Stack.Screen