From 25b9be4f7e1804837e0022e17e779c18c4e3baac Mon Sep 17 00:00:00 2001
From: zeeun <98653814+zeeun@users.noreply.github.com>
Date: Sun, 25 Feb 2024 01:39:44 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=EB=A0=88=EC=A0=84=EB=93=9C=EB=B6=84?=
=?UTF-8?q?=EC=84=9D=EA=B2=B0=EA=B3=BC=EC=B6=9C=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/DrugCard.js | 47 +++++
components/ImagePickerComponent.js | 20 ++-
components/ModalComponent.js | 151 +++++++++++++++++
screens/Home.js | 5 +-
screens/NewStackScreen.js | 264 ++++++++---------------------
5 files changed, 284 insertions(+), 203 deletions(-)
create mode 100644 components/DrugCard.js
create mode 100644 components/ModalComponent.js
diff --git a/components/DrugCard.js b/components/DrugCard.js
new file mode 100644
index 0000000..8df086d
--- /dev/null
+++ 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 (
+
+ 제품 명: {itemName}
+ 효능: {efcyQesitm}
+ 주의사항: {warn}
+ 부작용: {sideEffect}
+ {image && }
+ 위험분류: {typeName}
+
+ );
+};
+
+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
index c22181a..26b367e 100644
--- 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
new file mode 100644
index 0000000..1b97cc7
--- /dev/null
+++ 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 (
+
+
+
+ 복용 정보 입력
+ {props.drugName}
+
+
+ 복용시작일:
+
+
+
+
+ 복용마감일:
+
+
+
+
+ 현재 복용중 여부:
+
+
+ Yes
+
+ No
+
+
+
+
+ 하루 복용 횟수:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+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
index 1c291e6..84c2aab 100644
--- 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 (
{
+ const navigation = useNavigation(); // useNavigation hook 사용
+ const route = useRoute(); // useRoute hook 사용
+ const selectedImageData = route.params.selectedImageData;
- setModalVisible = (visible) => {
- this.setState({ modalVisible: visible });
- };
+ const [modalVisible, setModalVisible] = useState(false);
+ const [drugName, setDrugName] = useState("약물 이름");
+ const [startDate, setStartDate] = useState(new Date());
+ const [endDate, setEndDate] = useState(new Date());
+ const [isTaking, setIsTaking] = useState(true);
+ const [timesPerDay, setTimesPerDay] = useState(1);
- componentDidMount() {
- this.props.navigation.setOptions({
+ useLayoutEffect(() => {
+ navigation.setOptions({
headerRight: () => (
-