qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

보조선 작성 및 처마 케라바 변경 팝업 추가 & 그리드 옵션 팝업 수정

Browse Source
This commit is contained in:
김창수 2024-09-30 17:20:35 +09:00
parent 81594daef8
commit 2bdb404734
24 changed files with 775 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/static/images/canvas/eaves_icon01.svg Normal file
View File

@ -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_4083_3047" 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_4083_3047)">
<path d="M0.5 -0.5L16.5 13.5L32 -1" stroke="black" stroke-width="2"/>
<path d="M16.5 13V30" stroke="black" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 499 B

10
public/static/images/canvas/eaves_icon02.svg Normal file
View File

@ -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="1" width="30" height="30" fill="#45CD7D"/>
<mask id="mask0_4083_3055" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="30" height="30">
<rect x="1" width="30" height="30" fill="#45CD7D"/>
</mask>
<g mask="url(#mask0_4083_3055)">
<path d="M16 7V35" stroke="black" stroke-width="2"/>
<path d="M1 -1L8 7H26L32 -1" stroke="black" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 483 B

15
public/static/images/canvas/eaves_icon03.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.25" width="30" height="30" fill="white"/>
<mask id="mask0_4083_3069" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="31" height="30">
<rect x="1.25" width="30" height="30" fill="white"/>
</mask>
<g mask="url(#mask0_4083_3069)">
<path d="M1 4H16V30" stroke="black" stroke-width="2"/>
<path d="M1 30.5L16 4.5" stroke="black" stroke-width="2"/>
<rect x="18" y="3" width="14" height="1" fill="#ED0004"/>
<rect x="6" y="26" width="26" height="1" fill="#ED0004"/>
<rect x="23.5" y="7" width="1" height="16" fill="black"/>
<path d="M21.5 9L24 6.5L26.5 9" stroke="black"/>
<path d="M21.5 20.5L24 23L26.5 20.5" stroke="black"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 760 B

9
public/static/images/canvas/eaves_icon04.svg Normal file
View File

@ -0,0 +1,9 @@
<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_4083_3140" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
<rect x="0.5" width="30" height="30" fill="#45CD7D"/>
</mask>
<g mask="url(#mask0_4083_3140)">
<path d="M15.5 0V30" stroke="black" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 427 B

10
public/static/images/canvas/eaves_icon05.svg Normal file
View File

@ -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="white"/>
<mask id="mask0_4083_3151" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
<rect x="0.75" width="30" height="30" fill="white"/>
</mask>
<g mask="url(#mask0_4083_3151)">
<path d="M3.5 30V20L17.5 6H31" stroke="black" stroke-width="2"/>
<path d="M28 15.5C28 21.503 22.2579 26.5 15 26.5C7.74211 26.5 2 21.503 2 15.5C2 9.49705 7.74211 4.5 15 4.5C22.2579 4.5 28 9.49705 28 15.5Z" stroke="#ED0004"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 593 B

18
public/static/images/canvas/eaves_icon06.svg Normal file
View File

@ -0,0 +1,18 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" fill="#45CD7D"/>
<mask id="path-1-inside-1_4083_3261" fill="white">
<path d="M0 13H22V30H0V13Z"/>
</mask>
<path d="M22 13H24V11H22V13ZM0 15H22V11H0V15ZM20 13V30H24V13H20Z" fill="black" mask="url(#path-1-inside-1_4083_3261)"/>
<rect x="2" y="15" width="2" height="15" fill="black"/>
<rect x="2" y="15" width="2" height="15" fill="black"/>
<rect x="2" y="15" width="2" height="15" fill="black"/>
<rect x="2" y="15" width="2" height="15" fill="black"/>
<rect x="2" y="15" width="2" height="15" fill="black"/>
<rect x="13" y="15" width="2" height="15" fill="black"/>
<rect x="13" y="15" width="2" height="15" fill="black"/>
<rect x="13" y="15" width="2" height="15" fill="black"/>
<rect x="13" y="15" width="2" height="15" fill="black"/>
<rect x="13" y="15" width="2" height="15" fill="black"/>
<rect width="22" height="13" fill="#AA5234"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 969 B

23
public/static/images/canvas/eaves_icon07.svg Normal file
View File

