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

public/static/images/canvas/eaves_icon09.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
+<mask id="mask0_13_48" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
+<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
+</mask>
+<g mask="url(#mask0_13_48)">
+<path d="M0 -5.48276L16.254 9L32 -6" stroke="black" stroke-width="2"/>
+<path d="M16.2 9V30" stroke="black" stroke-width="2"/>
+</g>
+</svg>

public/static/images/canvas/eaves_icon10.svg

@@ -0,0 +1,18 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" width="30" height="30" fill="white"/>
+<mask id="mask0_14_55" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
+<rect width="31" height="30" fill="white"/>
+</mask>
+<g mask="url(#mask0_14_55)">
+<rect x="25" y="6.5" width="4" height="1" transform="rotate(-90 25 6.5)" fill="#ED0004"/>
+<rect x="5" y="6.5" width="4" height="1" transform="rotate(-90 5 6.5)" fill="#ED0004"/>
+<rect x="7.30005" y="5" width="1" height="16.4" transform="rotate(-90 7.30005 5)" fill="black"/>
+<path d="M9.86255 7L7.30005 4.5L9.86255 2" stroke="black"/>
+<path d="M21.3 7L23.8625 4.5L21.3 2" stroke="black"/>
+<rect width="2" height="21" transform="matrix(-1 0 0 1 29.7 9)" fill="black"/>
+<rect width="2" height="21" transform="matrix(-1 0 0 1 3.69995 9)" fill="black"/>
+<rect width="28" height="1.90909" transform="matrix(-1 0 0 1 29.7 9)" fill="black"/>
+<rect width="2" height="11" transform="matrix(-1 0 0 1 16.7 19)" fill="black"/>
+<path d="M6 10.3103L15.6508 19L25 10" stroke="black" stroke-width="2"/>
+</g>
+</svg>

public/static/images/canvas/module_tab_arr.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 7183" d="M1.33333 1L7.33333 7L1.33333 13" stroke="#7D7D7D" stroke-width="1.5"/>
+</svg>

public/static/images/canvas/module_tab_arr_white.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 7183" d="M1.33331 1L7.33331 7L1.33331 13" stroke="white" stroke-width="1.5"/>
+</svg>

public/static/images/canvas/penal_arr.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 4" d="M1.5 1.25L5 4.75L8.5 1.25" stroke="#3D3D3D" stroke-width="1.5"/>
+</svg>

public/static/images/canvas/penal_arr_white.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 4" d="M1.5 4.75L5 1.25L8.5 4.75" stroke="white" stroke-width="1.5"/>
+</svg>

src/components/floor-plan/CanvasMenu.jsx

@@ -41,6 +41,7 @@ export default function CanvasMenu(props) {
     setShowRoofShapeSettingModal,
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
+    setShowEavesGableEditModal,
   } = props
 
   const [menuNumber, setMenuNumber] = useState(null)
