Merge pull request 'input 계산기추가(전각)' (#373) from dev into prd-deploy

Reviewed-on: #373
This commit is contained in:
ysCha 2025-09-30 14:26:46 +09:00
commit 60588d2184
2 changed files with 73 additions and 16 deletions

View File

@ -3,7 +3,7 @@ import { createCalculator } from '@/util/calc-utils'
import '@/styles/calc.scss' import '@/styles/calc.scss'
export const CalculatorInput = forwardRef( export const CalculatorInput = forwardRef(
({ value, onChange, label, options = {}, id, className = 'calculator-input', readOnly = false, placeholder }, ref) => { ({ value, onChange, label, options = {}, id, className = 'calculator-input', readOnly = false, placeholder, name='', disabled = false }, ref) => {
const [showKeypad, setShowKeypad] = useState(false) const [showKeypad, setShowKeypad] = useState(false)
const [displayValue, setDisplayValue] = useState(value || '0') const [displayValue, setDisplayValue] = useState(value || '0')
const [hasOperation, setHasOperation] = useState(false) const [hasOperation, setHasOperation] = useState(false)
@ -353,6 +353,7 @@ export const CalculatorInput = forwardRef(
ref={inputRef} ref={inputRef}
type="text" type="text"
id={id} id={id}
name={name}
value={displayValue} value={displayValue}
readOnly={readOnly} readOnly={readOnly}
className={className} className={className}
@ -363,6 +364,7 @@ export const CalculatorInput = forwardRef(
tabIndex={readOnly ? -1 : 0} tabIndex={readOnly ? -1 : 0}
placeholder={placeholder} placeholder={placeholder}
autoComplete={'off'} autoComplete={'off'}
disabled={disabled}
/> />
{showKeypad && !readOnly && ( {showKeypad && !readOnly && (

View File

@ -346,6 +346,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
/> */} /> */}
<CalculatorInput <CalculatorInput
id="" id=""
name=""
label="" label=""
className="input-origin block" className="input-origin block"
readOnly={currentRoof?.roofAngleSet !== item.value} readOnly={currentRoof?.roofAngleSet !== item.value}
@ -412,15 +413,33 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
<div className="flex-ment"> <div className="flex-ment">
<span>W</span> <span>W</span>
<div className="input-grid" style={{ width: '84px' }}> <div className="input-grid" style={{ width: '84px' }}>
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-origin block"*/}
{/* name={`width`}*/}
{/* ref={roofRef.width}*/}
{/* value={parseInt(currentRoof?.width)}*/}
{/* onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}*/}
{/* readOnly={currentRoof?.widAuth === 'R'}*/}
{/* disabled={currentRoof?.roofSizeSet === '3'}*/}
{/*/>*/}
<CalculatorInput
id=""
name={'width'}
label=""
className="input-origin block" className="input-origin block"
name={`width`}
ref={roofRef.width} ref={roofRef.width}
value={parseInt(currentRoof?.width)} value={currentRoof?.width||0}
onChange={(e) => changeInput(normalizeDigits(e.target.value), e)} onChange={(value) => {
setCurrentRoof({ ...currentRoof, value })
}}
readOnly={currentRoof?.widAuth === 'R'} readOnly={currentRoof?.widAuth === 'R'}
disabled={currentRoof?.roofSizeSet === '3'} disabled={currentRoof?.roofSizeSet === '3'}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
}}
/> />
</div> </div>
</div> </div>
@ -429,15 +448,33 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
<div className="flex-ment"> <div className="flex-ment">
<span>L</span> <span>L</span>
<div className="input-grid" style={{ width: '84px' }}> <div className="input-grid" style={{ width: '84px' }}>
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-origin block"*/}
{/* name={`length`}*/}
{/* ref={roofRef.length}*/}
{/* value={parseInt(currentRoof?.length)}*/}
{/* onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}*/}
{/* readOnly={currentRoof?.lenAuth === 'R'}*/}
{/* disabled={currentRoof?.roofSizeSet === '3'}*/}
{/*/>*/}
<CalculatorInput
id=""
name={'length'}
label=""
className="input-origin block" className="input-origin block"
name={`length`}
ref={roofRef.length} ref={roofRef.length}
value={parseInt(currentRoof?.length)} value={currentRoof?.length||0}
onChange={(e) => changeInput(normalizeDigits(e.target.value), e)} onChange={(value) => {
setCurrentRoof({ ...currentRoof, value })
}}
readOnly={currentRoof?.lenAuth === 'R'} readOnly={currentRoof?.lenAuth === 'R'}
disabled={currentRoof?.roofSizeSet === '3'} disabled={currentRoof?.roofSizeSet === '3'}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
}}
/> />
</div> </div>
</div> </div>
@ -465,16 +502,34 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
<div className="flex-ment"> <div className="flex-ment">
<span>{getMessage('hajebichi')}</span> <span>{getMessage('hajebichi')}</span>
<div className="input-grid" style={{ width: '84px' }}> <div className="input-grid" style={{ width: '84px' }}>
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-origin block"*/}
{/* name={`hajebichi`}*/}
{/* ref={roofRef.hajebichi}*/}
{/* value={parseInt(currentRoof?.hajebichi)}*/}
{/* onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}*/}
{/* readOnly={currentRoof?.roofPchAuth === 'R'}*/}
{/* disabled={currentRoof?.roofSizeSet === '3'}*/}
{/*/>*/}
<CalculatorInput
id=""
name={'hajebichi'}
label=""
className="input-origin block" className="input-origin block"
name={`hajebichi`}
ref={roofRef.hajebichi} ref={roofRef.hajebichi}
value={parseInt(currentRoof?.hajebichi)} value={currentRoof?.hajebichi||0}
onChange={(e) => changeInput(normalizeDigits(e.target.value), e)} onChange={(value) => {
setCurrentRoof({ ...currentRoof, value })
}}
readOnly={currentRoof?.roofPchAuth === 'R'} readOnly={currentRoof?.roofPchAuth === 'R'}
disabled={currentRoof?.roofSizeSet === '3'} disabled={currentRoof?.roofSizeSet === '3'}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
}}
/> />
</div> </div>
</div> </div>
)} )}