💡 TextField 컴포넌트 사용 예시 (React + Tailwind)

💡 TextField 컴포넌트 사용 예시 (React + Tailwind)

앞서 만든 텍스트 필드를 실제 프로젝트에서 어떻게 사용하는지 보여드리겠습니다.
아래는 App.jsx 또는 특정 페이지 컴포넌트에서 사용할 수 있는 예시입니다.

---

🧱 1. TextField 컴포넌트 만들기 (TextField.jsx)

import React from 'react'

function TextField({
  placeholder = '텍스트를 입력하세요',
  value,
  onChange,
  fontClass = 'text-base font-medium',
  borderClass = 'border border-gray-200 rounded-xl',
  paddingClass = 'px-4 py-3',
}) {
  return (
    <input
      type="text"
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      className={`
        w-full bg-white placeholder-gray-400
        ${fontClass} ${borderClass} ${paddingClass}
        focus:outline-none focus:ring-2 focus:ring-blue-400 transition
      `}
    />
  )
}

export default TextField

---

🧪 2. 사용하는 예시 (App.jsx)

import { useState } from 'react'
import TextField from './TextField'

function App() {
  const [title, setTitle] = useState('')

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-6">
      <div className="w-full max-w-xl space-y-4">
        <label className="text-gray-700 font-semibold text-sm">
          모임 제목을 입력해주세요
        </label>

        <TextField
          placeholder="예: 삼겹살 파티, 디자인 회식"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          fontClass="text-lg font-semibold"
          borderClass="border border-gray-200 rounded-xl"
          paddingClass="px-5 py-3"
        />

        <div className="text-sm text-gray-500">입력된 제목: {title}</div>
      </div>
    </div>
  )
}

export default App

---

✅ 결과 UI 특징

• 깔끔하고 둥근 테두리
• 폰트 사이즈와 굵기 조절 가능
• placeholder는 흐릿하게 표시
• 포커스 시 파란 테두리(ring-blue-400)
• 입력 결과는 실시간 아래에 표시

---

📌 커스터마이징 팁

커스터마이징 요소	바꾸는 prop
입력창 크기	w-full 또는 부모 div의 max-w
텍스트 크기	fontClass="text-sm" 등
여백 조정	paddingClass="px-3 py-2"
테두리 강조	borderClass="border border-blue-500"

---

이제 TextField를 다양한 입력값에 맞게 자유롭게 확장해서 사용할 수 있습니다!
필요하시면 Form 전체 구성, 유효성 검사, 에러 메시지 표시 등도 이어서 도와드릴게요 😊