@@ -88,6 +89,7 @@ export default function CanvasMenu(props) {
     setShowRoofShapeSettingModal,
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
+    setShowEavesGableEditModal,
     setShowSlopeSettingModal,
     setShowPlaceShapeDrawingModal,
     type,
@@ -116,6 +118,7 @@ export default function CanvasMenu(props) {
   const onClickPlacementInitialMenu = () => {
     setShowOutlineModal(false)
     setShowCanvasSettingModal(false)
+    setShowEavesGableEditModal(false)
     setShowPlaceShapeModal(true)
   }
 

src/components/floor-plan/FloorPlan.jsx

@@ -19,6 +19,8 @@ import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/
 import Slope from '@/components/floor-plan/modal/Slope'
 import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
 import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
+import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
+import Movement from '@/components/floor-plan/modal/movement/Movement'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -30,6 +32,7 @@ export default function FloorPlan() {
   const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false)
   const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false)
   const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
+  const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -62,6 +65,7 @@ export default function FloorPlan() {
     setShowRoofShapeSettingModal,
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
+    setShowEavesGableEditModal,
   }
 
   useEffect(() => {
@@ -128,6 +132,8 @@ export default function FloorPlan() {
           {showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
           {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
           {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
+          {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
+          <Movement />
         </div>
       </div>
     </>

src/components/floor-plan/MenuDepth01.jsx

@@ -14,6 +14,7 @@ export default function MenuDepth01(props) {
     setShowRoofShapeSettingModal,
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
+    setShowEavesGableEditModal,
     setShowSlopeSettingModal,
     setShowPlaceShapeDrawingModal,
   } = props
@@ -31,6 +32,7 @@ export default function MenuDepth01(props) {
       setShowRoofShapeSettingModal(id === 1)
       setShowRoofShapePassivitySettingModal(id === 2)
       setShowAuxiliaryModal(id === 3)
+      setShowEavesGableEditModal(id === 4)
       setShowPlaceShapeDrawingModal(false)
     }
 

src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx

@@ -0,0 +1,46 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useState } from 'react'
+import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves'
+import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable'
+import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge'
+import Shed from '@/components/floor-plan/modal/eavesGable/type/Shed'
+
+export default function EavesGableEdit({ setShowEavesGableEditModal }) {
+  const { getMessage } = useMessage()
+  const [buttonAct, setButtonAct] = useState(1)
+  const buttonMenu = [
+    { id: 1, name: getMessage('eaves') },
+    { id: 2, name: getMessage('gable') },
+    { id: 3, name: getMessage('wall.merge') },
+    { id: 4, name: getMessage('shed') },
+  ]
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
+          <button className="modal-close" onClick={() => setShowEavesGableEditModal(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 && <Eaves />}
+            {buttonAct === 2 && <Gable />}
+            {buttonAct === 3 && <WallMerge />}
+            {buttonAct === 4 && <Shed />}
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/eavesGable/type/Eaves.jsx

@@ -0,0 +1,81 @@
+import { useMessage } from '@/hooks/useMessage'
+import Image from 'next/image'
+import { useState } from 'react'
+
+export default function Eaves() {
+  const { getMessage } = useMessage()
+  const [type, setType] = useState()
+  const onChange = (e) => {
+    console.log(e)
+    setType(e.target.value)
+  }
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="outline-form mb15">
+          <span className="mr10" style={{ width: '24px' }}>
+            {getMessage('slope')}
+          </span>
+          <div className="input-grid mr5" style={{ width: '100px' }}>
+            <input type="text" className="input-origin block" defaultValue={100} />
+          </div>
+          <span className="thin">寸</span>
+        </div>
+        <div className="outline-form">
+          <span className="mr10" style={{ width: '24px' }}>
+            {getMessage('offset')}
+          </span>
+          <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 className="outline-wrap">
+        <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" value="1" checked={type === '1'} onChange={(e) => onChange(e)} />
+                <label htmlFor="ra01">{getMessage('modal.eaves.gable.edit.basic')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
+                <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
+              </div>
+            </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" value="2" checked={type === '2'} onChange={(e) => onChange(e)} />
+                <label htmlFor="ra02">{getMessage('hipandgable')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
+                <Image src="/static/images/canvas/eaves_icon02.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="outline-form">
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} readOnly={type === '1'} />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico ">
+                <Image src="/static/images/canvas/eaves_icon03.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/eavesGable/type/Gable.jsx

@@ -0,0 +1,87 @@
+import { useMessage } from '@/hooks/useMessage'
+import Image from 'next/image'
+
+export default function Gable() {
+  const { getMessage } = useMessage()
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="outline-form ">
+          <span className="mr10" style={{ width: '24px' }}>
+            {getMessage('offset')}
+          </span>
+          <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 className="outline-wrap">
+        <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" />
+                <label htmlFor="ra01">{getMessage('modal.eaves.gable.edit.basic')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico act">
+                <Image src="/static/images/canvas/eaves_icon04.svg" alt="react" width={30} height={30} />
+              </div>
+            </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" />
+                <label htmlFor="ra02">{getMessage('jerkinhead')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico">
+                <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="outline-form">
+                <span className="mr10" style={{ width: '24px' }}>
+                  {getMessage('slope')}
+                </span>
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} />
+                </div>
+                <span className="thin">寸</span>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico ">
+                <Image src="/static/images/canvas/eaves_icon05.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="outline-form">
+                <span className="mr10" style={{ width: '24px' }}>
+                  {getMessage('offset')}
+                </span>
+                <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 className="eaves-keraba-td">
+              <div className="eaves-keraba-ico ">
+                <Image src="/static/images/canvas/eaves_icon10.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/eavesGable/type/Shed.jsx

@@ -0,0 +1,20 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Shed() {
+  const { getMessage } = useMessage()
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="outline-form">
+          <span className="mr10" style={{ width: '24px' }}>
+            {getMessage('offset')}
+          </span>
+          <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>
+    </>
+  )
+}

src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx

@@ -0,0 +1,59 @@
+import { useMessage } from '@/hooks/useMessage'
+import Image from 'next/image'
+
+export default function WallMerge() {
+  const { getMessage } = useMessage()
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="guide">{getMessage('modal.eaves.gable.edit.wall.merge.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" />
+                <label htmlFor="ra01">{getMessage('has.sleeve')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico act">
+                <Image src="/static/images/canvas/eaves_icon06.svg" alt="react" width={30} height={30} />
+              </div>
+            </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" />
+                <label htmlFor="ra02">{getMessage('has.not.sleeve')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico">
+                <Image src="/static/images/canvas/eaves_icon07.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="outline-form">
+                <span className="mr10" style={{ width: '24px' }}>
+                  {getMessage('offset')}
+                </span>
+                <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 className="eaves-keraba-td">
+              <div className="eaves-keraba-ico ">
+                <Image src="/static/images/canvas/eaves_icon08.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/movement/Movement.jsx

@@ -0,0 +1,40 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useState } from 'react'
+
+export default function Movement({}) {
+  const { getMessage } = useMessage()
+  const [buttonAct, setButtonAct] = useState(1)
+  const buttonMenu = [
+    { id: 1, name: '銅線の移動軒' },
+    { id: 2, name: '型上げ・降り' },
+  ]
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">軒・ケラバ変更</h1>
+          <button className="modal-close">닫기</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">設定</div>
+            {/*{buttonAct === 1 && <MovingTab01 />}*/}
+            {/*{buttonAct === 2 && <MovingTab02 />}*/}
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import Eaves from '@/components/floor-plan/modal/roofShape/passivity/eaves'
+import Gable from '@/components/floor-plan/modal/roofShape/passivity/gable'
+import Shed from '@/components/floor-plan/modal/roofShape/passivity/shed'
+
+export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) {
+  const [buttonAct, setButtonAct] = useState(1)
+  const buttons = [
+    { id: 1, name: '軒' },
+    { id: 2, name: 'ケラバ' },
+    { id: 3, name: '漂流' },
+  ]
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap xxm`}>
+        <div className="modal-head">
+          <h1 className="title">屋根形状の設定</h1>
+          <button className="modal-close" onClick={() => setShowRoofShapePassivitySettingModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="modal-btn-wrap">
+            {buttons.map((button) => (
+              <button className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
+                {button.name}
+              </button>
+            ))}
+          </div>
+          <div className="modal-bottom-border-bx">
+            <div className="setting-tit">設定</div>
+            <div className="discrimination-box">
+              {buttonAct === 1 && <Eaves />}
+              {buttonAct === 2 && <Gable />}
+              {buttonAct === 3 && <Shed />}
+            </div>
+            <div className="grid-btn-wrap">
+              <button className="btn-frame sub-tab mr5">一変戦に戻る</button>
+              <button className="btn-frame sub-tab act">適用</button>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">設定完了</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/roofShape/passivity/eaves.jsx

@@ -0,0 +1,42 @@
+export default function Eaves() {
+  return (
+    <>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          傾斜
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">寸法</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          軒の
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          ケラバ 出幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          片流幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/roofShape/passivity/gable.jsx

@@ -0,0 +1,42 @@
+export default function Gable() {
+  return (
+    <>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          傾斜
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">寸法</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          軒の
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          ケラバ 出幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          片流幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/roofShape/passivity/shed.js

@@ -0,0 +1,42 @@
+export default function Shed() {
+  return (
+    <>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          傾斜
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">寸法</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          軒の
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          ケラバ 出幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          片流幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+    </>
+  )
+}

src/locales/ja.json

@@ -144,6 +144,9 @@
   "modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。",
   "modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定",
   "modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定",
+  "modal.eaves.gable.edit": "軒・ケラバ変更",
+  "modal.eaves.gable.edit.basic": "通常",
+  "modal.eaves.gable.edit.wall.merge.info": "家屋などの壁に面する屋根を作成します。",
   "setting": "設定",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
@@ -301,11 +304,13 @@
   "slope": "傾斜",
   "eaves.offset": "軒の",
   "gable.offset": "ケラバ出幅",
+  "offset": "出幅",
   "size": "寸",
   "size.angle": "寸(度)",
   "eaves": "軒",
   "gable": "ケラバ",
   "wall": "壁",
+  "wall.merge": "壁取り",
   "hajebichi": "ハゼビーチ",
   "straight.line": "直線",
   "right.angle": "直角",

src/locales/ko.json

@@ -151,6 +151,9 @@
   "modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고, 처마로 설정 또는 케라바로 설정\n    버튼을 클릭하여 설정값을 적용하십시오.\n",
   "modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정",
   "modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정",
+  "modal.eaves.gable.edit": "처마・케라바 변경",
+  "modal.eaves.gable.edit.basic": "통상",
+  "modal.eaves.gable.edit.wall.merge.info": "하옥 등 벽에 접하는 지붕을 작성합니다.",
   "setting": "설정",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
@@ -308,11 +311,13 @@
   "slope": "경사",
   "eaves.offset": "처마 출폭",
   "gable.offset": "케라바 출폭",
+  "offset": "출폭",
   "size": "치수",
   "size.angle": "寸(度)",
   "eaves": "처마",
   "gable": "케라바",
   "wall": "벽",
+  "wall.merge": "벽취합",
   "hajebichi": "하제비치",
   "straight.line": "직선",
   "right.angle": "직각",

src/styles/_contents.scss

@@ -843,3 +843,84 @@
         font-weight: 500;
     }
 }
+
+// 패널 배치 집계
+
+.penal-wrap{
+    position: fixed;
+    top: 200px;
+    left: 50px;
+    z-index: 999999;
+    width: 237px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #fff;
+    border: 1px solid #DFDFDF;
+    padding: 0 34px 0 10px;
+    border-radius: 2px;
+    box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    &::before{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 12px;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 6px;
+        background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
+        background-size: cover;
+    }
+    h2{
+        font-size: 12px;
+        font-weight: 500;
+        color: #3D3D3D;
+    }
+    .penal-table-wrap{
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: -1px;
+        min-width: calc(100% + 2px);
+        background-color: #3D3D3D;
+        border: 1px solid #3D3D3D;
+        padding: 20px;
+        .penal-table{
+            table-layout: fixed;
+            border-collapse: collapse;
+            thead{
+                th{
+                    text-align: center;
+                    background-color:rgba(255, 255, 255, 0.05);
+                    font-size: 12px;
+                    font-weight: 500;
+                    color: #fff;
+                    border: 1px solid #505050;
+                }
+            }
+            tbody{
+                td{
+                    font-size: 12px;
+                    color: #fff;
+                    font-weight: 400;
+                    text-align: center;
+                    padding: 0 10px;
+                    border: 1px solid #505050;
+                }
+            }
+        }
+    }
+    &.act{
+        border: 1px solid #3D3D3D;
+        background-color: #3D3D3D;
+        h2{
+            color: #fff;
+        }
+        &::before{
+            background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
+        }
+        .penal-table-wrap{
+            display: block;
+        }
+    }
+}

src/styles/_modal.scss

@@ -77,6 +77,10 @@ $alert-color: #101010;
     width: 640px;
   }
 
+  &.lx-2 {
+    width: 740px;
+  }
+
   &.lx {
     width: 770px;
   }
@@ -1543,3 +1547,115 @@ $alert-color: #101010;
     }
   }
 }
+
+
+// 지붕모듈선택
+.roof-module-tab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+
+  .module-tab-bx {
+    flex: 1;
+    height: 34px;
+    line-height: 31px;
+    border: 1px solid #484848;
+    border-radius: 2px;
+    background-color: transparent;
+    font-size: 12px;
+    color: #AAA;
+    text-align: center;
+    cursor: default;
+    transition: all .15s ease-in-out;
+
+    &.act {
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
+      color: #fff;
+      font-weight: 500;
+    }
+  }
+
+  .tab-arr {
+    display: block;
+    width: 9px;
+    height: 14px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+    transition: all .15s ease-in-out;
+
+    &.act {
+      background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
+    }
+  }
+}
+
+.roof-module-compas {
+  margin-bottom: 24px;
+
+  .compas-box-inner {
+    width: 280px;
+    height: 253px;
+
+    .circle {
+      top: 86%;
+
+      &:nth-child(1),
+      &:nth-child(7),
+      &:nth-child(13),
+      &:nth-child(19) {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 1px;
+          height: 6px;
+          background-color: #8B8B8B;
+        }
+      }
+
+      i {
+        top: 32px;
+      }
+
+      &.act {
+        i {
+          color: #8B8B8B;
+        }
+      }
+    }
+  }
+}
+
+.center-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.module-table-flex-wrap {
+  display: flex;
+  gap: 10px;
+}
+
+.module-table-box {
+  flex: 1;
+  background-color: #3D3D3D;
+  border-radius: 2px;
+
+  .module-table-inneer {
+    padding: 10px;
+
+    .outline-form {
+      span {
+        width: auto;
+      }
+    }
+  }
+}

src/styles/_reset.scss

@@ -144,6 +144,12 @@ button{
 .ml10{margin-left: 10px !important;}
 .ml15{margin-left: 15px !important;}
 
+// align
+.al-l{text-align: left !important;}
+.al-r{text-align: right !important;}
+.al-c{text-align: center !important;}
+
+
 // button
 .btn-frame{
     display: inline-block;
@@ -410,6 +416,11 @@ input[type=text]{
         &:read-only{
             color: #AAA;
         }
+        &.plane{
+            font-family: 'Noto Sans JP', sans-serif;
+            border: 1px solid #525252;
+            background-color: transparent;
+        }
     }
     &.input-light{
         display: block;

src/styles/_table.scss

@@ -175,3 +175,31 @@ table{
         }
     }
 }
+
+.roof-module-table{
+    table{
+        border-collapse: collapse;
+        thead{
+            th{
+                height: 40px;
+                padding: 0 10px;
+                font-size: 12px;
+                color: #fff;
+                font-weight: 500;
+                border: 1px solid #505050;
+                vertical-align: middle;
+                background-color: rgba(255, 255, 255, 0.05);
+                text-align: center;
+                word-break: keep-all;
+            }
+        }
+        tbody{
+            td{
+                font-size: 12px;
+                color: #fff;
+                font-weight: 400;
+                border: 1px solid #505050;
+            }
+        }
+    }
+}