Merge branch 'master' of https://github.com/minjun06/front-end

minjun06 · Jun 9, 2023 · 27b5934 · 27b5934
2 parents 04bd09d + 0bdbb9c
commit 27b5934
Show file tree

Hide file tree

Showing 12 changed files with 6,460 additions and 28 deletions.
diff --git a/assets/img/cloud_img.png b/assets/img/cloud_img.png
diff --git a/assets/img/cloudy_img.png b/assets/img/cloudy_img.png
diff --git a/assets/img/flower11_img.png b/assets/img/flower11_img.png
diff --git a/assets/img/flower1_img.png b/assets/img/flower1_img.png
diff --git a/package.json b/package.json
@@ -14,6 +14,9 @@
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
     "expo": "~48.0.18",
+    "expo-app-loading": "^2.1.1",
+    "expo-font": "~11.1.1",
+    "expo-splash-screen": "~0.18.2",
     "expo-status-bar": "~1.4.4",
     "hermes-engine": "^0.5.2-rc1",
     "react": "18.2.0",

diff --git a/react-native.config.js b/react-native.config.js
@@ -1,3 +1,7 @@
 module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
   assets: ["./assets/fonts"],
 };
diff --git a/src/navigations/Stack.js b/src/navigations/Stack.js
@@ -1,16 +1,24 @@
-import React from 'react';
+import React from "react";
 //import { StatusBar } from 'expo-status-bar';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator } from "@react-navigation/stack";
 // import { Home, Question, Test, Landing, Login, Extra, SelectType, SignUp, Splash } from '../screens';
-import { Home, Question, Test, Landing, SelectType, SignUp, Splash } from '../screens';
+import {
+  Home,
+  Question,
+  Test,
+  Landing,
+  SelectType,
+  SignUp,
+  Splash,
+} from "../screens";
 
 const Stack = createStackNavigator();
 
 const StackNav = () => {
   return (
     <Stack.Navigator
       initialRouteName="Home"
-      screenOptions={{ cardStyle: { backgroundColor: '#ffffff' } }}
+      screenOptions={{ cardStyle: { backgroundColor: "#ffffff" } }}
     >
       <Stack.Screen
         name="Home"
@@ -28,7 +36,6 @@ const StackNav = () => {
       <Stack.Screen name="SignUp" component={SignUp} />
       <Stack.Screen name="Splash" component={Splash} />
       {/* <Stack.Screen name="Extra" component={Extra} /> */}
-
     </Stack.Navigator>
   );
 };

diff --git a/src/screens/Extra.js b/src/screens/Extra.js
@@ -0,0 +1,35 @@
+// import { React, useContext } from "react";
+// import {
+//   TouchableOpacity,
+//   StyleSheet,
+//   Text,
+//   View,
+//   Button,
+//   Image,
+// } from "react-native";
+
+// export default function App() {
+//   return (
+//     <View>
+//       <Text>마이페이지</Text>
+//       <View style={styles.container}>
+//         <View>
+//           <View>
+//             <Image source={require("../../assets/img/flower11_img.png")} />
+//           </View>
+//           <Text>치매 안심 센터</Text>
+//         </View>
+//       </View>
+//     </View>
+//   );
+// }
+
+// const styles = StyleSheet.create({
+//   container: {
+//     marginTop: "30%",
+//     backgroundColor: "#fff",
+//     alignItems: "center",
+//     justifyContent: "center",
+//   },
+//   text: {},
+// });
diff --git a/src/screens/Landing.js b/src/screens/Landing.js
@@ -12,26 +12,97 @@ export default function Landing() {
   return (
     <View style={styles.container}>
       <View>
-        <Text> 종이꽃</Text>
-        <Text>: 항상 기억할게요</Text>
+        <Image
+          style={{
+            width: 125,
+            height: 87,
+            marginTop: 10,
+            marginLeft: "65%",
+            resizeMode: "contain",
+          }}
+          source={require("../../assets/img/cloudy_img.png")}
+        />
       </View>
 
       <View>
-        <Image source={require("../../assets/img/flower1_img.png")} />
+        <Text style={styles.text}> 종이꽃</Text>
+        <Text style={styles.text2}>: 항상 기억할게요</Text>
       </View>
 
-      <Button title="회원가입" />
-      <Button title="로그인" />
+      <View>
+        <Image
+          //구름
+          style={{
+            width: 193,
+            height: 87,
+            marginLeft: 10,
+            resizeMode: "contain",
+          }}
+          source={require("../../assets/img/cloud_img.png")}
+        />
+      </View>
+
+      <View>
+        <Image
+          //꽃
+          style={{
+            width: 164,
+            height: 246,
+            marginLeft: "50%",
+            // marginBottom: "15%",
+            resizeMode: "contain",
+          }}
+          source={require("../../assets/img/flower1_img.png")}
+        />
+      </View>
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity style={styles.button}>
+          <Text style={{ fontSize: "40px", color: "white" }}>회원가입</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.btnText}>로그인</Text>
+        </TouchableOpacity>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: "30%",
-    backgroundColor: "#fff",
+    flex: 1,
+    backgroundColor: "#FFF2D1",
+    // alignItems: "center",
+    // justifyContent: "center",
+  },
+
+  text: {
+    //종이꽃 스타일
+    marginTop: "10%",
+    marginLeft: 12,
+    fontSize: "32px",
+    lineHeight: "60%",
+    // fontFamily: "Gyenggi",
+  },
+  text2: {
+    marginLeft: 12,
+    fontSize: "24px",
+  },
+
+  buttonContainer: {
+    alignItems: "center",
+  },
+
+  button: {
+    width: "90%",
+    height: 75,
+    marginBottom: 8,
+    borderRadius: 5,
+    backgroundColor: "#FFCF53",
     alignItems: "center",
     justifyContent: "center",
   },
-  text: {},
+
+  btnText: {
+    fontSize: "40px",
+  },
 });
