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-10-17 10:37:54 +09:00
parent 19df156c7a
commit db4549a956
4 changed files with 132 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,6 +56,7 @@ import AdditionalColumnEdit from '@/components/canvas/modal/additionalfunction/m
import AdditionalBundleDelete from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete'
import AdditionalBundleEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit'
import CanvasContextMenu from '@/components/canvas/CanvasContextMenu'
import ColorSelect from '@/components/canvas/modal/colorselect/ColorSelect'
export default function CanvasPage() {
const modalOption = useRecoilValue(modalState);
@ -131,7 +132,7 @@ export default function CanvasPage() {
{/* <PlaneShapeOption/> */}
{/* 오브젝트 배치*/}
<ObjectOption/>
{/* <ObjectOption/> */}
{/* 표시변겅 */}
{/* <DisplayChange/> */}
@ -151,10 +152,10 @@ export default function CanvasPage() {
{/* <RoofModuleOption/> */}
{/* 육지붕모듈 선택 */}
<HexagonalRoofOption/>
{/* <HexagonalRoofOption/> */}
{/* 회로 및 가대설정 */}
<CircuitStandSetting/>
{/* <CircuitStandSetting/> */}
{/* 모듈 부가기능 */}
@ -174,6 +175,9 @@ export default function CanvasPage() {
{/* <AdditionalColumnEdit/> */}
{/* <AdditionalBundleDelete/> */}
{/* <AdditionalBundleEdit/> */}
{/* 색상 팝업 */}
<ColorSelect/>
</div>
</div>
</div>

26
src/components/canvas/modal/colorselect/ColorSelect.jsx Normal file
View File

@ -0,0 +1,26 @@
import ColorPicker from "@/components/common/colorpicker/ColorPicker";
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function ColorSelect (){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lr`}>
<div className="modal-head">
<h1 className="title">カラー設定</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="color-setting-wrap">
<div className="color-tit">COLOR PICKER</div>
<div className="color-picker">
<ColorPicker/>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

23
src/components/common/colorpicker/ColorPicker.jsx
View File

@ -7,10 +7,29 @@ export default function ColorPicker() {
return (
<>
<div style={{ width: '300px', padding: '20px' }}>
<div>
<HexColorPicker color={color} onChange={setColor} />
</div>
<p>{color}</p>
<div className='hex-color-box'>
<div className="color-box-tit">HEX</div>
<div className='color-hex-input'>
<input type="text" className='input-origin' value={color} onChange={(e) => setColor(e.target.value)}/>
</div>
<div className="color-box" style={{backgroundColor : color}}></div>
</div>
<div className="default-color-wrap">
<div className='default-tit'>基本色</div>
<div className="color-button-wrap">
<button className='default-color' style={{backgroundColor: '#EA575D'}} onClick={() => setColor('#EA575D')}></button>
<button className='default-color' style={{backgroundColor: '#F29955'}} onClick={() => setColor('#F29955')}></button>
<button className='default-color' style={{backgroundColor: '#F2C957'}} onClick={() => setColor('#F2C957')}></button>
<button className='default-color' style={{backgroundColor: '#32975D'}} onClick={() => setColor('#32975D')}></button>
<button className='default-color' style={{backgroundColor: '#3D7FED'}} onClick={() => setColor('#3D7FED')}></button>
<button className='default-color' style={{backgroundColor: '#828282'}} onClick={() => setColor('#828282')}></button>
<button className='default-color' style={{backgroundColor: '#ffffff'}} onClick={() => setColor('#ffffff')}></button>
<button className='default-color' style={{backgroundColor: '#000000'}} onClick={() => setColor('#000000')}></button>
</div>
</div>
</>
)
}

79
src/styles/_modal.scss
View File

@ -1505,7 +1505,7 @@ $alert-color: #101010;
width: 16px;
height: 16px;
&.pink{
border: 2px solid #EA10AC;
border: 2px solid #ce1c9c;
background-color: #16417D;
}
&.white{
@ -1514,4 +1514,81 @@ $alert-color: #101010;
}
}
}
}
// color setting
.color-setting-wrap{
padding-bottom: 15px;
border-bottom: 1px solid #424242;
.color-tit{
font-size: 13px;
font-weight: 500;
color: #ffffff;
margin-bottom: 10px;
}
.color-picker{
.react-colorful{
width: 100%;
height: auto;
gap: 20px;
.react-colorful__pointer{
width: 15px;
height: 15px;
border: 4px solid #Fff;
}
.react-colorful__saturation{
border-radius: 2px;
height: 200px;
border-bottom: 5px solid #000;
}
.react-colorful__last-control{
border-radius: 2px;
height: 10px;
}
}
.hex-color-box{
display: flex;
align-items: center;
margin-top: 15px;
.color-box-tit{
font-size: 12px;
color: #fff;
font-weight: 500;
margin-right: 10px;
}
.color-hex-input{
width: 150px;
margin-right: 5px;
input{
width: 100%;
}
}
.color-box{
display: block;
width: 30px;
height: 30px;
border-radius: 4px;
}
}
.default-color-wrap{
margin-top: 25px;
.default-tit{
font-size: 12px;
font-weight: 500;
color: #fff;
margin-bottom: 10px;
}
.color-button-wrap{
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 21px;
.default-color{
display: block;
width: 100%;
height: 30px;
border-radius: 4px;
}
}
}
}
}