From e852bf7142d383e658d11c1e55c4b85a7c492aa0 Mon Sep 17 00:00:00 2001
From: zeeun <98653814+zeeun@users.noreply.github.com>
Date: Tue, 16 Jan 2024 14:59:30 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[feat]=EC=B9=B4=EB=A9=94=EB=9D=BC=EA=B8=B0?=
=?UTF-8?q?=EB=8A=A5=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
수정필요
---
components/ImagePickerComponent.js | 2 +-
screens/Home.js | 252 ++++++++++++++++++++++++++---
2 files changed, 231 insertions(+), 23 deletions(-)
diff --git a/components/ImagePickerComponent.js b/components/ImagePickerComponent.js
index fcf1c1e..f50e13e 100644
--- a/components/ImagePickerComponent.js
+++ b/components/ImagePickerComponent.js
@@ -70,7 +70,7 @@ const ImagePickerComponent = () => {
justifyContent: "center",
}}
>
-
+
{selectedImage && (
{
+ const { status } = await Camera.requestPermissionsAsync();
+ this.setState({ hasPermission: status === "granted" });
+ };
+
+ openCamera = () => {
+ this.setState({ isCameraVisible: true });
+ };
+
+ closeCamera = () => {
+ this.setState({ isCameraVisible: false });
+ };
+
+ setType = () => {
+ this.setState((prevState) => ({
+ type:
+ prevState.type === Camera.Constants.Type.back
+ ? Camera.Constants.Type.front
+ : Camera.Constants.Type.back,
+ }));
+ };
+
+ takePicture = async () => {
+ if (this.camera) {
+ const options = { quality: 0.5, base64: true };
+ const photo = await this.camera.takePictureAsync(options);
+ this.setState({ photo, isCameraVisible: false });
+ }
+ };
+
+ savePhoto = async () => {
+ console.log("Saved Photo:", this.state.photo.base64);
+
+ const formData = new FormData();
+ formData.append("photo", {
+ uri: this.state.photo.uri,
+ type: "image/jpeg",
+ name: "photo.jpg",
+ });
+
+ try {
+ const response = await fetch("YOUR_BACKEND_API_URL", {
+ method: "POST",
+ body: formData,
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ });
+
+ if (response.ok) {
+ console.log("사진을 성공적으로 백엔드로 전송했습니다!");
+ } else {
+ console.error("사진을 백엔드로 전송하는 데 실패했습니다.");
+ }
+ } catch (error) {
+ console.error("사진을 백엔드로 전송 중 오류 발생:", error);
+ }
+
+ this.setState({ photo: null, isCameraVisible: false });
+ };
+
+ retakePicture = () => {
+ this.setState({ photo: null });
+ };
+
+ renderCameraModal = () => {
+ return (
+
+ {
+ this.camera = ref;
+ }}
+ >
+
+
+
+ Flip
+
+
+
+
+
+ SNAP
+
+
+
+
+ {this.state.photo && (
+
+
+ 다시 찍기
+
+
+ 저장
+
+
+ )}
+
+ );
+ };
+
renderArticles = () => {
return (
-
-
-
-
-
-
-
-
-
-
-
+ contentContainerStyle={styles.articles}
+ >
+
+
+ {this.state.hasPermission && (
+
+
+
+ 카메라 열기
+
+
+ {this.renderCameraModal()}
+
+ )}
- )
- }
+ );
+ };
render() {
return (
@@ -39,12 +190,69 @@ class Home extends React.Component {
const styles = StyleSheet.create({
home: {
- width: width,
+ width,
},
articles: {
width: width - theme.SIZES.BASE * 2,
paddingVertical: theme.SIZES.BASE,
},
+ cameraButton: {
+ backgroundColor: "purple",
+ padding: 20,
+ alignItems: "center",
+ marginVertical: 20,
+ },
});
export default Home;
+
+// import React from 'react';
+// import { StyleSheet, Dimensions, ScrollView } from 'react-native';
+// import { Block, theme } from 'galio-framework';
+// import ImagePicker from '../components/ImagePickerComponent'
+// import { Card } from '../components';
+// import articles from '../constants/articles';
+// const { width } = Dimensions.get('screen');
+
+// class Home extends React.Component {
+// renderArticles = () => {
+// return (
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// )
+// }
+
+// render() {
+// return (
+//
+// {this.renderArticles()}
+//
+// );
+// }
+// }
+
+// const styles = StyleSheet.create({
+// home: {
+// width: width,
+// },
+// articles: {
+// width: width - theme.SIZES.BASE * 2,
+// paddingVertical: theme.SIZES.BASE,
+// },
+// });
+
+// export default Home;
From 91b7bfecd7fadbc02c4788595b9d93cd1f193be4 Mon Sep 17 00:00:00 2001
From: zeeun <98653814+zeeun@users.noreply.github.com>
Date: Wed, 17 Jan 2024 10:45:27 +0900
Subject: [PATCH 2/3] =?UTF-8?q?[feat]=EB=A9=94=EB=89=B4,=EC=B9=B4=EC=B9=B4?=
=?UTF-8?q?=EC=98=A4=EC=97=B0=EA=B2=B0(=EC=88=98=EC=A0=95=ED=95=84?=
=?UTF-8?q?=EC=9A=94),=20=ED=99=88=ED=99=94=EB=A9=B4=20=EB=B2=84=ED=8A=BC?=
=?UTF-8?q?=20=EB=B0=8F=20=EC=B9=B4=EB=A9=94=EB=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/{splash.jpg => splash.png} | Bin
components/Header.js | 4 ++
components/KakaoLogin.js | 39 +++++++++++++
navigation/Menu.js | 2 +-
package.json | 8 ++-
screens/Onboarding.js | 88 +++++++++++++-----------------
6 files changed, 89 insertions(+), 52 deletions(-)
rename assets/{splash.jpg => splash.png} (100%)
create mode 100644 components/KakaoLogin.js
diff --git a/assets/splash.jpg b/assets/splash.png
similarity index 100%
rename from assets/splash.jpg
rename to assets/splash.png
diff --git a/components/Header.js b/components/Header.js
index 207c7e8..23c63c8 100644
--- a/components/Header.js
+++ b/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';
diff --git a/components/KakaoLogin.js b/components/KakaoLogin.js
new file mode 100644
index 0000000..974cd39
--- /dev/null
+++ b/components/KakaoLogin.js
@@ -0,0 +1,39 @@
+import * as AuthSession from "expo-auth-session";
+import { useState, useEffect } from "react";
+import { Button } from "galio-framework";
+import axios from "axios";
+
+const KakaoLogin= () => {
+ const [request, response, promptAsync] = AuthSession.useAuthRequest(
+ {
+ clientId: "9e576a8bbded1fa2161d00ee304cfc6a",
+ redirectUri: "exp://172.30.1.13:19000",
+ },
+ { authorizationEndpoint: "https://kauth.kakao.com/oauth/authorize" }
+ );
+
+useEffect(() => {
+ if (response?.type === "success") {
+ const { code } = response.params;
+
+ // 인가 코드를 백엔드로 전송하는 POST 요청 보내기
+ axios
+ .post("http://34.64.158.243:8080/login/kakao", {
+ code: code,
+ })
+ .then((response) => {
+ // 요청이 성공적으로 처리되었을 때의 동작
+ console.log(response.data);
+ // 토큰 발급 등의 작업 수행
+ })
+ .catch((error) => {
+ // 요청이 실패했을 때의 동작
+ console.error(error);
+ });
+ }
+}, [response]);
+
+ return