Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

src/components/Playground.jsx

@@ -39,6 +39,7 @@ export default function Playground() {
   const [color, setColor] = useState('#ff0000')
 
   const [textInput, setTextInput] = useState('')
+  const [numberInput, setNumberInput] = useState(null)
   const [radioInput, setRadioInput] = useState('')
   const [checkboxInput, setCheckboxInput] = useState([])
   const [selectedValue, setSelectedValue] = useState('')
@@ -48,6 +49,9 @@ export default function Playground() {
   useEffect(() => {
     console.log('textInput:', textInput)
   }, [textInput])
+  useEffect(() => {
+    console.log('numberInput:', numberInput)
+  }, [numberInput])
   useEffect(() => {
     console.log('radioInput:', radioInput)
   }, [radioInput])
@@ -161,8 +165,19 @@ export default function Playground() {
           >
             QInput TextInput DATA RESET
           </button>
-          <QInput type="text" value={textInput} onChange={setTextInput} />
+          <QInput type="text" placeholder="placeholder" value={textInput} onChange={setTextInput} />
-          <QInput type="text" value={textInput} onChange={setTextInput} readOnly="true" />
+          <QInput type="text" placeholder="read only" value={textInput} onChange={setTextInput} readOnly="true" />
+          <br />
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setNumberInput(null)
+            }}
+          >
+            QInput NumberInput DATA RESET
+          </button>
+          <QInput type="number" placeholder="placeholder" value={numberInput} onChange={setNumberInput} />
+          <QInput type="number" placeholder="read only" value={numberInput} onChange={setNumberInput} readOnly="true" />
           <br />
           <button
             className="btn-frame deepgray"
@@ -185,7 +200,7 @@ export default function Playground() {
           <button
             className="btn-frame deepgray"
             onClick={() => {
-              setCheckboxInput('')
+              setCheckboxInput([])
             }}
           >
             QInput Checkbox DATA RESET

src/components/common/input/QInput.jsx

@@ -2,7 +2,7 @@
 
 import { useCallback } from 'react'
 
-export default function QInput({ type, readOnly = false, options = [], value, onChange }) {
+export default function QInput({ type, className, ref, id, readOnly = false, options = [], placeholder, value, onChange }) {
   // options = options || [
   //   {
   //     id: 'one',
@@ -21,11 +21,11 @@ export default function QInput({ type, readOnly = false, options = [], value, on
   //   },
   // ]
 
-  const handleChange = useCallback(
+  const handleRadioCheckboxChange = useCallback(
     (e, optionValue) => {
       if (type === 'radio') {
         onChange(e.target.value)
-      } else {
+      } else if (type === 'checkbox') {
         const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
         onChange(newValue)
       }
@@ -33,21 +33,61 @@ export default function QInput({ type, readOnly = false, options = [], value, on
     [type, value, onChange],
   )
 
-  const handleTextChange = useCallback(
+  const handleTextNumberChange = useCallback(
     (e) => {
+      if (type === 'text') {
         onChange(e.target.value)
+      } else if (type === 'number') {
+        onChange(Number(e.target.value))
+      }
     },
-    [onChange],
+    [type, onChange],
   )
 
+  // type=number 정수 부호, 소수점 검사, 일부 키 허용
+  const checkInputNumber = (e) => {
+    const value = e.target.value
+    const key = e.key
+    const allowKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Tab', 'Enter', 'Control'] // 'ArrowUp', 'ArrowDown',
+    if (key >= '0' && key <= '9') {
+      return
+    }
+    if (key === '.' && !value.includes('.') && value.length > 0 && !isNaN(Number(value))) {
+      return
+    }
+    if (key === '-' && !value.includes('-') && value.length > 0) {
+      return
+    }
+    if (allowKeys.includes(key)) {
+      return
+    }
+    if (key === 'a' || key === 'c' || key === 'v' || key === 'x' || key === 'z') {
+      return
+    }
+    e.preventDefault()
+  }
+
+  // input type : text, number
+  const inputTextNumber = () => {
     return (
-    <>
+      <input
-      {type === 'text' ? (
+        type={type}
-        <div className="mb5">
+        className={`input-light ${className ? className : ''}`}
-          <input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
+        ref={ref}
-        </div>
+        id={id}
-      ) : type === 'radio' || type === 'checkbox' ? (
+        readOnly={readOnly ? true : false}
-        <div className="flx mb5">
+        placeholder={placeholder}
+        value={value === 0 ? 0 : value || ''}
+        onChange={handleTextNumberChange}
+        onKeyDown={type === 'number' ? checkInputNumber : undefined}
+      />
+    )
+  }
+
+  // input type : radio, checkbox
+  const inputRadioCheckbox = () => {
+    return (
+      <div className="flx">
         {options?.map((option) => (
           <div key={option.name} className={`d-${type}-radio light mr5`}>
             <input
@@ -56,13 +96,14 @@ export default function QInput({ type, readOnly = false, options = [], value, on
               value={option.value}
               id={option.id}
               checked={type === 'radio' ? value === option.value : value.includes(option.value)}
-                onChange={(e) => handleChange(e, option.value)}
+              onChange={(e) => handleRadioCheckboxChange(e, option.value)}
             />
             <label htmlFor={option.id}>{option.name}</label>
           </div>
         ))}
       </div>
-      ) : null}
-    </>
     )
+  }
+
+  return <>{type === 'text' || type === 'number' ? inputTextNumber() : type === 'radio' || type === 'checkbox' ? inputRadioCheckbox() : null}</>
 }

src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx

@@ -60,7 +60,7 @@ export default function FlowDirectionSetting(props) {
   }, [compasDeg])
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lx mount`}>
+      <div className={`modal-pop-wrap ml mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -103,6 +103,7 @@ export default function FlowDirectionSetting(props) {
                   <label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
                 </div>
               </div>
+              <div className="draw-flow-wrap">
                 <div className="compas-box">
                   <div className="compas-box-inner">
                     {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
@@ -130,6 +131,7 @@ export default function FlowDirectionSetting(props) {
                 </div>
               </div>
             </div>
+          </div>
           <div className="grid-btn-wrap">
             <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -180,8 +180,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                 </tr>
                 <tr>
                   <th>
+                    <div className="tip-wrap">
                       {getMessage('modal.placement.initial.setting.size')}
                       <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
+                    </div>
                   </th>
                   <td>
                     <div className="pop-form-radio">
@@ -252,8 +254,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                 </tr>
                 <tr>
                   <th>
+                    <div className="tip-wrap">
                       {getMessage('modal.placement.initial.setting.roof.material')}
                       <button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
+                    </div>
                   </th>
                   <td>
                     <div className="placement-option">