[Feat/#5] text field

babel.config.js

@@ -1,9 +1,22 @@
+const path = require("path");
+
 module.exports = (api) => {
 	api.cache(true);
 	return {
 		presets: [
 			["babel-preset-expo", { jsxImportSource: "nativewind" }],
 			"nativewind/babel",
 		],
+		plugins: [
+			[
+				"module-resolver",
+				{
+					root: [path.resolve(__dirname, "src")],
+					alias: {
+						"@": path.resolve(__dirname, "src"),
+					},
+				},
+			],
+		],
 	};
 };

package.json

@@ -1,57 +1,60 @@
 {
-	"name": "assu_fe_rn",
-	"main": "expo-router/entry",
-	"version": "1.0.0",
-	"scripts": {
-		"start": "expo start",
-		"android": "expo start --android",
-		"ios": "expo start --ios",
-		"web": "expo start --web",
-		"typecheck": "tsc --noEmit",
-		"biome:lint": "biome lint ./src",
-		"biome:fix": "biome check --write ./src",
-		"biome:format": "biome format ./src --write"
-	},
-	"dependencies": {
-		"@expo/vector-icons": "^15.0.3",
-		"@react-navigation/bottom-tabs": "^7.4.0",
-		"@react-navigation/elements": "^2.6.3",
-		"@react-navigation/native": "^7.1.8",
-		"@tanstack/react-query": "^5.90.20",
-		"expo": "~54.0.33",
-		"expo-constants": "~18.0.13",
-		"expo-font": "~14.0.11",
-		"expo-haptics": "~15.0.8",
-		"expo-image": "~3.0.11",
-		"expo-linking": "~8.0.11",
-		"expo-router": "~6.0.23",
-		"expo-splash-screen": "~31.0.13",
-		"expo-status-bar": "~3.0.9",
-		"expo-symbols": "~1.0.8",
-		"expo-system-ui": "~6.0.9",
-		"expo-web-browser": "~15.0.10",
-		"nativewind": "^4.2.1",
-		"react": "19.1.0",
-		"react-dom": "19.1.0",
-		"react-native": "0.81.5",
-		"react-native-element-dropdown": "^2.12.4",
-		"react-native-gesture-handler": "~2.28.0",
-		"react-native-reanimated": "~4.1.1",
-		"react-native-safe-area-context": "~5.6.0",
-		"react-native-screens": "~4.16.0",
-		"react-native-web": "~0.21.0",
-		"react-native-worklets": "0.5.1",
-		"zustand": "^5.0.11"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "^2.3.14",
-		"@types/react": "~19.1.10",
-		"babel-plugin-module-resolver": "^5.0.2",
-		"eslint": "^9.25.0",
-		"eslint-config-expo": "~10.0.0",
-		"prettier-plugin-tailwindcss": "^0.7.2",
-		"tailwindcss": "3.4.17",
-		"typescript": "^5.9.3"
-	},
-	"private": true
+  "name": "assu_fe_rn",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "typecheck": "tsc --noEmit",
+    "biome:lint": "biome lint ./src",
+    "biome:fix": "biome check --write ./src",
+    "biome:format": "biome format ./src --write"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@hookform/resolvers": "^5.2.2",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "@tanstack/react-query": "^5.90.20",
+    "expo": "~54.0.33",
+    "expo-constants": "~18.0.13",
+    "expo-font": "~14.0.11",
+    "expo-haptics": "~15.0.8",
+    "expo-image": "~3.0.11",
+    "expo-linking": "~8.0.11",
+    "expo-router": "~6.0.23",
+    "expo-splash-screen": "~31.0.13",
+    "expo-status-bar": "~3.0.9",
+    "expo-symbols": "~1.0.8",
+    "expo-system-ui": "~6.0.9",
+    "expo-web-browser": "~15.0.10",
+    "nativewind": "^4.2.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.71.1",
+    "react-native": "0.81.5",
+    "react-native-element-dropdown": "^2.12.4",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.14",
+    "@types/react": "~19.1.10",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "tailwindcss": "3.4.17",
+    "typescript": "^5.9.3"
+  },
+  "private": true
 }

src/shared/styles/tokens.ts

@@ -31,4 +31,3 @@ export const colorTokens = {
 	/** global.styles.css: --color-content-inverse (blue-50) */
 	contentInverse: "#F4F6FE",
 } as const;
-

src/shared/ui/FormField/FormField.tsx

