|
| 1 | +import React, { useState } from 'react'; |
| 2 | + |
| 3 | +interface SearchInputProps { |
| 4 | + size: 'large' | 'medium'; |
| 5 | + value?: string; |
| 6 | + onSubmit?: (value: string) => void; |
| 7 | + onChange: (value: string) => void; |
| 8 | + placeholder?: string; |
| 9 | +} |
| 10 | + |
| 11 | +function SearchInput({ |
| 12 | + size = 'large', |
| 13 | + onChange, |
| 14 | + value = '', |
| 15 | + onSubmit = () => {}, |
| 16 | + placeholder = '검색어를 입력해 주세요', |
| 17 | +}: SearchInputProps) { |
| 18 | + const [isFocused, setIsFocused] = useState(false); |
| 19 | + |
| 20 | + // 크기별 스타일 |
| 21 | + const sizeStyles = { |
| 22 | + large: { |
| 23 | + container: 'w-[860px] h-[45px] ', |
| 24 | + padding: 'p-[20px] pl-[15px]', |
| 25 | + }, |
| 26 | + medium: { |
| 27 | + container: 'w-[800px] h-[40px] ', |
| 28 | + padding: 'p-[20px] pl-[15px]', |
| 29 | + }, |
| 30 | + }; |
| 31 | + |
| 32 | + const currentSize = sizeStyles[size]; |
| 33 | + |
| 34 | + const inputStyles = [ |
| 35 | + currentSize.container, |
| 36 | + currentSize.padding, |
| 37 | + 'rounded-lg', |
| 38 | + 'border-none', |
| 39 | + 'bg-gray-100', |
| 40 | + 'text-gray-500', |
| 41 | + 'text-16', |
| 42 | + 'placeholder:text-gray-400', |
| 43 | + isFocused |
| 44 | + ? 'outline outline-2 outline-green-100' |
| 45 | + : 'focus:outline-green-100', |
| 46 | + ].join(' '); |
| 47 | + |
| 48 | + function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) { |
| 49 | + onChange(e.target.value); // 부모 컴포넌트에 값 전달 |
| 50 | + } |
| 51 | + |
| 52 | + function handleSubmit(e: React.FormEvent) { |
| 53 | + e.preventDefault(); |
| 54 | + onSubmit(value); // 부모 컴포넌트에서 관리하는 value 전달 |
| 55 | + } |
| 56 | + |
| 57 | + return ( |
| 58 | + <form |
| 59 | + onSubmit={handleSubmit} |
| 60 | + className="flex items-center rounded-lg bg-gray-100 px-[20px]" |
| 61 | + > |
| 62 | + <label htmlFor="searchInput"> |
| 63 | + <img src="/icon/icon-search.svg" alt="검색" /> |
| 64 | + </label> |
| 65 | + <input |
| 66 | + id="searchInput" |
| 67 | + className={inputStyles} |
| 68 | + type="text" |
| 69 | + value={value} |
| 70 | + placeholder={placeholder} |
| 71 | + onChange={handleInputChange} |
| 72 | + onFocus={() => setIsFocused(true)} |
| 73 | + onBlur={() => setIsFocused(false)} |
| 74 | + /> |
| 75 | + </form> |
| 76 | + ); |
| 77 | +} |
| 78 | + |
| 79 | +export default SearchInput; |
0 commit comments