Merge pull request '[1308] 촌에 소수점 입력 - 처마,케라바 수정' (#422) from dev_ysCha into dev

Reviewed-on: #422
This commit is contained in:
ysCha 2025-11-25 09:49:57 +09:00
commit b2799dacb8
4 changed files with 148 additions and 33 deletions

View File

@ -4,6 +4,7 @@ import { useState } from 'react'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
const { getMessage } = useMessage()
@ -21,17 +22,32 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
{getMessage('slope')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8}*/}
{/* ref={pitchRef}*/}
{/* onChange={(e) => {*/}
{/* const v = normalizeDecimalLimit(e.target.value, 2)*/}
{/* e.target.value = v*/}
{/* if (pitchRef?.current) pitchRef.current.value = v*/}
{/* }}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8}
ref={pitchRef}
onChange={(e) => {
const v = normalizeDecimalLimit(e.target.value, 2)
e.target.value = v
if (pitchRef?.current) pitchRef.current.value = v
value={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8}
onChange={(value) => {
if (pitchRef?.current) pitchRef.current.value = value
}}
/>
options={{
allowNegative: false,
allowDecimal: true //(index !== 0),
}}
></CalculatorInput>
</div>
<span className="thin">{pitchText}</span>
</div>
@ -40,17 +56,32 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
{getMessage('offset')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* defaultValue={500}*/}
{/* ref={offsetRef}*/}
{/* onChange={(e) => {*/}
{/* const v = normalizeDigits(e.target.value)*/}
{/* e.target.value = v*/}
{/* if (offsetRef?.current) offsetRef.current.value = v*/}
{/* }}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
defaultValue={500}
ref={offsetRef}
onChange={(e) => {
const v = normalizeDigits(e.target.value)
e.target.value = v
if (offsetRef?.current) offsetRef.current.value = v
value={500}
onChange={(value) => {
if (offsetRef?.current) offsetRef.current.value = value
}}
/>
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
}}
></CalculatorInput>
</div>
<span className="thin">mm</span>
</div>
@ -91,18 +122,33 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
<div className="eaves-keraba-th">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* defaultValue={500}*/}
{/* ref={widthRef}*/}
{/* readOnly={type === '1'}*/}
{/* onChange={(e) => {*/}
{/* const v = normalizeDigits(e.target.value)*/}
{/* e.target.value = v*/}
{/* if (widthRef?.current) widthRef.current.value = v*/}
{/* }}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
defaultValue={500}
ref={widthRef}
readOnly={type === '1'}
onChange={(e) => {
const v = normalizeDigits(e.target.value)
e.target.value = v
if (widthRef?.current) widthRef.current.value = v
value={500}
onChange={(value) => {
if (widthRef?.current) widthRef.current.value = value
}}
/>
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
}}
></CalculatorInput>
</div>
<span className="thin">mm</span>
</div>

View File

@ -3,6 +3,7 @@ import Image from 'next/image'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
const { getMessage } = useMessage()
@ -21,7 +22,19 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
{getMessage('offset')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />
{/*<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
ref={offsetRef}
value={300}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
}}
></CalculatorInput>
</div>
<span className="thin">mm</span>
</div>
@ -65,13 +78,29 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
{getMessage('slope')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}*/}
{/* ref={pitchRef}*/}
{/* readOnly={type === '1'}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}
ref={pitchRef}
value={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}
readOnly={type === '1'}
/>
onChange={(value) => {
if (pitchRef?.current) pitchRef.current.value = value
}}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
}}
></CalculatorInput>
</div>
<span className="thin">{pitchText}</span>
</div>
@ -91,7 +120,20 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
{getMessage('offset')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={800} ref={widthRef} readOnly={type === '1'} />
{/*<input type="text" className="input-origin block" defaultValue={800} ref={widthRef} readOnly={type === '1'} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
ref={widthRef}
value={800}
readOnly={type === '1'}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
}}
></CalculatorInput>
</div>
<span className="thin">mm</span>
</div>

View File

@ -1,4 +1,5 @@
import { useMessage } from '@/hooks/useMessage'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Shed({ offsetRef }) {
const { getMessage } = useMessage()
@ -10,7 +11,19 @@ export default function Shed({ offsetRef }) {
{getMessage('offset')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" ref={offsetRef} defaultValue={300} />
{/*<input type="text" className="input-origin block" ref={offsetRef} defaultValue={300} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
ref={offsetRef}
value={300}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
}}
></CalculatorInput>
</div>
<span className="thin">mm</span>
</div>

View File

@ -1,6 +1,7 @@
import { useMessage } from '@/hooks/useMessage'
import Image from 'next/image'
import { useState } from 'react'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function WallMerge({ offsetRef, radioTypeRef }) {
const { getMessage } = useMessage()
@ -51,7 +52,20 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
{getMessage('offset')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} readOnly={type === '1'} />
{/*<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} readOnly={type === '1'} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
ref={offsetRef}
value={300}
readOnly={type === '1'}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
}}
></CalculatorInput>
</div>
<span className="thin">mm</span>
</div>