Feat/#4 임시 공용 컴포넌트를 추가한다.

[Zero-1016]

What is this PR? 🔍

1. 폰트 파일을 추가하였습니다. Typography를 사용하여 적절하게 사용하면 될 것 같습니다.

export function Typography({ children, variant, color, ...rest }: Props) {
  return (
    <StyledText
      variant={variant}
      style={color ? { color } : {}}
      {...rest}>
      {children}
    </StyledText>
  );
}

사용 예시

<Typography variant='Body2'>Welcome to Expo</Typography>

2. 임시 디자인 시스템, 공용 컴포넌트 제작(Button, Typography, Icon)

아직 디자인 시스템이 나오기 이전이라 임시로 만들어두었습니다. 추후에 수정할 예정입니다. 코드 작성 방식을 보여드리기 위해 임시로 작업하여 올려드립니다.

Button의 경우 이름이 있기에 CustomButton 이름으로 해두었습니다.

공용 컴포넌트의 경우 여러개의 태그들이 모여져서 만드는 것이 아니기에 Style 코드를 줄이고자 파일 하나로 통합을 해두었습니다. 많일 여러개가 될 경우 분리를 하는 편이 좋아보입니다.

3. device, screen 크기에 접근할 수있는 getSize 함수를 구현하였습니다.

const getSize = {
  deviceWidth: Dimensions.get('screen').width, // 전체 화면의 너비
  deviceHeight: Dimensions.get('screen').height, // 전체 화면의 높이
  screenWidth: Dimensions.get('window').width, // 상태 표시줄을 제외한 화면의 너비
  screenHeight: Dimensions.get('window').height, // 상태 표시줄을 제외한 화면의 높이
};

[sohyun215]

고생하셨습니다~! 작성해주신 코드 참고해서 컴포넌트 구현할게요!👍