ν‹°μŠ€ν† λ¦¬ λ·°

λ°˜μ‘ν˜•

πŸ’‘ 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 전체 ꡬ성, μœ νš¨μ„± 검사, μ—λŸ¬ λ©”μ‹œμ§€ ν‘œμ‹œ 등도 μ΄μ–΄μ„œ λ„μ™€λ“œλ¦΄κ²Œμš” 😊

λ°˜μ‘ν˜•
λŒ“κΈ€
λ°˜μ‘ν˜•
곡지사항
μ΅œκ·Όμ— 올라온 κΈ€
μ΅œκ·Όμ— 달린 λŒ“κΈ€
Total
Today
Yesterday
링크
TAG more
Β«   2025/05   Β»
일 μ›” ν™” 수 λͺ© 금 ν† 
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
κΈ€ 보관함