From 38c38e67d41077b18f7b7fabc0c8b36385140672 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Thu, 17 Oct 2024 15:28:05 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B6=94=EA=B0=80=20=ED=8C=9D=EC=97=85=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/canvas/page.jsx                       |  18 +-
 src/app/reactselect/page.jsx                  |   2 +-
 .../modal/font_lineoption/FontOption.jsx      |  57 ++++++
 .../modal/font_lineoption/LineOption.jsx      |  46 +++++
 .../modal/font_lineoption/ShapeSizeOption.jsx |  35 ++++
 .../canvas/modal/roofselect/RoofSelect.jsx    |  29 +++
 .../canvas/modal/sizechange/SizeChang.jsx     |  56 ++++++
 src/styles/_modal.scss                        | 186 ++++++++++++++++++
 8 files changed, 427 insertions(+), 2 deletions(-)
 create mode 100644 src/components/canvas/modal/font_lineoption/FontOption.jsx
 create mode 100644 src/components/canvas/modal/font_lineoption/LineOption.jsx
 create mode 100644 src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx
 create mode 100644 src/components/canvas/modal/roofselect/RoofSelect.jsx
 create mode 100644 src/components/canvas/modal/sizechange/SizeChang.jsx

diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index d7fdd28..de5cefa 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -57,6 +57,11 @@ import AdditionalBundleDelete from '@/components/canvas/modal/additionalfunction
 import AdditionalBundleEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit'
 import CanvasContextMenu from '@/components/canvas/CanvasContextMenu'
 import ColorSelect from '@/components/canvas/modal/colorselect/ColorSelect'
