[Feat] TextField 컴포넌트 구현

apps/web/package.json

@@ -16,7 +16,8 @@
     "next": "14.2.21",
     "overlay-kit": "^1.4.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-hook-form": "^7.54.2"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",

apps/web/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import Link from 'next/link';
+import { useForm } from 'react-hook-form';
 import {
   Icon,
   Toast,
@@ -10,10 +10,29 @@ import {
   Checkbox,
   Label,
   Breadcrumb,
+  TextField,
 } from '@repo/ui';
 import { overlay } from 'overlay-kit';
+import Link from 'next/link';
+
+type FormValues = {
+  topic: string;
+  aiUpgrade: string;
+};
 
 export default function Home() {
+  const { register, handleSubmit } = useForm<FormValues>({
+    defaultValues: {
+      topic: '',
+      aiUpgrade: '',
+    },
+  });
+
+  const onSubmit = (data: FormValues) => {
+    console.log('Form data:', data);
+    notify1(); // 성공 토스트 표시
+  };
+
   const notify1 = () =>
     overlay.open(({ isOpen, close, unmount }) => (
       <Toast
@@ -108,6 +127,46 @@ export default function Home() {
         <Label variant="required">어떤 글을 생성할까요?</Label>
         <Label variant="optional">어떤 글을 생성할까요?</Label>
       </div>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <TextField id="basic-field">
+            <TextField.Label>주제</TextField.Label>
+            <TextField.Input
+              placeholder="주제를 적어주세요"
+              maxLength={500}
+              {...register('topic', {
+                required: '주제를 입력해주세요',
+                maxLength: {
+                  value: 500,
+                  message: '500자 이내로 입력해주세요',
+                },
+              })}
+            />
+          </TextField>
+
+          <TextField id="ai-field" variant="button">
+            <TextField.Label>AI 업그레이드</TextField.Label>
+            <TextField.Input
+              placeholder="AI에게 요청하여 글 업그레이드하기"
+              maxLength={500}
+              showCounter
+              {...register('aiUpgrade')}
+            />
+            <TextField.Submit type="submit" />
+          </TextField>
+
+          <TextField id="ai-field" variant="button" isError>
+            <TextField.Label>AI 업그레이드</TextField.Label>
+            <TextField.Input
+              placeholder="AI에게 요청하여 글 업그레이드하기"
+              maxLength={500}
+              showCounter
+              {...register('aiUpgrade')}
+            />
+            <TextField.Submit type="submit" />
+          </TextField>
+        </div>
+      </form>
       <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
         <Breadcrumb>
           <Breadcrumb.Item>

packages/ui/src/components/TextField/TextField.css.ts

@@ -0,0 +1,114 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { vars } from '@repo/theme';
+
+export const textFieldWrapperStyle = style({
+  position: 'relative',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.space[8],
+});
+
+export const textFieldStyle = recipe({
+  base: {
+    width: '100%',
+    minHeight: '59px',
+    padding: '16px',
+    borderRadius: '12px',
+    border: 'none',
+    outline: 'none',
+    resize: 'none',
+    overflow: 'hidden',
+    color: vars.colors.grey700,
+    fontSize: vars.typography.fontSize[18],
+    fontWeight: vars.typography.fontWeight.medium,
+    lineHeight: '150%',
+    fontFamily: 'inherit',
+    transition: 'all 0.2s ease',
+  },
+  variants: {
+    variant: {
+      default: {
+        backgroundColor: vars.colors.grey25,
+        color: vars.colors.grey900,
+        paddingRight: '16px',
+        '::placeholder': {
+          color: vars.colors.grey400,
+        },
+      },
+      button: {
+        backgroundColor: vars.colors.grey50,
+        color: vars.colors.grey900,
+        paddingRight: '48px',
+        '::placeholder': {
+          color: vars.colors.grey400,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export const submitButtonStyle = recipe({
+  base: {
+    position: 'absolute',
+    bottom: '45px',
+    right: vars.space[12],
+    width: '32px',
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: 'none',
+    background: 'transparent',
+    padding: 0,
+    cursor: 'pointer',
+
+    ':hover': {
+      opacity: 0.8,
+    },
+  },
+  variants: {
+    isError: {
+      true: {
+        cursor: 'not-allowed',
+      },
+    },
+  },
+});
+
+export const counterStyle = recipe({
+  base: {
+    fontSize: vars.typography.fontSize[16],
+    fontWeight: vars.typography.fontWeight.medium,
+    margin: `0 ${vars.space[8]}`,
+    lineHeight: '1.5',
+    textAlign: 'right',
+  },
+  variants: {
+    isError: {
+      false: {
+        color: vars.colors.grey500,
+      },
+      true: {
+        color: vars.colors.warning,
+      },
+    },
+  },
+  defaultVariants: {
+    isError: false,
+  },
+});
+
+export const labelStyle = recipe({
+  variants: {
+    isError: {
+      true: {
+        color: vars.colors.warning,
+      },
+    },
+  },
+});

packages/ui/src/components/TextField/TextField.tsx

@@ -0,0 +1,55 @@
+import { TextFieldRoot } from './TextFieldRoot';
+import { TextFieldLabel } from './TextFieldLabel';
+import { TextFieldInput } from './TextFieldInput';
+import { TextFieldSubmit } from './TextFieldSubmit';
+
+/**
+ *
+ * @example
+ * // 1. 기본값이 있는 비제어 컴포넌트
+ * <TextField variant="button">
+ *   <TextField.Label>메시지</TextField.Label>
+ *   <TextField.Input
+ *     placeholder="메시지를 입력하세요"
+ *     {...register('message', {
+ *       value: '초기값'
+ *     })}
+ *   />
+ *   <TextField.Submit type="submit" />
+ * </TextField>
+ *
+ * // 2. onChange 이벤트가 필요한 제어 컴포넌트
+ * <TextField>
+ *   <TextField.Input
+ *     {...register('message')}
+ *     onChange={(e) => {
+ *       register('message').onChange(e);
+ *       setValue('message', e.target.value);
+ *     }}
+ *   />
+ * </TextField>
+ *
+ * // 3. 유효성 검사와 에러 상태를 포함한 컴포넌트
+ * <TextField error={!!errors.message}>
+ *   <TextField.Input
+ *     {...register('message', {
+ *       required: '메시지를 입력해주세요',
+ *       maxLength: {
+ *         value: 500,
+ *         message: '최대 500자까지 입력 가능합니다'
+ *       }
+ *     })}
+ *   />
+ * </TextField>
+ */
+export const TextField = Object.assign(TextFieldRoot, {
+  Label: TextFieldLabel,
+  Input: TextFieldInput,
+  Submit: TextFieldSubmit,
+});
+
+export type { TextFieldProps } from './TextFieldRoot';
+export type { TextFieldLabelProps } from './TextFieldLabel';
+export type { TextFieldInputProps } from './TextFieldInput';
+export type { TextFieldSubmitProps } from './TextFieldSubmit';
+export type { TextFieldCounterProps } from './TextFieldCounter';

packages/ui/src/components/TextField/TextFieldCounter.tsx

@@ -0,0 +1,27 @@
+import { counterStyle } from './TextField.css';
+import { ComponentPropsWithoutRef, forwardRef, useContext } from 'react';
+import { TextFieldContext } from './context';
+
+export type TextFieldCounterProps = {
+  current: number;
+  max: number;
+} & ComponentPropsWithoutRef<'span'>;
+
+export const TextFieldCounter = forwardRef<
+  HTMLSpanElement,
+  TextFieldCounterProps
+>(({ current, max, className = '', ...props }, ref) => {
+  const { isError } = useContext(TextFieldContext);
+
+  return (
+    <span
+      ref={ref}
+      className={`${counterStyle({ isError })} ${className}`}
+      {...props}
+    >
+      {current}/{max}
+    </span>
+  );
+});
+
+TextFieldCounter.displayName = 'TextField.Counter';

packages/ui/src/components/TextField/TextFieldInput.tsx

@@ -0,0 +1,98 @@
+import {
+  forwardRef,
+  ComponentPropsWithoutRef,
+  ChangeEvent,
+  useState,
+  useRef,
+  useEffect,
+  useContext,
+} from 'react';
+import { TextFieldContext } from './context';
+import { textFieldStyle } from './TextField.css';
+import { TextFieldCounter } from './TextFieldCounter';
+import { isNil, mergeRefs } from '@/utils';
+
+export type TextFieldInputProps = {
+  maxLength?: number;
+  showCounter?: boolean;
+  value?: string;
+  defaultValue?: string;
+} & Omit<
+  ComponentPropsWithoutRef<'textarea'>,
+  'maxLength' | 'value' | 'defaultValue'
+>;
+
+export const TextFieldInput = forwardRef<
+  HTMLTextAreaElement,
+  TextFieldInputProps
+>(
+  (
+    {
+      maxLength = 500,
+      showCounter = true,
+      value: controlledValue,
+      defaultValue,
+      className = '',
+      onChange,
+      ...props
+    },
+    ref
+  ) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      defaultValue ?? ''
+    );
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const { variant, id } = useContext(TextFieldContext);
+    const [isMultiline, setIsMultiline] = useState(false);
+
+    const value = controlledValue ?? uncontrolledValue;
+
+    const handleResizeHeight = () => {
+      const textarea = textareaRef.current;
+      if (isNil(textarea)) return;
+
+      // height 초기화
+      textarea.style.height = 'auto';
+
+      // 스크롤 높이에 따라 높이 조절
+      const newHeight = textarea.scrollHeight;
+      textarea.style.height = `${newHeight}px`;
+
+      // 한 줄 높이 = 상하패딩(32px) + 라인높이(27px) = 59px
+      setIsMultiline(newHeight > 59);
+    };
+
+    const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+      if (maxLength && e.target.value.length > maxLength) return;
+      if (isNil(controlledValue)) {
+        setUncontrolledValue(e.target.value);
+      }
+      handleResizeHeight();
+      onChange?.(e);
+    };
+
+    useEffect(() => {
+      handleResizeHeight();
+    }, [value]);
+
+    return (
+      <>
+        <textarea
+          rows={1}
+          id={id}
+          ref={mergeRefs(ref, textareaRef)}
+          className={`${textFieldStyle({ variant })} ${className}`}
+          value={value}
+          onChange={handleChange}
+          data-multiline={isMultiline}
+          {...props}
+        />
+        {showCounter && (
+          <TextFieldCounter current={value.length} max={maxLength} />
+        )}
+      </>
+    );
+  }
+);
+
+TextFieldInput.displayName = 'TextField.Input';