보조선 작성 추가

src/components/floor-plan/CanvasMenu.jsx

@@ -31,7 +31,17 @@ const canvasMenus = [
 ]
 
 export default function CanvasMenu(props) {
-  const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal, setShowPlaceShapeModal, setShowRoofShapeSettingModal } = props
+  const {
+    setShowCanvasSettingModal,
+    showOutlineModal,
+    setShowOutlineModal,
+    setShowPlaceShapeModal,
+    setShowSlopeSettingModal,
+    setShowPlaceShapeDrawingModal,
+    setShowRoofShapeSettingModal,
+    setShowRoofShapePassivitySettingModal,
+    setShowAuxiliaryModal,
+  } = props
 
   const [menuNumber, setMenuNumber] = useState(null)
   const [type, setType] = useState('')
@@ -76,6 +86,10 @@ export default function CanvasMenu(props) {
     setShowOutlineModal,
     setShowPlaceShapeModal,
     setShowRoofShapeSettingModal,
+    setShowRoofShapePassivitySettingModal,
+    setShowAuxiliaryModal,
+    setShowSlopeSettingModal,
+    setShowPlaceShapeDrawingModal,
     type,
   }
 

src/components/floor-plan/FloorPlan.jsx

@@ -15,6 +15,10 @@ import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/Pr
 import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import GridColorSetting from './modal/grid/GridColorSetting'
 import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
+import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
+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'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -22,6 +26,10 @@ export default function FloorPlan() {
   const [showPlaceShapeModal, setShowPlaceShapeModal] = useState(false)
   const [showPropertiesSettingModal, setShowPropertiesSettingModal] = useState(false)
   const [showRoofShapeSettingModal, setShowRoofShapeSettingModal] = useState(false)
