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

Compare commits

base: qcast3:d747aee2840b2b1ce853f4829ff6a316bc0794d4
Branches Tags
qcast3:main
qcast3:prd-deploy
qcast3:dev-deploy
qcast3:dev
qcast3:feature/pv-btob
qcast3:hotfix/dev_yscha
qcast3:feature/redo-undo
qcast3:feature/jp_0615
qcast3:feature/roofline-edit2
qcast3:feature/roofline-edit
qcast3:hotfix/9999
qcast3:feature/qcast-1512
qcast3:feature/skeleton-dev
qcast3:feature/design-remake
qcast3:qcast-pub
qcast3:feature/sketon_cha
qcast3:feature/batch-angle
qcast3:feature/module-group
qcast3:feature/dev-yj
qcast3:feature/jimp-test
qcast3:feature/chore-env
qcast3:feature/jaeyoung
qcast3:feature/qcast-1052
qcast3:feature/qcast-1053
qcast3:feature/dev-yj-layout
qcast3:feature/qcast-886
qcast3:feature/module-grouping
qcast3:feature/qcast-944
qcast3:feature/qcast-950
qcast3:feature/qcast-947
qcast3:feature/qcast-925
..
compare: qcast3:902c6c1eaf078e3d16be96cb0448a2299ab29e8b
Branches Tags
qcast3:prd-deploy
qcast3:dev-deploy
qcast3:dev
qcast3:feature/pv-btob
qcast3:hotfix/dev_yscha
qcast3:feature/redo-undo
qcast3:feature/jp_0615
qcast3:feature/roofline-edit2
qcast3:feature/roofline-edit
qcast3:hotfix/9999
qcast3:feature/qcast-1512
qcast3:feature/skeleton-dev
qcast3:feature/design-remake
qcast3:qcast-pub
qcast3:feature/sketon_cha
qcast3:feature/batch-angle
qcast3:feature/module-group
qcast3:feature/dev-yj
qcast3:feature/jimp-test
qcast3:feature/chore-env
qcast3:feature/jaeyoung
qcast3:feature/qcast-1052
qcast3:feature/qcast-1053
qcast3:feature/dev-yj-layout
qcast3:feature/qcast-886
qcast3:feature/module-grouping
qcast3:feature/qcast-944
qcast3:feature/qcast-950
qcast3:feature/qcast-947
qcast3:feature/qcast-925
qcast3:main

No commits in common. "d747aee2840b2b1ce853f4829ff6a316bc0794d4" and "902c6c1eaf078e3d16be96cb0448a2299ab29e8b" have entirely different histories.
d747aee284 ... 902c6c1eaf

10 changed files with 75 additions and 478 deletions
Show Stats Expand all files Collapse all files

47
src/components/floor-plan/modal/lineTypes/Angle.jsx
View File

