qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: QSelect 컴포넌트 내 placeholder 옵셔널 처리로 수정

Browse Source
This commit is contained in:
Daseul Kim 2024-10-08 16:49:44 +09:00
parent 739259fe52
commit 8c16562292
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Playground.jsx
View File

@ -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: '개' },

10
src/components/common/select/QSelect.jsx
View File

@ -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}>
<option value="" disabled hidden> {placeholder?.length > 0 ? (
{placeholder} <option value="" disabled hidden>
</option> {placeholder}
</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}