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/KakaoLogin.js b/components/KakaoLogin.js
index 172db0c..06632f1 100644
--- a/components/KakaoLogin.js
+++ b/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);
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/navigation/Screens.js b/navigation/Screens.js
index 0ab0362..71209f0 100644
--- a/navigation/Screens.js
+++ b/navigation/Screens.js
@@ -259,6 +259,7 @@ export default function OnboardingStack(props) {
headerTransparent: true,
}}
/>
+
);
diff --git a/screens/Home.js b/screens/Home.js
index 328eeac..84c2aab 100644
--- a/screens/Home.js
+++ b/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 (
-
+
{() => (
{this.renderArticles()}
diff --git a/screens/NewStackScreen.js b/screens/NewStackScreen.js
index 6eead11..765a7ea 100644
--- a/screens/NewStackScreen.js
+++ b/screens/NewStackScreen.js
@@ -1,147 +1,86 @@
-import React, { useState } from "react";
+import React, { useState, useLayoutEffect } from "react";
+import { useNavigation, useRoute } from "@react-navigation/native";
+
import {
StyleSheet,
Dimensions,
ScrollView,
Text,
Button,
- Modal,
- TextInput,
View,
- TouchableOpacity,
} from "react-native";
import { Block, theme } from "galio-framework";
-import { Card } from "../components";
-import DateTimePicker from "@react-native-community/datetimepicker";
-import RadioButton from "react-native-radio-button";
-import { Picker } from "@react-native-picker/picker";
+import { Card } from "../components/Card";
+import ModalComponent from "../components/ModalComponent";
+import DrugCard from "../components/DrugCard"; // DrugCard import 추가
const { width } = Dimensions.get("screen");
-class NewStackScreen extends React.Component {
- state = {
- modalVisible: false,
- drugName: "약물 이름",
- startDate: new Date(),
- endDate: new Date(),
- isTaking: true,
- timesPerDay: 1,
- };
+const NewStackScreen = () => {
+ 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: () => (
-