시작

itstime22 · Jun 13, 2022 · 1614fb4 · 1614fb4
1 parent fb89268
commit 1614fb4
Show file tree

Hide file tree

Showing 15 changed files with 346 additions and 518 deletions.
diff --git a/App.js b/App.js
@@ -1,12 +1,56 @@
-import React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Navigation from "./src/navigation";
+import React, { useState, useEffect, useCallback } from "react";
+import * as Font from "expo-font";
+import * as SplashScreen from "expo-splash-screen";
 
 const App = () => {
+  const [appIsReady, setAppIsReady] = useState(false);
+
+  useEffect(() => {
+    async function prepare() {
+      try {
+        // Keep the splash screen visible while we fetch resources
+        await SplashScreen.preventAutoHideAsync();
+        // Pre-load fonts, make any API calls you need to do here
+        await Font.loadAsync({
+          NanumSquareRoundB: require("./assets/fonts/NanumSquareRoundB.ttf"),
+          NanumSquareRoundR: require("./assets/fonts/NanumSquareRoundR.ttf"),
+          Cafe24Ohsquareair: require("./assets/fonts/Cafe24Ohsquareair.ttf"),
+        });
+        // Artificially delay for two seconds to simulate a slow loading
+        // experience. Please remove this if you copy and paste the code!
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+      } catch (e) {
+        console.warn(e);
+      } finally {
+        // Tell the application to render
+        setAppIsReady(true);
+      }
+    }
+
+    prepare();
+  }, []);
+
+  const onLayoutRootView = useCallback(async () => {
+    if (appIsReady) {
+      // This tells the splash screen to hide immediately! If we call this after
+      // `setAppIsReady`, then we may see a blank screen while the app is
+      // loading its initial state and rendering its first pixels. So instead,
+      // we hide the splash screen once we know the root view has already
+      // performed layout.
+      await SplashScreen.hideAsync();
+    }
+  }, [appIsReady]);
+
+  if (!appIsReady) {
+    return null;
+  }
+
   return (
-    //<View style={styles.container}>
-    <Navigation />
-    //</View>
+    <View style={styles.container} onLayout={onLayoutRootView}>
+      <Navigation />
+    </View>
   );
 };
 

