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

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

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/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;