0720 수정

src/components/CustomButton.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { StyleSheet, Text, Pressable } from "react-native";
+
+const CustomButton = ({ onPress, text }) => {
+  return (
+    <Pressable onPress={onPress} style={styles.container}>
+      <Text style={styles.text}>{text}</Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "83%",
+    height: 45,
+    alignItems: "center",
+    marginBottom: 11,
+    borderRadius: 5,
+    backgroundColor: "#E5EBFF",
+    alignSelf: "center",
+    justifyContent: "center",
+  },
+  text: {
+    color: "#545454",
+    fontWeight: "500",
+    fontSize: 15,
+  },
+});
+
+export default CustomButton;

src/components/CustomInput.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { StyleSheet, TextInput } from "react-native";
+
+const CustomInput = ({ value, setValue, placeholder, secureTextEntry }) => {
+  return (
+    <TextInput
+      value={value}
+      onChangeText={setValue}
+      placeholder={placeholder}
+      style={styles.input}
+      secureTextEntry={secureTextEntry}
+    />
+  );
+};
+
+// 2. style 적용
+
+const styles = StyleSheet.create({
+  input: {
+    backgroundColor: "#FFFFFF",
+    width: "83%",
+    height: 48,
+    paddingLeft: 15,
+    borderRadius: 5,
+    marginBottom: 18,
+    alignSelf: "center",
+  },
+});
+
+export default CustomInput;

src/navigation/BottomTab.js

@@ -15,6 +15,20 @@ import HomeScreen from "../screens/HomeScreen";
 import PopularScreen from "../screens/PopularScreen";
 import NewScreen from "../screens/NewScreen";
 import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
+import LoginScreen from "../screens/LoginScreen";
+import InitialScreen from "../screens/InitialScreen";
+import SignupScreen from "../screens/SignupScreen";
+
+const LoginStack = createNativeStackNavigator();
+const LoginStackNav = () => {
+  return (
+    <LoginStack.Navigator screenOptions={{ headerShown: false }}>
+      <LoginStack.Screen name="Initial" component={InitialScreen} />
+      <LoginStack.Screen name="Login" component={LoginScreen} />
+      <LoginStack.Screen name="SignUp" component={SignupScreen} />
+    </LoginStack.Navigator>
+  );
+};
 
 //////////MyPage
 const MyPageStack = createNativeStackNavigator();
@@ -41,6 +55,7 @@ const MyStackNav = () => {
   );
 };
 
