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

Feat/analyzing screen #2
Regular-Pharmasist · Feb 12, 2024 · 56dccef · 56dccef
2 parents c9bc211 + a92e0d3
commit 56dccef
Show file tree

Hide file tree

Showing 5 changed files with 237 additions and 48 deletions.
diff --git a/components/ImagePickerComponent.js b/components/ImagePickerComponent.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Button, View } from "react-native";
+import { TouchableOpacity, Text, View } from "react-native";
 import * as ImagePicker from "expo-image-picker";
 import Constants from "expo-constants";
 import axios from "axios";
@@ -54,25 +54,51 @@ const ImagePickerComponent = ({ navigation }) => {
           },
         }
       );
-      // 백엔드로부터의 응답을 처리하세요.
+      // Handle response from backend
       console.log(response.data);
 
-      // 이미지 선택 후에 새로운 스택창을 띄웁니다.
+      // Open a new stack screen after image selection
       navigation.push("NewStackScreen", { selectedImage });
     } catch (error) {
       console.error(error);
     }
   };
 
   return (
-    <View>
-      <Button
-        title="이미지 선택"
-        style={{ fontSize: 18, color: "white" }}
-        onPress={pickImageAndSend}
-      />
-    </View>
+    <TouchableOpacity
+      style={[styles.cameraButton, styles.greenButton]}
+      onPress={pickImageAndSend}
+    >
+      <Text style={styles.buttonText}>이미지로</Text>
+      <Text style={styles.buttonText}>분석하기</Text>
+    </TouchableOpacity>
   );
 };
 
+const styles = {
+  buttonContainer: {
+    flex: 1,
+    marginHorizontal: 5, // Adjust margin as needed
+    borderRadius: 15, // Add border radius for rounded corners
+    overflow: "hidden", // Ensure content stays within rounded borders
+    elevation: 5, // Add shadow elevation
+  },
+  cameraButton: {
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 15, // Adjust this value as needed to control the button height
+    borderRadius: 15, // Make it round
+    backgroundColor: "purple",
+    marginVertical: 20,
+    height: 100, // Fixed height for the button
+  },
+  greenButton: {
+    backgroundColor: "green", // Change color to green
+  },
+  buttonText: {
+    fontSize: 25,
+    color: "white",
+  },
+};
+
 export default withNavigation(ImagePickerComponent);
