LoginContainer

import React, { useEffect } from "react";
import {
  KeyboardAvoidingView,
  SafeAreaView,
  View,
  Pressable,
} from "react-native";
import { ScaledSheet } from "~/lib/scaling";
import { LoginActions } from "~/store/actionCreators";
import { CustomText } from "~/components/common/Text";
import { colors, globalStyles } from "~/themes";
import { TextInput } from "react-native-gesture-handler";

const styles = ScaledSheet.create({
  container: {
    flex: 1,
    marginTop: "26@vs",
    paddingHorizontal: "16@s",
  },
  inputPhoneNumber: {
    width: "198@vs",
    height: "48@s",
    borderRadius: 4,
    borderWidth: 1,
    borderColor: colors.secondary,
    fontSize: 20,
    color: colors.gray800,
    paddingHorizontal: "9@s",
  },
  inputCertificationNumber: {
    height: "48@s",
    borderRadius: 4,
    borderWidth: 1,
    borderColor: colors.gray400,
    paddingHorizontal: "8@vs",
    fontSize: 20,
    color: colors.gray800,
    paddingHorizontal: "9@s",
  },
  FlexCertificationNumberSection: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  buttonCertification: {
    width: "120@vs",
    height: "48@s",
    borderRadius: 4,
    borderWidth: 1,
    backgroundColor: colors.secondary,
    borderColor: "transparent",
    alignItems: "center",
    justifyContent: "center",
  },
  buttonLogin: {
    marginTop: "26@vs",
    height: "56@vs",
    borderWidth: 1,
    backgroundColor: colors.btn_disabled,
    borderColor: "transparent",
    alignItems: "center",
    justifyContent: "center",
  },
  textMarginBottom: {
    marginBottom: "8@vs",
  },
  margin20: {
    marginBottom: "20@vs",
  },
  margin16: {
    marginBottom: "16@vs",
  },
});

const LoginContainer = () => {
  useEffect(() => {
    LoginActions.autoSignIn();
  }, []);

  return (
    <SafeAreaView style={globalStyles.defaultFlexContainer}>
      <View style={styles.container}>
        <KeyboardAvoidingView
          style={styles.form}
          behavior={Platform.OS === "ios" ? "padding" : "height"}
          enabled
        >
          <View style={styles.margin20}>
            <CustomText size="xxl" fontWeight="bold">
              간편 로그인
            </CustomText>
          </View>

          <View style={styles.margin20}>
            <CustomText
              size="sm"
              fontWeight="normal"
              color="gray600"
              style={styles.textMarginBottom}
            >
              휴대폰 번호
            </CustomText>
            <View style={styles.FlexCertificationNumberSection}>
              <TextInput style={styles.inputPhoneNumber} autoFocus />
              <Pressable style={styles.buttonCertification}>
                <CustomText size="md" fontWeight="light" color="white">
                  인증번호 전송
                </CustomText>
              </Pressable>
            </View>
          </View>

          <View style={styles.margin20}>
            <CustomText
              size="sm"
              fontWeight="normal"
              color="gray600"
              style={styles.textMarginBottom}
            >
              인증번호
            </CustomText>
            <TextInput style={styles.inputCertificationNumber} />
          </View>
        </KeyboardAvoidingView>
      </View>

      <Pressable style={styles.buttonLogin}>
        <CustomText size="md" fontWeight="light" color="white">
          로그인
        </CustomText>
      </Pressable>
    </SafeAreaView>
  );
};

export default LoginContainer;