From 47107e1f56e9f0bb8934536f828e5b6f4a0de3f4 Mon Sep 17 00:00:00 2001
From: Lim_JiSeon <dpf226@naver.com>
Date: Sat, 14 Jan 2023 00:37:44 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=ED=99=95=EC=9D=B8=20=ED=99=94=EB=A9=B4=20=EA=B5=AC=EC=84=B1(?=
 =?UTF-8?q?=EC=A7=84=ED=96=89=EC=A4=91)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/screen/FindpwScreen/Button.js     | 36 +++++++++++
 src/screen/FindpwScreen/index.js      | 81 +++++++++++++++++++++++++
 src/screen/VerifycodeScreen/Button.js | 41 +++++++++++++
 src/screen/VerifycodeScreen/index.js  | 87 +++++++++++++++++++++++++++
 4 files changed, 245 insertions(+)
 create mode 100644 src/screen/FindpwScreen/Button.js
 create mode 100644 src/screen/FindpwScreen/index.js
 create mode 100644 src/screen/VerifycodeScreen/Button.js
 create mode 100644 src/screen/VerifycodeScreen/index.js

diff --git a/src/screen/FindpwScreen/Button.js b/src/screen/FindpwScreen/Button.js
new file mode 100644
index 0000000..85b4e27
--- /dev/null
+++ b/src/screen/FindpwScreen/Button.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import {Pressable, StyleSheet, Text} from 'react-native';
+
+import Colors from '../../constants/Color';
+
+const Button = ({text, style, navigation}) => {
+  const screen = {
+    비밀번호 찾기: 'Verifycode',
+  }[text];
+
+  const handlePress = () => {
+    navigation.navigate(screen);
+  };
+
+  return (
+    <Pressable style={[styles.container, style]} onPress={handlePress}>
+      <Text>{text}</Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    backgroundColor: Colors.GREY_SECONDARY,
+    height: 32,
+    justifyContent: 'center',
+  },
+  text: {
+    color: Colors.BLACK,
+    fontSize: 15,
+  },
+});
+
+export default Button;
diff --git a/src/screen/FindpwScreen/index.js b/src/screen/FindpwScreen/index.js
new file mode 100644
index 0000000..c15ef9d
--- /dev/null
+++ b/src/screen/FindpwScreen/index.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import {StyleSheet, Text, View, TextInput} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+
+import Colors from '../../constants/Color';
+import Button from './Button';
+
+const FindpwScreen = ({navigation}) => {
+  return (
+    <SafeAreaView style={styles.screen}>
+      <Text style={styles.logo}>배달N</Text>
+      <Text style={styles.title}>비밀번호 찾기</Text>
+      <View style={styles.container}>
+        <View style={styles.inputContainer}>
+          <Text style={styles.inputTitle}>이름</Text>
+          <TextInput style={styles.input}/>
+        </View>
+        <View style={styles.inputContainer}>
+          <Text style={styles.inputTitle}>전화번호</Text>
+          <TextInput style={styles.input}/>
+        </View>
+        <View style={styles.inputContainer}>
+          <Text style={styles.inputTitle}>이메일</Text>
+          <TextInput style={styles.input}/>
+        </View>
+      </View>
+      <Button text="비밀번호 찾기" style={{bottom: '45%'}} navigation={navigation} />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: 150,
+    justifyContent: 'space-between',
+    position: 'absolute',
+    top: '30%',
+  },
+  screen: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'flex-end',
+    paddingHorizontal: 17,
+    paddingVertical: 50,
+    position: 'relative',
+  },
+  logo: {
+    alignSelf: 'center',
+    fontSize: 50,
+    fontWeight: '600',
+    position: 'absolute',
+    top: '5%',
+  },
+  title: {
+    alignSelf: 'stretch',
+    fontSize: 20,
+    fontWeight: '600',
+    position: 'absolute',
+    top: '20%',
+    left: '5%',
+  },
+  inputContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  input: {
+    borderColor: Colors.BLACK,
+    borderWidth: 1,
+    width: '80%',
+    height: 32,
+    justifyContent: 'center',
+  },
+  inputTitle: {
+    color: Colors.BLACK,
+    fontSize: 15,
+  },
+});
+
+export default FindpwScreen;
diff --git a/src/screen/VerifycodeScreen/Button.js b/src/screen/VerifycodeScreen/Button.js
new file mode 100644
index 0000000..27a2c29
--- /dev/null
+++ b/src/screen/VerifycodeScreen/Button.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import {Pressable, StyleSheet, Text} from 'react-native';
+
+import Colors from './Color';
+
+const Button = ({text, style, navigation}) => {
+  const screen = {
+    재발송: 'Findpw',
+  }[text];
+
+  const handlePress = () => {
+    navigation.navigate(screen);
+  };
+
+  return (
+    <Pressable style={[styles.container, style]} onPress={handlePress}>
+      <Text>{text}</Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    backgroundColor: Colors.GREY_SECONDARY,
+    height: 32,
+    justifyContent: 'center',
+    position : 'absolute',
+    top: '70%',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  text: {
+    color: Colors.BLACK,
+    fontSize: 15,
+  },
+});
+
+export default Button;
\ No newline at end of file
diff --git a/src/screen/VerifycodeScreen/index.js b/src/screen/VerifycodeScreen/index.js
new file mode 100644
index 0000000..14b8f9a
--- /dev/null
+++ b/src/screen/VerifycodeScreen/index.js
@@ -0,0 +1,87 @@
+import React, {useRef} from 'react';
+import {StyleSheet, Text, View, TextInput} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+
+import Colors from '../../constants/Color';
+import Button from './Button';
+
+const email = "12345@gmail.com";
+
+const VerifycodeScreen = ({navigation}) => {
+  return (
+    <SafeAreaView style={styles.screen}>
+      <Text style={styles.logo}>배달N</Text>
+      <Text style={styles.title}>비밀번호 찾기</Text>
+      <View style={styles.container}>
+        <View style={styles.subtitle}>
+          <Text style={styles.email}>{email} 로</Text>
+          <Text style={styles.send}>인증번호가 발송되었습니다</Text>
+        </View>
+        <View style={styles.inputContainer}>
+          <TextInput style={styles.input}/>
+        </View>
+      </View>
+      <Text style={styles.timer}>타이머</Text>
+      <Button text="재발송" navigation={navigation}/>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: 150,
+    justifyContent: 'space-between',
+    position: 'absolute',
+    top: '30%',
+  },
+  screen: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'flex-end',
+    paddingHorizontal: 17,
+    paddingVertical: 50,
+    position: 'relative',
+  },
+  logo: {
+    alignSelf: 'center',
+    fontSize: 50,
+    fontWeight: '600',
+    position: 'absolute',
+    top: '5%',
+  },
+  title: {
+    alignSelf: 'stretch',
+    fontSize: 20,
+    fontWeight: '600',
+    position: 'absolute',
+    top: '20%',
+    left: '5%',
+  },
+  email: {
+    alignSelf: 'center',
+    fontSize: 16,
+    fontWeight: '800',
+  },
+  send: {
+    alignSelf: 'center',
+    fontSize: 16,
+    fontWeight: '300',
+  },
+  inputContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  input: {
+    borderColor: Colors.BLACK,
+    fontSize: 24,
+    width: '100%',
+    borderBottomWidth: 1,
+    height: 32,
+    justifyContent: 'center',
+  },
+
+});
+
+export default VerifycodeScreen;