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 ( return (
<div className="input-content light"> <>
<div className="input-wrap"> {type === 'text' ? (
<div className="form-input"> <div className="mb5">
{type === 'text' ? ( <input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
<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}
</div> </div>
</div> ) : type === 'radio' || type === 'checkbox' ? (
</div> <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 ( return (
<div className="input-content light"> <select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
<div className="input-wrap"> {placeholder && (
<div className="form-input"> <option value="" disabled hidden>
<div className="mb5"> {placeholder}
<select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}> </option>
{placeholder?.length > 0 ? ( )}
<option value="" disabled hidden> {options.map((option) => (
{placeholder} <option key={option.name} value={option.value}>
</option> {option.name}
) : null} </option>
{options.map((option) => ( ))}
<option key={option.name} value={option.value}> </select>
{option.name}
</option>
))}
</select>
</div>
</div>
</div>
</div>
) )
} }