+import FontOption from '@/components/canvas/modal/font_lineoption/FontOption'
+import LineOption from '@/components/canvas/modal/font_lineoption/LineOption'
+import ShapeSizeOption from '@/components/canvas/modal/font_lineoption/ShapeSizeOption'
+import RoofSelect from '@/components/canvas/modal/roofselect/RoofSelect'
+import SizeChange from '@/components/canvas/modal/sizechange/SizeChang'
 
 export default function CanvasPage() {
     const modalOption = useRecoilValue(modalState);
@@ -177,7 +182,18 @@ export default function CanvasPage() {
                     {/* <AdditionalBundleEdit/> */}
 
                     {/* 색상 팝업 */}
-                    <ColorSelect/>
+                    {/* <ColorSelect/> */}
+
+                    {/* 글꼴 설정, 치수선 설정 */}
+                    <FontOption/>
+                    <LineOption/>
+                    <ShapeSizeOption/>
+
+                    {/* 지붕재 선택 */}
+                    <RoofSelect/>
+
+                    {/* 사이즈 변경 */}
+                    <SizeChange/>
                 </div>
             </div>
         </div>
diff --git a/src/app/reactselect/page.jsx b/src/app/reactselect/page.jsx
index ba1898e..eaf37c5 100644
--- a/src/app/reactselect/page.jsx
+++ b/src/app/reactselect/page.jsx
@@ -30,7 +30,7 @@ export default function ReactSelect() {
       <div className="input-content">
         <div className="input-wrap">
           <h1>REACT-SELECT</h1>
-          <div className="select-wrap">
+          <div className="react-select-wrap">
             <Select ref={ref} options={selectOption} onChange={onSelectionChange} isSearchable={false} placeholder="선택하세요" isClearable={true} />
           </div>
         </div>
diff --git a/src/components/canvas/modal/font_lineoption/FontOption.jsx b/src/components/canvas/modal/font_lineoption/FontOption.jsx
new file mode 100644
index 0000000..d2c3ab9
--- /dev/null
+++ b/src/components/canvas/modal/font_lineoption/FontOption.jsx
@@ -0,0 +1,57 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import Qselect from "@/components/common/select/Qselect";
+const SelectOption = [
+    {name: '原寸',}, {name: '原寸'}, {name: '原寸'}, {name: '原寸'}
+]
+export default function FontOption(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap r`}>
+                <div className="modal-head">
+                    <h1 className="title">フォント </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="slope-wrap">
+                        <div className="font-option-warp">
+                            <div className="font-option-item">
+                                <div className="option-item-tit">文字(F)</div>
+                                <div className="grid-select">
+                                    <Qselect title={'MS PGothic'} option={SelectOption}/>
+                                </div>
+                            </div>
+                            <div className="font-option-item">
+                                <div className="option-item-tit">フォントスタイル(Y)</div>
+                                <div className="grid-select">
+                                    <Qselect title={'いつもの'} option={SelectOption}/>
+                                </div>
+                            </div>
+                            <div className="font-option-item">
+                                <div className="option-item-tit">サイズ(S)</div>
+                                <div className="grid-select">
+                                    <Qselect title={'8'} option={SelectOption}/>
+                                </div>
+                            </div>
+                            <div className="font-option-item">
+                                <div className="option-item-tit">フォン</div>
+                                <div className="grid-select">
+                                    <Qselect title={'黒'} option={SelectOption}/>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="font-ex-wrap">
+                            <div className="font-ex-tit">見る</div>
+                            <div className="font-ex-box">
+                                <span style={{fontSize: '12px', fontWeight: '400', color: '#101010'}}>Aaあぁアァ</span>
+                            </div>
+                        </div>
+                        <div className="normal-font">ントです。プリンタと画面 でも同じフォントを使用します.</div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">ストレージ</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/font_lineoption/LineOption.jsx b/src/components/canvas/modal/font_lineoption/LineOption.jsx
new file mode 100644
index 0000000..b762d31
--- /dev/null
+++ b/src/components/canvas/modal/font_lineoption/LineOption.jsx
@@ -0,0 +1,46 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function LineOption(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xxxm`}>
+                <div className="modal-head">
+                    <h1 className="title">寸法線 設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="font-btn-wrap">
+                        <button className="btn-frame modal">フォント設定</button>
+                    </div>
+                    <div className="line-color-wrap">
+                        <div className="outline-form mb10">
+                            <span style={{width: 'auto'}}>寸法線の線太さ</span>
+                            <div className="input-grid mr5" style={{width: '66px'}}>
+                                <input type="text" className="input-origin block" defaultValue={1}/>
+                            </div>
+                            <span className="thin">pixel</span>
+                        </div>
+                        <div className="outline-form">
+                            <span style={{width: 'auto'}}>寸法線の線の色</span>
+                            <button className="color-btn" style={{backgroundColor: "#ff0000"}}></button>
+                        </div>
+                    </div>
+                    <div className="font-ex-wrap">
+                        <div className="font-ex-tit">見る</div>
+                        <div className="form-box">
+                            <div className="line-form">
+                                <div className="line-font-box">
+                                    <span className="font" style={{fontSize: "12px", fontWeight: "400"}}>9,999</span>
+                                    <span className="line" style={{backgroundColor: "#ff0000", borderColor: "#ff0000", height: "1px"}}></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">ストレージ</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx b/src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx
new file mode 100644
index 0000000..907c19a
--- /dev/null
+++ b/src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx
@@ -0,0 +1,35 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function ShapeSizeOption(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xsm`}>
+                <div className="modal-head">
+                    <h1 className="title">寸法線 設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="slope-wrap">
+                        <div className="outline-form mb10">
+                            <span style={{width: 'auto'}}>ガロ</span>
+                            <div className="input-grid mr5" style={{width: '90px'}}>
+                                <input type="text" className="input-origin block" defaultValue={1600}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                        <div className="outline-form">
+                            <span style={{width: 'auto'}}>縦ロ</span>
+                            <div className="input-grid mr5" style={{width: '90px'}}>
+                                <input type="text" className="input-origin block" defaultValue={1600}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">ストレージ</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/roofselect/RoofSelect.jsx b/src/components/canvas/modal/roofselect/RoofSelect.jsx
new file mode 100644
index 0000000..6845fb9
--- /dev/null
+++ b/src/components/canvas/modal/roofselect/RoofSelect.jsx
@@ -0,0 +1,29 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import Qselect from "@/components/common/select/Qselect";
+
+const SelectOption = [
+    {name: '53A',}, {name: '53A'}, {name: '53A'}, {name: '53A'}
+]
+
+export default function RoofSelect(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xxxm`}>
+                <div className="modal-head">
+                    <h1 className="title">変更 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="slope-wrap">
+                        <div className="grid-select">
+                            <Qselect title={'53A'} option={SelectOption}/>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">ストレージ</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/sizechange/SizeChang.jsx b/src/components/canvas/modal/sizechange/SizeChang.jsx
new file mode 100644
index 0000000..d3b27fa
--- /dev/null
+++ b/src/components/canvas/modal/sizechange/SizeChang.jsx
@@ -0,0 +1,56 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import { useState } from "react";
+
+export default function SizeChange(){
+    const [sizeCheck, setSizeCheck] = useState(1)
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap ssm`}>
+                <div className="modal-head">
+                    <h1 className="title">サイズ変更 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="slope-wrap">
+                        <div className="size-option-top">
+                            <div className="size-option-wrap">
+                                <div className="size-option mb5">
+                                    <input type="text" className="input-origin mr5" defaultValue={1000} readOnly/>
+                                    <span className="normal-font">mm</span>
+                                </div>
+                                <div className="size-option">
+                                    <input type="text" className="input-origin mr5" defaultValue={1000}/>
+                                    <span className="normal-font">mm</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="size-inner-warp">
+                            <div className="size-option-side">
+                                <div className="size-option-wrap">
+                                    <div className="size-option mb5">
+                                        <input type="text" className="input-origin mr5" defaultValue={1000} readOnly/>
+                                        <span className="normal-font">mm</span>
+                                    </div>
+                                    <div className="size-option">
+                                        <input type="text" className="input-origin mr5" defaultValue={1000}/>
+                                        <span className="normal-font">mm</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="size-check-wrap">
+                                <button className={`size-btn ${sizeCheck === 1 ? 'act': ''}`} onClick={() => setSizeCheck(1)}></button>
+                                <button className={`size-btn ${sizeCheck === 2 ? 'act': ''}`} onClick={() => setSizeCheck(2)}></button>
+                                <button className={`size-btn ${sizeCheck === 3 ? 'act': ''}`} onClick={() => setSizeCheck(3)}></button>
+                                <button className={`size-btn ${sizeCheck === 4 ? 'act': ''}`} onClick={() => setSizeCheck(4)}></button>
+                                <div className="size-box"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">作成</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index aaea5be..f0966b0 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -34,6 +34,9 @@ $alert-color: #101010;
     border-radius: 4px;
     background-color: #272727;
     z-index: 9999999;
+    &.xsm{
+        width: 200px;
+    }
     &.xxxm{
         width: 240px;
     }
@@ -1591,4 +1594,187 @@ $alert-color: #101010;
             }
         }
     }
+}
+
+// 글꼴 설정 팝업
+.font-option-warp{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px 5px;
+    margin-bottom: 15px;
+    .font-option-item{
+        .option-item-tit{
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+            margin-bottom: 10px;
+        }
+    }
+}
+.font-ex-wrap{
+    margin-bottom: 15px;
+    .font-ex-tit{
+        font-size: 12px;
+        font-weight: 500;
+        color: #fff;
+        margin-bottom: 10px;
+    }
+    .font-ex-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 80px;
+        background-color: #fff;
+    }
+    
+}
+
+// 치수선 설정
+.font-btn-wrap{
+    margin-bottom: 15px;
+    button{
+        width: 100%;
+        height: 30px;
+        line-height: 28px;
+    }
+}
+
+.line-color-wrap{
+    margin-bottom: 15px;
+    .color-btn{
+        display: block;
+        width: 100%;
+        height: 30px;
+        border-radius: 2px;
+    }
+}
+
+.form-box{
+    width: 100%;
+    background-color: #fff;
+    padding: 10px 0 20px;
+    .line-form{
+        position: relative;
+        width: 102px;
+        height: 40px;
+        margin: 0 auto;
+        border-left: 1px dashed #101010;
+        border-right: 1px dashed #101010;
+        .line-font-box{
+            position: absolute;
+            bottom: -3px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            .font{
+                display: block;
+                padding-bottom: 6px;
+                color: #101010;
+            }
+            .line{
+                position: relative;
+                display: block;
+                width: 100%;
+                height: 1px;
+                border-radius: 30px;
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                    left: 1px;
+                    width: 9px;
+                    height: 9px;
+                    border: 1px solid;
+                    border-color: inherit;
+                    border-top: none;
+                    border-right: none;
+                }
+                &::after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                    right: 1px;
+                    width: 9px;
+                    height: 9px;
+                    border: 1px solid;
+                    border-color: inherit;
+                    border-bottom: none;
+                    border-left: none;
+                }
+            }
+        }
+    }
+}
+
+// 사이즈 변경
+.size-inner-warp{
+    position: relative;
+}
+.size-check-wrap{
+    position: relative;
+    display: block;
+    width: 132px;
+    height: 132px;
+    margin: 0 auto;
+    .size-btn{
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        &.act{
+            &::after{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 8px;
+                height: 8px;
+                background-color: #fff;
+                border-radius: 50%;
+            }
+        }
+        &:nth-child(1){ top: 0; left: 0; }
+        &:nth-child(2){ top: 0; right: 0; }
+        &:nth-child(3){ bottom: 0; left: 0; }
+        &:nth-child(4){ bottom: 0; right: 0; }
+    }
+    .size-box{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100px;
+        height: 100px;
+        background-color: #fff;
+    }
+}
+
+.size-option-top{
+    margin-bottom: 15px;
+}
+.size-option-side{
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+}
+.size-option-wrap{
+    width: 88px;
+    margin: 0 auto;
+    .size-option{
+        display: flex;
+        align-items: center;
+        input{
+            width: 100%;
+            flex: 1;
+        }
+        span{
+            flex: none;
+        }
+    }
 }
\ No newline at end of file