@ -1,7 +1,6 @@
import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Angle({ props }) {
const { getMessage } = useMessage()
@ -15,29 +14,14 @@ export default function Angle({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
<div className="input-grid" style={{ width: '63px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={angle1}*/}
{/* ref={angle1Ref}*/}
{/* onFocus={(e) => (angle1Ref.current.value = '')}*/}
{/* onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}*/}
{/* placeholder="45"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={angle1}
ref={angle1Ref}
onChange={(value) => setAngle1(value)}
onFocus={(e) => (angle1Ref.current.value = '')}
onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}
placeholder="45"
onFocus={() => (angle1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: true
}}
/>
</div>
<button
@ -50,29 +34,14 @@ export default function Angle({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length1}*/}
{/* ref={length1Ref}*/}
{/* onFocus={(e) => (length1Ref.current.value = '')}*/}
{/* onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={length1}
ref={length1Ref}
onChange={(value) => setLength1(value)}
onFocus={(e) => (length1Ref.current.value = '')}
onChange={(e) => setLength1(normalizeDigits(e.target.value))}
placeholder="3000"
onFocus={() => (length1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button

70
src/components/floor-plan/modal/lineTypes/Diagonal.jsx
View File

@ -1,6 +1,5 @@
import { useMessage } from '@/hooks/useMessage'
import { normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Diagonal({ props }) {
const { getMessage } = useMessage()
@ -31,29 +30,14 @@ export default function Diagonal({ props }) {
{getMessage('modal.cover.outline.length')}
</span>
<div className="input-grid" style={{ width: '63px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={outerLineDiagonalLength}*/}
{/* ref={outerLineDiagonalLengthRef}*/}
{/* onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}*/}
{/* onChange={(e) => setOuterLineDiagonalLength(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={outerLineDiagonalLength}
ref={outerLineDiagonalLengthRef}
onChange={(value) => setOuterLineDiagonalLength(value)}
onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}
onChange={(e) => setOuterLineDiagonalLength(normalizeDigits(e.target.value))}
placeholder="3000"
onFocus={() => (outerLineDiagonalLengthRef.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button
@ -68,29 +52,14 @@ export default function Diagonal({ props }) {
<div className="outline-form">
<span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length1}*/}
{/* ref={length1Ref}*/}
{/* onFocus={(e) => (length1Ref.current.value = '')}*/}
{/* onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={length1}
ref={length1Ref}
onChange={(value) => setLength1(value)}
onFocus={(e) => (length1Ref.current.value = '')}
onChange={(e) => setLength1(normalizeDigits(e.target.value))}
placeholder="3000"
onFocus={() => (length1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button
@ -141,29 +110,14 @@ export default function Diagonal({ props }) {
<div className="outline-form">
<span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '98px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length2}*/}
{/* ref={length2Ref}*/}
{/* onChange={(e) => setLength2(normalizeDigits(e.target.value))}*/}
{/* readOnly={true}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={length2}
ref={length2Ref}
onChange={(value) => setLength2(value)}
onChange={(e) => setLength2(normalizeDigits(e.target.value))}
readOnly={true}
placeholder="3000"
onFocus={() => (length2Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
</div>

102
src/components/floor-plan/modal/lineTypes/DoublePitch.jsx
View File

@ -1,7 +1,6 @@
import { useMessage } from '@/hooks/useMessage'
import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
import { getDegreeByChon } from '@/util/canvas-util'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function DoublePitch({ props }) {
const { getMessage } = useMessage()
@ -51,29 +50,14 @@ export default function DoublePitch({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
<div className="input-grid" style={{ width: '63px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={angle1}*/}
{/* ref={angle1Ref}*/}
{/* onFocus={(e) => (angle1Ref.current.value = '')}*/}
{/* onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}*/}
{/* placeholder="45"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={angle1}
ref={angle1Ref}
onChange={(value) => setAngle1(value)}
onFocus={(e) => (angle1Ref.current.value = '')}
onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}
placeholder="45"
onFocus={() => (angle1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: true
}}
/>
</div>
<button className="reset-btn" onClick={() => setAngle1(0)}></button>
@ -83,29 +67,14 @@ export default function DoublePitch({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length1}*/}
{/* ref={length1Ref}*/}
{/* onFocus={(e) => (length1Ref.current.value = '')}*/}
{/* onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={length1}
ref={length1Ref}
onChange={(value) => setLength1(value)}
onFocus={(e) => (length1Ref.current.value = '')}
onChange={(e) => setLength1(normalizeDigits(e.target.value))}
placeholder="3000"
onFocus={() => (length1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button
@ -156,36 +125,18 @@ export default function DoublePitch({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
<div className="input-grid" style={{ width: '63px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={angle2}*/}
{/* ref={angle2Ref}*/}
{/* onFocus={(e) => (angle2Ref.current.value = '')}*/}
{/* onChange={(e) => {*/}
{/* const v = normalizeDecimalLimit(e.target.value, 2)*/}
{/* setAngle2(v)*/}
{/* setLength2(getLength2())*/}
{/* }}*/}
{/* placeholder="45"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={angle2}
ref={angle2Ref}
onChange={(value) => {
setAngle2(value)
onFocus={(e) => (angle2Ref.current.value = '')}
onChange={(e) => {
const v = normalizeDecimalLimit(e.target.value, 2)
setAngle2(v)
setLength2(getLength2())
}}
placeholder="45"
onFocus={() => (angle2Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: true
}}
/>
</div>
<button
@ -200,30 +151,15 @@ export default function DoublePitch({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length2}*/}
{/* ref={length2Ref}*/}
{/* onFocus={(e) => (length2Ref.current.value = '')}*/}
{/* onChange={(e) => setLength2(normalizeDigits(e.target.value))}*/}
{/* readOnly={true}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={length2}
ref={length2Ref}
onChange={(value) => setLength2(value)}
onFocus={(e) => (length2Ref.current.value = '')}
onChange={(e) => setLength2(normalizeDigits(e.target.value))}
readOnly={true}
placeholder="3000"
onFocus={() => (length2Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button

49
src/components/floor-plan/modal/lineTypes/RightAngle.jsx
View File

@ -1,6 +1,5 @@
import { useMessage } from '@/hooks/useMessage'
import { normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function RightAngle({ props }) {
const { getMessage } = useMessage()
@ -23,29 +22,14 @@ export default function RightAngle({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length1}*/}
{/* ref={length1Ref}*/}
{/* onFocus={(e) => (length1Ref.current.value = '')}*/}
{/* onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
placeholder="3000"
value={length1}
ref={length1Ref}
onChange={(value) => setLength1(value)}
onFocus={() => (length1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
onFocus={(e) => (length1Ref.current.value = '')}
onChange={(e) => setLength1(normalizeDigits(e.target.value))}
placeholder="3000"
/>
</div>
<button
@ -94,29 +78,14 @@ export default function RightAngle({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length2}*/}
{/* ref={length2Ref}*/}
{/* onFocus={(e) => (length2Ref.current.value = '')}*/}
{/* onChange={(e) => setLength2(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={length2}
ref={length2Ref}
onFocus={() => (length2Ref.current.value = '')}
onChange={(value) => setLength2(value)}
onFocus={(e) => (length2Ref.current.value = '')}
onChange={(e) => setLength2(normalizeDigits(e.target.value))}
placeholder="3000"
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button

18
src/components/floor-plan/modal/object/DormerOffset.jsx
View File

@ -6,7 +6,6 @@ import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { canvasState } from '@/store/canvasAtom'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function DormerOffset(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@ -17,8 +16,6 @@ export default function DormerOffset(props) {
const [arrow2, setArrow2] = useState(null)
const arrow1LengthRef = useRef()
const arrow2LengthRef = useRef()
const [arrow1Length, setArrow1Length] = useState(0)
const [arrow2Length, setArrow2Length] = useState(0)
const canvas = useRecoilValue(canvasState)
const { dormerOffsetKeyEvent, dormerOffset } = useObjectBatch({})
@ -53,20 +50,7 @@ export default function DormerOffset(props) {
<p className="mb5">{getMessage('length')}</p>
<div className="input-move-wrap mb5">
<div className="input-move">
{/*<input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={arrow1LengthRef.current.value}
ref={arrow1LengthRef}
onChange={(value) => setArrow1Length(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />
</div>
<span>mm</span>
<div className="direction-move-wrap">

51
src/components/floor-plan/modal/object/SizeSetting.jsx
View File

@ -5,11 +5,10 @@ import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useEffect, useRef, useState } from 'react'
import { useRef, useState } from 'react'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function SizeSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@ -21,8 +20,7 @@ export default function SizeSetting(props) {
const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch({})
const widthRef = useRef(null)
const heightRef = useRef(null)
const [width, setWidth] = useState(target?.originWidth ? (target.originWidth * 10) : 0)
const [height, setHeight] = useState(target?.originHeight ? (target.originHeight * 10) : 0)
// const { initEvent } = useEvent()
// const { initEvent } = useContext(EventContext)
@ -30,15 +28,6 @@ export default function SizeSetting(props) {
// initEvent()
// }, [])
useEffect(() => {
if (target?.originWidth !== undefined) {
setWidth(target.originWidth * 10);
}
if (target?.originHeight !== undefined) {
setHeight(target.originHeight * 10);
}
}, [target]);
const handleReSizeObject = () => {
const width = widthRef.current.value
const height = heightRef.current.value
@ -58,25 +47,11 @@ export default function SizeSetting(props) {
<div className="size-option-top">
<div className="size-option-wrap">
<div className="size-option mb5">
<input type="text" className="input-origin mr5" value={width}
onChange={(e) => setWidth(e.target.value)} readOnly={true} />
<input type="text" className="input-origin mr5" value={(target?.originWidth * 10).toFixed(0)} readOnly={true} />
<span className="normal-font">mm</span>
</div>
<div className="size-option">
{/*<input type="text" className="input-origin mr5" defaultValue={(target?.originWidth * 10).toFixed(0)} ref={widthRef} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={width}
ref={widthRef}
onChange={(value) => setWidth(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<input type="text" className="input-origin mr5" defaultValue={(target?.originWidth * 10).toFixed(0)} ref={widthRef} />
<span className="normal-font">mm</span>
</div>
</div>
@ -85,25 +60,11 @@ export default function SizeSetting(props) {
<div className="size-option-side">
<div className="size-option-wrap">
<div className="size-option mb5">
<input type="text" className="input-origin mr5" value={height}
onChange={(e) => setHeight(e.target.value)} readOnly={true} />
<input type="text" className="input-origin mr5" value={(target?.originHeight * 10).toFixed(0)} readOnly={true} />
<span className="normal-font">mm</span>
</div>
<div className="size-option">
{/*<input type="text" className="input-origin mr5" defaultValue={(target?.originHeight * 10).toFixed(0)} ref={heightRef} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={height}
ref={heightRef}
onChange={(value) => setHeight(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<input type="text" className="input-origin mr5" defaultValue={(target?.originHeight * 10).toFixed(0)} ref={heightRef} />
<span className="normal-font">mm</span>
</div>
</div>

43
src/components/floor-plan/modal/object/type/OpenSpace.jsx
View File

@ -1,13 +1,10 @@
import { forwardRef, useState, useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { INPUT_TYPE } from '@/common/common'
import { CalculatorInput } from '@/components/common/input/CalcInput'
const OpenSpace = forwardRef((props, refs) => {
const { getMessage } = useMessage()
const [selectedType, setSelectedType] = useState(INPUT_TYPE.FREE)
const [width, setWidth] = useState(0)
const [height, setHeight] = useState(0)
useEffect(() => {
if (selectedType === INPUT_TYPE.FREE) {
@ -54,26 +51,12 @@ const OpenSpace = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* placeholder={0}*/}
{/* ref={refs.widthRef}*/}
{/* disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={width}
placeholder={0}
ref={refs.widthRef}
onChange={(value) => setWidth(value)}
disabled={selectedType !== INPUT_TYPE.DIMENSION}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>
@ -85,26 +68,12 @@ const OpenSpace = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* placeholder={0}*/}
{/* ref={refs.heightRef}*/}
{/* disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={height}
placeholder={0}
ref={refs.heightRef}
onChange={(value) => setHeight(value)}
disabled={selectedType !== INPUT_TYPE.DIMENSION}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>

81
src/components/floor-plan/modal/object/type/PentagonDormer.jsx
View File

@ -1,7 +1,6 @@
import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import { forwardRef, useState } from 'react'
import { CalculatorInput } from '@/components/common/input/CalcInput'
const PentagonDormer = forwardRef((props, refs) => {
const { getMessage } = useMessage()
@ -12,11 +11,6 @@ const PentagonDormer = forwardRef((props, refs) => {
setDirection(e.target.value)
refs.directionRef.current = e.target.value
}
const [pitch, setPitch] = useState(4) // pitch 상태 추가, 기본값 4로 설정
const [offsetWidth, setOffsetWidth] = useState(300) // offsetWidth 상태 추가, 기본값 300으로
const [offsetDepth, setOffsetDepth] = useState(400) // offsetDepth 상태 추가, 기본값 400으로
const [width, setWidth] = useState(2000) // width 상태 추가, 기본값 2000으로
const [height, setHeight] = useState(2000) // height 상태 추가, 기본값 2000으로
return (
<>
@ -36,20 +30,7 @@ const PentagonDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={2000} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={height}
ref={refs.heightRef}
onChange={(value) => setHeight(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={2000} />
</div>
<span className="thin">mm</span>
</div>
@ -60,20 +41,7 @@ const PentagonDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={offsetDepth}
ref={refs.offsetRef}
onChange={(value) => setOffsetDepth(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />
</div>
<span className="thin">mm</span>
</div>
@ -87,20 +55,7 @@ const PentagonDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.widthRef} defaultValue={2000} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={width}
ref={refs.widthRef}
onChange={(value) => setWidth(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<input type="text" className="input-origin block" placeholder={0} ref={refs.widthRef} defaultValue={2000} />
</div>
<span className="thin">mm</span>
</div>
@ -111,20 +66,7 @@ const PentagonDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} defaultValue={300} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={offsetWidth}
ref={refs.offsetWidthRef}
onChange={(value) => setOffsetWidth(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} defaultValue={300} />
</div>
<span className="thin">mm</span>
</div>
@ -135,20 +77,7 @@ const PentagonDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
ref={refs.pitchRef}
value={pitch}
onChange={(value) => setPitch(value)}
options={{
allowNegative: false,
allowDecimal: true //(index !== 0),
}}
></CalculatorInput>
<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />
</div>
<span className="thin">寸</span>
</div>

43
src/components/floor-plan/modal/object/type/Shadow.jsx
View File

@ -1,14 +1,11 @@
import { forwardRef, useState, useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { INPUT_TYPE } from '@/common/common'
import { CalculatorInput } from '@/components/common/input/CalcInput'
const Shadow = forwardRef((props, refs) => {
const { getMessage } = useMessage()
const [selectedType, setSelectedType] = useState(INPUT_TYPE.FREE)
const [width, setWidth] = useState(0)
const [height, setHeight] = useState(0)
useEffect(() => {
if (selectedType === INPUT_TYPE.FREE) {
@ -54,26 +51,12 @@ const Shadow = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* placeholder={0}*/}
{/* ref={refs.widthRef}*/}
{/* disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={width}
placeholder={0}
ref={refs.widthRef}
onChange={(value) => setWidth(value)}
disabled={selectedType !== INPUT_TYPE.DIMENSION}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>
@ -85,26 +68,12 @@ const Shadow = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* placeholder={0}*/}
{/* ref={refs.heightRef}*/}
{/* disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
<input
type="text"
className="input-origin block"
value={height}
placeholder={0}
ref={refs.heightRef}
onChange={(value) => setHeight(value)}
disabled={selectedType !== INPUT_TYPE.DIMENSION}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>

49
src/components/floor-plan/modal/object/type/TriangleDormer.jsx
View File

@ -1,7 +1,6 @@
import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import { forwardRef, useState } from 'react'
import { CalculatorInput } from '@/components/common/input/CalcInput'
const TriangleDormer = forwardRef((props, refs) => {
const { getMessage } = useMessage()
@ -12,9 +11,6 @@ const TriangleDormer = forwardRef((props, refs) => {
setDirection(e.target.value)
refs.directionRef.current = e.target.value
}
const [height, setHeight] = useState(1500)
const [offset, setOffset] = useState(400)
const [pitch, setPitch] = useState(4)
return (
<>
@ -34,20 +30,7 @@ const [pitch, setPitch] = useState(4)
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={1500} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={height}
ref={refs.heightRef}
onChange={(value) => setHeight(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={1500} />
</div>
<span className="thin">mm</span>
</div>
@ -58,20 +41,7 @@ const [pitch, setPitch] = useState(4)
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={offset}
ref={refs.offsetRef}
onChange={(value) => setOffset(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />
</div>
<span className="thin">mm</span>
</div>
@ -82,20 +52,7 @@ const [pitch, setPitch] = useState(4)
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
ref={refs.pitchRef}
value={pitch}
onChange={(value) => setPitch(value)}
options={{
allowNegative: false,
allowDecimal: true
}}
/>
<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />
</div>
<span className="thin">寸</span>
</div>