@@ -0,0 +1,49 @@
+import { Controller, type FieldValues } from "react-hook-form";
+import { View } from "react-native";
+import { FormFieldHelper } from "./FormFieldHelper";
+import { FormFieldInput } from "./FormFieldInput";
+import { FormFieldLabel } from "./FormFieldLabel";
+import type { FormFieldProps } from "./types";
+
+export function FormField<T extends FieldValues>({
+	control,
+	name,
+	label,
+	appearance = "filled",
+	rightElement,
+	helperText,
+	labelColor,
+	...inputProps
+}: FormFieldProps<T>) {
+	return (
+		<Controller
+			control={control}
+			name={name}
+			render={({ field, fieldState }) => {
+				//todo: 일단 에러메세지 추출만 함
+				const errorMessage = fieldState.error?.message;
+				const message = helperText;
+
+				return (
+					<View className="mb-[10px]">
+						{label && (
+							<FormFieldLabel color={labelColor}>{label}</FormFieldLabel>
+						)}
+
+						<FormFieldInput
+							{...inputProps}
+							appearance={appearance}
+							value={String(field.value ?? "")}
+							onChangeText={field.onChange}
+							onBlur={field.onBlur}
+							hasError={Boolean(errorMessage)}
+							rightElement={rightElement}
+						/>
+
+						{message && <FormFieldHelper>{message}</FormFieldHelper>}
+					</View>
+				);
+			}}
+		/>
+	);
+}

src/shared/ui/FormField/FormFieldHelper.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { Text } from "react-native";
+import { colorTokens } from "@/shared/styles/tokens";
+
+type Props = {
+	children: ReactNode;
+};
+
+export function FormFieldHelper({ children }: Props) {
+	return (
+		<Text
+			className="mt-3 text-[11px] text-right"
+			style={{
+				color: colorTokens.contentSecondary,
+			}}
+		>
+			{children}
+		</Text>
+	);
+}

src/shared/ui/FormField/FormFieldInput.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { TextInput, View } from "react-native";
+import { colorTokens } from "@/shared/styles/tokens";
+import type { FormFieldAppearance, FormFieldInputProps } from "./types";
+
+//formField가 크게 두가지 버전으로 존재함.
+const APPEARANCE_STYLES: Record<
+	FormFieldAppearance,
+	{ backgroundColor: string; borderColor: string }
+> = {
+	filled: {
+		backgroundColor: colorTokens.neutral,
+		borderColor: colorTokens.neutral,
+	},
+	outlined: {
+		backgroundColor: colorTokens.canvas,
+		borderColor: colorTokens.contentSecondary,
+	},
+};
+
+export function FormFieldInput({
+	appearance = "filled",
+	fontSize = 17,
+	inputBackgroundColor,
+	inputBorderColor,
+	inputTextColor,
+	inputStyle,
+	rightElement,
+	multiline,
+	hasError,
+	onFocus,
+	onBlur,
+	...props
+}: FormFieldInputProps) {
+	const [isFocused, setIsFocused] = useState(false);
+
+	const baseStyle = APPEARANCE_STYLES[appearance];
+
+	const borderColor = hasError
+		? colorTokens.danger
+		: isFocused
+			? colorTokens.primary
+			: baseStyle.borderColor;
+
+	const finalBackgroundColor = inputBackgroundColor
+		? colorTokens[inputBackgroundColor]
+		: baseStyle.backgroundColor;
+
+	const finalTextColor = inputTextColor
+		? colorTokens[inputTextColor]
+		: colorTokens.contentPrimary;
+
+	return (
+		<View
+			className="flex-row items-center rounded-lg px-[15px] border"
+			style={{
+				backgroundColor: finalBackgroundColor,
+				borderColor: inputBorderColor
+					? colorTokens[inputBorderColor]
+					: borderColor,
+				minHeight: 50,
+				height: multiline ? undefined : 50,
+			}}
+		>
+			<TextInput
+				{...props}
+				multiline={multiline}
+				underlineColorAndroid="transparent"
+				className="flex-1"
+				style={[
+					{
+						fontSize,
+						color: finalTextColor,
+						textAlignVertical: multiline ? "top" : "center",
+					},
+					inputStyle,
+				]}
+				placeholderTextColor={colorTokens.contentSecondary}
+				onFocus={(e) => {
+					setIsFocused(true);
+					onFocus?.(e);
+				}}
+				onBlur={(e) => {
+					setIsFocused(false);
+					onBlur?.(e);
+				}}
+			/>
+
+			{rightElement && <View className="ml-2">{rightElement}</View>}
+		</View>
+	);
+}

src/shared/ui/FormField/FormFieldLabel.tsx

@@ -0,0 +1,21 @@
+import { Text } from "react-native";
+import { colorTokens } from "@/shared/styles/tokens";
+import type { ColorTokenKey } from "./types";
+
+type Props = {
+	children: string;
+	color?: ColorTokenKey;
+};
+
+export function FormFieldLabel({ children, color }: Props) {
+	return (
+		<Text
+			className="mb-[5px] text-[13px] font-semibold"
+			style={{
+				color: color ? colorTokens[color] : colorTokens.contentSecondary,
+			}}
+		>
+			{children}
+		</Text>
+	);
+}