Merge branch 'qcast-pub' into dev

src/components/floor-plan/modal/image/ImageSizeSetting.jsx

@@ -0,0 +1,42 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useState } from 'react'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function ImageSizeSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, size, setSize } = props
+  const [sizeValue, setSizeValue] = useState(100)
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xxxm`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.image.size.setting')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="range-wrap">
+            <input
+              type="range"
+              id="size"
+              name="volume"
+              min="20"
+              max="200"
+              step={10}
+              value={sizeValue}
+              onChange={(e) => setSizeValue(e.target.value)}
+            />
+            <label htmlFor="size">{sizeValue}%</label>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/hooks/useContextMenu.js

@@ -23,6 +23,7 @@ import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/Fl
 import { useMessage } from '@/hooks/useMessage'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { contextMenuState } from '@/store/contextMenu'
+import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
 
 export function useContextMenu() {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
@@ -36,7 +37,7 @@ export function useContextMenu() {
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
   const { handleZoomClear } = useCanvasEvent()
-  const currentMenuSetting = (position) => {
+  const currentMenuSetting = () => {
     switch (currentMenu) {
       case MENU.PLAN_DRAWING:
         setContextMenu([
@@ -104,6 +105,11 @@ export function useContextMenu() {
               id: 'wallLineRemove',
               name: getMessage('contextmenu.wallline.remove'),
             },
+            {
+              id: 'imageSizeEdit',
+              name: getMessage('modal.image.size.setting'),
+              component: <ImageSizeSetting id={popupId} />,
+            },
           ],
           [
             {
@@ -170,6 +176,11 @@ export function useContextMenu() {
               shortcut: ['c', 'C'],
               name: `${getMessage('contextmenu.copy')}(C)`,
             },
+            {
+              id: 'imageSizeEdit',
+              name: getMessage('modal.image.size.setting'),
+              component: <ImageSizeSetting id={popupId} />,
+            },
           ],
           [
             {

src/locales/ja.json

@@ -214,20 +214,20 @@
   "modal.canvas.setting.font.plan.absorption.dimension.display": "見る",
   "modal.canvas.setting.font.plan.absorption.plan.size.setting": "図面サイズの設定",
   "modal.canvas.setting.first.option.info": "※図面に表示する項目をクリックすると適用されます。",
-  "modal.canvas.setting.first.option.alloc": "할당표시",
-  "modal.canvas.setting.first.option.outline": "외벽선표시",
-  "modal.canvas.setting.first.option.plan": "도면표시",
-  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
-  "modal.canvas.setting.first.option.grid": "그리드표시",
-  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
-  "modal.canvas.setting.first.option.word": "문자 표시",
-  "modal.canvas.setting.first.option.trestle": "가대 표시",
-  "modal.canvas.setting.first.option.flow": "흐름방향 표시",
-  "modal.canvas.setting.first.option.total": "집계표 표시",
-  "modal.canvas.setting.first.option.dimension": "치수 표시(JA)",
-  "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시(JA)",
-  "modal.canvas.setting.first.option.real.dimension": "실제치수 표시(JA)",
-  "modal.canvas.setting.first.option.none.dimension": "치수표시없음(JA)",
+  "modal.canvas.setting.first.option.alloc": "割り当て表示",
+  "modal.canvas.setting.first.option.outline": "外壁線表示",
+  "modal.canvas.setting.first.option.grid": "グリッド表示",
+  "modal.canvas.setting.first.option.roof.line": "屋根線標示",
+  "modal.canvas.setting.first.option.word": "文字表示",
+  "modal.canvas.setting.first.option.circuit.num": "回路番号表示",
+  "modal.canvas.setting.first.option.flow": "流れ方向表示",
+  "modal.canvas.setting.first.option.trestle": "架台表示",
+  "modal.canvas.setting.first.option.image": "画像表示",
+  "modal.canvas.setting.first.option.total": "集計表表示",
+  "modal.canvas.setting.first.option.dimension": "寸法表示",
+  "modal.canvas.setting.first.option.corridor.dimension": "廊下寸法表示",
+  "modal.canvas.setting.first.option.real.dimension": "実際の寸法表示",
+  "modal.canvas.setting.first.option.none.dimension": "寸法表示なし",
   "modal.canvas.setting.first.option.display": "画面表示",
   "modal.canvas.setting.first.option.border": "ボーダーのみ",
   "modal.canvas.setting.first.option.line": "ラインハッチ",
@@ -274,6 +274,7 @@
   "modal.panel.batch.statistic.total": "合計",
   "modal.flow.direction.setting": "流れ方向の設定",
   "modal.flow.direction.setting.info": "流れ方向を選択してください。",
+  "modal.image.size.setting": "画像のサイズ変更",
   "plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
   "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
   "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",

src/locales/ko.json

@@ -221,13 +221,13 @@
   "modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.",
   "modal.canvas.setting.first.option.alloc": "할당표시",
   "modal.canvas.setting.first.option.outline": "외벽선표시",
-  "modal.canvas.setting.first.option.plan": "도면표시",
-  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
   "modal.canvas.setting.first.option.grid": "그리드표시",
-  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
+  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
   "modal.canvas.setting.first.option.word": "문자 표시",
-  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
   "modal.canvas.setting.first.option.flow": "흐름방향 표시",
+  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.image": "이미지 표시",
   "modal.canvas.setting.first.option.total": "집계표 표시",
   "modal.canvas.setting.first.option.dimension": "치수 표시",
   "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
@@ -279,6 +279,7 @@
   "modal.panel.batch.statistic.total": "합계",
   "modal.flow.direction.setting": "흐름 방향 설정",
   "modal.flow.direction.setting.info": "흐름방향을 선택하세요.",
+  "modal.image.size.setting": "이미지 크기 조절",
   "plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
   "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
   "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",

src/store/settingAtom.js

@@ -12,10 +12,16 @@ export const settingModalFirstOptionsState = atom({
       { id: 6, column: 'circuitNumDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
       { id: 7, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
       { id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
+      { id: 10, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false },
       { id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
     ],
     dimensionDisplay: [
-      { id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: true },
+      {
+        id: 1,
+        column: 'corridorDimension',
+        name: 'modal.canvas.setting.first.option.corridor.dimension',
+        selected: true,
+      },
       { id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
       { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
     ],
@@ -38,10 +44,34 @@ export const settingModalSecondOptionsState = atom({
       { id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' },
     ],
     option4: [
-      { id: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true, range: 10 },
-      { id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false, range: 30 },
-      { id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false, range: 50 },
-      { id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false, range: 70 },
+      {
+        id: 1,
+        column: 'adsorpRangeSmall',
+        name: 'modal.canvas.setting.font.plan.absorption.small',
+        selected: true,
+        range: 10,
+      },
+      {
+        id: 2,
+        column: 'adsorpRangeSmallSemi',
+        name: 'modal.canvas.setting.font.plan.absorption.small.semi',
+        selected: false,
+        range: 30,
+      },
+      {
+        id: 3,
+        column: 'adsorpRangeMedium',
+        name: 'modal.canvas.setting.font.plan.absorption.medium',
+        selected: false,
+        range: 50,
+      },
+      {
+        id: 4,
+        column: 'adsorpRangeLarge',
+        name: 'modal.canvas.setting.font.plan.absorption.large',
+        selected: false,
+        range: 70,
+      },
     ],
   },
   dangerouslyAllowMutability: true,

src/styles/_contents.scss

@@ -329,7 +329,7 @@
         border-top: 1px solid #000;
         width: 100%;
         transition: all .17s ease-in-out;
-        z-index: 999;
+        z-index: 99;
         &.active{
             top: calc(92.8px + 50px);
         }

src/styles/_modal.scss

@@ -1788,4 +1788,22 @@ $alert-color: #101010;
             flex: none;
         }
     }
+}
+
+//이미지 크기 설정
+.range-wrap{
+    display: flex;
+    align-items: center;
+    input{
+        flex: 1;
+        margin-right: 10px;
+    }
+    label{
+        flex: none;
+        text-align: right;
+        width: 35px;
+        font-size: 13px;
+        color: #fff;
+        font-weight: 500;
+    }
 }

src/styles/_reset.scss

@@ -130,6 +130,10 @@ button{
     font-family: 'Pretendard', sans-serif !important;
 }
 
+.no-click{
+    cursor: no-drop !important;
+}
+
 // margin
 .mt5{margin-top: 5px !important;}
 .mt10{margin-top: 10px !important;}