+  const [showRoofShapePassivitySettingModal, setShowRoofShapePassivitySettingModal] = useState(false)
+  const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false)
+  const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false)
+  const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -49,7 +57,11 @@ export default function FloorPlan() {
     showOutlineModal,
     setShowOutlineModal,
     setShowPlaceShapeModal,
+    setShowSlopeSettingModal,
+    setShowPlaceShapeDrawingModal,
     setShowRoofShapeSettingModal,
+    setShowRoofShapePassivitySettingModal,
+    setShowAuxiliaryModal,
   }
 
   useEffect(() => {
@@ -110,6 +122,12 @@ export default function FloorPlan() {
           {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
           {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
           {showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
+          {showRoofShapePassivitySettingModal && (
+            <RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
+          )}
+          {showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
+          {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
+          {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
         </div>
       </div>
     </>

src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx

@@ -0,0 +1,152 @@
+import { useState } from 'react'
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
+import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
+import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
+import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
+import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
+import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
+import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
+
+export default function AuxiliaryDrawing() {
+  const { getMessage } = useMessage()
+  const [buttonAct, setButtonAct] = useState(1)
+  const types = [
+    { id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE },
+    { id: 2, name: getMessage('right.angle'), type: OUTER_LINE_TYPE.RIGHT_ANGLE },
+    { id: 3, name: getMessage('double.pitch'), type: OUTER_LINE_TYPE.DOUBLE_PITCH },
+    { id: 4, name: getMessage('angle'), type: OUTER_LINE_TYPE.ANGLE },
+    { id: 5, name: getMessage('diagonal'), type: OUTER_LINE_TYPE.DIAGONAL_LINE },
+  ]
+  const {
+    length1,
+    setLength1,
+    length2,
+    setLength2,
+    length1Ref,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+    angle1,
+    setAngle1,
+    angle1Ref,
+    angle2,
+    setAngle2,
+    angle2Ref,
+    type,
+    setType,
+    arrow1Ref,
+    arrow2Ref,
+    outerLineDiagonalLength,
+    setOuterLineDiagonalLength,
+    outerLineDiagonalLengthRef,
+    handleRollback,
+    handleFix,
+  } = useOuterLineWall()
+
+  const outerLineProps = {
+    length1,
+    setLength1,
+    length1Ref,
+    arrow1,
+    setArrow1,
+  }
+
+  const rightAngleProps = {
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+  }
+
+  const doublePitchProps = {
+    angle1,
+    setAngle1,
+    angle1Ref,
+    angle2,
+    setAngle2,
+    angle2Ref,
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+    arrow1Ref,
+    arrow2Ref,
+  }
+
+  const angleProps = {
+    angle1,
+    setAngle1,
+    angle1Ref,
+    length1,
+    setLength1,
+    length1Ref,
+  }
+
+  const diagonalLineProps = {
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    outerLineDiagonalLength,
+    setOuterLineDiagonalLength,
+    outerLineDiagonalLengthRef,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+  }
+
+  const onClickButton = (button) => {
+    setButtonAct(button.id)
+    setType(button.type)
+  }
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
+          <button className="modal-close">닫기</button>
+        </div>
+        <div className="modal-body">
+          <div className="modal-btn-wrap">
+            {types.map((type) => (
+              <button className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
+                {type.name}
+              </button>
+            ))}
+          </div>
+          <div className="properties-setting-wrap outer">
+            <div className="setting-tit">{getMessage('setting')}</div>
+            {buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
+            {buttonAct === 2 && <RightAngle props={rightAngleProps} />}
+            {buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
+            {buttonAct === 4 && <Angle props={angleProps} />}
+            {buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5">{getMessage('modal.cover.outline.rollback')}</button>
+            <button className="btn-frame modal act">{getMessage('modal.cover.outline.fix')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx

@@ -2,7 +2,6 @@
 
 import { useMessage } from '@/hooks/useMessage'
 import { onlyNumberInputChange } from '@/util/input-utils'
-import GridMove from '@/components/floor-plan/modal/grid/GridMove'
 
 export default function OuterLineWall({ props }) {
   const { getMessage } = useMessage()
@@ -12,7 +11,7 @@ export default function OuterLineWall({ props }) {
     <div className="outline-wrap">
       <div className="outline-inner">
         <div className="outline-form">
-          <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
+          <span className="mr10">{getMessage('straight.line')}</span>
           <div className="input-grid" style={{ width: '63px' }}>
             <input
               type="text"

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

@@ -4,11 +4,11 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useMessage } from '@/hooks/useMessage'
 import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
-import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
+import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
-import RightAngle from '@/components/floor-plan/modal/outerlinesetting/RightAngle'
+import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
-import Angle from '@/components/floor-plan/modal/outerlinesetting/Angle'
+import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
-import DoublePitch from '@/components/floor-plan/modal/outerlinesetting/DoublePitch'
+import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
-import Diagonal from '@/components/floor-plan/modal/outerlinesetting/Diagonal'
+import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
 
 export default function WallLineSetting(props) {
   const { setShowOutlineModal, setShowPropertiesSettingModal } = props

src/locales/ja.json

@@ -97,6 +97,7 @@
   "modal.canvas.setting.grid.dot.line.setting.save": "保存",
   "modal.canvas.setting.grid.absorption.add": "吸着点を追加",
   "modal.canvas.setting.grid.color.setting": "グリッド色の設定",
+  "modal.auxiliary.drawing": "補助線の作成",
   "modal.grid.move": "グリッド移動",
   "modal.grid.move.info": "移動する方向を入力してください",
   "modal.grid.move.all": "グリッド全体移動",

src/locales/ko.json

@@ -104,6 +104,7 @@
   "modal.canvas.setting.grid.dot.line.setting.save": "저장",
   "modal.canvas.setting.grid.absorption.add": "흡착점 추가",
   "modal.canvas.setting.grid.color.setting": "그리드 색 설정",
+  "modal.auxiliary.drawing": "보조선 작성",
   "modal.grid.move": "그리드 이동",
   "modal.grid.move.info": "이동할 방향을 입력해주세요",
   "modal.grid.move.all": "그리드 전체 이동",