특이사항:

• Stylesheet.create를 여러번 사용하여 스타일 종류별로 오브젝트를 나누었습니다.

import { StyleSheet } from 'react-native';

const button = StyleSheet.create({
  common: {
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  primary: {
    backgroundColor: '#6535de',
  },
  secondary: {
    backgroundColor: '#dedede',
  },
  disabled: {
    backgroundColor: '#bebebe',
  },
});

const size = StyleSheet.create({
  sm: {
    height: 24,
  },
  md: {
    height: 32,
  },
  lg: {
    height: 40,
  },
  xl: {
    height: 48,
  },
});

const text = StyleSheet.create({
  primary: {
    color: 'white',
  },
  secondary: {
    color: '#1e1e1e',
  },
  disabled: {
    color: '#f3f3f3',
  },
});

const pressed = StyleSheet.create({
  primary: {
    backgroundColor: '#6b3dd9',
  },
  secondary: {
    backgroundColor: '#9f9f9f',
  },
  disabled: {
    backgroundColor: '#a1a1a1',
  },
});

export default { button, size, text, pressed };

// created by droomii in 2024/04/10
import { useState } from 'react';
import {
  GestureResponderEvent,
  Text,
  TouchableOpacity,
  TouchableOpacityProps,
} from 'react-native';

import styles from './Button.style';

interface Props extends TouchableOpacityProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg' | 'xl';
}

const ButtonBase = (props: Props) => {
  const {
    variant = 'primary',
    size = 'md',
    children,
    onPressIn,
    ...attr
  } = props;
  const [isPressed, setIsPressed] = useState(false);

  const handlePressIn = (e: GestureResponderEvent) => {
    setIsPressed(true);
    onPressIn?.(e);
  };

  return (
    <TouchableOpacity
      style={[
        styles.button.common,
        styles.button[variant],
        attr.disabled && styles.button.disabled,
        styles.size[size],
        isPressed && styles.pressed[variant],
      ]}
      activeOpacity={0.8}
      onPressIn={handlePressIn}
      {...attr}>
      <Text style={[styles.text[variant], attr.disabled && styles.text.disabled]}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

const Button = Object.assign(ButtonBase, {
  Primary: (props: Omit<Props, 'variant'>) => (
    <ButtonBase {...props} variant="primary" />
  ),
  Secondary: (props: Omit<Props, 'variant'>) => (
    <ButtonBase {...props} variant="secondary" />
  ),
});

export default Button;