Feat/ap iconnecting #1

app.json

@@ -3,10 +3,7 @@
     "name": "Argon FREE React Native",
     "slug": "argon-free-react-native",
     "privacy": "public",
-    "platforms": [
-      "ios",
-      "android"
-    ],
+    "platforms": ["ios", "android", "web"],
     "version": "1.7.1",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -18,9 +15,7 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },

components/Header.js

@@ -3,6 +3,10 @@ import { withNavigation } from '@react-navigation/compat';
 import { TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native';
 import { Button, Block, NavBar, Text, theme } from 'galio-framework';
 
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+
+const Tab = createBottomTabNavigator();
+
 import Icon from './Icon';
 import Input from './Input';
 import Tabs from './Tabs';

components/ImagePickerComponent.js

@@ -6,7 +6,6 @@ import axios from "axios";
 
 const ImagePickerComponent = () => {
   const [selectedImage, setSelectedImage] = useState(null);
-  const [ocrResult, setOcrResult] = useState(null);
 
   useEffect(() => {
     (async () => {
@@ -40,13 +39,13 @@ const ImagePickerComponent = () => {
     const formData = new FormData();
     formData.append("imageFile", {
       uri: imageUri,
-      type: "image/jpeg", // 이미지 타입이 다르면 변경하세요.
-      name: "photo.jpg", // 파일 이름을 원하는 대로 변경하세요.
+      type: "image/jpeg",
+      name: "photo.jpg",
     });
 
     try {
       const response = await axios.post(
-        "https://your-backend-url.com/image",
+        "http://34.64.158.243:8080/medicine",
         formData,
         {
           headers: {
@@ -70,93 +69,15 @@ const ImagePickerComponent = () => {
         justifyContent: "center",
       }}
     >
-      <Button title="카메라 롤에서 이미지 선택" onPress={pickImageAndSend} />
+      <Button title="이미지 선택해서 보내기" onPress={pickImageAndSend} />
       {selectedImage && (
         <Image
           source={{ uri: selectedImage.uri }}
           style={{ width: 200, height: 200 }}
         />
       )}
-      {ocrResult && <Text>{ocrResult}</Text>}
     </View>
   );
 };
 
 export default ImagePickerComponent;
-
-// import React, { useState, useEffect } from "react";
-// import { Button, Image, View, Text } from "react-native";
-// import * as ImagePicker from "expo-image-picker";
-// import Constants from "expo-constants";
-// import axios from "axios";
-
-// const ImagePickerComponent = () => {
-//   const [selectedImage, setSelectedImage] = useState(null);
-//   const [ocrResult, setOcrResult] = useState(null);
-
-//   useEffect(() => {
-//     (async () => {
-//       if (Constants.platform.ios) {
-//         const { status } =
-//           await ImagePicker.requestMediaLibraryPermissionsAsync();
-//         if (status !== "granted") {
-//           alert(
-//             "죄송합니다. 이 기능을 사용하려면 카메라 롤 권한이 필요합니다!"
-//           );
-//         }
-//       }
-//     })();
-//   }, []);
-
-//   const pickImage = async () => {
-//     let result = await ImagePicker.launchImageLibraryAsync({
-//       mediaTypes: ImagePicker.MediaTypeOptions.All,
-//       allowsEditing: true,
-//       aspect: [4, 3],
-//       quality: 1,
-//       base64: true,
-//     });
-
-//     if (!result.cancelled) {
-//       setSelectedImage({ uri: result.uri });
-//       callGoogleVisionAsync(result.base64);
-//     }
-//   };
-
-//   const callGoogleVisionAsync = async (base64) => {
-//     try {
-//       const response = await axios.post(
-//         "https://vision.googleapis.com/v1/images:annotate?key=YOUR_GOOGLE_CLOUD_VISION_API_KEY",
-//         {
-//           requests: [
-//             {
-//               image: {
-//                 content: base64,
-//               },
-//               features: [{ type: "TEXT_DETECTION", maxResults: 1 }],
-//             },
-//           ],
-//         }
-//       );
-
-//       setOcrResult(response.data.responses[0].fullTextAnnotation.text);
-//     } catch (error) {
-//       console.log(error);
-//     }
-//   };
-
-//   return (
-//     <View style={{ backgroundColor: 'white',flex: 1, alignItems: "center", justifyContent: "center" }}>
-//       <Button title="카메라 롤에서 이미지 선택" onPress={pickImage} />
-//       {selectedImage && (
-//         <Image
-//           source={{ uri: selectedImage.uri }}
-//           style={{ width: 200, height: 200 }}
-//         />
-//       )}
-//       {ocrResult && <Text>{ocrResult}</Text>}
-//     </View>
-//   );
-// };
-
-// export default ImagePickerComponent;

components/KakaoLogin.js

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { View, Button, 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 [modalVisible, setModalVisible] = useState(false);
+
+  const handleLoginButton = () => {
+    setModalVisible(true);
+  };
+
+  function LogInProgress(data) {
+    const exp = "code=";
+    var condition = data.indexOf(exp);
+
+    if (condition !== -1) {
+      var request_code = data.substring(condition + exp.length);
+      console.log("Authorization Code:", request_code);
+      sendAuthCodeToBackend(request_code);
+    }
+  }
+
+  const sendAuthCodeToBackend = async (authorizationCode) => {
+    var backend_url = "http://34.64.158.243:8080/login/kakao";
+
+    axios({
+      method: "post",
+      url: backend_url,
+      data: {
+        authorizationCode: authorizationCode,
+      },
+    })
+      .then(function (response) {
+        console.log("Backend Response:", response);
+        navigation.navigate("Home");
+      })
+      .catch(function (error) {
+        console.log("Backend Error:", error);
+      });
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Button title="로그인" onPress={handleLoginButton} />
+      <Modal
+        animationType="slide"
+        transparent={false}
+        visible={modalVisible}
+        onRequestClose={() => {
+          setModalVisible(false);
+        }}
+      >
+        <WebView
+          originWhitelist={["*"]}
+          scalesPageToFit={false}
+          style={{ flex: 1 }}
+          source={{
+            uri: "https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=9e576a8bbded1fa2161d00ee304cfc6a&redirect_uri=http://34.64.158.243:8080/login/kakao",
+          }}
+          injectedJavaScript={runFirst}
+          javaScriptEnabled={true}
+          thirdPartyCookiesEnabled={true}
+          pointerEvents={modalVisible ? "auto" : "none"}
+          onMessage={(event) => {
+            if (
+              event.nativeEvent["url"].startsWith(
+                "http://34.64.158.243:8080/login/kakao"
+              )
+            ) {
+              LogInProgress(event.nativeEvent["url"]);
+              setModalVisible(false);
+            }
+          }}
+        />
+      </Modal>
+    </View>
+  );
+};
+
+export default KakaoLogin;

navigation/Menu.js

@@ -13,7 +13,7 @@ function CustomDrawerContent({
   state,
   ...rest
 }) {
-  const screens = ["Home", "Profile", "Account", "Elements", "Articles"];
+  const screens = ["홈", "복용기록확인", "복용알람", "중독위험도", "프로필"];
   return (
     <Block
       style={styles.container}

package.json

@@ -14,17 +14,20 @@
     "url": "git+https://github.com/creativetimofficial/argon-react-native.git"
   },
   "dependencies": {
+    "@expo/webpack-config": "^18.1.4",
     "@react-native-masked-view/masked-view": "0.2.8",
-    "@react-navigation/bottom-tabs": "^6.3.1",
+    "@react-native-seoul/kakao-login": "^5.3.1",
+    "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/compat": "^5.1.25",
     "@react-navigation/drawer": "^6.6.6",
     "@react-navigation/native": "^6.1.9",
-    "@react-navigation/stack": "^6.2.1",
+    "@react-navigation/stack": "^6.3.20",
     "@use-expo/font": "^2.0.0",
     "axios": "^1.6.3",
     "expo": "^48.0.16",
     "expo-app-loading": "~2.0.0",
     "expo-asset": "~8.9.1",
+    "expo-auth-session": "~4.0.3",
     "expo-camera": "~13.2.1",
     "expo-font": "~11.1.1",
     "expo-image-picker": "^14.5.0",
@@ -34,14 +37,18 @@
     "galio-framework": "^0.8.0",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-native": "0.71.8",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-image-crop-picker": "^0.40.2",
+    "react-native-modal": "^13.0.1",
     "react-native-modal-dropdown": "1.0.2",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
-    "react-native-tesseract-ocr": "^2.0.3"
+    "react-native-tesseract-ocr": "^2.0.3",
+    "react-native-web": "^0.18.12",
+    "react-native-webview": "^11.26.1"
   },
   "devDependencies": {
     "babel-preset-expo": "^9.3.0"