企業提携最終日、貴重な作品

loginName

import React, { useEffect, useState } from 'react';
import {
  KeyboardAvoidingView,
  SafeAreaView,
  View,
  Pressable,
  Platform,
  TextInput,
} from 'react-native';
import FastImage from 'react-native-fast-image';
import { ScaledSheet } from '~/lib/scaling';
import { LoginActions } from '~/store/actionCreators';
import { CustomText } from '~/components/common/Text';
import { colors, globalStyles } from '~/themes';
import cancelIcon from '../../assets/common/icCancel.png';

const styles = ScaledSheet.create({
  container: {
    flex: 1,
    marginTop: '26@vs',
    paddingHorizontal: '16@s',
  },
  flexCertificationNumberSection: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    position: 'relative',
  },
  inputName: {
    width: '328@s',
    height: '48@vs',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: colors.secondary,
    fontSize: 20,
    color: colors.gray800,
    paddingHorizontal: '9@s',
  },
  buttonLogin: {
    height: '56@vs',
    borderWidth: 1,
    backgroundColor: colors.btnDisabled,
    borderColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonPrimary: {
    backgroundColor: colors.primary,
  },
  textMarginBottom: {
    marginBottom: '8@vs',
  },
  margin20: {
    marginBottom: '20@vs',
    position: 'relative',
  },
  margin16: {
    marginBottom: '16@vs',
  },
  iconCancel: {
    width: '24@vs',
    height: '24@vs',
  },
  iconCancelContainer: {
    position: 'absolute',
    left: '298@s',
    top: '13@vs',
  },
});

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

  const [username, setUsername] = useState('');
  const handleChangeText = (text) => {
    setUsername(text);
  };
  const handleClearText = () => {
    setUsername('');
  };
  const renderCancelIcon = () => {
    if (username && Platform.OS === 'android') {
      return (
        <Pressable onPress={handleClearText} style={styles.iconCancelContainer}>
          <FastImage
            style={styles.iconCancel}
            source={cancelIcon}
          />
        </Pressable>
      );
    }
    return null;
  };
  const handleLoginButton = () => {
    console.log('시작하기 성공');
  };

  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.margin16}>
            <CustomText
              size="sm"
              fontWeight="normal"
              color="gray600"
              style={styles.textMarginBottom}
            >
              사용자 이름
            </CustomText>
            <View style={styles.flexCertificationNumberSection}>
              <TextInput
                onChangeText={(text) => handleChangeText(text)}
                style={styles.inputName}
                autoFocus
                autoCapitalize="none"
                autoCorrect={false}
                returnKeyType="done"
                clearButtonMode="always"
                value={username}
              />
              {renderCancelIcon()}
            </View>
          </View>
        </KeyboardAvoidingView>
      </View>

      <Pressable style={[styles.buttonLogin, (username && styles.buttonPrimary)]} onPressOut={handleLoginButton} disabled={!username}>
        <CustomText size="md" fontWeight="light" color="white">
          시작하기
        </CustomText>
      </Pressable>
    </SafeAreaView>
  );
};
export default LoginName;