From 5bca469ed8853c201e2692dc0ec4ca6d0ccb030c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=8F=99=ED=98=84=20=EA=B9=80?= <akainoo@naver.com>
Date: Mon, 14 Dec 2020 14:50:55 +0900
Subject: [PATCH] feat : modify the Navigation Structure
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 갤러리 or 직접 찍는 Screen 과 실제 필터를 적용하는 화면을 분리
- Nested Navigatior 적용
---
 __tests__/App-test.js                         |  2 +-
 app/App.tsx                                   |  1 -
 app/screens/FilterCamera/FilterCamerBtn.tsx   | 16 ++--
 app/screens/FilterCamera/FilterCamera.tsx     | 96 ++++---------------
 .../FilterCamera/FilterCameraResultScreen.tsx | 12 +++
 .../FilterCameraSelectionScreen.tsx           | 88 +++++++++++++++++
 app/screens/Home/Home.tsx                     |  2 +-
 7 files changed, 128 insertions(+), 89 deletions(-)
 create mode 100644 app/screens/FilterCamera/FilterCameraResultScreen.tsx
 create mode 100644 app/screens/FilterCamera/FilterCameraSelectionScreen.tsx

diff --git a/__tests__/App-test.js b/__tests__/App-test.js
index f2b851f..8194994 100644
--- a/__tests__/App-test.js
+++ b/__tests__/App-test.js
@@ -10,5 +10,5 @@ import App from '../App';
 // Note: test renderer must be required after react-native.
 
 it('renders correctly', () => {
-  renderer.create(<App />);
+	renderer.create(<App />);
 });
diff --git a/app/App.tsx b/app/App.tsx
index 4d7c836..9451ec3 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -19,7 +19,6 @@ const App = () => {
 				<Stack.Screen
 					name="FilterCamera"
 					component={FilterCamera}
-					options={{title: 'Filter Camera'}}
 				/>
 				<Stack.Screen
 					name="StickerCamera"
diff --git a/app/screens/FilterCamera/FilterCamerBtn.tsx b/app/screens/FilterCamera/FilterCamerBtn.tsx
index 0934183..74fa688 100644
--- a/app/screens/FilterCamera/FilterCamerBtn.tsx
+++ b/app/screens/FilterCamera/FilterCamerBtn.tsx
@@ -8,13 +8,13 @@ interface ButtonProps {
 }
 
 function FilterCamerBtn({title, style, onPressFunc}: ButtonProps) {
-    return (
-        <Button
-            title={title}
-            style={style}
-            onPress={() => onPressFunc()}
-        />
-    );
+	return (
+		<Button
+			title={title}
+			style={style}
+			onPress={() => onPressFunc()}
+		/>
+	);
 }
 
-export default FilterCamerBtn;
\ No newline at end of file
+export default FilterCamerBtn;
diff --git a/app/screens/FilterCamera/FilterCamera.tsx b/app/screens/FilterCamera/FilterCamera.tsx
index 9c081fc..26b8bc1 100644
--- a/app/screens/FilterCamera/FilterCamera.tsx
+++ b/app/screens/FilterCamera/FilterCamera.tsx
@@ -1,87 +1,27 @@
-import React, {useState} from 'react';
-import {Image, Text, View, StyleSheet} from 'react-native';
-import {filterCameraOptions} from '../../static/imagePickerOption';
-import {LaunchCamera, LaunchGallery} from './../../utils/imagePicker';
-import FilterCamerBtn from './FilterCamerBtn';
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		flexDirection: 'column',
-	},
-	content: {
-		flex: 4,
-	},
-	footer: {
-		flex: 1,
-		flexDirection: 'row',
-		flexWrap: 'wrap',
-	},
-	img: {
-		width: 100,
-		height: 200,
-	},
-	btn: {},
-});
+import React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import FilterCameraSelctionScreen from './FilterCameraSelectionScreen';
+import FilterCameraResultScreen from './FilterCameraResultScreen';
 
 function FilterCamera() {
-	const [photoUri, setPhotoUri] = useState<string>('');
-	const CameraBtnClickListener = (): void => {
-		LaunchCamera(filterCameraOptions)
-			.then((newUri) => {
-				setPhotoUri(newUri);
-			})
-			.catch((err) => {
-				Error(err);
-			});
-	};
-
-	const GalleryBtnClickListener = (): void => {
-		LaunchGallery(filterCameraOptions)
-			.then((newUri) => {
-				setPhotoUri(newUri);
-			})
-			.catch((err) => {
-				Error(err);
-			});
-	};
-
-	const SubmitBtnClickListener = () => {
-		console.log('제출!');
-	};
+	const Stack = createStackNavigator();
 
 	return (
-		<View style={styles.container}>
-			<View style={styles.content}>
-				{photoUri !== '' ? (
-					<Image
-						style={styles.img}
-						source={{
-							uri: `${photoUri}`,
-						}}
-					/>
-				) : (
-					<Text>사진이 아직 없어요!</Text>
-				)}
-			</View>
-			<View style={styles.footer}>
-				<FilterCamerBtn
-					title="카메라"
-					style={styles.btn}
-					onPressFunc={CameraBtnClickListener}
-				/>
-				<FilterCamerBtn
-					title="갤러리"
-					style={styles.btn}
-					onPressFunc={GalleryBtnClickListener}
+		<NavigationContainer>
+			<Stack.Navigator>
+				<Stack.Screen
+					name="Selection"
+					component={FilterCameraSelctionScreen}
+					options={{title: '사진 선택하기'}}
 				/>
-				<FilterCamerBtn
-					title="제출"
-					style={styles.btn}
-					onPressFunc={SubmitBtnClickListener}
+				<Stack.Screen
+					name="Result"
+					component={FilterCameraResultScreen}
+					options={{title: '필터 적용하기'}}
 				/>
-			</View>
-		</View>
+			</Stack.Navigator>
+		</NavigationContainer>
 	);
 }
 
