Merge branch 'qcast-pub' into dev

src/components/floor-plan/CanvasMenu.jsx

@@ -39,6 +39,7 @@ export default function CanvasMenu(props) {
     setShowSlopeSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowRoofShapeSettingModal,
+    setShowObjectSettingModal,
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
@@ -94,6 +95,7 @@ export default function CanvasMenu(props) {
     setShowSlopeSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowWallLineOffsetSettingModal,
+    setShowObjectSettingModal,
     type,
   }
 

src/components/floor-plan/FloorPlan.jsx

@@ -21,6 +21,7 @@ import Slope from '@/components/floor-plan/modal/Slope'
 import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
 import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
 import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
+import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -32,6 +33,7 @@ export default function FloorPlan() {
   const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false)
   const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false)
   const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
+  const [showObjectSettingModal, setShowObjectSettingModal] = useState(false)
   const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
   const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
@@ -64,6 +66,7 @@ export default function FloorPlan() {
     setShowSlopeSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowRoofShapeSettingModal,
+    setShowObjectSettingModal,
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
@@ -134,6 +137,7 @@ export default function FloorPlan() {
           {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
           {/*<Movement />*/}
           {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
+          {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
         </div>
       </div>
     </>

src/components/floor-plan/MenuDepth01.jsx

@@ -18,6 +18,7 @@ export default function MenuDepth01(props) {
     setShowSlopeSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowWallLineOffsetSettingModal,
+    setShowObjectSettingModal,
   } = props
   const { getMessage } = useMessage()
   const [activeMenu, setActiveMenu] = useState()
@@ -41,6 +42,7 @@ export default function MenuDepth01(props) {
     if (type === 'surface') {
       setShowSlopeSettingModal(id === 0)
       setShowPlaceShapeDrawingModal(id === 1)
+      setShowObjectSettingModal(id === 3)
     }
   }
 

src/components/floor-plan/modal/object/ObjectSetting.jsx

@@ -0,0 +1,49 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useState } from 'react'
+import OpenSpace from '@/components/floor-plan/modal/object/type/OpenSpace'
+import Shadow from '@/components/floor-plan/modal/object/type/Shadow'
+import TriangleDormer from '@/components/floor-plan/modal/object/type/TriangleDormer'
+import PentagonDormer from '@/components/floor-plan/modal/object/type/PentagonDormer'
+
+export default function ObjectSetting({ setShowObjectSettingModal }) {
+  const { getMessage } = useMessage()
+  const [buttonAct, setButtonAct] = useState(1)
+  const buttonMenu = [
+    { id: 1, name: getMessage('modal.object.setting.type.open.space.placement') },
+    { id: 2, name: getMessage('modal.object.setting.type.shadow.placement') },
+    { id: 3, name: getMessage('modal.object.setting.type.triangle.dormer') },
+    { id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
+  ]
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap lrr`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
+          <button className="modal-close" onClick={() => setShowObjectSettingModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="modal-btn-wrap">
+            {buttonMenu.map((item) => (
+              <button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
+                {item.name}
+              </button>
+            ))}
+          </div>
+          <div className="properties-setting-wrap outer">
+            <div className="setting-tit">{getMessage('setting')}</div>
+            {buttonAct === 1 && <OpenSpace />}
+            {buttonAct === 2 && <Shadow />}
+            {buttonAct === 3 && <TriangleDormer />}
+            {buttonAct === 4 && <PentagonDormer />}
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('write')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/object/type/OpenSpace.jsx

@@ -0,0 +1,53 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function OpenSpace() {
+  const { getMessage } = useMessage()
+  return (
+    <div className="discrimination-box mb10">
+      <div className="mb-box">
+        <div className="d-check-radio pop">
+          <input type="radio" name="radio01" id="ra01" />
+          <label htmlFor="ra01">{getMessage('modal.object.setting.free.input')}</label>
+        </div>
+      </div>
+      <div className="mb-box">
+        <div className="d-check-radio pop">
+          <input type="radio" name="radio01" id="ra02" />
+          <label htmlFor="ra02">{getMessage('modal.object.setting.size.input')}</label>
+        </div>
+      </div>
+      <div className="mb-box">
+        <div className="padding-form">
+          <div className="eaves-keraba-table">
+            <div className="eaves-keraba-item">
+              <div className="eaves-keraba-th">{getMessage('modal.object.setting.width')}</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" defaultValue={100} />
+                  </div>
+                  <span className="thin">mm</span>
+                </div>
+              </div>
+            </div>
+            <div className="eaves-keraba-item">
+              <div className="eaves-keraba-th">{getMessage('modal.object.setting.height')}</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" defaultValue={100} />
+                  </div>
+                  <span className="thin">mm</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="d-check-box pop">
+        <input type="checkbox" id="ch99" />
+        <label htmlFor="ch99">{getMessage('modal.object.setting.area.cross')}</label>
+      </div>
+    </div>
+  )
+}

src/components/floor-plan/modal/object/type/PentagonDormer.jsx

@@ -0,0 +1,92 @@
+import Image from 'next/image'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function PentagonDormer() {
+  const { getMessage } = useMessage()
+  return (
+    <>
+      <div className="discrimination-box mb10">
+        <div className="discrimination-tit">{getMessage('modal.object.setting.size.setting')}</div>
+        <div className="object-size-wrap">
+          <div className="object-size-img">
+            <Image src="/static/images/canvas/object_img02.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
+          </div>
+          <div className="object-size-input">
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.object.setting.agreement.depth')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '60px' }}>
+                      <input type="text" className="input-origin block" defaultValue={2000} />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.object.setting.offset.depth')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '60px' }}>
+                      <input type="text" className="input-origin block" defaultValue={1000} />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('width')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '60px' }}>
+                      <input type="text" className="input-origin block" defaultValue={4000} />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.object.setting.offset.depth')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '60px' }}>
+                      <input type="text" className="input-origin block" defaultValue={500} />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('slope')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '60px' }}>
+                      <input type="text" className="input-origin block" defaultValue={4} />
+                    </div>
+                    <span className="thin">寸</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="discrimination-box">
+        <div className="discrimination-tit">方向の選択</div>
+        <div className="object-direction-wrap">
+          <div className="plane-direction">
+            <span className="top">{getMessage('commons.north')}</span>
+            <span className="right">{getMessage('commons.east')}</span>
+            <span className="bottom">{getMessage('commons.south')}</span>
+            <span className="left">{getMessage('commons.west')}</span>
+            <button className="plane-btn up"></button>
+            <button className="plane-btn right"></button>
+            <button className="plane-btn down act"></button>
+            <button className="plane-btn left"></button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/object/type/Shadow.jsx

@@ -0,0 +1,49 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Shadow() {
+  const { getMessage } = useMessage()
+  return (
+    <div className="discrimination-box mb10">
+      <div className="mb-box">
+        <div className="d-check-radio pop">
+          <input type="radio" name="radio01" id="ra01" />
+          <label htmlFor="ra01">{getMessage('modal.object.setting.free.input')}</label>
+        </div>
+      </div>
+      <div className="mb-box">
+        <div className="d-check-radio pop">
+          <input type="radio" name="radio01" id="ra02" />
+          <label htmlFor="ra02">{getMessage('modal.object.setting.size.input')}</label>
+        </div>
+      </div>
+      <div className="mb-box">
+        <div className="padding-form">
+          <div className="eaves-keraba-table">
+            <div className="eaves-keraba-item">
+              <div className="eaves-keraba-th">{getMessage('modal.object.setting.width')}</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" defaultValue={100} />
+                  </div>
+                  <span className="thin">mm</span>
+                </div>
+              </div>
+            </div>
+            <div className="eaves-keraba-item">
+              <div className="eaves-keraba-th">{getMessage('modal.object.setting.height')}</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" defaultValue={100} />
+                  </div>
+                  <span className="thin">mm</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/floor-plan/modal/object/type/TriangleDormer.jsx

@@ -0,0 +1,81 @@
+import Image from 'next/image'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function TriangleDormer() {
+  const { getMessage } = useMessage()
+  return (
+    <>
+      <div className="discrimination-box mb10">
+        <div className="discrimination-tit">{getMessage('modal.object.setting.size.setting')}</div>
+        <div className="object-size-wrap">
+          <div className="object-size-img">
+            <Image src="/static/images/canvas/object_img01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
+          </div>
+          <div className="object-size-input">
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.object.setting.agreement.depth')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '60px' }}>
+                      <input type="text" className="input-origin block" defaultValue={2000} />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.object.setting.offset.depth')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '60px' }}>
+                      <input type="text" className="input-origin block" defaultValue={1000} />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('width')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '60px' }}>
+                      <input type="text" className="input-origin block" defaultValue={4000} />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('slope')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '60px' }}>
+                      <input type="text" className="input-origin block" defaultValue={4} />
+                    </div>
+                    <span className="thin">寸</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="discrimination-box">
+        <div className="discrimination-tit">方向の選択</div>
+        <div className="object-direction-wrap">
+          <div className="plane-direction">
+            <span className="top">{getMessage('commons.north')}</span>
+            <span className="right">{getMessage('commons.east')}</span>
+            <span className="bottom">{getMessage('commons.south')}</span>
+            <span className="left">{getMessage('commons.west')}</span>
+            <button className="plane-btn up"></button>
+            <button className="plane-btn right"></button>
+            <button className="plane-btn down act"></button>
+            <button className="plane-btn left"></button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx

@@ -7,7 +7,6 @@ export default function Offset({ setShowSlopeSettingModal }) {
       <div className="outline-wrap">
         <div className="guide sm">{getMessage('modal.wallline.offset.setting.offset.info')}</div>
         <div className="discrimination-box mb10">
-          <div className="padding-form">
           <div className="eaves-keraba-table">
             <div className="eaves-keraba-item">
               <div className="eaves-keraba-th">{getMessage('length')}</div>
@@ -36,7 +35,6 @@ export default function Offset({ setShowSlopeSettingModal }) {
           </div>
         </div>
       </div>
-      </div>
     </>
   )
 }

src/locales/ja.json

@@ -154,6 +154,20 @@
   "modal.wallline.offset.setting.wallline.edit.position": "支店",
   "modal.wallline.offset.setting.offset": "オフセット",
   "modal.wallline.offset.setting.offset.info": "オフセットしたい外壁を選択してください。",
+  "modal.object.setting.type.open.space.placement": "開口部の配置",
+  "modal.object.setting.type.shadow.placement": "影の配置",
+  "modal.object.setting.type.triangle.dormer": "三角形ドーマー",
+  "modal.object.setting.type.pentagon.dormer": "五角形ドーマー",
+  "modal.object.setting.free.input": "フリー入力",
+  "modal.object.setting.size.input": "寸法入力",
+  "modal.object.setting.width": "横長",
+  "modal.object.setting.height": "縦長",
+  "modal.object.setting.area.cross": "エリア交差",
+  "modal.object.setting.size.setting": "サイズ設定",
+  "modal.object.setting.agreement.depth": "同意の深さ",
+  "modal.object.setting.offset.depth": "出幅 (深さ)",
+  "modal.object.setting.offset.width": "出幅 (幅)",
+  "modal.object.setting.direction.select": "方向の選択",
   "setting": "設定",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
@@ -245,7 +259,7 @@
   "common.require": "필수",
   "commons.west": "立つ",
   "commons.east": "ドン",
-  "commons.south": "M",
+  "commons.south": "立つ",
   "commons.north": "北",
   "site.name": "Q.CAST III",
   "site.sub_name": "태양광 발전 시스템 도면관리 사이트",
@@ -312,6 +326,7 @@
   "eaves.offset": "軒の",
   "gable.offset": "ケラバ出幅",
   "offset": "出幅",
+  "width": "幅",
   "size": "寸",
   "size.angle": "寸(度)",
   "eaves": "軒",
@@ -335,5 +350,6 @@
   "jerkinhead.slope": "半折先傾斜",
   "shed.width": "片流幅",
   "windage": "漂流",
-  "windage.width": "漂流の出幅"
+  "windage.width": "漂流の出幅",
+  "write": "作成"
 }

src/locales/ko.json

@@ -160,6 +160,20 @@
   "modal.wallline.offset.setting.wallline.edit.position": "지점",
   "modal.wallline.offset.setting.offset": "오프셋",
   "modal.wallline.offset.setting.offset.info": "오프셋 하고 싶은 외벽선을 선택하세요.",
+  "modal.object.setting.type.open.space.placement": "개구 배치",
+  "modal.object.setting.type.shadow.placement": "그림자 배치",
+  "modal.object.setting.type.triangle.dormer": "삼각형 도머",
+  "modal.object.setting.type.pentagon.dormer": "오각형 도머",
+  "modal.object.setting.free.input": "프리입력",
+  "modal.object.setting.size.input": "치수입력",
+  "modal.object.setting.width": "가로길이",
+  "modal.object.setting.height": "세로길이",
+  "modal.object.setting.area.cross": "영역교차",
+  "modal.object.setting.size.setting": "사이즈설정",
+  "modal.object.setting.agreement.depth": "동의길이 깊이",
+  "modal.object.setting.offset.depth": "출폭(깊이)",
+  "modal.object.setting.offset.width": "출폭(폭)",
+  "modal.object.setting.direction.select": "방향 선택",
   "setting": "설정",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
@@ -318,6 +332,7 @@
   "eaves.offset": "처마 출폭",
   "gable.offset": "케라바 출폭",
   "offset": "출폭",
+  "width": "폭",
   "size": "치수",
   "size.angle": "寸(度)",
   "eaves": "처마",
@@ -341,5 +356,6 @@
   "jerkinhead.slope": "반절처 경사",
   "shed.width": "한쪽흐름 폭",
   "windage": "편류",
-  "windage.width": "편류의 출폭"
+  "windage.width": "편류의 출폭",
+  "write": "작성"
 }