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

Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

Browse Source
This commit is contained in:
Daseul Kim 2024-10-30 18:15:44 +09:00
commit f3a2f4f5e7
25 changed files with 187 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/static/images/canvas/plane_shape01.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27 0.804011L52.9645 33.5H1.03554L27 0.804011Z" stroke="white"/>
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.56205L17.865 11H2.13504L10 1.56205Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 177 B

After

Width:  |  Height:  |  Size: 189 B

4
public/static/images/canvas/plane_shape010.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43.6009 0.5L53.3736 43.5H0.5V13.537H21.9375H22.4375V13.037V0.5H43.6009Z" stroke="white"/>
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4907 1L18.7587 16H1V5.63636H8.14815H9.14815V4.63636V1H15.4907Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 203 B

After

Width:  |  Height:  |  Size: 214 B

4
public/static/images/canvas/plane_shape011.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3991 43.5H53.5V25.537H29.0625H28.5625V25.037V0.5H0.626389L10.3991 43.5Z" stroke="white"/>
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5093 16H19V10H10H8.958L9.00085 8.95888L9.32837 1H1.24132L4.5093 16Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 206 B

After

Width:  |  Height:  |  Size: 218 B

4
public/static/images/canvas/plane_shape012.svg
View File

@ -1,3 +1,3 @@
<svg width="57" height="41" viewBox="0 0 57 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.384 8.3129L30.5329 8.53093H30.7969H39.3543L56.172 40.5H0.896303L25.3336 0.917553L30.384 8.3129Z" stroke="white"/>
<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8546 3.62169L11.1523 4.0594H11.6816H14.4443L20.3269 15H1.76631L9.65389 1.8558L10.8546 3.62169Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 230 B

After

Width:  |  Height:  |  Size: 246 B

4
public/static/images/canvas/plane_shape013.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="41" viewBox="0 0 54 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.7562 8.30253L28.9042 8.53127L29.1766 8.53093L53.5 8.50062V40.5H0.871685L24.0017 0.953657L28.7562 8.30253Z" stroke="white"/>
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.083 3.75037L11.379 4.06002L11.8074 4.0594L19 4.04906V15H1.69884L9.09691 1.67251L11.083 3.75037Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 240 B

After

Width:  |  Height:  |  Size: 247 B

4
public/static/images/canvas/plane_shape014.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.2929 33.5H0.5V0.5H53.5V33.5H36.7071L27.3536 24.1464L27 23.7929L26.6464 24.1464L17.2929 33.5Z" stroke="white"/>
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.05791 12H1V1H19V12H13.9421L10.7183 8.67188L10 7.93037L9.28173 8.67188L6.05791 12Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 227 B

After

Width:  |  Height:  |  Size: 232 B

4
public/static/images/canvas/plane_shape015.svg
View File

@ -1,3 +1,3 @@
<svg width="40" height="50" viewBox="0 0 40 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 0.64603L39.5 16.6006V49.5H0.5V16.6006L20 0.64603Z" stroke="white"/>
<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 1.299L14 6.68809V18H1V6.68809L7.5 1.299Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 184 B

After

Width:  |  Height:  |  Size: 193 B

6
public/static/images/canvas/plane_shape016.svg
View File

@ -1,5 +1,3 @@
<svg width="54" height="42" viewBox="0 0 54 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.971595 41.5L10.2573 28.5H44.727L53.0842 41.5H0.971595Z" fill="#313131" stroke="white"/>
<path d="M10.5 0.5H44.5V28.5H10.5V0.5Z" fill="#313131" stroke="white"/>
<rect x="11" y="28" width="33" height="1" fill="#313131"/>
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.96963 10.3554L4.07692 10.1429V9.90476V1H15.9231V9.90476V10.1429L16.0304 10.3554L18.375 15H1.625L3.96963 10.3554Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 334 B

After

Width:  |  Height:  |  Size: 263 B

4
public/static/images/canvas/plane_shape017.svg
View File

