기업협업 3주차

• RN StyleSheet 에 조건부렌더링(삼항연산자)를 쓸수 있을까?
  구글링을 통해 짧게 살펴보았을때 어려운 것 같았다.
  그래서 원하는 style을 StyleSheet에서 객체를 하나 더 만든뒤에,
  JSX 에서 StyleSheet를 적용하는 부분에서 조건부렌더링을 걸었다.
  -> 이건 잘 작동됐.. 하튜하튜..
  

• remote 브랜치 삭제
  -git branch : 로컬 브랜치 확인
  -git branch -r : remote 브랜치 확인
  -git branch -a : 로컬, remote 브랜치 확인ㄴㄴㄴ
  -git remote prune remote : remote 브랜치가 삭제되어도, -r을 확인하면, 삭제된게 그대로 나오는 경우가 있다. 그럴경우에는 동기화를 시켜주면 된다
  -git branch -d 브랜치명 : 로컬 브랜치 삭제
  -git push origin --delete 브랜치명 : 리모트 브랜치 삭제

• RN TextInput ,
  -숫자패드 나타나게 하기 : keyboardType="number-pad"

• 수많은 useState로 조건부렌더링을 실행하고 있는데, 과연.. 이렇게 하는게 맞는건가요 ? 하면서도 의아하네욥..큭..

🐾 질문

• keyboardType="number-pad" 과 "numeric"의 차이는 뭘까요 - ?
• 하위 컴포넌트의 display:position의 left를 적용하면, 아래와 같은 오류가 난다.
  

10-11 stylesheet 삼항연산자
11-12 remote 브랜치 삭제

1-2 <인증번호 전송> 버튼 누르면, 다시 비활성화
2-3 <인증번호 전송 > 누르면 타이머 등장
3-4 <인증번호 전송 > 누르면 타이머 등장

4-5 <인증번호 작성>하면, <로그인 버튼 활성화>
5-6 <로그인 버튼 클릭> 후에, 틀린 경우 안내멘트 출력.
6-7

import React, { useEffect, useState } from 'react';
import {
  KeyboardAvoidingView,
  SafeAreaView,
  View,
  Pressable,
  Platform,
} from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
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',
  },
  inputPhoneNumber: {
    width: '198@s',
    height: '48@vs',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: colors.secondary,
    fontSize: 20,
    color: colors.gray800,
    paddingHorizontal: '9@s',
  },
  inputCertificationNumber: {
    height: '48@vs',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: colors.gray400,
    fontSize: 20,
    color: colors.gray800,
    paddingHorizontal: '9@s',
  },
  FlexCertificationNumberSection: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    position: 'relative',
  },
  buttonCertification: {
    width: '120@s',
    height: '48@vs',
    borderRadius: 4,
    borderWidth: 1,
    backgroundColor: colors.btnDisabled,
    borderColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonCertificationSecondary : {
    backgroundColor: colors.secondary,
  },
  buttonLogin: {
    height: '56@vs',
    borderWidth: 1,
    backgroundColor: colors.btnDisabled,
    borderColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textMarginBottom: {
    marginBottom: '8@vs',
  },
  margin20: {
    marginBottom: '20@vs',
  },
  margin16: {
    marginBottom: '16@vs',
  },
  iconCancel: {
    width: '24@vs',
    height: '24@vs',
  },
  iconCancelContainer: {
    position: 'absolute',
    left: '168@s',
    top: '13@vs',
  },
});

const LoginContainer = () => {
  useEffect(() => {
    LoginActions.autoSignIn();
  }, []);
  const [phoneNumber, setPhoneNumber] = useState('');
  const handleChangeText = (text) => {
    setPhoneNumber(text);
  };
  const clearText = () => {
    setPhoneNumber('');
  };
  const handleCancel = () => {
    if (phoneNumber && Platform.OS === 'android') {
      return (
        <Pressable onPress={clearText} style={styles.iconCancelContainer}>
          <FastImage
            style={styles.iconCancel}
            source={cancelIcon}
          />
        </Pressable>
      );
    }
    return null;
  };
  const handleCertificationNumber = () => {
    console.log('CertificationNumber');
  };
  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
                style={styles.inputPhoneNumber}
                autoFocus
                autoCapitalize="none"
                autoCorrect={false}
                returnKeyType="done"
                clearButtonMode="always"
                onChangeText={(text) => handleChangeText(text)}
                value={phoneNumber}
                keyboardType="numeric"
              />
              {handleCancel()}
              <Pressable style={[styles.buttonCertification, phoneNumber && styles.buttonCertificationSecondary]} onPress={handleCertificationNumber}>
                <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}
              autoCapitalize="none"
              autoCorrect={false}
              returnKeyType="done"
              keyboardType="numeric"
            />
          </View>
        </KeyboardAvoidingView>
      </View>

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