Button 컴포넌트 구현

Button.tsx

import styles from './Button.style';
import React, { type FC } from 'react';
import { type PressableProps, Pressable, Text } from 'react-native';

type Props = Omit<PressableProps, 'style' | 'children'> & {
  title: string;
  type?: 'primary' | 'secondary' | 'outline';
  size?: 'large' | 'medium' | 'small';
  wide?: boolean;
};

export const Button: FC<Props> = (props) => {
  const {
    title,
    type = 'primary',
    size = 'medium',
    wide = false,
    ...restProps
  } = props;

  return (
    <Pressable
      {...restProps}
      style={[
        styles.button,
        styles[`button_${size}`],
        styles[`button_background_${type}`],
        restProps.disabled &&
          (type === 'outline'
            ? styles.button_outline_disabled
            : styles.button_general_disabled),
        wide && styles.button_wide,
      ]}
    >
      <Text
        style={[
          styles.text,
          styles[`text_${size}`],
          type === 'outline'
            ? styles.text_outline_color
            : styles.text_general_color,
          restProps.disabled && styles.text_disabled,
        ]}
      >
        {title}
      </Text>
    </Pressable>
  );
};

Button.style.ts

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
  },
  button_large: {
    paddingHorizontal: 36,
    paddingVertical: 14,
  },
  button_medium: {
    paddingHorizontal: 24,
    paddingVertical: 10,
  },
  button_small: {
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  button_background_primary: {
    backgroundColor: '#6e57fa',
  },
  button_background_secondary: {
    backgroundColor: '#ef4343',
  },
  button_background_outline: {
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: '#6e57fa',
  },
  button_general_disabled: {
    backgroundColor: '#f3f4f9',
  },
  button_outline_disabled: {
    backgroundColor: '#fff',
    borderColor: '#bdc2cb',
  },
  button_wide: {
    width: '100%',
  },
  text: {
    fontWeight: '500',
  },
  text_large: {
    fontSize: 16,
    lineHeight: 20,
  },
  text_medium: {
    fontSize: 14,
    lineHeight: 18,
  },
  text_small: {
    fontSize: 12,
    lineHeight: 15,
  },
  text_general_color: {
    color: '#fff',
  },
  text_outline_color: {
    color: '#6e57fa',
  },
  text_disabled: {
    color: '#aeb1ba',
  },
});

export default styles;

설명

props

• Pressable 기반의 버튼 컴포넌트이기 때문에 기본적으로 PressableProps를 버튼 props로 받는다.
• style은 디자인 시스템에서 정의하고 children은 string 타입만 받게 하기 위해 props에서 제외한다.
• children 대신 title이 추가되고, 버튼의 타입을 나타내는 type, 크기를 나타내는 size, 버튼의 width가 부모 요소를 꽉 채우는 지 여부를 나타내는 wide 가 버튼의 props 로 추가된다.

style

• 리액트 네이티브에서 제공하는 StyleSheet 을 사용한다.
• props 에 맞게 버튼이 디자인된다.

시연 이미지