feat: 회원가입 화면 생성

src/components/ui/Button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Pressable, type PressableProps, StyleSheet, View } from "react-native";
+import { Pressable, type PressableProps, StyleSheet } from "react-native";
 import { Theme } from "../../theme/theme";
 import AppText from "./AppText";
 
@@ -12,6 +12,7 @@ export default function Button({
   title,
   variant = "primary",
   style,
+  disabled,
   ...props
 }: Props) {
   const isPrimary = variant === "primary";
@@ -19,42 +20,42 @@ export default function Button({
   return (
     <Pressable
       {...props}
+      disabled={disabled}
       style={({ pressed }) => [
         styles.base,
         isPrimary ? styles.primary : styles.secondary,
-        pressed &&
+
+        // pressed 스타일(비활성화면 적용 안 함)
+        !disabled &&
+          pressed &&
           (isPrimary ? styles.primaryPressed : styles.secondaryPressed),
+
+        // disabled 스타일
+        disabled && styles.disabled,
+
         typeof style === "function" ? style({ pressed }) : style,
       ]}
     >
-      <View>
-        <AppText
-          style={{
-            textAlign: "center",
-            fontWeight: Theme.FontWeight.bold,
-            color: isPrimary ? Theme.Colors.text : Theme.Colors.text,
-          }}
-        >
-          {title}
-        </AppText>
-      </View>
+      <AppText
+        style={[
+          styles.text,
+          isPrimary ? styles.textPrimary : styles.textSecondary,
+          disabled && styles.textDisabled,
+        ]}
+      >
+        {title}
+      </AppText>
     </Pressable>
   );
 }
 
 const styles = StyleSheet.create({
   base: {
-    height: 48,
-    paddingVertical: 0,
-    paddingHorizontal: Theme.Spacing.lg,
+    paddingVertical: Theme.Spacing.md,
     borderRadius: Theme.Radius.md,
-    alignItems: "center", // 가로 가운데
-    justifyContent: "center", // 세로 가운데
-  },
-  text: {
-    textAlign: "center",
-    fontWeight: Theme.FontWeight.bold,
-    lineHeight: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 48,
   },
   primary: {
     backgroundColor: Theme.Colors.primary,
@@ -70,4 +71,22 @@ const styles = StyleSheet.create({
   secondaryPressed: {
     opacity: 0.9,
   },
+
+  disabled: {
+    opacity: 0.5,
+  },
+
+  text: {
+    textAlign: "center",
+    fontWeight: Theme.FontWeight.bold,
+  },
+  textPrimary: {
+    color: Theme.Colors.text,
+  },
+  textSecondary: {
+    color: Theme.Colors.text,
+  },
+  textDisabled: {
+    color: Theme.Colors.mutedText,
+  },
 });