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

refactor: QInput, QSelect 컴포넌트 내 div 제거

Browse Source
This commit is contained in:
Daseul Kim 2024-10-08 18:15:33 +09:00
parent 8c16562292
commit a192c66c39
2 changed files with 34 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/common/input/QInput.jsx
View File

@ -41,32 +41,28 @@ export default function QInput({ type, readOnly = false, options = [], value, on
)
return (
<div className="input-content light">
<div className="input-wrap">
<div className="form-input">
{type === 'text' ? (
<div className="mb5">
<input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
</div>
) : type === 'radio' || type === 'checkbox' ? (
<div className="flx mb5">
{options?.map((option) => (
<div key={option.name} className={`d-${type}-radio light mr5`}>
<input
type={type}
name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
value={option.value}
id={option.id}
checked={type === 'radio' ? value === option.value : value.includes(option.value)}
onChange={(e) => handleChange(e, option.value)}
/>
<label htmlFor={option.id}>{option.name}</label>
</div>
))}
</div>
) : null}
<>
{type === 'text' ? (
<div className="mb5">
<input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
</div>
</div>
</div>
) : type === 'radio' || type === 'checkbox' ? (
<div className="flx mb5">
{options?.map((option) => (
<div key={option.name} className={`d-${type}-radio light mr5`}>
<input
type={type}
name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
value={option.value}
id={option.id}
checked={type === 'radio' ? value === option.value : value.includes(option.value)}
onChange={(e) => handleChange(e, option.value)}
/>
<label htmlFor={option.id}>{option.name}</label>
</div>
))}
</div>
) : null}
</>
)
}

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

@ -18,25 +18,17 @@ export default function QSelect({ placeholder, options, disabled = false, dark =
)
return (
<div className="input-content light">
<div className="input-wrap">
<div className="form-input">
<div className="mb5">
<select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
{placeholder?.length > 0 ? (
<option value="" disabled hidden>
{placeholder}
</option>
) : null}
{options.map((option) => (
<option key={option.name} value={option.value}>
{option.name}
</option>
))}
</select>
</div>
</div>
</div>
</div>
<select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
{placeholder && (
<option value="" disabled hidden>
{placeholder}
</option>
)}
{options.map((option) => (
<option key={option.name} value={option.value}>
{option.name}
</option>
))}
</select>
)
}