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

계산기 토글 버튼 추가 #725

Merged
ysCha merged 12 commits from dev into dev-deploy 2026-03-19 18:01:31 +09:00
Conversation 0 Commits 12 Files Changed 39 +50 -7
12 changed files with 50 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1d4d1ab381 - Show all commits

BIN
public/static/images/common/Icon_OFF_Black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 683 B

BIN
public/static/images/common/Icon_ON_Black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 723 B

4
src/components/common/input/CalcInput.jsx
View File

@ -3,7 +3,7 @@ import { createCalculator } from '@/util/calc-utils'
import '@/styles/calc.scss'
export const CalculatorInput = forwardRef(
({ value, onChange, label, options = {}, id, className = 'calculator-input', readOnly = false, placeholder, name='', disabled = false, maxLength = 12 }, ref) => {
({ value, onChange, label, options = {}, id, className = 'calculator-input', readOnly = false, placeholder, name='', disabled = false, maxLength = 12, disableKeypad = false }, ref) => {
const [showKeypad, setShowKeypad] = useState(false)
const [displayValue, setDisplayValue] = useState(value || '0')
const [hasOperation, setHasOperation] = useState(false)
@ -478,7 +478,7 @@ export const CalculatorInput = forwardRef(
maxLength={maxLength}
/>
{showKeypad && !readOnly && (
{showKeypad && !readOnly && !disableKeypad && (
<div className="keypad-container">
<div className="keypad-grid">
<button

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

@ -6,7 +6,7 @@ import { useEffect } from 'react'
export default function Angle({ props }) {
const { getMessage } = useMessage()
const { angle1, setAngle1, angle1Ref, length1, setLength1, length1Ref } = props
const { angle1, setAngle1, angle1Ref, length1, setLength1, length1Ref, disableKeypad } = props
return (
<>
@ -45,6 +45,7 @@ export default function Angle({ props }) {
}}
placeholder="45"
onFocus={() => (angle1Ref.current.value = '')}
disableKeypad={disableKeypad}
options={{
allowNegative: true,
allowDecimal: true
@ -80,6 +81,7 @@ export default function Angle({ props }) {
onChange={(value) => setLength1(value)}
placeholder="3000"
onFocus={() => (length1Ref.current.value = '')}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false

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

@ -19,6 +19,7 @@ export default function Diagonal({ props }) {
setArrow1,
arrow2,
setArrow2,
disableKeypad,
} = props
return (
<>
@ -50,6 +51,7 @@ export default function Diagonal({ props }) {
onChange={(value) => setDiagonalLength(value)}
placeholder="3000"
onFocus={() => (diagonalLengthRef.current.value = '')}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false
@ -87,6 +89,7 @@ export default function Diagonal({ props }) {
onChange={(value) => setLength1(value)}
placeholder="3000"
onFocus={() => (length1Ref.current.value = '')}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false
@ -160,6 +163,7 @@ export default function Diagonal({ props }) {
onChange={(value) => setLength2(value)}
placeholder="3000"
onFocus={() => (length2Ref.current.value = '')}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false

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

@ -24,6 +24,7 @@ export default function DoublePitch({ props }) {
setArrow2,
arrow1Ref,
arrow2Ref,
disableKeypad,
} = props
const getLength2 = (angle1, angle2, length1) => {
@ -68,6 +69,7 @@ export default function DoublePitch({ props }) {
onChange={(value) => setAngle1(value)}
placeholder="45"
onFocus={() => (angle1Ref.current.value = '')}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: true
@ -100,6 +102,7 @@ export default function DoublePitch({ props }) {
onChange={(value) => setLength1(value)}
placeholder="3000"
onFocus={() => (length1Ref.current.value = '')}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false
@ -180,6 +183,7 @@ export default function DoublePitch({ props }) {
}}
placeholder="45"
onFocus={() => (angle2Ref.current.value = '')}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: true

3
src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx
View File

@ -9,7 +9,7 @@ import { useEffect, useRef } from 'react'
export default function OuterLineWall({ props }) {
const { getMessage } = useMessage()
const { length1, setLength1, length1Ref, arrow1, setArrow1 } = props
const { length1, setLength1, length1Ref, arrow1, setArrow1, disableKeypad } = props
// 키보드 입력 처리
useEffect(() => {
@ -81,6 +81,7 @@ export default function OuterLineWall({ props }) {
}}
placeholder={'3000'}
ref={length1Ref}
disableKeypad={disableKeypad}
onFocus={() => {
if (length1Ref.current && length1Ref.current.value === '0') {
length1Ref.current.value = ''

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

@ -4,7 +4,7 @@ import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function RightAngle({ props }) {
const { getMessage } = useMessage()
const { length1, setLength1, length1Ref, length2, setLength2, length2Ref, arrow1, setArrow1, arrow2, setArrow2 } = props
const { length1, setLength1, length1Ref, length2, setLength2, length2Ref, arrow1, setArrow1, arrow2, setArrow2, disableKeypad } = props
const handleClickArrow = (arrow) => {
const arrowType = arrow === '↑' ? 'ArrowUp' : arrow === '↓' ? 'ArrowDown' : arrow === '←' ? 'ArrowLeft' : arrow === '→' ? 'ArrowRight' : ''
@ -42,6 +42,7 @@ export default function RightAngle({ props }) {
ref={length1Ref}
onChange={(value) => setLength1(value)}
onFocus={() => (length1Ref.current.value = '')}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false
@ -125,6 +126,7 @@ export default function RightAngle({ props }) {
onFocus={() => (length2Ref.current.value = '')}
onChange={(value) => setLength2(value)}
placeholder="3000"
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false

12
src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
View File

@ -11,6 +11,7 @@ import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
import { usePopup } from '@/hooks/usePopup'
import { useState } from 'react'
import Image from 'next/image'
import { v4 as uuidv4 } from 'uuid'
export default function WallLineSetting(props) {
@ -18,6 +19,7 @@ export default function WallLineSetting(props) {
const { addPopup, closePopup } = usePopup()
const { getMessage } = useMessage()
const [propertiesId, setPropertiesId] = useState(uuidv4())
const [useCalcPad, setUseCalcPad] = useState(false)
const {
length1,
setLength1,
@ -46,12 +48,15 @@ export default function WallLineSetting(props) {
handleFix,
} = useOuterLineWall(id, propertiesId)
const disableKeypad = !useCalcPad
const outerLineProps = {
length1,
setLength1,
length1Ref,
arrow1,
setArrow1,
disableKeypad,
}
const rightAngleProps = {
@ -65,6 +70,7 @@ export default function WallLineSetting(props) {
setArrow1,
arrow2,
setArrow2,
disableKeypad,
}
const doublePitchProps = {
@ -86,6 +92,7 @@ export default function WallLineSetting(props) {
setArrow2,
arrow1Ref,
arrow2Ref,
disableKeypad,
}
const angleProps = {
@ -95,6 +102,7 @@ export default function WallLineSetting(props) {
length1,
setLength1,
length1Ref,
disableKeypad,
}
const diagonalLineProps = {
@ -111,6 +119,7 @@ export default function WallLineSetting(props) {
setArrow1,
arrow2,
setArrow2,
disableKeypad,
}
return (
@ -164,6 +173,9 @@ export default function WallLineSetting(props) {
</div>
<div className="normal-font mt10">{getMessage('outerLine.property.info')}</div>
<div className="grid-btn-wrap">
<button className="mr5" style={{ verticalAlign: 'middle' }} onClick={() => setUseCalcPad((prev) => !prev)}>
<Image src={useCalcPad ? '/static/images/common/Icon_ON_Black.png' : '/static/images/common/Icon_OFF_Black.png'} alt="toggle" width={34} height={34} />
</button>
<button className="btn-frame modal mr5" onClick={handleRollback}>
{getMessage('modal.cover.outline.rollback')}
</button>

12
src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
View File

@ -9,11 +9,13 @@ import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
import { usePlacementShapeDrawing } from '@/hooks/surface/usePlacementShapeDrawing'
import { usePopup } from '@/hooks/usePopup'
import Image from 'next/image'
export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [buttonAct, setButtonAct] = useState(1)
const [useCalcPad, setUseCalcPad] = useState(false)
const types = [
{ id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE },
{ id: 2, name: getMessage('right.angle'), type: OUTER_LINE_TYPE.RIGHT_ANGLE },
@ -49,12 +51,15 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
handleFix,
} = usePlacementShapeDrawing(id)
const disableKeypad = !useCalcPad
const outerLineProps = {
length1,
setLength1,
length1Ref,
arrow1,
setArrow1,
disableKeypad,
}
const rightAngleProps = {
@ -68,6 +73,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
setArrow1,
arrow2,
setArrow2,
disableKeypad,
}
const doublePitchProps = {
@ -89,6 +95,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
setArrow2,
arrow1Ref,
arrow2Ref,
disableKeypad,
}
const angleProps = {
@ -98,6 +105,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
length1,
setLength1,
length1Ref,
disableKeypad,
}
const diagonalLineProps = {
@ -114,6 +122,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
setArrow1,
arrow2,
setArrow2,
disableKeypad,
}
const onClickButton = (button) => {
@ -140,6 +149,9 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
</div>
<div className="grid-btn-wrap">
<button className="mr5" style={{ verticalAlign: 'middle' }} onClick={() => setUseCalcPad((prev) => !prev)}>
<Image src={useCalcPad ? '/static/images/common/Icon_ON_Black.png' : '/static/images/common/Icon_OFF_Black.png'} alt="toggle" width={34} height={34} />
</button>
<button className="btn-frame modal mr5" onClick={handleRollback}>
{getMessage('modal.cover.outline.rollback')}
</button>

3
src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
View File

@ -5,7 +5,7 @@ import { CalculatorInput } from '@/components/common/input/CalcInput'
const PlacementSurface = forwardRef((props, refs) => {
const { getMessage } = useMessage()
const { id, lines, info, rotate, xInversion, yInversion } = props
const { id, lines, info, rotate, xInversion, yInversion, disableKeypad } = props
let { length1, length2, length3, length4, length5, lengthetc, azimuth } = refs
const [azimuthDirection, setAzimuthDirection] = useState(azimuth.current)
@ -114,6 +114,7 @@ const PlacementSurface = forwardRef((props, refs) => {
? length4
: length5
}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false

7
src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
View File

@ -19,6 +19,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
const canvas = useRecoilValue(canvasState)
const { closePopup } = usePopup()
const [isHidden, setIsHidden] = useState(false)
const [useCalcPad, setUseCalcPad] = useState(false)
const { applySurfaceShape } = useSurfaceShapeBatch({ isHidden, setIsHidden })
@ -217,6 +218,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
rotate,
xInversion,
yInversion,
disableKeypad: !useCalcPad,
}
const getInversionState = () => {
@ -291,7 +293,10 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
</div>
<div className="plane-detail-wrap">
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
<div className="plane-shape-btn">
<div className="plane-shape-btn" style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
<button style={{ width: 'auto' }} onClick={() => setUseCalcPad((prev) => !prev)}>
<Image src={useCalcPad ? '/static/images/common/Icon_ON_Black.png' : '/static/images/common/Icon_OFF_Black.png'} alt="toggle" width={34} height={34} />
</button>
<button className="btn-frame modal act" onClick={applySurfaces}>
{getMessage('write')}
</button>