@ -1,3 +1,3 @@
<svg width="58" height="39" viewBox="0 0 58 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M57.4251 17.0318L46.691 38.5H0.865706L22.7888 0.5H46.728L57.4251 17.0318Z" stroke="white"/>
<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.8541 6.14406L17.5432 14H1.70065L8.93284 1H16.9517L20.8541 6.14406Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 204 B

After

Width:  |  Height:  |  Size: 218 B

4
public/static/images/canvas/plane_shape018.svg
View File

@ -1,3 +1,3 @@
<svg width="58" height="47" viewBox="0 0 58 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M57.339 20.1115L40.724 46.5H0.962002L33.1033 0.72297L57.339 20.1115Z" stroke="white"/>
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.6552 7.73365L14.6298 17H1.88045L12.3752 1.43676L20.6552 7.73365Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 199 B

After

Width:  |  Height:  |  Size: 216 B

4
public/static/images/canvas/plane_shape02.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="53" height="33" fill="#313131" stroke="white"/>
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="18" height="10" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 180 B

After

Width:  |  Height:  |  Size: 178 B

4
public/static/images/canvas/plane_shape03.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.654784 33.5L9.66306 0.5H44.3369L53.3452 33.5H0.654784Z" stroke="white"/>
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.98369 1.72462C4.10657 1.29565 4.4988 1 4.94502 1H15.055C15.5012 1 15.8934 1.29565 16.0163 1.72462L18.308 9.72462C18.491 10.3636 18.0113 11 17.3466 11H2.65336C1.98869 11 1.50899 10.3636 1.69202 9.72462L3.98369 1.72462Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 188 B

After

Width:  |  Height:  |  Size: 368 B

4
public/static/images/canvas/plane_shape04.svg
View File

@ -1,3 +1,3 @@
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43.5 43.5H1.20711L43.5 1.20711V43.5Z" stroke="white"/>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.12132 11.2929L11.2929 2.12132C11.9229 1.49136 13 1.93752 13 2.82843V12C13 12.5523 12.5523 13 12 13H2.82843C1.93752 13 1.49136 11.9229 2.12132 11.2929Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 168 B

After

Width:  |  Height:  |  Size: 301 B

4
public/static/images/canvas/plane_shape05.svg
View File

@ -1,3 +1,3 @@
<svg width="34" height="44" viewBox="0 0 34 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33.5 1.04958V43.5H0.5V27.8255L33.5 1.04958Z" stroke="white"/>
<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2.11305V16H1V11.132L12 2.11305Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 175 B

After

Width:  |  Height:  |  Size: 183 B

4
public/static/images/canvas/plane_shape06.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.6187 33.5L7.70137 0.5H53.3813L46.2986 33.5H0.6187Z" stroke="white"/>
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.22928 12L3.51619 1H18.7707L16.4838 12H1.22928Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 184 B

After

Width:  |  Height:  |  Size: 197 B

4
public/static/images/canvas/plane_shape07.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 23.5H9.5V24V33.5H0.5V0.5H53.5V33.5H44.5V24V23.5H44H10Z" stroke="white"/>
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.18518 8.17647H5.18518V9.17647V12H1V1H19V12H14.8148V9.17647V8.17647H13.8148H6.18518Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 189 B

After

Width:  |  Height:  |  Size: 234 B

4
public/static/images/canvas/plane_shape08.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.4375 13.037V0.5H53.5V43.5H0.5V13.537H21.9375H22.4375V13.037Z" stroke="white"/>
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.125 5V1H19V16H1V6H8.125H9.125V5Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 195 B

After

Width:  |  Height:  |  Size: 183 B

4
public/static/images/canvas/plane_shape09.svg
View File

@ -1,3 +1,3 @@
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.4375 25.037V0.5H53.5V43.5H1.03302L15.242 25.537H29.9375H30.4375V25.037Z" stroke="white"/>
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1111 9.27023L12.0905 1H19V16H1.8753L5.71843 10.2727H11.1111H12.1136L12.1111 9.27023Z" stroke="white" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 206 B

After

Width:  |  Height:  |  Size: 236 B

42
src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
View File

