ν°μ€ν 리 λ·°
μΉ΄ν
κ³ λ¦¬ μμ
π‘ TextField μ»΄ν¬λνΈ μ¬μ© μμ (React + Tailwind)
B_log 2025. 5. 18. 13:41λ°μν
π‘ 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
- Triangle#Sorting#Codility#Python
- ν νλ‘μ νΈ#λ°±μ€μκ³ λ¦¬μ¦#Python
- 곡μ κΈ° μ€μΉ#BOJ#μ΄λΆνμ#Python
- μμ΄μ¬μ΄ν΄#BOJ#Python
- λ³λ λμ΄νΈ#BOJ#νμλ²#Python
- λ μ§ κ³μ°#BOJ#μμ νμ#Python
- λ°±μ€ μκ³ λ¦¬μ¦#BackTracking
- μΏΌλνΈλ¦¬#BOJ#λΆν μ 볡#Python
- 리λͺ¨μ»¨#μμ νμ#BOJ#Python
- Brackets#Stacks and Queues#Codility#Python
- filter#isalnum#lower
- λ―Έλ‘ νμ#λ°±μ€μκ³ λ¦¬μ¦#Python
- λ°°μ΄ν©μΉκΈ°#λΆν μ 볡#BOJ#Python
- ν°νλΉμΉ#리μ½#xbox#controller
- NumberofDiscIntersections#Codility#Sort#Python
- λμ μλ₯΄κΈ°#μ΄λΆνμ#BOJ#Python
- μ¬μκ°μ#λ°±μ€μκ³ λ¦¬μ¦#Python
- ν λ§ν #λ°±μ€μκ³ λ¦¬μ¦#Python
- λ무μλ₯΄κΈ°#BOJ#μ΄λΆνμ#Python
- django#slicing
- Distinct#Codility#Python
- API#lazy#
- λ°λ³΅μμ΄#λ°±μ€μκ³ λ¦¬μ¦#Python
- django
- Swift#Tuples#Range
- PassingCars#Codility#Python
- μνΈμ½λ#dp#BOJ#Python
- NμΌλ‘ νν#DP#Programmers#Python
- μ’ μ΄μλ₯΄κΈ°#λΆν μ 볡#BOJ#Python
- νμ΄μ¬μκ³ λ¦¬μ¦μΈν°λ·°#4μ₯
μΌ | μ | ν | μ | λͺ© | κΈ | ν |
---|---|---|---|---|---|---|
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 |
κΈ λ³΄κ΄ν¨