refactor: QSelect 컴포넌트 내 placeholder 옵셔널 처리로 수정
This commit is contained in:
parent
739259fe52
commit
8c16562292
@ -195,7 +195,7 @@ export default function Playground() {
|
|||||||
<QSelect
|
<QSelect
|
||||||
value={selectedValue}
|
value={selectedValue}
|
||||||
onChange={setSelectedValue}
|
onChange={setSelectedValue}
|
||||||
placeholder="동물을 선택하세요"
|
// placeholder="동물을 선택하세요"
|
||||||
options={[
|
options={[
|
||||||
{ id: 's01', value: 'cat', name: '고양이' },
|
{ id: 's01', value: 'cat', name: '고양이' },
|
||||||
{ id: 's02', value: 'dog', name: '개' },
|
{ id: 's02', value: 'dog', name: '개' },
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { useCallback } from 'react'
|
import { useCallback } from 'react'
|
||||||
|
|
||||||
export default function QSelect({ placeholder = '', options, disabled = false, dark = false, value, onChange }) {
|
export default function QSelect({ placeholder, options, disabled = false, dark = false, value, onChange }) {
|
||||||
// const options = [
|
// const options = [
|
||||||
// { id: 's01', value: 'cat', name: '고양이' },
|
// { id: 's01', value: 'cat', name: '고양이' },
|
||||||
// { id: 's02', value: 'dog', name: '개' },
|
// { id: 's02', value: 'dog', name: '개' },
|
||||||
@ -23,9 +23,11 @@ export default function QSelect({ placeholder = '', options, disabled = false, d
|
|||||||
<div className="form-input">
|
<div className="form-input">
|
||||||
<div className="mb5">
|
<div className="mb5">
|
||||||
<select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
|
<select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
|
||||||
|
{placeholder?.length > 0 ? (
|
||||||
<option value="" disabled hidden>
|
<option value="" disabled hidden>
|
||||||
{placeholder}
|
{placeholder}
|
||||||
</option>
|
</option>
|
||||||
|
) : null}
|
||||||
{options.map((option) => (
|
{options.map((option) => (
|
||||||
<option key={option.name} value={option.value}>
|
<option key={option.name} value={option.value}>
|
||||||
{option.name}
|
{option.name}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user