diff --git a/src/components/Hours.js b/src/components/Hours.js
@@ -1,96 +1,80 @@
 import {
-    StyleSheet,
-    Pressable,
-    Text,
-    View,
-    Button,
-    ScrollView,
-    TouchableOpacity,
-  } from "react-native";
-  import { useNavigation } from "@react-navigation/native";
-  import * as Font from "expo-font";
-  import AppLoading from "expo-app-loading";
-  import { useState } from "react";
-  import { isWithinInterval } from "date-fns";
-
-  const Hours = () => {
-    const navigation = useNavigation();
-    const [isReady, setIsReady] = useState(false);
-
-    const time = ["4시", "5시", "6시", "7시", "8시", "9시", "10시"];
-    const buttonStyle = [styles.button];
-    const timeStyle = [styles.text];
-
-    const onPress = () => {
-      buttonStyle.push(styles.selectedButton);
-      timeStyle.push(styles.selectedTime);
-    };
-
-    const getFonts = async () => {
-      await Font.loadAsync({
-        NanumSquareRoundB: require("../../assets/fonts/NanumSquareRoundB.ttf"),
-      });
-    };
-
-    return isReady ? (
-      <ScrollView contentContainerStyle={styles.container} horizontal={true}>
-        <Pressable onPress={onPress} style={buttonStyle}>
-          <Text style={timeStyle}>{time[0]}</Text>
-        </Pressable>
-
-        <TouchableOpacity onPress={onPress} style={buttonStyle}>
-          <Text style={timeStyle}>5시</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={onPress} style={buttonStyle}>
-          <Text style={timeStyle}>6시</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={onPress} style={buttonStyle}>
-          <Text style={timeStyle}>7시</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={onPress} style={buttonStyle}>
-          <Text style={timeStyle}>8시</Text>
-        </TouchableOpacity>
-      </ScrollView>
-    ) : (
-      // 앱 구성 컴포넌트
-      <AppLoading
-        startAsync={getFonts}
-        onFinish={() => setIsReady(true)}
-        onError={() => {}}
-      />
-    );
+  StyleSheet,
+  Pressable,
+  Text,
+  View,
+  Button,
+  ScrollView,
+  TouchableOpacity,
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import * as Font from "expo-font";
+import * as SplashScreen from "expo-splash-screen";
+import { useState, useEffect, useCallback } from "react";
+
+const Hours = () => {
+  const navigation = useNavigation();
+
+  const time = ["4시", "5시", "6시", "7시", "8시", "9시", "10시"];
+  const buttonStyle = [styles.button];
+  const timeStyle = [styles.text];
+
+  const onPress = () => {
+    buttonStyle.push(styles.selectedButton);
+    timeStyle.push(styles.selectedTime);
   };
-  const styles = StyleSheet.create({
-    container: {
-      width: "100%",
-      flexDirection: "row",
-      marginTop: 20,
-      paddingBottom: 2,
-      height: 45,
-    },
-    button: {
-      justifyContent: "center",
-      alignItems: "center",
-      width: 60,
-      height: 35,
-      //  backgroundColor: 'rgba(255, 249, 179, 0.82) 96.29%)',
-      marginHorizontal: 10,
-      borderRadius: 10,
-    },
-    selectedButton: {
-      //   backgroundColor: 'rgba(255, 249, 179, 0.82) 96.29%)',
-      backgroundColor: "#A4BDFF",
-      borderRadius: 15,
-    },
-    selectedTime: {
-      color: "white",
-    },
-    text: {
-      fontSize: 20,
-      color: "gray",
-      fontFamily: "NanumSquareRoundB",
-    },
-  });
-
-  export default Hours;
-
+
+  return (
+    <ScrollView contentContainerStyle={styles.container} horizontal={true}>
+      <Pressable onPress={onPress} style={buttonStyle}>
+        <Text style={timeStyle}>{time[0]}</Text>
+      </Pressable>
+
+      <TouchableOpacity onPress={onPress} style={buttonStyle}>
+        <Text style={timeStyle}>5시</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={onPress} style={buttonStyle}>
+        <Text style={timeStyle}>6시</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={onPress} style={buttonStyle}>
+        <Text style={timeStyle}>7시</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={onPress} style={buttonStyle}>
+        <Text style={timeStyle}>8시</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    flexDirection: "row",
+    marginTop: 20,
+    paddingBottom: 2,
+    height: 45,
+  },
+  button: {
+    justifyContent: "center",
+    alignItems: "center",
+    width: 60,
+    height: 35,
+    //  backgroundColor: 'rgba(255, 249, 179, 0.82) 96.29%)',
+    marginHorizontal: 10,
+    borderRadius: 10,
+  },
+  selectedButton: {
+    //   backgroundColor: 'rgba(255, 249, 179, 0.82) 96.29%)',
+    backgroundColor: "#A4BDFF",
+    borderRadius: 15,
+  },
+  selectedTime: {
+    color: "white",
+  },
+  text: {
+    fontSize: 20,
+    color: "gray",
+    fontFamily: "NanumSquareRoundB",
+  },
+});
+
+export default Hours;
diff --git a/src/components/Input.js b/src/components/Input.js
@@ -1,35 +1,21 @@
-import { useState } from "react";
-import { Dimensions, StyleSheet, TextInput } from "react-native";
+import { useState, useEffect, useCallback } from "react";
+import { Dimensions, StyleSheet, TextInput, View } from "react-native";
 import * as Font from "expo-font";
