TIL | #17 | React Native | 23.12.15.(금)

23.12.15.(FRI).TIL.

React Native

React Native

// Import 필요한 React Native 컴포넌트 및 라이브러리
import React, { useState, useEffect } from "react";
import { View, Image, Button, Text } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from "@react-navigation/native";

// 로고 이미지 경로
const logoImagePath = require("./path/to/your/logo.png");

const App = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [showLogo, setShowLogo] = useState(true);
  const navigation = useNavigation(); // useNavigation을 상위에서 호출

  useEffect(() => {
    const initializeApp = async () => {
      try {
        // 여기에서 앱 초기화 작업 수행
        const userLoggedIn = await checkUserLoggedIn();

        if (userLoggedIn) {
          setLoggedIn(true);
          setShowLogo(false);
        } else {
          const needsPlanTest = await checkPlanTestNeeded();

          if (needsPlanTest) {
            performPlanTest();
          }
        }
      } catch (error) {
        console.error("Error during app initialization:", error);
      }
    };

    initializeApp();
  }, []);

  const checkUserLoggedIn = async () => {
    try {
      const loggedIn = await AsyncStorage.getItem("userLoggedIn");
      return loggedIn === "true";
    } catch (error) {
      console.error("Error checking user login status:", error);
      return false;
    }
  };

  const checkPlanTestNeeded = async () => {
    try {
      const response = await fetch("https://api.example.com/check-plan-test");
      const data = await response.json();
      const localData = await AsyncStorage.getItem("planTestData");

      const needsTest = data.needsTest || localData === null;

      return needsTest;
    } catch (error) {
      console.error("Error checking plan test status:", error);
      return false;
    }
  };

  const performPlanTest = async () => {
    try {
      const testData = await fetchTestPlanData();
      // 실제 프로젝트에서는 testData를 사용하여 테스트를 진행하는 로직을 구현합니다.
      navigation.navigate("PlanTestScreen");
    } catch (error) {
      console.error("Error performing plan test:", error);
    }
  };

  const fetchTestPlanData = async () => {
    const response = await fetch("https://api.example.com/test-plan-data");
    const data = await response.json();
    return data;
  };

  const handleLogin = async () => {
    try {
      const response = await fetch("https://api.example.com/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ username: "example", password: "password" }),
      });

      const loginSuccess = await response.json();

      if (loginSuccess) {
        await AsyncStorage.setItem("userLoggedIn", "true");
        setLoggedIn(true);
        setShowLogo(false);
      } else {
        console.error("Login failed. Please check your credentials.");
      }
    } catch (error) {
      console.error("Error during login:", error);
    }
  };

  const renderLogo = () => {
    return (
      
        
      
    );
  };

  const renderLoginButton = () => {
    return (
      
        
      
    );
  };

  const renderContent = () => {
    if (showLogo) {
      return renderLogo();
    } else if (!loggedIn) {
      return renderLoginButton();
    } else {
      return (
        
          앱의 메인 화면
        
      );
    }
  };

  return (
    
      {renderContent()}
    
  );
};

export default App;