@ -0,0 +1,23 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" fill="#45CD7D"/>
<mask id="path-1-inside-1_4083_3372" fill="white">
<path d="M0 13H22V30H0V13Z"/>
</mask>
<path d="M22 13H24V11H22V13ZM0 15H22V11H0V15ZM20 13V30H24V13H20Z" fill="black" mask="url(#path-1-inside-1_4083_3372)"/>
<rect x="2" y="15" width="2" height="15" fill="black"/>
<rect x="2" y="15" width="2" height="15" fill="black"/>
<rect x="2" y="15" width="2" height="15" fill="black"/>
<rect x="2" y="15" width="2" height="15" fill="black"/>
<rect x="2" y="15" width="2" height="15" fill="black"/>
<rect x="13" y="15" width="2" height="15" fill="black"/>
<rect x="13" y="15" width="2" height="15" fill="black"/>
<rect x="13" y="15" width="2" height="15" fill="black"/>
<rect x="13" y="15" width="2" height="15" fill="black"/>
<rect x="13" y="15" width="2" height="15" fill="black"/>
<mask id="path-5-inside-2_4083_3372" fill="white">
<path d="M13 8H22V15H13V8Z"/>
</mask>
<path d="M13 8H22V15H13V8Z" fill="#45CD7D"/>
<path d="M13 8V6H11V8H13ZM22 8H24V6H22V8ZM13 10H22V6H13V10ZM20 8V15H24V8H20ZM15 15V8H11V15H15Z" fill="black" mask="url(#path-5-inside-2_4083_3372)"/>
<rect width="13" height="13" fill="#AA5234"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

15
public/static/images/canvas/eaves_icon08.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.25" width="30" height="30" fill="white"/>
<mask id="mask0_4083_3329" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="31" height="30">
<rect x="1.25" width="30" height="30" fill="white"/>
</mask>
<g mask="url(#mask0_4083_3329)">
<path d="M7 4H22V30" stroke="black" stroke-width="2"/>
<path d="M-9 26H6V-1.19209e-07" stroke="black" stroke-width="2"/>
<rect x="24" y="3" width="8" height="1" fill="#ED0004"/>
<rect x="8" y="26" width="24" height="1" fill="#ED0004"/>
<rect x="26.5" y="7" width="1" height="16" fill="black"/>
<path d="M24.5 9L27 6.5L29.5 9" stroke="black"/>
<path d="M24.5 20.5L27 23L29.5 20.5" stroke="black"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 766 B

16
src/app/canvas/page.jsx
View File

