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

면형상 배치 pop 수정

Browse Source
This commit is contained in:
김창수 2024-10-30 17:54:40 +09:00
parent 773790291f
commit 02c3815d22
23 changed files with 143 additions and 151 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

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

@ -104,7 +104,7 @@ export default function CanvasPage() {
{/* <PropertiesSetting/> */}
{/* 지붕형상 설정 */}
<RoofShapeOption/>
{/* <RoofShapeOption/> */}
{/* 지붕형상 수동 설정 */}
{/* <ManualRoofShape/> */}
@ -123,8 +123,8 @@ export default function CanvasPage() {
{/* 보조선 사이즈, 이동, 복사 */}
{/* <AuxiliarySize/> */}
{/* <AuxiliaryMove/> */}
{/* <AuxiliaryCopy/> */}
<AuxiliaryMove/>
<AuxiliaryCopy/>
{/* 지붕면 할당 */}
{/* <RoofAllocation/> */}
@ -136,7 +136,7 @@ export default function CanvasPage() {
{/* <ArrangementSetting/> */}
{/* 면형상 배치 */}
{/* <PlaneShapeOption/> */}
<PlaneShapeOption/>
{/* 오브젝트 배치*/}
{/* <ObjectOption/> */}

49
src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx
View File

@ -24,44 +24,17 @@ import PlaneShapeTab18 from "./planeshapetab/PlaneShapeTab18";
export default function PlaneShapeOption(){
const [shapeNum, setShapeNum] = useState(1);
const [xfilp, setXfilp] = useState(false);
const [yfilp, setYfilp] = useState(false);
const [rotate, setRotate] = useState(0);
const RotateMenual = () => {
if((xfilp === false && yfilp === true) || (xfilp === true && yfilp === false)){
setRotate(360);
setRotate(rotate - 90)
}else{
setRotate(0)
setRotate(rotate + 90)
}
}
const TransformRotate = () => {
return `${TransFormScale()} rotate(${rotate}deg)`
}
const TransFormScale = () => {
if(xfilp === false && yfilp === false){
return `scale(1, 1)`
}else if(xfilp === false && yfilp === true){
return `scale(1, -1)`
}else if(xfilp === true && yfilp === true){
return `scale(-1, -1)`
}else if(xfilp === true && yfilp === false){
return `scale(-1, 1)`
}
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap l-2`}>
<div className={`modal-pop-wrap lr-2`}>
<div className="modal-head">
<h1 className="title">屋根形状の設定 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="plane-frame-wrap">
<div className="plane-shape-wrap">
<div className="plane-shape-menu">
{Array.from({length : 18}).map((_,idx) => (
<button key={idx + 1} className={`shape-menu-box ${shapeNum === idx + 1 ? 'act': ''}`} onClick={() => setShapeNum(idx + 1)}>
@ -72,20 +45,18 @@ export default function PlaneShapeOption(){
style={{
width: 'auto',
height:'auto',
transition: 'all .15s ease-in-out',
transform: `${TransformRotate()}`
}}/>
</div>
</button>
))}
</div>
<div className="shape-library">
<button className="library-btn ico01" onClick={() => RotateMenual()}></button>
<button className="library-btn ico02" onClick={() => setXfilp(!xfilp)}></button>
<button className="library-btn ico03" onClick={() => setYfilp(!yfilp)}></button>
<span>x {xfilp ? '1':'0'}</span>
<span>y {yfilp ? '1':'0'}</span>
<button className="library-btn ico01"></button>
<button className="library-btn ico02"></button>
<button className="library-btn ico03"></button>
</div>
</div>
<div className="plane-detail-wrap">
{shapeNum === 1 && <PlaneShapeTab01/>}
{shapeNum === 2 && <PlaneShapeTab02/>}
{shapeNum === 3 && <PlaneShapeTab03/>}
@ -104,11 +75,13 @@ export default function PlaneShapeOption(){
{shapeNum === 16 && <PlaneShapeTab16/>}
{shapeNum === 17 && <PlaneShapeTab17/>}
{shapeNum === 18 && <PlaneShapeTab18/>}
<div className="grid-btn-wrap">
<div className="plane-shape-btn">
<button className="btn-frame modal act">作成</button>
</div>
</div>
</div>
</div>
</div>
</WithDraggable>
)
}

2
src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx
View File

@ -40,7 +40,7 @@ export default function PlaneShapeTab01(){
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
斜めの長さ
③
</div>
<div className="eaves-keraba-td">
<div className="outline-form">

1
src/components/publishpage/PublishPage.jsx
View File

@ -157,6 +157,7 @@ export default function PublishPage() {
<li>2024-10-30</li>
<li>*지붕형상설정 pop 변별로 설정 탭 하단 한쪽 흐름 input 추가</li>
<li>*견적서 img 업로드 버튼 수정</li>
<li>*면형상 배치 pop 수정</li>
</ul>
</td>
<td className="t-center">2024-10-28</td>

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%;
}
}
// 오브젝트 배치