색상 지정 팝업 추가

src/app/canvas/page.jsx

@@ -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>

src/components/canvas/modal/colorselect/ColorSelect.jsx

@@ -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>
+    )
+}

src/components/common/colorpicker/ColorPicker.jsx

@@ -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>
     </>
   )
 }

src/styles/_modal.scss

@@ -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;
+                }
+            }
+        }
+    }
 }