@ -2,6 +2,8 @@
import CanvasLayout from '@/components/canvas/CanvasLayout'
import CanvasMenu from '@/components/canvas/CanvasMenu'
import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption'
import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption'
import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
import GridMove from '@/components/canvas/modal/gridoption/GridMove'
import GridOption from '@/components/canvas/modal/gridoption/GridOption'
@ -36,12 +38,12 @@ export default function CanvasPage() {
{/* {modalOption.option && <SettingModal01/>} */}
{/* 점·선 그리드 설정 */}
{/* {modalOption.gridoption && <GridOption/>} */}
{/* {modalOption.gridcopy && <GridCopy/>} */}
{/* {modalOption.gridmove && <GridMove/>} */}
{modalOption.gridoption && <GridOption/>}
{modalOption.gridcopy && <GridCopy/>}
{modalOption.gridmove && <GridMove/>}
{/* 외벽선 그리기 */}
{modalOption.outerwall && <OuterLineWall/>}
{/* {modalOption.outerwall && <OuterLineWall/>} */}
{/* 외벽선 속성 설정 */}
{/* <PropertiesSetting/> */}
@ -51,6 +53,12 @@ export default function CanvasPage() {
{/* 지붕형상 수동 설정 */}
{/* <ManualRoofShape/> */}
{/* 보조선 작성 */}
{/* <AuxiliarylineOption/> */}
{/* 처마∙케라바 변경 */}
{/* <EvaseKerabaOption/> */}
</div>
</div>
</div>

24
src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab01.jsx Normal file
View File

@ -0,0 +1,24 @@
export default function AuxiliaryTab01(){
return(
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
)
}

42
src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab02.jsx Normal file
View File

@ -0,0 +1,42 @@
export default function AuxiliaryTab02(){
return(
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
)
}

64
src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab03.jsx Normal file
View File

@ -0,0 +1,64 @@
export default function AuxiliaryTab03(){
return(
<>
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">角度</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={4}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={5000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">角度</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={6}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={3000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
</>
)
}

64
src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab04.jsx Normal file
View File

@ -0,0 +1,64 @@
export default function AuxiliaryTab04(){
return(
<>
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">角度</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={4}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={5000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">角度</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={6}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={3000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
</>
)
}

50
src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab05.jsx Normal file
View File

@ -0,0 +1,50 @@
export default function AuxiliaryTab05(){
return(
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">対角線の<br/>長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={1000}/>
</div>
<button className="reset-btn"></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '63px'}}>
<input type="text" className="input-origin block" defaultValue={5000}/>
</div>
<button className="reset-btn"></button>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">長さ(mm)</span>
<div className="input-grid" style={{width: '98px'}}>
<input type="text" className="input-origin block" defaultValue={8000}/>
</div>
</div>
<div className="outline-form">
<span>方向 (矢印)</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
)
}

55
src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx Normal file
View File

@ -0,0 +1,55 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
import AuxiliaryTab01 from "./AuxiliaryTab01";
import AuxiliaryTab02 from "./AuxiliaryTab02";
import AuxiliaryTab03 from "./AuxiliaryTab03";
import AuxiliaryTab04 from "./AuxiliaryTab04";
import AuxiliaryTab05 from "./AuxiliaryTab05";
const buttonMenu = [
{id: 1, name: 'ランダムライン'},
{id: 2, name: '直角'},
{id: 3, name: 'イ・グベ'},
{id: 4, name: '角度'},
{id: 5, name: '対角線'},
]
export default function AuxiliarylineOption(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap sm`}>
<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 && <AuxiliaryTab01/>}
{buttonAct === 2 && <AuxiliaryTab02/>}
{buttonAct === 3 && <AuxiliaryTab03/>}
{buttonAct === 4 && <AuxiliaryTab04/>}
{buttonAct === 5 && <AuxiliaryTab05/>}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5">一変戦に戻る</button>
<button className="btn-frame modal act">外壁線確定</button>
</div>
</div>
</div>
</WithDraggable>
)
}

51
src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx Normal file
View File

@ -0,0 +1,51 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
import EavesKerabaTab01 from "./EavesKerabaTab01";
import EavesKerabaTab02 from "./EavesKerabaTab02";
import EavesKerabaTab03 from "./EavesKerabaTab03";
import EavesKerabaTab04 from "./EavesKerabaTab04";
const buttonMenu = [
{id: 1, name: '軒'},
{id: 2, name: '直ケラバ角'},
{id: 3, name: '壁取り'},
{id: 4, name: '片側の流れ'},
]
export default function EvaseKerabaOption(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<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 && <EavesKerabaTab01/>}
{buttonAct === 2 && <EavesKerabaTab02/>}
{buttonAct === 3 && <EavesKerabaTab03/>}
{buttonAct === 4 && <EavesKerabaTab04/>}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

70
src/components/canvas/modal/eaves_keraba/EavesKerabaTab01.jsx Normal file
View File

@ -0,0 +1,70 @@
import Image from "next/image";
export default function EavesKerabaTab01(){
return(
<>
<div className="outline-wrap">
<div className="outline-form mb15">
<span className="mr10" style={{width: '24px'}}>傾斜</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'}}>出幅</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">通常</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico 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" />
<label htmlFor="ra02">パルザック屋根</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico">
<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">
{/* <span className="mr10" style={{width: '24px'}}>出幅</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_icon03.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
</div>
</div>
</>
)
}

79
src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx Normal file
View File

@ -0,0 +1,79 @@
import Image from "next/image";
export default function EavesKerabaTab02(){
return(
<>
<div className="outline-wrap">
<div className="outline-form ">
<span className="mr10" style={{width: '24px'}}>出幅</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">通常</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"> 半折</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico">
<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="outline-form">
<span className="mr10" style={{width: '24px'}}>傾斜</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'}}>出幅</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_icon03.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
</div>
</div>
</>
)
}

57
src/components/canvas/modal/eaves_keraba/EavesKerabaTab03.jsx Normal file
View File

@ -0,0 +1,57 @@
import Image from "next/image";
export default function EavesKerabaTab03(){
return(
<>
<div className="outline-wrap">
<div className="guide">
家屋などの壁に面する屋根を作成します。
</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">袖なし</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">袖あり</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'}}>出幅</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>
</>
)
}

17
src/components/canvas/modal/eaves_keraba/EavesKerabaTab04.jsx Normal file
View File

@ -0,0 +1,17 @@
import Image from "next/image";
export default function EavesKerabaTab04(){
return(
<>
<div className="outline-wrap">
<div className="outline-form">
<span className="mr10" style={{width: '24px'}}>出幅</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>
</>
)
}

2
src/components/canvas/modal/gridoption/GridMove.jsx
View File

@ -20,7 +20,7 @@ export default function GridMove() {
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xm ${modalOption.gridmove ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<div className="modal-head">
<h1 className="title">グリッドのコピー </h1>
<h1 className="title">グリッド移動 </h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button>
</div>
<div className="modal-body">

12
src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx
View File

@ -5,12 +5,14 @@ export default function DiscriminationTab03(){
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">袖なし</label>
</div>
<div className="outline-form" style={{paddingLeft: '22px'}}>
<span className="mr10" style={{width: 'auto'}}>袖あり</span>
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={300}/>
<div className="padding-form">
<div className="outline-form">
<span className="mr10" style={{width: 'auto'}}>袖あり</span>
<div className="input-grid mr5" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={300}/>
</div>
<span className="thin">mm</span>
</div>
<span className="thin">mm</span>
</div>
</>
)

93
src/styles/_modal.scss
View File

@ -27,24 +27,24 @@ $alert-color: #101010;
background-color: #272727;
z-index: 9999999;
overflow: hidden;
&.xxm{
width: 270px;
}
&.xm{
width: 300px;
}
&.ssm{
width: 380px;
}
&.sm{
width: 580px;
}
&.r{
width: 400px;
}
&.lr{
width: 440px;
}
&.sm{
width: 580px;
}
&.ssm{
width: 380px;
}
&.xm{
width: 300px;
}
&.xxm{
width: 270px;
}
&.l{
width: 800px;
}
@ -210,19 +210,17 @@ $alert-color: #101010;
align-items: center;
gap: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #3C3C3C;
}
.grid-option-wrap{
padding: 15px 0;
border-bottom: 1px solid #3C3C3C;
.grid-option-box{
display: flex;
align-items: center;
background-color: #3D3D3D;
background-color: transparent;
border: 1px solid #3D3D3D;
border-radius: 2px;
padding: 10px;
padding: 15px 10px;
gap: 20px;
margin-bottom: 5px;
margin-bottom: 10px;
.grid-input-form{
display: flex;
align-items: center;
@ -255,10 +253,7 @@ $alert-color: #101010;
padding-top: 15px;
text-align: right;
button{
padding: 0 20px;
}
&.bord{
border-top: 1px solid #fff;
padding: 0 10px;
}
}
@ -268,7 +263,7 @@ $alert-color: #101010;
color: $pop-color;
font-weight: $pop-normal-weight;
padding-bottom: 15px;
border-bottom: 1px solid #3C3C3C;
}
.grid-direction{
display: flex;
@ -420,7 +415,7 @@ $alert-color: #101010;
.outline-wrap{
padding: 24px 0;
border-top: 1px solid #424242;
border-bottom: 1px solid #424242;
.outline-inner{
display: flex;
align-items: center;
@ -433,6 +428,9 @@ $alert-color: #101010;
margin-right: 15px;
}
}
&:last-child{
border-bottom: 1px solid #424242;
}
}
.outline-form{
display: flex;
@ -448,6 +446,7 @@ $alert-color: #101010;
&.thin{
width: auto;
font-weight: $pop-normal-weight;
margin-right: 0;
}
}
.reset-btn{
@ -584,7 +583,9 @@ $alert-color: #101010;
border-top: 1px solid #424242;
border-bottom: 1px solid #424242;
}
.padding-form{
padding-left: 23px;
}
.discrimination-box{
padding: 16px 12px;
border: 1px solid #3D3D3D;
@ -595,4 +596,46 @@ $alert-color: #101010;
margin-top: 24px;
padding-bottom: 14px;
border-bottom: 1px solid #424242;
}
// 처마∙케라바 변경
.eaves-keraba-table{
display: table;
border-collapse: collapse;
.eaves-keraba-item{
display: table-row;
.eaves-keraba-th,
.eaves-keraba-td{
display: table-cell;
vertical-align: middle;
padding-bottom: 14px;
}
.eaves-keraba-td{
padding-left: 15px;
}
.eaves-keraba-ico{
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
background-color: #3D3D3D;
border: 1px solid #3D3D3D;
border-radius: 2px;
&.act{
border: 1px solid #ED0004;
}
}
&:last-child{
.eaves-keraba-th,
.eaves-keraba-td{
padding-bottom: 0;
}
}
}
}
.guide{
font-size: $pop-normal-size;
font-weight: $pop-normal-weight;
color: $pop-color;
margin-bottom: 24px;
}

4
src/styles/_reset.scss
View File

@ -133,12 +133,16 @@ button{
// margin
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb15{margin-bottom: 15px !important;}
.mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.mr15{margin-right: 15px !important;}
.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
// button
.btn-frame{