+///// 탑 탭
 const HomeTab = createMaterialTopTabNavigator();
 const HomeTabNav = () => {
   return (
@@ -84,8 +99,8 @@ const HomeTabNav = () => {
   );
 };
 
+//// 제일 중심 스택
 const MyHomeStack = createNativeStackNavigator();
-
 const MyHomeStackNav = () => {
   return (
     <MyHomeStack.Navigator>
@@ -174,14 +189,13 @@ const styles = StyleSheet.create({
   title: {
     fontFamily: "NanumSquareRoundB",
     fontSize: 20,
-    fontWeight: "bold",
     color: "#757575",
   },
   ttitle: {
     left: 10,
     color: "black",
-    fontWeight: "bold",
-    fontSize: 20,
+    fontWeight: "600",
+    fontSize: 18,
     fontFamily: "NanumSquareRoundB",
   },
   actTitle: {
@@ -198,4 +212,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export { MyHomeStackNav, BottomTabNav, MyPageStackNav };
+export { LoginStackNav, MyHomeStackNav, BottomTabNav, MyPageStackNav };

src/navigation/Main.js

@@ -1,15 +1,15 @@
 import React from "react";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import LoginScreen from "../screens/LoginScreen";
-import { BottomTabNav } from "./BottomTab";
+import { BottomTabNav, LoginStackNav } from "./BottomTab";
+
 const Stack = createNativeStackNavigator();
 
 const Main = () => {
   return (
     <Stack.Navigator>
       <Stack.Screen
         name="LogIn"
-        component={LoginScreen}
+        component={LoginStackNav}
         options={{ headerShown: false }}
       />
 

src/screens/HomeScreen.js

@@ -28,11 +28,11 @@ function HomeScreen() {
     "인생에 뜻을 세우는데 적당한 때는 없다",
     "실패는 잊어라. 하지만 교훈은 잊으면 안 된다",
     "행복하기 때문에 웃는 게 아니라, 웃기 때문에 행복하다",
-    "너 자신이 돼라. 다른 사람은 이미 있으니까",
+    "다른 사람이 아닌 너 자신이 돼라.",
     "승자는 시간을 관리하며 살고 패자는 시간에 끌려 산다",
     "인내가 최상의 미덕이다",
     "웃는 자에게 복이 온다",
-    "수학은 정답이 있지만 인생은 정답이 없더라",
+    "수학은 정답이 있지만 인생은 정답이 없다",
     "삶이 있는 한 희망은 있다",
     "피할 수 없으면 즐겨라",
     "계단을 밟아야 계단 위에 올라설 수 있다",
@@ -62,7 +62,7 @@ function HomeScreen() {
     "변명 중에서 가장 어리석은 변명은 '시간이 없어서'다",
     "인내는 쓰다. 그러나 그 열매는 달다.",
     "꿈을 꿀 수 있다면, 그 꿈을 실현할 수 있다",
-    "멈추지 말고 느리게라도 뛰어봐",
+    "멈추지 말고 느리게라도 뛰어봐!",
     "오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아간다",
   ];
 
@@ -172,7 +172,12 @@ function HomeScreen() {
           style={{ position: "absolute", width: "95%" }}
         />
 
-        <Text style={{ fontWeight: "500", fontSize: 15 }}>
+        <Text
+          style={{
+            fontSize: 15,
+            fontFamily: "NanumSquareRoundR",
+          }}
+        >
           {wisesaying[getRandomIndex(wisesaying.length)]}
         </Text>
       </View>

src/screens/InitialScreen.js

@@ -0,0 +1,98 @@
+import { StyleSheet, Text, Pressable, Image, View } from "react-native";
+import React from "react";
+import { LinearGradient } from "expo-linear-gradient";
+{
+  /*import {
+  KakaoOAuthToken,
+  KakaoProfile,
+  //getProfile as getKakaoProfile,
+  login,
+  logout,
+  unlink,
+} from "@react-native-seoul/kakao-login";
+const signInWithKakao = async () => {
+  const token = await login();
+  setResult(JSON.stringify(token));
+};
+const signOutWithKakao = async () => {
+  const message = await logout();
+  setResult(message);
+};
+const getKakaoProfile = async () => {
+  const profile = await getProfile();
+  setResult(JSON.stringify(profile));
+};
+const unlinkKakao = async () => {
+  const message = await unlink();
+  setResult(message);
+};
+*/
+}
+
+const InitialScreen = ({ navigation }) => {
+  const login = () => {
+    navigation.navigate("Login");
+  };
+  const signup = () => {
+    navigation.navigate("SignUp");
+  };
+
+  return (
+    <LinearGradient
+      colors={[
+        "#9DC0FF",
+        "rgba(184, 181, 255, 0.97) ",
+        "rgba(210, 171, 217, 0.85) ",
+        "rgba(248, 204, 187, 0.94) ",
+        "rgba(255, 249, 179, 0.82) ",
+      ]}
+      style={{
+        flex: 1,
+        width: "100%",
+        height: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Image
+        style={{
+          position: "absolute",
+          width: 500,
+          height: 500,
+        }}
+        source={require("../../assets/images/title.png")}
+      />
+
+      <View style={styles.buttonContainer}>
+        <Pressable onPress={signup} style={styles.button}>
+          <Text style={styles.text}>Create an Account</Text>
+        </Pressable>
+        <Pressable onPress={login} style={styles.button}>
+          <Text style={styles.text}>Login</Text>
+        </Pressable>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    height: 48,
+    width: 300,
+    borderRadius: 5,
+    backgroundColor: "#FFFFFF",
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  buttonContainer: {
+    marginTop: 400,
+  },
+  text: {
+    color: "#545454",
+    fontSize: 16,
+    fontFamily: "NanumSquareRoundB",
+  },
+});
+
+export default InitialScreen;