diff --git a/public/static/images/canvas/allocation_delete.svg b/public/static/images/canvas/allocation_delete.svg new file mode 100644 index 0000000..711a241 --- /dev/null +++ b/public/static/images/canvas/allocation_delete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/allocation_edit.svg b/public/static/images/canvas/allocation_edit.svg new file mode 100644 index 0000000..795d10f --- /dev/null +++ b/public/static/images/canvas/allocation_edit.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/allocation_icon01_black.svg b/public/static/images/canvas/allocation_icon01_black.svg new file mode 100644 index 0000000..01829a3 --- /dev/null +++ b/public/static/images/canvas/allocation_icon01_black.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/canvas/allocation_icon01_white.svg b/public/static/images/canvas/allocation_icon01_white.svg new file mode 100644 index 0000000..5618848 --- /dev/null +++ b/public/static/images/canvas/allocation_icon01_white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/canvas/allocation_icon02_black.svg b/public/static/images/canvas/allocation_icon02_black.svg new file mode 100644 index 0000000..57c6173 --- /dev/null +++ b/public/static/images/canvas/allocation_icon02_black.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/canvas/allocation_icon02_white.svg b/public/static/images/canvas/allocation_icon02_white.svg new file mode 100644 index 0000000..17211b0 --- /dev/null +++ b/public/static/images/canvas/allocation_icon02_white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 390df7d..355ef39 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -16,6 +16,7 @@ import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineW import OuterWallOffset from '@/components/canvas/modal/outerwalloffset/OuterWallOffset' import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop' import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting' +import RoofAllocation from '@/components/canvas/modal/roofallocation/RoofAllocation' import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption' import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01' import Header from '@/components/layout/Header' @@ -72,9 +73,12 @@ export default function CanvasPage() { {/* */} {/* 보조선 사이즈, 이동, 복사 */} - - - + {/* */} + {/* */} + {/* */} + + {/* 지붕면 할당 */} + diff --git a/src/components/canvas/modal/roofallocation/RoofAllocation.jsx b/src/components/canvas/modal/roofallocation/RoofAllocation.jsx new file mode 100644 index 0000000..f58c8a6 --- /dev/null +++ b/src/components/canvas/modal/roofallocation/RoofAllocation.jsx @@ -0,0 +1,129 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import Qselect from "@/components/common/select/Qselect"; + +const SelectOption01 = [ + {name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'} +] +const SelectOption02 = [ + {name: '265',}, {name: '265'}, {name: '265'}, {name: '265'} +] +const SelectOption03 = [ + {name: '235',}, {name: '235'}, {name: '235'}, {name: '235'} +] +const SelectOption04 = [ + {name: '455'}, {name: '455'}, {name: '455'}, {name: '455'} +] + +export default function RoofAllocation() { + return( + +
+
+

屋根面の割り当て

+ +
+
+
+ ※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。 +
+
+ 屋根材の選択 +
+ +
+ +
+
+
+
+ + +
+
+
+
+
+ +
+ 基本屋根材 +
+
+
+
+ W +
+ +
+
+
+ L +
+ +
+
+
+ 垂木の間隔 +
+ +
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+ +
+ +
+
+
+
+ W +
+ +
+
+
+ L +
+ +
+
+
+ 垂木の間隔 +
+ +
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 4adb6b5..0126a05 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -44,6 +44,9 @@ $alert-color: #101010; &.lr{ width: 440px; } + &.ml{ + width: 530px; + } &.l{ width: 800px; } @@ -664,4 +667,114 @@ $alert-color: #101010; &.sm{ margin-bottom: 15px; } +} + +// 지붕면 할당 +.allocation-select-wrap{ + display: flex; + align-items: center; + padding-bottom: 14px; + border-bottom: 1px solid #424242; + margin-bottom: 14px; + span{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-bold-weight; + margin-right: 10px; + } + .allocation-edit{ + display: flex; + align-items: center; + height: 30px; + padding: 0 10px; + margin-left: 5px; + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; + border: 1px solid #484848; + background-color: #323234; + i{ + display: block; + width: 12px; + height: 12px; + margin-right: 5px; + background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center; + background-size: cover; + } + } +} + +.block-box{ + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; + .flex-ment{ + gap: 10px; + .dec{ + text-decoration: underline; + } + .delete{ + display: block; + width: 15px; + height: 15px; + background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center; + background-size: cover; + } + } + &:last-child{ + margin-bottom: 0; + } +} + +.icon-btn-wrap{ + flex: 1; + display: flex; + align-items: center; + gap: 5px; + button{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 30px; + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + border: 1px solid #646464; + border-radius: 2px; + padding: 0 10px; + transition: all .15s ease-in-out; + i{ + height: 15px; + display: block; + margin-left: 10px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + transition: all .15s ease-in-out; + &.allocation01{ + background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); + width: 15px; + } + &.allocation02{ + background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg); + width: 18px; + } + } + &.act, + &:hover{ + color: #101010; + border: 1px solid #101010; + background-color: #fff; + i{ + &.allocation01{ + background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg); + } + &.allocation02{ + background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg); + } + } + } + } } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 7441ab0..8612055 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -283,11 +283,14 @@ button{ clip-path:inset(0 0 100% 0); width: calc(100% + 2px); padding: 8px 0; + max-height: 100px; + overflow-y: auto; background-color: #373737; border: 1px solid #3F3F3F; border-radius: 2px; transition: all 0.17s ease-in-out; visibility: hidden; + z-index: 999; .select-item{ display: flex; align-items: center; @@ -303,6 +306,18 @@ button{ background-color: #2C2C2C; } } + &::-webkit-scrollbar { + width: 2px; + background-color: transparent; + + } + &::-webkit-scrollbar-thumb { + background-color: #5a5a5a; + border-radius: 10px; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } } &::after{ content: '';