diff --git a/components/KakaoLogin.js b/components/KakaoLogin.js
@@ -35,7 +35,7 @@ const KakaoLogin = ({ navigation }) => {
     })
       .then(function (response) {
         console.log("Backend Response:", response);
-        navigation.navigate("App");
+        navigation.navigate("Home");
       })
       .catch(function (error) {
         console.log("Backend Error:", error);

diff --git a/screens/Home.js b/screens/Home.js
@@ -17,6 +17,9 @@ import NewStackScreen from "./NewStackScreen"; // 경로를 실제 파일 경로
 import ImagePickerComponent from "../components/ImagePickerComponent";
 import Header from "../components/Header"; // Import the Header component
 
+import { Card } from "../components";
+import articles from "../constants/articles";
+
 const Stack = createStackNavigator();
 
 const { width, height } = Dimensions.get("screen");
@@ -186,30 +189,33 @@ class Home extends React.Component {
         showsVerticalScrollIndicator={false}
         contentContainerStyle={styles.articles}
       >
-        <Block>
+        <Block flex row style={{ marginVertical: 50 }}>
           {this.state.hasPermission && (
-            <View>
-              <TouchableOpacity
-                style={styles.cameraButton}
-                onPress={this.openCamera}
-              >
-                <Text style={{ fontSize: 18, color: "white" }}>
-                  Open Camera
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={styles.cameraButton}
-                onPress={this.pickImageAndSend}
-              >
-                <ImagePickerComponent
-                  onImageSelected={(selectedImage) => {
-                    this.setState({ selectedImage });
-                    this.props.navigation.push("NewStackScreen", {
-                      selectedImage,
-                    });
-                  }}
-                />
-              </TouchableOpacity>
+            <View style={{ flexDirection: "row", flex: 1 }}>
+              <Block style={styles.buttonContainer}>
+                <TouchableOpacity
+                  style={[styles.cameraButton, styles.greenButton]}
+                  onPress={this.openCamera}
+                >
+                  <Text style={styles.buttonText}>카메라로</Text>
+                  <Text style={styles.buttonText}>분석하기</Text>
+                </TouchableOpacity>
+              </Block>
+              <Block style={styles.buttonContainer}>
+                <TouchableOpacity
+                  style={[styles.cameraButton, styles.greenButton]}
+                  onPress={this.pickImageAndSend}
+                >
+                  <ImagePickerComponent
+                    onImageSelected={(selectedImage) => {
+                      this.setState({ selectedImage });
+                      this.props.navigation.push("NewStackScreen", {
+                        selectedImage,
+                      });
+                    }}
+                  />
+                </TouchableOpacity>
+              </Block>
               {this.state.selectedImage && (
                 <Image
                   source={{ uri: this.state.selectedImage.uri }}
@@ -220,21 +226,40 @@ class Home extends React.Component {
             </View>
           )}
         </Block>
+        <Block flex>
+          <TouchableOpacity
+            style={[
+              styles.cameraButton,
+              styles.greenButton,
+              styles.buttonContainer,
+              { marginVertical: -56, marginHorizontal: 5 },
+            ]}
+            onPress={this.openCamera}
+          >
+            <Text style={[styles.buttonText]}>이약먹어도될까?</Text>
+          </TouchableOpacity>
+        </Block>
       </ScrollView>
     );
   };
 
   render() {
     return (
       <Stack.Navigator initialRouteName="Home">
-        <Stack.Screen name="Home" >
+        <Stack.Screen name="Home">
           {() => (
             <Block flex center style={styles.home}>
               {this.renderArticles()}
             </Block>
           )}
         </Stack.Screen>
-        <Stack.Screen name="NewStackScreen" component={NewStackScreen} />
+        <Stack.Screen
+          name="NewStackScreen"
+          component={NewStackScreen}
+          options={{
+            title: "약물분석결과",
+          }}
+        />
       </Stack.Navigator>
     );
   }
@@ -260,6 +285,36 @@ const styles = StyleSheet.create({
     alignItems: "center",
     marginVertical: 20,
   },
+  buttonContainer: {
+    flex: 1,
+    marginHorizontal: 5, // Adjust margin as needed
+    borderRadius: 15, // Add border radius for rounded corners
+    overflow: "hidden", // Ensure content stays within rounded borders
+    shadowColor: "#000", // Shadow color
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25, // Shadow opacity
+    shadowRadius: 3.84, // Shadow radius
+    elevation: 5, // Add shadow elevation for Android
+  },
+  cameraButton: {
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 15, // Adjust this value as needed to control the button height
+    borderRadius: 10, // Make it round
+    backgroundColor: "purple",
+    marginVertical: 20,
+    height: 150, // Fixed height for the button
+  },
+  greenButton: {
+    backgroundColor: "green", // Change color to green
+  },
+  buttonText: {
+    fontSize: 25,
+    color: "white",
+  },
 });
 
 export default Home;
diff --git a/screens/NewStackScreen.js b/screens/NewStackScreen.js
@@ -1,15 +1,122 @@
-import React from "react";
-import { View, Text } from "react-native";
 
-const NewStackScreen = ({ route }) => {
-  const { data } = route.params || {}; // 안전하게 접근
+import React from 'react';
+import { StyleSheet, Dimensions, ScrollView } from 'react-native';
+import { Block, theme } from 'galio-framework';
 
-  return (
-    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
-      <Text>약물분석로그</Text>
-      {/* 여기서 data를 사용하거나 출력할 수 있음 */}
-    </View>
-  );
-};
+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';
+
+// 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  />
+//           <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>
+//     )
+//   }
+
+//   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>
+//   );
+// };
+
+
diff --git a/screens/Onboarding.js b/screens/Onboarding.js
@@ -7,7 +7,8 @@ import {
   Dimensions
 } from "react-native";
 import { Block, Button, Text, theme } from "galio-framework";
-
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
 import KakaoLogin from "../components/KakaoLogin";
 
 const { height, width } = Dimensions.get("screen");