[938] : [【HANASYS DESIGN】 복도 입력 자릿수 상향, 자릿수 하향에 대해서 伏図入力 桁上げ・桁下げについて]

[작업내용] : 다국어 수정 및 퍼블 변경

src/components/floor-plan/CanvasFrame.jsx

@@ -36,34 +36,6 @@ import { hotkeyStore } from '@/store/hotkeyAtom'
 import { usePopup } from '@/hooks/usePopup'
 
 export default function CanvasFrame() {
-  const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
-  const { getRoofMaterialList } = useMasterController()
-  useEffect(() => {
-    async function initRoofMaterial() {
-      if (roofMaterials.length !== 0) {
-        return
-      }
-      const { data } = await getRoofMaterialList()
-
-      const roofLists = data.map((item, idx) => ({
-        ...item,
-        id: item.roofMatlCd,
-        name: item.roofMatlNm,
-        selected: idx === 0,
-        index: idx,
-        nameJp: item.roofMatlNmJp,
-        length: item.lenBase && parseInt(item.lenBase),
-        width: item.widBase && parseInt(item.widBase),
-        raft: item.raftBase && parseInt(item.raftBase),
-        layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
-        hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
-        pitch: item.pitch ? parseInt(item.pitch) : 4,
-        angle: item.angle ? parseInt(item.angle) : 21.8,
-      }))
-      setRoofMaterials(roofLists)
-    }
-    initRoofMaterial()
-  }, [])
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
   const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()

src/components/floor-plan/modal/movement/type/FlowLine.jsx

@@ -32,61 +32,53 @@ export default function FlowLine({ FLOW_LINE_REF }) {
     <>
       <div className="outline-wrap">
         <div className="guide">{getMessage('modal.movement.flow.line.info')}</div>
-        <div className="eaves-keraba-table">
-          <div className="eaves-keraba-item">
-            <div className="eaves-keraba-th">
-              <div className="d-check-radio pop">
-                <input
-                  type="radio"
-                  name="radio01"
-                  id="ra01"
-                  defaultChecked={true}
-                  ref={FLOW_LINE_REF.DOWN_LEFT_RADIO_REF}
-                  onChange={() => {
-                    setType(FLOW_LINE_TYPE.DOWN_LEFT)
-                  }}
-                />
-                <label htmlFor="ra01">{getMessage('modal.movement.flow.line.bottom.left')}</label>
-              </div>
+        <div className="outline-form">
+          <span>{getMessage('modal.movement.flow.line.position')}</span>
+          <div className="input-grid mr5">
+            <input type="text" className="input-origin block" defaultValue={100} readOnly={true} ref={FLOW_LINE_REF.POINTER_INPUT_REF} />
+          </div>
+        </div>
+        <div className="moving-tab-content">
+          <div className="moving-tab-radio-wrap">
+            <div className="d-check-radio pop">
+              <input
+                type="radio"
+                name="radio01"
+                id="ra01"
+                ref={FLOW_LINE_REF.DOWN_LEFT_RADIO_REF}
+                onChange={() => {
+                  setType(FLOW_LINE_TYPE.DOWN_LEFT)
+                }}
+              />
+              <label htmlFor="ra01">{getMessage('modal.movement.flow.line.bottom.left')}</label>
             </div>
-            <div className="eaves-keraba-td">
-              <div className="outline-form">
-                <div className="input-grid mr5" style={{ width: '100px' }}>
-                  {<input type="text" className="input-origin block" readOnly={true} ref={FLOW_LINE_REF.POINTER_INPUT_REF} />}
-                </div>
-              </div>
+            <div className="d-check-radio pop">
+              <input
+                type="radio"
+                name="radio01"
+                id="ra02"
+                ref={FLOW_LINE_REF.UP_RIGHT_RADIO_REF}
+                onChange={() => {
+                  setType(FLOW_LINE_TYPE.UP_RIGHT)
+                }}
+              />
+              <label htmlFor="ra02">{getMessage('modal.movement.flow.line.top.right')}</label>
             </div>
           </div>
-          <div className="eaves-keraba-item">
-            <div className="eaves-keraba-th">
-              <div className="d-check-radio pop">
-                <input
-                  type="radio"
-                  name="radio01"
-                  id="ra02"
-                  ref={FLOW_LINE_REF.UP_RIGHT_RADIO_REF}
-                  onChange={() => {
-                    setType(FLOW_LINE_TYPE.UP_RIGHT)
-                  }}
-                />
-                <label htmlFor="ra02">{getMessage('modal.movement.flow.line.top.right')}</label>
-              </div>
-            </div>
-            <div className="eaves-keraba-td">
-              <div className="outline-form">
-                <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input
-                    type="text"
-                    className="input-origin block"
-                    ref={FLOW_LINE_REF.FILLED_INPUT_REF}
-                    value={filledInput}
-                    onFocus={handleFocus}
-                    onChange={handleInput}
-                  />
-                </div>
-                <span className="thin">mm</span>
-              </div>
+          <div className="outline-form">
+            <span>{getMessage('modal.movement.flow.line.movement')}</span>
+            <div className="input-grid mr5">
+              <input
+                type="text"
+                className="input-origin block"
+                defaultValue={100}
+                ref={FLOW_LINE_REF.FILLED_INPUT_REF}
+                value={filledInput}
+                onFocus={handleFocus}
+                onChange={handleInput}
+              />
             </div>
+            <span className="thin">mm</span>
           </div>
         </div>
       </div>

src/components/floor-plan/modal/movement/type/Updown.jsx

@@ -29,61 +29,54 @@ export default function Updown({ UP_DOWN_REF }) {
     <>
       <div className="outline-wrap">
         <div className="guide">{getMessage('modal.movement.flow.line.updown.info')}</div>
-        <div className="eaves-keraba-table">
-          <div className="eaves-keraba-item">
-            <div className="eaves-keraba-th">
-              <div className="d-check-radio pop">
-                <input
-                  type="radio"
-                  name="radio01"
-                  id="ra01"
-                  ref={UP_DOWN_REF.UP_RADIO_REF}
-                  defaultChecked={true}
-                  onChange={() => {
-                    setType(UP_DOWN_TYPE.UP)
-                  }}
-                />
-                <label htmlFor="ra01">{getMessage('modal.movement.flow.line.updown.up')}</label>
-              </div>
+        <div className="outline-form">
+          <span>{getMessage('modal.movement.flow.line.position')}</span>
+          <div className="input-grid mr5">
+            <input type="text" className="input-origin block" defaultValue={100} readOnly={true} ref={UP_DOWN_REF.POINTER_INPUT_REF} />
+          </div>
+        </div>
+        <div className="moving-tab-content">
+          <div className="moving-tab-radio-wrap">
+            <div className="d-check-radio pop">
+              <input
+                type="radio"
+                name="radio01"
+                id="ra01"
+                ref={UP_DOWN_REF.UP_RADIO_REF}
+                defaultChecked={true}
+                onChange={() => {
+                  setType(UP_DOWN_TYPE.UP)
+                }}
+              />
+              <label htmlFor="ra01">{getMessage('modal.movement.flow.line.updown.up')}</label>
             </div>
-            <div className="eaves-keraba-td">
-              <div className="outline-form">
-                <div className="input-grid mr5" style={{ width: '100px' }}>
-                  {<input type="text" className="input-origin block" readOnly={true} ref={UP_DOWN_REF.POINTER_INPUT_REF} />}
-                </div>
-              </div>
+            <div className="d-check-radio pop">
+              <input
+                type="radio"
+                name="radio01"
+                id="ra02"
+                ref={UP_DOWN_REF.DOWN_RADIO_REF}
+                onChange={() => {
+                  setType(UP_DOWN_TYPE.DOWN)
+                }}
+              />
+              <label htmlFor="ra02">{getMessage('modal.movement.flow.line.updown.down')}</label>
             </div>
           </div>
-          <div className="eaves-keraba-item">
-            <div className="eaves-keraba-th">
-              <div className="d-check-radio pop">
-                <input
-                  type="radio"
-                  name="radio01"
-                  id="ra02"
-                  ref={UP_DOWN_REF.DOWN_RADIO_REF}
-                  onChange={() => {
-                    setType(UP_DOWN_TYPE.DOWN)
-                  }}
-                />
-                <label htmlFor="ra02">{getMessage('modal.movement.flow.line.updown.down')}</label>
-              </div>
-            </div>
-            <div className="eaves-keraba-td">
-              <div className="outline-form">
-                <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input
-                    type="text"
-                    className="input-origin block"
-                    ref={UP_DOWN_REF.FILLED_INPUT_REF}
-                    value={filledInput}
-                    onFocus={handleFocus}
-                    onChange={handleInput}
-                  />
-                </div>
-                <span className="thin">mm</span>
-              </div>
+          <div className="outline-form">
+            <span>{getMessage('modal.movement.flow.line.movement')}</span>
+            <div className="input-grid mr5">
+              <input
+                type="text"
+                className="input-origin block"
+                defaultValue={100}
+                ref={UP_DOWN_REF.FILLED_INPUT_REF}
+                value={filledInput}
+                onFocus={handleFocus}
+                onChange={handleInput}
+              />
             </div>
+            <span className="thin">mm</span>
           </div>
         </div>
       </div>

src/components/header/Header.jsx

@@ -22,6 +22,9 @@ import { QcastContext } from '@/app/QcastProvider'
 import { usePopup } from '@/hooks/usePopup'
 import { commonCodeState } from '@/store/commonCodeAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
+import { roofMaterialsAtom } from '@/store/settingAtom'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 
 export const ToggleonMouse = (e, act, target) => {
   const listWrap = e.target.closest(target)
@@ -72,6 +75,38 @@ export default function Header(props) {
   const [commonCode, setCommonCode] = useRecoilState(commonCodeState)
   const { promiseGet } = useAxios()
 
+  /**
+   * 지붕재 목록 Header에서 조회
+   */
+  const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
+  const { getRoofMaterialList } = useMasterController()
+  useEffect(() => {
+    async function initRoofMaterial() {
+      if (roofMaterials.length !== 0) {
+        return
+      }
+      const { data } = await getRoofMaterialList()
+
+      const roofLists = data.map((item, idx) => ({
+        ...item,
+        id: item.roofMatlCd,
+        name: item.roofMatlNm,
+        selected: idx === 0,
+        index: idx,
+        nameJp: item.roofMatlNmJp,
+        length: item.lenBase && parseInt(item.lenBase),
+        width: item.widBase && parseInt(item.widBase),
+        raft: item.raftBase && parseInt(item.raftBase),
+        layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
+        hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
+        pitch: item.pitch ? parseInt(item.pitch) : 4,
+        angle: item.angle ? parseInt(item.angle) : 21.8,
+      }))
+      setRoofMaterials(roofLists)
+    }
+    initRoofMaterial()
+  }, [])
+
   useEffect(() => {
     const getCommonCode = async () => {
       await promiseGet({ url: '/api/commcode/qc-comm-code' }).then((res) => {

src/hooks/roofcover/useMovementSetting.js

@@ -90,6 +90,7 @@ export function useMovementSetting(id) {
       wall.baseLines.forEach((line) => {
         if (type === TYPE.UP_DOWN) {
           line.set({ selectable: true, visible: true, stroke: '#1083E3', strokeWidth: 5 })
+          line.setCoords()
           line.bringToFront()
         } else {
           line.set({ selectable: false, visible: false })

src/locales/ja.json

@@ -43,14 +43,16 @@
   "plan.menu.roof.cover.roof.shape.setting": "屋根形状の設定",
   "plan.menu.roof.cover.roof.shape.passivity.setting": "屋根形状の手動設定",
   "plan.menu.roof.cover.eaves.kerava.edit": "軒・ケラバ変更",
-  "plan.menu.roof.cover.movement.shape.updown": "軒線移動・桁上げ下り",
-  "modal.movement.flow.line.move": "軒線の移動",
+  "plan.menu.roof.cover.movement.shape.updown": "棟線移動・桁上げ下げ",
+  "modal.movement.flow.line.move": "棟線移動",
   "modal.movement.flow.line.move.alert": "移動する数ない。",
-  "modal.movement.flow.line.updown": "桁上げ・下り",
-  "modal.movement.flow.line.updown.info": "桁の異なる辺を選択し、幅を指定します。",
+  "modal.movement.flow.line.updown": "桁上げ・下げ",
+  "modal.movement.flow.line.updown.info": "桁高の違う辺を選択し、 幅を指定してください",
   "modal.movement.flow.line.updown.up": "桁を上げる",
   "modal.movement.flow.line.updown.down": "桁数を下げる",
-  "modal.movement.flow.line.info": "軒線を選択して移動幅を指定します",
+  "modal.movement.flow.line.info": "棟線を選択し、 移動幅を指定してください。",
+  "modal.movement.flow.line.position": "位置値",
+  "modal.movement.flow.line.movement": "動き値",
   "modal.movement.flow.line.bottom.left": "高さ変更：下、左",
   "modal.movement.flow.line.top.right": "高さ変更：上、右",
   "plan.menu.roof.cover.outline.edit.offset": "外壁の編集とオフセット",

src/locales/ko.json

@@ -51,6 +51,8 @@
   "modal.movement.flow.line.updown.up": "자릿수를 올리다",
   "modal.movement.flow.line.updown.down": "자릿수를 낮추다",
   "modal.movement.flow.line.info": "동선을 선택하고 이동 폭을 지정하십시오",
+  "modal.movement.flow.line.position": "위치값",
+  "modal.movement.flow.line.movement": "이동 수치",
   "modal.movement.flow.line.bottom.left": "높이변경 : 아래, 왼쪽",
   "modal.movement.flow.line.top.right": "높이변경 : 위, 오른쪽",
   "plan.menu.roof.cover.outline.edit.offset": "외벽선 편집 및 오프셋",

src/styles/_modal.scss

@@ -2436,4 +2436,24 @@ $alert-color: #101010;
             }
         }
     }
-}
+}
+
+// 2025-05-26 동선이동∙형 올림 내림
+
+.moving-tab-radio-wrap{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+}
+.moving-tab-content{
+    padding: 10px;
+    border: 1px solid #3D3D3D;
+    margin-top: 15px;
+    .outline-form{
+        span{
+            width: auto;
+            margin-right: 23px;
+        }
+    }
+}

src/styles/_submodal.scss

@@ -374,10 +374,7 @@
 // 1:1문의
 .one-on-one{
     .select-wrap{
-        width: 250px;
-    }
-    .input-wrap{
-        flex: 1 1 auto;
+        flex: 1;
     }
     &.btn-area{
         padding-bottom: 0;
@@ -388,7 +385,7 @@
         border: 1px solid #eee;
         .drag-file-area{
             margin-top: 0;
-            .file-list {
+            .file-list{
                 overflow-y: auto;
                 max-height: 100px;
             }

src/styles/_table.scss

@@ -400,6 +400,10 @@ table{
                         font-weight: 400;
                     }
                 }
+                &.no-data{
+                    padding: 70px 0;
+                    font-size: 14px;
+                }
             }
             tr{
                 background-color: transparent;