Merge pull request #11 from Regular-Pharmasist/feat/AnalyzingScreen-#2

Feat/analyzing screen #2

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;

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

components/KakaoLogin.js

@@ -1,19 +1,12 @@
 // KakaoLogin.js
 import React, { useState } from "react";
-import {
-  View,
-  Button,
-  Modal,
-  TouchableOpacity,
-  Text,
-  Image,
-} from "react-native";
+import { View, TouchableOpacity, Image, Modal } from "react-native";
 import { WebView } from "react-native-webview";
 import axios from "axios";
 
 const runFirst = `window.ReactNativeWebView.postMessage("this is message from web");`;
 
-const KakaoLogin = ({ navigation }) => {
+const KakaoLogin = ({ onLoginSuccess }) => {
   const [modalVisible, setModalVisible] = useState(false);
 
   const handleLoginButton = () => {
@@ -43,7 +36,8 @@ const KakaoLogin = ({ navigation }) => {
     })
       .then(function (response) {
         console.log("Backend Response:", response);
-        navigation.navigate("Home");
+        // 카카오 로그인이 성공했을 때 콜백 함수 호출
+        onLoginSuccess();
       })
       .catch(function (error) {
         console.log("Backend Error:", error);

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;

navigation/Screens.js

@@ -259,6 +259,7 @@ export default function OnboardingStack(props) {
           headerTransparent: true,
         }}
       />
+      <Stack.Screen name="Home" component={HomeStack}/>
       <Stack.Screen name="App" component={AppStack} />
     </Stack.Navigator>
   );

screens/Home.js

@@ -1,4 +1,5 @@
 import React from "react";
+import Header from "../components/Header";
 import {
   StyleSheet,
   Dimensions,
@@ -16,9 +17,7 @@ import { Card } from "../components";
 import articles from "../constants/articles";
 import { Camera } from "expo-camera";
 import ImagePickerComponent from "../components/ImagePickerComponent";
-
 const Stack = createStackNavigator();
-
 const { width, height } = Dimensions.get("screen");
 
 class Home extends React.Component {
@@ -113,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,9 +246,16 @@ class Home extends React.Component {
   };
 
   render() {
+    const { navigation } = this.props;
+
     return (
       <Stack.Navigator initialRouteName="Home">
-        <Stack.Screen name="Home">
+        <Stack.Screen
+          name="Home"
+          options={{
+            title: "단골약사",
+          }}
+        >
           {() => (
             <Block flex center style={styles.home}>
               {this.renderArticles()}