Merge remote-tracking branch 'origin/dev' into dev

src/components/floor-plan/CanvasMenu.jsx

@@ -31,7 +31,7 @@ const canvasMenus = [
 ]
 
 export default function CanvasMenu(props) {
-  const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
+  const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal, setShowPlaceShapeModal } = props
 
   const [menuNumber, setMenuNumber] = useState(null)
   const [type, setType] = useState('')
@@ -57,6 +57,10 @@ export default function CanvasMenu(props) {
     setCurrentMenu(menu.title)
 
     switch (menu.index) {
+      case 1:
+        setType('placementShape')
+        onClickPlacementInitialMenu()
+        break
       case 2:
         setType('outline')
         break
@@ -70,12 +74,16 @@ export default function CanvasMenu(props) {
   }
   const menuProps = {
     setShowOutlineModal,
+    setShowPlaceShapeModal,
     type,
   }
 
   const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
 
   useEffect(() => {
+    if (menuNumber === 1) {
+      onClickPlacementInitialMenu()
+    }
     if (menuNumber !== 2 && showOutlineModal) setShowOutlineModal(false)
   }, [menuNumber, type])
 
@@ -90,6 +98,12 @@ export default function CanvasMenu(props) {
     })
   }
 
+  const onClickPlacementInitialMenu = () => {
+    setShowOutlineModal(false)
+    setShowCanvasSettingModal(false)
+    setShowPlaceShapeModal(true)
+  }
+
   const handleClear = () => {
     setPoints([])
     canvas?.clear()

src/components/floor-plan/FloorPlan.jsx

@@ -12,11 +12,13 @@ import CanvasLayout from '@/components/floor-plan/CanvasLayout'
 import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
 import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
 import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
+import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import GridColorSetting from './modal/grid/GridColorSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
   const [showOutlineModal, setShowOutlineModal] = useState(false)
+  const [showPlaceShapeModal, setShowPlaceShapeModal] = useState(false)
   const [showPropertiesSettingModal, setShowPropertiesSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
@@ -44,6 +46,7 @@ export default function FloorPlan() {
     setShowCanvasSettingModal,
     showOutlineModal,
     setShowOutlineModal,
+    setShowPlaceShapeModal,
   }
 
   useEffect(() => {
@@ -98,11 +101,11 @@ export default function FloorPlan() {
         <div className="canvas-content">
           <CanvasLayout />
           {showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
-          {/*{showOutlineModal && <OuterLineWall {...outlineProps} />}*/}
           {showOutlineModal && <WallLineSetting {...outlineProps} />}
           {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
           {showColorPickerModal && <GridColorSetting {...gridColorProps} />}
           {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
+          {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
         </div>
       </div>
     </>

src/components/floor-plan/MenuDepth01.jsx

@@ -7,7 +7,7 @@ import { currentMenuState } from '@/store/canvasAtom'
 import { useSetRecoilState } from 'recoil'
 
 export default function MenuDepth01(props) {
-  const { setShowOutlineModal, type } = props
+  const { setShowOutlineModal, type, setShowPlaceShapeModal } = props
   const { getMessage } = useMessage()
   const [activeMenu, setActiveMenu] = useState()
   const setCurrentMenu = useSetRecoilState(currentMenuState)
@@ -16,6 +16,7 @@ export default function MenuDepth01(props) {
     setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
     setCurrentMenu(menu)
     if (type === 'outline') {
+      setShowPlaceShapeModal(false)
       setShowOutlineModal(id === 0)
     }
   }

src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx

@@ -109,7 +109,7 @@ export default function WallLineSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: -1390, y: 30 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
       <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>

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

@@ -0,0 +1,17 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function MaterialGuide({ setShowMaterialGuidModal }) {
+  const { getMessage } = useMessage()
+  return (
+    <div className={`modal-pop-wrap ssm alert`}>
+      <div className="modal-head">
+        <button className="modal-close" onClick={() => setShowMaterialGuidModal(false)}>
+          닫기
+        </button>
+      </div>
+      <div className="modal-body">
+        <div className="modal-guide">{getMessage('modal.placement.initial.setting.roof.material.info')}</div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,120 @@
+import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
+import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useState } from 'react'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
+  const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
+  const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
+  const { getMessage } = useMessage()
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap l mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
+          <button className="modal-close" onClick={() => setShowPlaceShapeModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="placement-table">
+            <table>
+              <colgroup>
+                <col style={{ width: '151px' }} />
+                <col />
+              </colgroup>
+              <tbody>
+                <tr>
+                  <th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th>
+                  <td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td>
+                </tr>
+                <tr>
+                  <th>
+                    {getMessage('modal.placement.initial.setting.size')}
+                    <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
+                  </th>
+                  <td>
+                    <div className="pop-form-radio">
+                      <div className="d-check-radio pop">
+                        <input type="radio" name="radio01" id="ra01" />
+                        <label htmlFor="ra01">{getMessage('modal.placement.initial.setting.size.roof')}</label>
+                      </div>
+                      <div className="d-check-radio pop">
+                        <input type="radio" name="radio01" id="ra02" />
+                        <label htmlFor="ra02">{getMessage('modal.placement.initial.setting.size.actual')}</label>
+                      </div>
+                      <div className="d-check-radio pop">
+                        <input type="radio" name="radio01" id="ra03" />
+                        <label htmlFor="ra03">{getMessage('modal.placement.initial.setting.size.none.pitch')}</label>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th>
+                  <td>
+                    <div className="pop-form-radio">
+                      <div className="d-check-radio pop">
+                        <input type="radio" name="radio02" id="ra04" />
+                        <label htmlFor="ra04">{getMessage('modal.placement.initial.setting.roof.pitch')}</label>
+                      </div>
+                      <div className="d-check-radio pop">
+                        <input type="radio" name="radio02" id="ra05" />
+                        <label htmlFor="ra05">{getMessage('modal.placement.initial.setting.roof.angle')}</label>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>
+                    {getMessage('modal.placement.initial.setting.roof.material')}
+                    <button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
+                  </th>
+                  <td>
+                    <div className="placement-option">
+                      <div className="select-wrap" style={{ width: '171px' }}>
+                        <select className="select-light dark" name="" id="">
+                          <option>瓦53A</option>
+                        </select>
+                      </div>
+                      <div className="flex-ment">
+                        <span>W</span>
+                        <div className="select-wrap" style={{ width: '84px' }}>
+                          <select className="select-light dark" name="" id="">
+                            <option>265</option>
+                          </select>
+                        </div>
+                      </div>
+                      <div className="flex-ment">
+                        <span>L</span>
+                        <div className="select-wrap" style={{ width: '84px' }}>
+                          <select className="select-light dark" name="" id="">
+                            <option>235</option>
+                          </select>
+                        </div>
+                      </div>
+                      <div className="flex-ment">
+                        <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                        <div className="select-wrap" style={{ width: '84px' }}>
+                          <select className="select-light dark" name="" id="">
+                            <option>455</option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
+          </div>
+        </div>
+        {showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
+        {showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
+      </div>
+    </WithDraggable>
+  )
+}

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

@@ -0,0 +1,39 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function SizeGuide({ setShowSizeGuidModal }) {
+  const { getMessage } = useMessage()
+  return (
+    <div className={`modal-pop-wrap sm alert`}>
+      <div className="modal-head">
+        <button className="modal-close" onClick={() => setShowSizeGuidModal(false)}>
+          닫기
+        </button>
+      </div>
+      <div className="modal-body">
+        <div className="alert-title">{getMessage('modal.placement.initial.setting.size.info')}</div>
+        <div className="placement-table light">
+          <table>
+            <colgroup>
+              <col style={{ width: '60px' }} />
+              <col />
+            </colgroup>
+            <tbody>
+              <tr>
+                <th>{getMessage('modal.placement.initial.setting.size.roof')}</th>
+                <td>{getMessage('modal.placement.initial.setting.size.roof.info')}</td>
+              </tr>
+              <tr>
+                <th>{getMessage('modal.placement.initial.setting.size.actual')}</th>
+                <td>{getMessage('modal.placement.initial.setting.size.actual.info')}</td>
+              </tr>
+              <tr>
+                <th>{getMessage('modal.placement.initial.setting.size.none.pitch')}</th>
+                <td>{getMessage('modal.placement.initial.setting.size.none.pitch.info')}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -13,7 +13,7 @@ export default function SettingModal01(props) {
   const { getMessage } = useMessage()
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
+    <WithDraggable isShow={true} pos={{ x: 1300, y: -950 }}>
       <div className={`modal-pop-wrap sm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting')}</h1>

src/locales/ja.json

@@ -15,6 +15,22 @@
   "header.stem": "ステム",
   "plan.menu.plan.drawing": "도면작성",
   "plan.menu.placement.surface.initial.setting": "配置面 初期設定",
+  "modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物品作成",
+  "modal.placement.initial.setting.plan.": "図面の作成方法",
+  "modal.placement.initial.setting.size": "寸法入力方法",
+  "modal.placement.initial.setting.size.info": "寸法入力方法案内",
+  "modal.placement.initial.setting.size.roof": "複視図入力",
+  "modal.placement.initial.setting.size.roof.info": "平面の外壁線と立面の屋根勾配に基づいて作画する場合に選択",
+  "modal.placement.initial.setting.size.actual": "実測値入力",
+  "modal.placement.initial.setting.size.actual.info": "現地屋根の外周寸法を入力して作画する場合選択",
+  "modal.placement.initial.setting.size.none.pitch": "陸上屋根",
+  "modal.placement.initial.setting.size.none.pitch.info": "傾斜のない平面形状の屋根にパネルを配置する場合に選択",
+  "modal.placement.initial.setting.roof.angle.setting": "屋根角度設定",
+  "modal.placement.initial.setting.roof.pitch": "傾斜",
+  "modal.placement.initial.setting.roof.angle": "角度",
+  "modal.placement.initial.setting.roof.material": "屋根材の選択(単位:mm)",
+  "modal.placement.initial.setting.roof.material.info": "対応可能な屋根材や足場は限定されますので、必ず事前マニュアルをご確認ください。",
+  "modal.placement.initial.setting.rafter": "垂木の間隔",
   "plan.menu.roof.cover": "지붕덮개",
   "plan.menu.roof.cover.outline.drawing": "外壁線を描",
   "plan.menu.roof.cover.roof.shape.setting": "屋根形状設定",
@@ -84,6 +100,7 @@
   "modal.grid.copy.info": "間隔を設定し、コピー方向を選択します",
   "modal.grid.copy.length": "長さ",
   "modal.grid.copy.save": "保存",
+  "modal.common.save": "保存",
   "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
   "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
   "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",

src/locales/ko.json

@@ -15,6 +15,22 @@
   "header.stem": "Stem",
   "plan.menu.plan.drawing": "도면작성",
   "plan.menu.placement.surface.initial.setting": "배치면 초기 설정",
+  "modal.placement.initial.setting.plan.drawing": "도면 작성방법",
+  "modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성",
+  "modal.placement.initial.setting.size": "치수 입력방법",
+  "modal.placement.initial.setting.size.info": "치수 입력방법 안내",
+  "modal.placement.initial.setting.size.roof": "복시도 입력",
+  "modal.placement.initial.setting.size.roof.info": "평면의 외벽선과 입면의 지붕 구배를 바탕으로 작화할 경우 선택",
+  "modal.placement.initial.setting.size.actual": "실측값 입력",
+  "modal.placement.initial.setting.size.actual.info": "현지 지붕의 외주 치수를 입력하여 작화하는 경우 선택",
+  "modal.placement.initial.setting.size.none.pitch": "육지붕",
+  "modal.placement.initial.setting.size.none.pitch.info": "경사가 없는 평면 형태의 지붕에 패널을 배치할 경우 선택",
+  "modal.placement.initial.setting.roof.angle.setting": "지붕각도 설정",
+  "modal.placement.initial.setting.roof.pitch": "경사",
+  "modal.placement.initial.setting.roof.angle": "각도",
+  "modal.placement.initial.setting.roof.material": "지붕재 선택(단위: mm)",
+  "modal.placement.initial.setting.roof.material.info": "대응 가능한 지붕재 및 발판은 한정되므로 반드시 사전 매뉴얼을 확인하십시오.",
+  "modal.placement.initial.setting.rafter": "서까래",
   "plan.menu.roof.cover": "지붕덮개",
   "plan.menu.roof.cover.outline.drawing": "외벽선 그리기",
   "plan.menu.roof.cover.roof.shape.setting": "지붕형상 설정",
@@ -85,6 +101,7 @@
   "modal.grid.copy.info": "간격을 설정하고 복사 방향을 선택하십시오",
   "modal.grid.copy.length": "길이",
   "modal.grid.copy.save": "저장",
+  "modal.common.save": "저장",
   "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",
   "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경",
   "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",

src/styles/_modal.scss

@@ -28,8 +28,6 @@ $alert-color: #101010;
 
 .modal-pop-wrap {
   position: fixed;
-  top: 200px;
-  right: 100px;
   width: 100%;
   min-width: 300px;
   height: -webkit-fit-content;