@ -5,27 +5,29 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'
import { useState } from 'react'
export default function AuxiliaryMove(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [arrow1, setArrow1] = useState(null)
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">補助線の移動 </h1>
<h1 className="title">{getMessage('modal.auxiliary.move')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="grid-option-tit">移動する方向を入力してください</div>
<div className="grid-option-tit">{getMessage('modal.auxiliary.move.info')}</div>
<div className="grid-option-wrap">
<div className="grid-option-box">
<div className="move-form">
<p className="mb5">長さ</p>
<p className="mb5">{getMessage('length')}</p>
<div className="input-move-wrap mb5">
<div className="input-move">
<input type="text" className="input-origin" defaultValue={910} />
@ -40,15 +42,39 @@ export default function AuxiliaryMove(props) {
</div>
</div>
<div className="direction-move-wrap">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
<button
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
onClick={() => {
setArrow1('↑')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
}}
></button>
<button
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
onClick={() => {
setArrow1('↓')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}}
></button>
<button
className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
onClick={() => {
setArrow1('←')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
}}
></button>
<button
className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
onClick={() => {
setArrow1('→')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
}}
></button>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
</div>
</div>
</div>

3
src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
View File

@ -49,7 +49,8 @@ const PlacementSurface = forwardRef((props, refs) => {
{lines?.map((line, index) => (
<div className="eaves-keraba-item" id={index} key={index}>
<div className="eaves-keraba-th">
{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}
{/*{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}*/}
{num[index]}
</div>
<div className="eaves-keraba-td">
<div className="outline-form">

70
src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
View File

@ -241,7 +241,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap l-2`}>
<div className={`modal-pop-wrap lr-2`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
@ -249,35 +249,45 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
</button>
</div>
<div className="modal-body">
<div className="plane-shape-menu">
{types.map((type) => (
<button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
<div className="shape-box">
<Image
src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
alt="react"
width={0}
height={0}
style={{
width: 'auto',
height: 'auto',
transform: getInversionState(),
}}
/>
</div>
</button>
))}
</div>
<div className="shape-library">
<button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
<button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
<button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
</div>
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={applySurfaces}>
{getMessage('write')}
</button>
<div className="plane-frame-wrap">
<div className="plane-shape-wrap">
<div className="plane-shape-menu">
{types.map((type) => (
<button
key={type.id}
className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
onClick={() => setSelectedType(type)}
>
<div className="shape-box">
<Image
src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
alt="react"
width={0}
height={0}
style={{
width: 'auto',
height: 'auto',
transform: getInversionState(),
}}
/>
</div>
</button>
))}
</div>
<div className="shape-library">
<button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
<button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
<button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
</div>
</div>
<div className="plane-detail-wrap">
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
<div className="plane-shape-btn">
<button className="btn-frame modal act" onClick={applySurfaces}>
{getMessage('write')}
</button>
</div>
</div>
</div>
</div>
</div>

4
src/locales/ja.json
View File

@ -293,7 +293,9 @@
"contextmenu.select.move": "선택・이동(JA)",
"contextmenu.wallline.remove": "외벽선 삭제(JA)",
"contextmenu.size.edit": "サイズ変更",
"contextmenu.auxiliary.move": "보조선 이동(JA)",
"contextmenu.auxiliary.move": "補助線の移動",
"modal.auxiliary.move": "補助線の移動",
"modal.auxiliary.move.info": "移動する方向を入力してください",
"contextmenu.auxiliary.copy": "보조선 복사(JA)",
"contextmenu.auxiliary.remove": "보조선 삭제(JA)",
"contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선(JA)",

2
src/locales/ko.json
View File

@ -299,6 +299,8 @@
"contextmenu.wallline.remove": "외벽선 삭제",
"contextmenu.size.edit": "사이즈 변경",
"contextmenu.auxiliary.move": "보조선 이동",
"modal.auxiliary.move": "보조선 이동",
"modal.auxiliary.move.info": "이동할 방향을 입력해주세요.",
"contextmenu.auxiliary.copy": "보조선 복사",
"contextmenu.auxiliary.remove": "보조선 삭제",
"contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선",

16
src/styles/_contents.scss
View File

@ -769,6 +769,22 @@
.btn-area{
padding-bottom: 15px;
border-bottom: 1px solid #ECF0F4;
.file-upload{
display: inline-block;
height: 30px;
background-color: #94A0AD;
padding: 0 10px;
border-radius: 2px;
font-size: 13px;
line-height: 30px;
color: #fff;
font-weight: 500;
cursor: pointer;
transition: background .15s ease-in-out;
&:hover{
background-color: #607F9A;
}
}
}
.drag-file-area{
position: relative;

88
src/styles/_modal.scss
View File

@ -60,6 +60,9 @@ $alert-color: #101010;
&.lr{
width: 440px;
}
&.lr-2{
width: 450px;
}
&.lrr{
width: 480px;
}
@ -880,17 +883,26 @@ $alert-color: #101010;
}
// 면형상 배치
.plane-frame-wrap{
display: flex;
gap: 10px;
.plane-shape-wrap{
flex: none;
width: 73px;
}
}
.plane-shape-menu{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 90px);
gap: 10px;
margin-bottom: 10px;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
.shape-menu-box{
border-radius: 2px;
background-color: #3D3D3D;
padding: 8px;
transition: all .15s ease-in-out;
width: 34px;
height: 34px;
background-color: #373737;
border: 1px solid #676767;
transition: background .15s ease-in-out, border .15s ease-in-out;
.shape-box{
display: flex;
justify-content: center;
@ -898,11 +910,11 @@ $alert-color: #101010;
position: relative;
width: 100%;
height: 100%;
background-color: #313131;
border-radius: 2px;
}
&.act,
&:hover{
border-color: #008BFF;
background-color: #008BFF;
}
}
@ -910,24 +922,23 @@ $alert-color: #101010;
.shape-library{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 5px;
background-color: #3D3D3D;
margin-bottom: 24px;
padding-top: 5px;
.library-btn{
width: 30px;
height: 30px;
width: 100%;
height: 34px;
border: 1px solid #6C6C6C;
border-radius: 2px;
background-color: transparent;
background-color: #373737;
background-repeat: no-repeat;
background-position: center;
transition: all .15s ease-in-out;
&.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 14px 14px;}
&.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 13px 17px;}
&.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 17px 13px;}
&.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
&.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
&.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
&:hover{
border-color: #1083E3;
background-color: #1083E3;
@ -935,13 +946,22 @@ $alert-color: #101010;
}
}
.plane-shape-wrapper{
.plane-detail-wrap{
display: flex;
flex-direction: column;
flex: 1;
}
.plane-shape-wrapper{
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
.plane-box{
padding: 10px;
width: 100%;
padding: 10px 18px;
border-radius: 2px;
background-color: #3D3D3D;
background-color: #313131;
border: 1px solid #484848;
.plane-box-tit{
font-size: $pop-normal-size;
font-weight: 600;
@ -949,14 +969,14 @@ $alert-color: #101010;
margin-bottom: 10px;
}
&.shape-box{
flex: 1;
.shape-box-inner{
display: flex;
gap:10px;
gap:15px;
min-height: 140px;
.shape-img{
position: relative;
flex: 1;
flex: none;
width: 150px;
background-color: #fff;
border-radius: 2px;
img{
@ -967,11 +987,7 @@ $alert-color: #101010;
}
}
.shape-data{
flex: none;
width: 190px;
background-color: #313131;
border-radius: 2px;
padding: 15px;
flex: 1;
.eaves-keraba-table{
.eaves-keraba-item{
.eaves-keraba-th,
@ -990,17 +1006,15 @@ $alert-color: #101010;
}
}
&.direction-box{
flex: 1;
display: flex;
flex-direction: column;
flex: none;
width: 180px;
.plane-direction-box{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 10px 5px;
}
}
}
@ -1046,9 +1060,15 @@ $alert-color: #101010;
font-size: $pop-normal-size;
font-weight: $pop-normal-weight;
color: $pop-color;
margin-top: 24px;
padding-bottom: 14px;
border-bottom: 1px solid #424242;
margin-top: 10px;
}
.plane-shape-btn{
padding-top: 10px;
margin-top: auto;
button{
display: block;
width: 100%;
}
}
// 오브젝트 배치