feat: 디자인 시스템 Button, TextField 컴포넌트 추가

packages/design-system/index.ts

@@ -1,3 +1,4 @@
 export * from './src/Button';
 export * from './src/Font';
 export { SocialLogin } from './src/SocialLogin';
+export * from './src/TextField';

packages/design-system/src/Button.tsx

@@ -1,17 +1,23 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
 
 export type ButtonProps = {
   onPress: () => void;
-  text: string;
+  disabled: boolean;
+  children: ReactNode;
 };
 
-export const Button = ({ text, onPress }: ButtonProps) => (
-  <TouchableOpacity
-    className="px-4 py-2 flex justify-start bg-purple-700 rounded-md"
-    onPress={onPress}
-    activeOpacity={0.8}
-  >
-    <Text className="text-white text-base font-pb">{text}</Text>
-  </TouchableOpacity>
-);
+export const Button = ({ onPress, disabled, children }: ButtonProps) => {
+  return (
+    <TouchableOpacity
+      className={`py-[11px] w-full rounded-[24px] justify-center items-center ${
+        disabled ? 'bg-Button-gray opacity-40' : 'bg-Button-red'
+      }`}
+      onPress={onPress}
+      activeOpacity={0.8}
+      disabled={disabled}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};

packages/design-system/src/Font.tsx

@@ -14,10 +14,11 @@ const COLOR_PREFIX = {
 } as const;
 
 const FONT_TYPE_PREFIX = {
-  body1: 'text-[16px] leading-[24px]',
   title1: 'text-[22px] leading-[30px]',
   mainTitle: 'text-[26px] leading-[30px]',
+  body1: 'text-[16px] leading-[24px]',
   body2: 'text-[14px] leading-[18px]',
+  body3: 'text-[12px] leading-[16px]',
 };
 
 export type Color = keyof typeof COLOR_PREFIX;

packages/design-system/src/TextField.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { TextInput } from 'react-native';
+
+interface TextField {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  placeholder: string;
+  validate: () => boolean;
+}
+
+export function TextField({
+  value,
+  onChange,
+  placeholder,
+  onSubmit,
+  validate,
+}: TextField) {
+  const defaultClassName =
+    'text-SPOT-black text-body2 rounded-md p-4 bg-SPOT-white/60';
+  const incorrectClassName = 'border-SPOT-red border-[2px]';
+  const correctClassName = 'border-Permission-green border-[2px]';
+
+  const getBorderClassName = () => {
+    if (typeof validate === 'function') {
+      return validate() ? correctClassName : incorrectClassName;
+    }
+
+    return 'border-none';
+  };
+
+  return (
+    <TextInput
+      value={value}
+      onChangeText={onChange}
+      placeholder={placeholder}
+      placeholderTextColor="#ffffff"
+      className={`${defaultClassName} ${getBorderClassName()}`}
+      onSubmitEditing={onSubmit}
+    />
+  );
+}

packages/design-system/stories/Button.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../src/Button';
+import { Font } from '../src/Font';
+
+const meta = {
+  title: 'Spots/Button',
+  component: ({ ...props }) => (
+    <div
+      style={{
+        width: '300px',
+      }}
+    >
+      <Button {...props} />
+    </div>
+  ),
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+
+  argTypes: {
+    disabled: {
+      options: [true, false],
+      control: 'radio',
+    },
+    children: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    children: (
+      <Font type="body1" color="white">
+        완료
+      </Font>
+    ),
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const defaultStory: Story = {
+  args: {
+    disabled: false,
+    onPress: () => {},
+  },
+};

packages/design-system/stories/TextField.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextField } from '../src/TextField';
+import { useState } from 'react';
+
+const correct = () => true;
+const incorrect = () => false;
+
+const meta = {
+  title: 'Spots/TextField',
+  component: ({ placeholder, onSubmit, validate }) => {
+    const [inputValue, setInputValue] = useState('');
+    return (
+      <TextField
+        value={inputValue}
+        onChange={(text) => setInputValue(text)}
+        placeholder={placeholder}
+        onSubmit={onSubmit}
+        validate={validate}
+      />
+    );
+  },
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+
+  argTypes: {
+    validate: {
+      options: [correct, incorrect],
+      control: 'radio',
+    },
+  },
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const defaultStory: Story = {
+  args: {
+    value: '',
+    onChange: () => {},
+    placeholder: 'SPOT-Placeholder',
+    onSubmit: () => {},
+    validate: () => true,
+  },
+};

packages/tailwind-config/tailwind.config.js

@@ -13,12 +13,16 @@ module.exports = {
         'SPOT-red': '#FF1919',
         'SPOT-black': '#0F0F0F',
         'SPOT-white': '#FFFFFF',
+        'Button-red': '#751010',
+        'Button-gray': '#4C4C4C',
+        'Permission-green': '#00FF75',
       },
       fontSize: {
-        body1: ['16px', '24px'],
         title1: ['22px', '30px'],
         mainTitle: ['26px', '30px'],
+        body1: ['16px', '24px'],
         body2: ['14px', '18px'],
+        body3: ['12px', '16px'],
       },
     },
   },