From d9cc82687e1cbfe4a593719c7ef6b80ce719fc02 Mon Sep 17 00:00:00 2001
From: zeeun <98653814+zeeun@users.noreply.github.com>
Date: Thu, 15 Feb 2024 22:43:29 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=EC=95=BD=EB=AC=BC=EB=B6=84=EC=84=9D?=
 =?UTF-8?q?=EA=B8=B0=EB=A1=9D=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json              |   3 +
 screens/Home.js           |  53 ++++----
 screens/NewStackScreen.js | 253 +++++++++++++++++++++++++++-----------
 3 files changed, 206 insertions(+), 103 deletions(-)

diff --git a/package.json b/package.json
index bc4828a..803bf73 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,9 @@
   },
   "dependencies": {
     "@expo/webpack-config": "^19.0.0",
+    "@react-native-community/datetimepicker": "^7.6.2",
     "@react-native-masked-view/masked-view": "0.2.9",
+    "@react-native-picker/picker": "^2.6.1",
     "@react-native-seoul/kakao-login": "^5.3.1",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/compat": "^5.1.25",
@@ -43,6 +45,7 @@
     "react-native-image-crop-picker": "^0.40.2",
     "react-native-modal": "^13.0.1",
     "react-native-modal-dropdown": "1.0.2",
+    "react-native-radio-button": "^2.0.1",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
diff --git a/screens/Home.js b/screens/Home.js
index c747e68..fee5b55 100644
--- a/screens/Home.js
+++ b/screens/Home.js
@@ -10,15 +10,12 @@ import {
   Image,
 } from "react-native";
 import { Block, theme } from "galio-framework";
-import ImagePicker from "../components/ImagePickerComponent";
-import { Camera } from "expo-camera";
 import { createStackNavigator } from "@react-navigation/stack";
-import NewStackScreen from "./NewStackScreen"; // 경로를 실제 파일 경로로 변경하세요.
-import ImagePickerComponent from "../components/ImagePickerComponent";
-import Header from "../components/Header"; // Import the Header component
-
+import NewStackScreen from "./NewStackScreen";
 import { Card } from "../components";
 import articles from "../constants/articles";
+import { Camera } from "expo-camera";
+import ImagePickerComponent from "../components/ImagePickerComponent";
 
 const Stack = createStackNavigator();
 
@@ -30,6 +27,7 @@ class Home extends React.Component {
     type: Camera.Constants.Type.back,
     photo: null,
     isCameraVisible: false,
+    selectedImage: null,
   };
 
   componentDidMount() {
@@ -68,11 +66,11 @@ class Home extends React.Component {
 
   savePhoto = async () => {
     if (!this.state.photo) {
-      console.error("저장할 사진이 없습니다.");
+      console.error("No photo to save.");
       return;
     }
 
-    console.log("사진 저장됨:", this.state.photo.base64);
+    console.log("Photo saved:", this.state.photo.base64);
 
     const formData = new FormData();
     formData.append("imageFile", {
@@ -91,19 +89,19 @@ class Home extends React.Component {
       });
 
       if (response.ok) {
-        console.log("사진을 성공적으로 백엔드로 전송했습니다!", response);
+        console.log("Photo successfully sent to backend!", response);
+        const data = await response.json();
+        this.props.navigation.push("NewStackScreen", { data });
       } else {
-        console.error("사진을 백엔드로 전송하는 데 실패했습니다.", response);
+        console.error("Failed to send photo to backend.", response);
+        throw new Error("No response received from the backend.");
       }
-
-      const data = await response.json();
-      this.props.navigation.push("NewStackScreen", { data: data });
     } catch (error) {
-      console.error("사진을 백엔드로 전송 중 오류 발생:", error);
+      console.error("Error while sending photo to backend:", error);
 
-      // 백엔드 제출이 실패하더라도 에러 메시지를 포함하여 NewStackScreen으로 이동합니다.
+      // Even if backend submission fails, move to NewStackScreen with error message.
       this.props.navigation.push("NewStackScreen", {
-        error: "백엔드 제출 실패",
+        error: "Backend submission failed",
       });
     }
 
@@ -114,6 +112,11 @@ class Home extends React.Component {
     this.setState({ photo: null });
   };
 
+  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
+  };
+
   renderCameraModal = () => {
     return (
       <Modal
@@ -126,10 +129,10 @@ class Home extends React.Component {
             <Image source={{ uri: this.state.photo.uri }} style={{ flex: 1 }} />
             <View style={styles.bottomButtonsContainer}>
               <TouchableOpacity onPress={this.retakePicture}>
-                <Text style={{ fontSize: 18, color: "black" }}>다시 찍기</Text>
+                <Text style={{ fontSize: 18, color: "black" }}>Retake</Text>
               </TouchableOpacity>
               <TouchableOpacity onPress={this.savePhoto}>
-                <Text style={{ fontSize: 18, color: "black" }}>저장</Text>
+                <Text style={{ fontSize: 18, color: "black" }}>Save</Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -183,6 +186,7 @@ class Home extends React.Component {
       </Modal>
     );
   };
+
   renderArticles = () => {
     return (
       <ScrollView
@@ -197,8 +201,7 @@ class Home extends React.Component {
                   style={[styles.cameraButton, styles.greenButton]}
                   onPress={this.openCamera}
                 >
-                  <Text style={styles.buttonText}>카메라로</Text>
-                  <Text style={styles.buttonText}>분석하기</Text>
+                  <Text style={styles.buttonText}>Take Picture</Text>
                 </TouchableOpacity>
               </Block>
               <Block style={styles.buttonContainer}>
@@ -236,7 +239,7 @@ class Home extends React.Component {
             ]}
             onPress={this.openCamera}
           >
-            <Text style={[styles.buttonText]}>이약먹어도될까?</Text>
+            <Text style={[styles.buttonText]}>Take Picture</Text>
           </TouchableOpacity>
         </Block>
       </ScrollView>
@@ -257,7 +260,7 @@ class Home extends React.Component {
           name="NewStackScreen"
           component={NewStackScreen}
           options={{
-            title: "약물분석결과",
+            title: "약물 분석 결과",
           }}
         />
       </Stack.Navigator>
@@ -273,12 +276,6 @@ const styles = StyleSheet.create({
     width: width - theme.SIZES.BASE * 2,
     paddingVertical: theme.SIZES.BASE,
   },
-  cameraButton: {
-    backgroundColor: "purple",
-    padding: 20,
-    alignItems: "center",
-    marginVertical: 20,
-  },
   bottomButtonsContainer: {
     flexDirection: "row",
     justifyContent: "space-around",
diff --git a/screens/NewStackScreen.js b/screens/NewStackScreen.js
index 91281cf..57ba466 100644
--- a/screens/NewStackScreen.js
+++ b/screens/NewStackScreen.js
@@ -1,63 +1,4 @@
 
-import React from 'react';
-import { StyleSheet, Dimensions, ScrollView } from 'react-native';
-import { Block, theme } from 'galio-framework';
-
-import { Card } from '../components';
-import articles from '../constants/articles';
-const { width } = Dimensions.get('screen');
-
-class NewStackScreen extends React.Component {
-  renderArticles = () => {
-    return (
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={styles.articles}>
-        <Block flex>
-          <Card item={articles[0]} horizontal  />
-          <Card item={articles[3]} horizontal />
-  
-        </Block>
-      </ScrollView>
-    )
-  }
-
-  render() {
-    return (
-      <Block flex center style={styles.home}>
-        {this.renderArticles()}
-      </Block>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  home: {
-    width: width,    
-  },
-  articles: {
-    width: width - theme.SIZES.BASE * 2,
-    paddingVertical: theme.SIZES.BASE,
-  },
-});
-
-export default NewStackScreen;
-
-
-// const NewStackScreen = ({ route }) => {
-//   const { data } = route.params || {}; // 안전하게 접근
-
-//   return (
-//     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
-//       <Text>약물분석</Text>
-//       <Card></Card>
-//       {/* 여기서 data를 사용하거나 출력할 수 있음 */}
-//     </View>
-//   );
-// };
-
-
-
 // import React from 'react';
 // import { StyleSheet, Dimensions, ScrollView } from 'react-native';
 // import { Block, theme } from 'galio-framework';
@@ -74,12 +15,6 @@ export default NewStackScreen;
 //         contentContainerStyle={styles.articles}>
 //         <Block flex>
 //           <Card item={articles[0]} horizontal  />
-//           <Block flex row>
-//             <Card item={articles[1]} style={{ marginRight: theme.SIZES.BASE }} />
-//             <Card item={articles[2]} />
-//           </Block>
-//           <Card item={articles[3]} horizontal />
-//           <Card item={articles[4]} full />
 //         </Block>
 //       </ScrollView>
 //     )
@@ -106,17 +41,185 @@ export default NewStackScreen;
 
 // export default NewStackScreen;
 
+import React, { useState } from "react";
+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";
+
+const { width } = Dimensions.get("screen");
 
-// const NewStackScreen = ({ route }) => {
-//   const { data } = route.params || {}; // 안전하게 접근
+class NewStackScreen extends React.Component {
+  state = {
+    modalVisible: false,
+    drugName: "약물 이름",
+    startDate: new Date(),
+    endDate: new Date(),
+    isTaking: true,
+    timesPerDay: 1,
+  };
+
+  setModalVisible = (visible) => {
+    this.setState({ modalVisible: visible });
+  };
+
+  componentDidMount() {
+    this.props.navigation.setOptions({
+      headerRight: () => (
+        <Button onPress={() => this.setModalVisible(true)} title="추가" />
+      ),
+    });
+  }
 
-//   return (
-//     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
-//       <Text>약물분석</Text>
-//       <Card></Card>
-//       {/* 여기서 data를 사용하거나 출력할 수 있음 */}
-//     </View>
-//   );
-// };
+  renderCards() {
+    const { route } = this.props;
+    const { data, error } = route.params || {};
+
+    if (error) {
+      return <Text>{error}</Text>;
+    }
+
+    return data.map((item, index) => (
+      <Card key={index} item={item} horizontal />
+    ));
+  }
 
+  render() {
+    return (
+      <Block flex center style={styles.home}>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={this.state.modalVisible}
+          onRequestClose={() => {
+            this.setModalVisible(!this.state.modalVisible);
+          }}
+        >
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>복용 정보 입력</Text>
+              <Text>{this.state.drugName}</Text>
+              <Text>복용시작일</Text>
+              <DateTimePicker
+                value={this.state.startDate}
+                onChange={(event, date) => this.setState({ startDate: date })}
+              />
+              <Text>복용마감일</Text>
+              <DateTimePicker
+                value={this.state.endDate}
+                onChange={(event, date) => this.setState({ endDate: date })}
+              />
+
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+              >
+                <View style={{ flexDirection: "row", alignItems: "center" }}>
+
+                    <Text>현재 복용중 여부   </Text>
+        
+                </View>
+                <View style={{ flexDirection: "row", alignItems: "center" }}>
+                  <RadioButton
+                    animation={"bounceIn"}
+                    isSelected={this.state.isTaking}
+                    onPress={() => this.setState({ isTaking: true })}
+                  />
+                  <Text>Yes   </Text>
+                </View>
+                <View style={{ flexDirection: "row", alignItems: "center" }}>
+                  <RadioButton
+                    animation={"bounceIn"}
+                    isSelected={!this.state.isTaking}
+                    onPress={() => this.setState({ isTaking: false })}
+                  />
+                  <Text>No</Text>
+                </View>
+              </View>
+
+              <Picker
+                selectedValue={this.state.timesPerDay}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ timesPerDay: itemValue })
+                }
+                style={{ height: 50, width: 100 }} // 이 부분을 추가해주세요.
+              >
+                <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>
+              <Button
+                title="제출"
+                onPress={() => {
+                  this.setModalVisible(false);
+                  console.log(this.state);
+                }}
+              />
+            </View>
+          </View>
+        </Modal>
+
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.articles}
+        >
+          <Block flex>{this.renderCards()}</Block>
+        </ScrollView>
+      </Block>
+    );
+  }
+}
 
+const styles = StyleSheet.create({
+  home: {
+    width: width,
+  },
+  articles: {
+    width: width - theme.SIZES.BASE * 2,
+    paddingVertical: theme.SIZES.BASE,
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22,
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: "center",
+  },
+});
+
+export default NewStackScreen;