diff --git a/src/screens/SignUp.js b/src/screens/SignUp.js
@@ -8,31 +8,102 @@ import {
   Image,
 } from "react-native";
 
-export default function App() {
+export default function SignUp() {
   return (
     <View style={styles.container}>
       <View>
-        <Text>안녕하세요,</Text>
-        <Text>기억바구니와 함께</Text>
-        <Text>소중한 기억을 오래 기억해요.</Text>
+        <Image
+          style={{
+            width: 125,
+            height: 87,
+            marginTop: 10,
+            marginLeft: "65%",
+            resizeMode: "contain",
+          }}
+          source={require("../../assets/img/cloudy_img.png")}
+        />
       </View>
 
       <View>
-        <Image source={require("../../assets/img/flower1_img.png")} />
+        <Text style={styles.text2}>안녕하세요,</Text>
+        <Text style={styles.text2}>기억바구니와 함께</Text>
+        <Text style={styles.text2}>소중한 기억을 오래 기억해요.</Text>
       </View>
 
-      <Button title="카카오로 간편 시작" />
-      <Button title="전화번호로 시작하기" />
+      <View>
+        <Image
+          //구름
+          style={{
+            width: 193,
+            height: 87,
+            marginLeft: 10,
+            resizeMode: "contain",
+          }}
+          source={require("../../assets/img/cloud_img.png")}
+        />
+      </View>
+
+      <View>
+        <Image
+          //꽃
+          style={{
+            width: 164,
+            height: 246,
+            marginLeft: "50%",
+            // marginBottom: "15%",
+            resizeMode: "contain",
+          }}
+          source={require("../../assets/img/flower1_img.png")}
+        />
+      </View>
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.btnText}>카카오로 간편 시작</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.btnText}>전화번호로 시작하기</Text>
+        </TouchableOpacity>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: "30%",
-    backgroundColor: "#fff",
+    flex: 1,
+    backgroundColor: "#FFF2D1",
+    // alignItems: "center",
+    // justifyContent: "center",
+  },
+
+  text: {
+    //종이꽃 스타일
+    marginTop: "10%",
+    marginLeft: 12,
+    fontSize: "32px",
+    lineHeight: "60%",
+    // fontFamily: "Gyenggi",
+  },
+  text2: {
+    marginLeft: 12,
+    fontSize: "24px",
+  },
+
+  buttonContainer: {
+    alignItems: "center",
+  },
+
+  button: {
+    width: "90%",
+    height: 75,
+    marginBottom: 8,
+    borderRadius: 5,
+    backgroundColor: "#FFCF53",
     alignItems: "center",
     justifyContent: "center",
   },
-  text: {},
+
+  btnText: {
+    fontSize: "40px",
+  },
 });
diff --git a/src/screens/Splash.js b/src/screens/Splash.js
@@ -1,19 +1,55 @@
-import React from "react";
-import { StyleSheet, Text, View } from "react-native";
+import React, { useState } from "react";
+import { StyleSheet, Text, View, Image } from "react-native";
+import { useFonts } from "expo-font";
+import * as Font from "expo-font";
+import AppLoading from "expo-app-loading";
+import * as SplashScreen from "expo-splash-screen";
 
 export default function Splash() {
   return (
     <View style={styles.container}>
-      <Text> 종이꽃</Text>
-      <Text>: 항상 기억할게요</Text>
+      <View>
+        <Text style={styles.text}> 종이꽃</Text>
+        <Text style={styles.text2}>: 항상 기억할게요</Text>
+      </View>
+      <View>
+        <Image
+          style={{
+            width: 164,
+            height: 246,
+            marginTop: "80%",
+            marginLeft: "40%",
+            // marginBottom: "15%",
+            resizeMode: "contain",
+          }}
+          // style={styles.image}
+          source={require("../../assets/img/flower1_img.png")}
+        />
+      </View>
     </View>
   );
 }
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "#fff",
+    marginTop: "30%",
+    marginLeft: "15%",
+    // alignItems: "center",
+    // justifyContent: "center",
+  },
+  text: {
+    fontSize: "32px",
+    lineHeight: "60%",
+    // fontFamily: "Gyenggi",
+  },
+  text2: {
+    fontSize: "24px",
+  },
+  image: {
+    width: "100px",
+    height: "100px",
+    resizeMode: "contain",
     alignItems: "center",
     justifyContent: "center",
   },