m-uix에서 사용되는 변수값들(size, block, type, …)을 차용하여 작업을 진행

디자인은 구선님이 잡아주신 부분을 참고하였음 (뉴로우 리뉴얼 – Figma)

props 설명

• children : 버튼 텍스트, 기본값 확인
• size : 버튼 크기(S, M, L, XL), 기본값 M
• onPress : 버튼 클릭시 동작
• block : 버튼이 화면을 좌우로 꽉 채우는지 여부, 기본값 false
• disabled : 버튼 비활성화 여부, 기본값 false
• type : 버튼 타입(Primary, Outline, Ghost), 기본값 Primary

코드

Button.tsx

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

type Props = {
  children?: string; // 버튼 텍스트
  size?: 'S' | 'M' | 'L' | 'XL'; // 버튼 크기
  onPress?: () => void; // 버튼 클릭시 동작
  block?: boolean; // 버튼이 화면을 좌우로 꽉 채우는지 여부
  disabled?: boolean; // 버튼 비활성화 여부
  type?: 'Primary' | 'Outline' | 'Ghost'; // 버튼 타입
};

const Button = ({
  children = '확인',
  size = 'M',
  onPress,
  block = false,
  disabled = false,
  type = 'Primary',
}: Props) => {
  return (
    <Pressable
      style={[
        styles.button,
        styles[`button${size}`],
        styles[`button${type}`],
        block && styles.buttonBlock,
        disabled && styles[`button${type}Disabled`],
      ]}
      onPress={onPress}
      disabled={disabled}
    >
      <Text
        style={[
          styles.buttonText,
          styles[`button${size}Text`],
          styles[`button${type}Text`],
          disabled && styles[`button${type}DisabledText`],
        ]}
      >
        {children}
      </Text>
    </Pressable>
  );
};

export default Button;

Button.style.ts

import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  // 기본 스타일
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 16,
    borderRadius: 10,
  },
  buttonText: {
    fontWeight: '500',
  },

  // 사이즈에 따른 스타일
  buttonS: {
    height: 36,
    paddingHorizontal: 14,
  },
  buttonSText: {
    fontSize: 14,
    lineHeight: 20,
  },
  buttonM: {
    height: 40,
  },
  buttonMText: {
    fontSize: 14,
    lineHeight: 20,
  },
  buttonL: {
    height: 44,
    borderRadius: 12,
  },
  buttonLText: {
    fontSize: 16,
    lineHeight: 22,
  },
  buttonXL: {
    height: 48,
    borderRadius: 12,
  },
  buttonXLText: {
    fontSize: 16,
    lineHeight: 22,
  },

  // 전체를 채우는 버튼
  buttonBlock: {
    width: '100%',
  },

  // 타입에 따른 스타일
  buttonPrimary: {
    backgroundColor: '#6e57fa',
  },
  buttonPrimaryText: {
    color: '#fff',
  },
  buttonPrimaryDisabled: {
    backgroundColor: '#f3f4f9',
  },
  buttonPrimaryDisabledText: {
    color: '#949db6',
  },
  buttonSecondary: {
    borderWidth: 1,
    borderColor: '#4e5463',
    backgroundColor: '#fff',
  },
  buttonSecondaryText: {
    color: '#0d0c0c',
  },
  buttonSecondaryDisabled: {
    borderColor: '#f3f4f9',
  },
  buttonSecondaryDisabledText: {
    color: '#838ca3',
  },
  buttonGhost: {
    backgroundColor: 'transparent',
  },
  buttonGhostText: {
    color: '#0d0c0c',
  },
  buttonGhostDisabled: {
    backgroundColor: 'transparent',
  },
  buttonGhostDisabledText: {
    color: '#838ca3',
  },
});