-import AppLoading from "expo-app-loading";
+import * as SplashScreen from "expo-splash-screen";
 
 const Input = ({ value, onChangeText, onSubmitEditing }) => {
-  const [isReady, setIsReady] = useState(false);
-
-  const getFonts = async () => {
-    await Font.loadAsync({
-      NanumSquareRoundB: require("../../assets/fonts/NanumSquareRoundB.ttf"),
-      Cafe24Ohsquareair: require("../../assets/fonts/Cafe24Ohsquareair.ttf"),
-    });
-  };
-
-  return isReady ? (
-    <TextInput
-      style={styles.input}
-      placeholder="To do, 시간"
-      maxLength={50}
-      value={value}
-      onChangeText={onChangeText}
-      onSubmitEditing={onSubmitEditing}
-      placeholderTextColor={"gray"}
-    />
-  ) : (
-    // 앱 구성 컴포넌트
-    <AppLoading
-      startAsync={getFonts}
-      onFinish={() => setIsReady(true)}
-      onError={() => {}}
-    />
+  return (
+    <View>
+      <TextInput
+        style={styles.input}
+        placeholder="To do, 시간"
+        maxLength={50}
+        value={value}
+        onChangeText={onChangeText}
+        onSubmitEditing={onSubmitEditing}
+        placeholderTextColor={"gray"}
+      />
+    </View>
   );
 };
 

diff --git a/src/components/LogoTitle.js b/src/components/LogoTitle.js
@@ -1,20 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { StyleSheet, Text, View, Image } from "react-native";
 import * as Font from "expo-font";
-import AppLoading from "expo-app-loading";
+import * as SplashScreen from "expo-splash-screen";
 
 const LogoTitle = () => {
-  const [isReady, setIsReady] = useState(false);
-
-  const getFonts = async () => {
-    await Font.loadAsync({
-      NanumSquareRoundB: require("../../assets/fonts/NanumSquareRoundB.ttf"),
-      NanumSquareRoundEB: require("../../assets/fonts/NanumSquareRoundEB.ttf"),
-    });
-  };
-
-  return isReady ? (
-    <>
+  return (
+    <View>
       <View style={styles.container}>
         <Image
           style={{ height: 25, width: 25 }}
@@ -28,14 +19,7 @@ const LogoTitle = () => {
           borderBottomWidth: 1,
         }}
       />
-    </>
-  ) : (
-    // 앱 구성 컴포넌트
-    <AppLoading
-      startAsync={getFonts}
-      onFinish={() => setIsReady(true)}
-      onError={() => {}}
-    />
+    </View>
   );
 };
 

diff --git a/src/components/RoutineButton.js b/src/components/RoutineButton.js
@@ -1,9 +1,9 @@
 import { StyleSheet, Text, View, Pressable } from "react-native";
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useNavigation } from "@react-navigation/native";
 import { LinearGradient } from "expo-linear-gradient";
 import * as Font from "expo-font";
-import AppLoading from "expo-app-loading";
+import * as SplashScreen from "expo-splash-screen";
 
 //timezone1: "4:00",
 //timezone2: "7:10",
@@ -40,16 +40,8 @@ const RoutineButton = ({ routine }) => {
   const goTodoPage = () => {
     navigation.navigate("Others", { id });
   };
-  const [isReady, setIsReady] = useState(false);
 
-  const getFonts = async () => {
-    await Font.loadAsync({
-      NanumSquareRoundB: require("../../assets/fonts/NanumSquareRoundB.ttf"),
-      Cafe24Ohsquareair: require("../../assets/fonts/Cafe24Ohsquareair.ttf"),
-    });
-  };
-
-  return isReady ? (
+  return (
     <Pressable style={styles.container} onPress={goTodoPage}>
       <LinearGradient
         // Button Linear Gradient
@@ -81,13 +73,6 @@ const RoutineButton = ({ routine }) => {
         <Text style={styles.routineName}>💚 100</Text>
       </View>
     </Pressable>
-  ) : (
-    // 앱 구성 컴포넌트
-    <AppLoading
-      startAsync={getFonts}
-      onFinish={() => setIsReady(true)}
-      onError={() => {}}
-    />
   );
 };