diff --git a/app/screens/FilterCamera/FilterCameraResultScreen.tsx b/app/screens/FilterCamera/FilterCameraResultScreen.tsx
new file mode 100644
index 0000000..86bc9b6
--- /dev/null
+++ b/app/screens/FilterCamera/FilterCameraResultScreen.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+
+function FilterCameraResultScreen() {
+	return (
+		<View>
+			<Text> 결과 창</Text>
+		</View>
+	);
+}
+
+export default FilterCameraResultScreen;
diff --git a/app/screens/FilterCamera/FilterCameraSelectionScreen.tsx b/app/screens/FilterCamera/FilterCameraSelectionScreen.tsx
new file mode 100644
index 0000000..4a9661e
--- /dev/null
+++ b/app/screens/FilterCamera/FilterCameraSelectionScreen.tsx
@@ -0,0 +1,88 @@
+import React, {useState} from 'react';
+import {Image, Text, View, StyleSheet} from 'react-native';
+import {filterCameraOptions} from '../../static/imagePickerOption';
+import {LaunchCamera, LaunchGallery} from '../../utils/imagePicker';
+import FilterCamerBtn from './FilterCamerBtn';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		flexDirection: 'column',
+	},
+	content: {
+		flex: 4,
+	},
+	footer: {
+		flex: 1,
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+	},
+	img: {
+		width: 100,
+		height: 200,
+	},
+	btn: {},
+});
+
+function FilterCameraSelctionScreen() {
+	const [photoUri, setPhotoUri] = useState<string>('');
+	const CameraBtnClickListener = (): void => {
+		LaunchCamera(filterCameraOptions)
+			.then((newUri) => {
+				setPhotoUri(newUri);
+			})
+			.catch((err) => {
+				Error(err);
+			});
+	};
+
+	const GalleryBtnClickListener = (): void => {
+		LaunchGallery(filterCameraOptions)
+			.then((newUri) => {
+				setPhotoUri(newUri);
+			})
+			.catch((err) => {
+				Error(err);
+			});
+	};
+
+	const SubmitBtnClickListener = () => {
+		console.log('제출!');
+	};
+
+	return (
+		<View style={styles.container}>
+			<View style={styles.content}>
+				{photoUri !== '' ? (
+					<Image
+						style={styles.img}
+						source={{
+							uri: `${photoUri}`,
+						}}
+					/>
+				) : (
+					<Text>사진이 아직 없어요!</Text>
+				)}
+			</View>
+			<View style={styles.footer}>
+				<FilterCamerBtn
+					title="카메라"
+					style={styles.btn}
+					onPressFunc={CameraBtnClickListener}
+				/>
+				<FilterCamerBtn
+					title="갤러리"
+					style={styles.btn}
+					onPressFunc={GalleryBtnClickListener}
+				/>
+				<FilterCamerBtn
+					title="제출"
+					style={styles.btn}
+					onPressFunc={SubmitBtnClickListener}
+				/>
+			</View>
+		</View>
+	);
+}
+
+export default FilterCameraSelctionScreen;
diff --git a/app/screens/Home/Home.tsx b/app/screens/Home/Home.tsx
index 3eda62c..8ddb838 100644
--- a/app/screens/Home/Home.tsx
+++ b/app/screens/Home/Home.tsx
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
 
 const Home = ({navigation}) => {
 	const navigateToFilterScreen = () => {
-		navigation.navigate('FilterCamera');
+		navigation.navigate('FilterCamera', {screen: 'FilterCameraSelectionScreen'});
 	};
 
 	const navigateToStickerScreen = () => {