From aabf3288df2586a597435d81548598b5b90a32fa 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: Fri, 3 Jan 2025 17:59:27 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A7=80=EB=B6=95=EB=A9=B4=20=ED=95=A0?=
 =?UTF-8?q?=EB=8B=B9=20=ED=8C=9D=EC=97=85=20y=EC=8A=A4=ED=81=AC=EB=A1=A4?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/roofallocation/RoofAllocation.jsx   | 246 +++++++++++++-----
 src/components/publishpage/PublishPage.jsx    |   6 +-
 src/styles/_modal.scss                        |  14 +
 3 files changed, 194 insertions(+), 72 deletions(-)

diff --git a/src/components/canvas/modal/roofallocation/RoofAllocation.jsx b/src/components/canvas/modal/roofallocation/RoofAllocation.jsx
index 5dfaead..1d8a82b 100644
--- a/src/components/canvas/modal/roofallocation/RoofAllocation.jsx
+++ b/src/components/canvas/modal/roofallocation/RoofAllocation.jsx
@@ -27,92 +27,196 @@ export default function RoofAllocation() {
                         </div>
                         <button className="allocation-edit"><i className="edit-ico"></i>追加</button>
                     </div>
-                    <div className="grid-option-wrap">
-                        <div className="grid-option-box">
-                            <div className="d-check-radio pop no-text">
-                                <input type="radio" name="radio01" id="ra01" />
-                                <label htmlFor="ra01"></label>
-                            </div>
-                            <div className="grid-option-block-form">
-                                <div className="block-box">
-                                    <div className="flex-ment">
-                                        <div className="grid-select" style={{width: '248px'}}>
-                                            <Qselect title={'瓦53A'} option={SelectOption01}/>
-                                        </div>
-                                        <span className="dec">基本屋根材</span>
-                                    </div>
+                    <div className="grid-option-overflow">
+                        <div className="grid-option-wrap">
+                            <div className="grid-option-box">
+                                <div className="d-check-radio pop no-text">
+                                    <input type="radio" name="radio01" id="ra01" />
+                                    <label htmlFor="ra01"></label>
                                 </div>
-                                <div className="block-box">
+                                <div className="grid-option-block-form">
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <div className="grid-select" style={{width: '248px'}}>
+                                                <Qselect title={'瓦53A'} option={SelectOption01}/>
+                                            </div>
+                                            <span className="dec">基本屋根材</span>
+                                        </div>
+                                    </div>
+                                    
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <span>W</span>
+                                            <div className="input-grid" style={{width: '100px'}}>
+                                                <input type="text" className="input-origin block" defaultValue={100} readOnly/>
+                                            </div>
+                                        </div>
+                                        <div className="flex-ment">
+                                            <span>L</span>
+                                            <div className="input-grid" style={{width: '100px'}}>
+                                                <input type="text" className="input-origin block" defaultValue={100} readOnly/>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="block-box" >
                                     <div className="flex-ment">
-                                        <span>W</span>
-                                        <div className="input-grid" style={{width: '100px'}}>
+                                        <span>垂木の</span>
+                                        <div className="input-grid" style={{width: '178px'}}>
                                             <input type="text" className="input-origin block" defaultValue={100} readOnly/>
                                         </div>
-                                    </div>
-                                    <div className="flex-ment">
-                                        <span>L</span>
-                                        <div className="input-grid" style={{width: '100px'}}>
-                                            <input type="text" className="input-origin block" defaultValue={100} readOnly/>
                                         </div>
                                     </div>
-                                </div>
-                                <div className="block-box">
-                                    <div className="flex-ment">
-                                        <span>垂木の間隔</span>
-                                        <div className="grid-select" style={{width: '178px'}}>
-                                            <Qselect title={'455'} option={SelectOption04}/>
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <span>垂木の間隔</span>
+                                            <div className="grid-select" style={{width: '178px'}}>
+                                                <Qselect title={'455'} option={SelectOption04}/>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div className="block-box">
-                                    <div className="icon-btn-wrap">
-                                        <button className="act">並列式<i className="allocation01"></i></button>
-                                        <button>カスケード <i className="allocation02"></i></button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="grid-option-box">
-                            <div className="d-check-radio pop no-text">
-                                <input type="radio" name="radio01" id="ra02" />
-                                <label htmlFor="ra02"></label>
-                            </div>
-                            <div className="grid-option-block-form">
-                                <div className="block-box">
-                                    <div className="flex-ment">
-                                        <div className="grid-select" style={{width: '248px'}}>
-                                            <Qselect title={'瓦53A'} option={SelectOption01}/>
-                                        </div>
-                                        <button className="delete"></button>
-                                    </div>
-                                </div>
-                                <div className="block-box">
-                                    <div className="flex-ment">
-                                        <span>W</span>
-                                        <div className="input-grid" style={{width: '100px'}}>
-                                            <input type="text" className="input-origin block" defaultValue={100} readOnly/>
-                                        </div>
-                                    </div>
-                                    <div className="flex-ment">
-                                        <span>L</span>
-                                        <div className="input-grid" style={{width: '100px'}}>
-                                            <input type="text" className="input-origin block" defaultValue={100} readOnly/>
+                                    
+                                    <div className="block-box">
+                                        <div className="icon-btn-wrap">
+                                            <button className="act">並列式<i className="allocation01"></i></button>
+                                            <button>カスケード <i className="allocation02"></i></button>
                                         </div>
                                     </div>
                                     
                                 </div>
-                                <div className="block-box">
-                                    <div className="flex-ment">
-                                        <span>垂木の間隔</span>
-                                        <div className="grid-select" style={{width: '178px'}}>
-                                            <Qselect title={'세로 455mm이하'} option={SelectOption04}/>
+                            </div>
+                            <div className="grid-option-box">
+                                <div className="d-check-radio pop no-text">
+                                    <input type="radio" name="radio01" id="ra02" />
+                                    <label htmlFor="ra02"></label>
+                                </div>
+                                <div className="grid-option-block-form">
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <div className="grid-select" style={{width: '248px'}}>
+                                                <Qselect title={'瓦53A'} option={SelectOption01}/>
+                                            </div>
+                                            <button className="delete"></button>
+                                        </div>
+                                    </div>
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <span>W</span>
+                                            <div className="input-grid" style={{width: '100px'}}>
+                                                <input type="text" className="input-origin block" defaultValue={100} readOnly/>
+                                            </div>
+                                        </div>
+                                        <div className="flex-ment">
+                                            <span>L</span>
+                                            <div className="input-grid" style={{width: '100px'}}>
+                                                <input type="text" className="input-origin block" defaultValue={100} readOnly/>
+                                            </div>
+                                        </div>
+                                        
+                                    </div>
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <span>垂木の間隔</span>
+                                            <div className="grid-select" style={{width: '178px'}}>
+                                                <Qselect title={'세로 455mm이하'} option={SelectOption04}/>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="block-box">
+                                        <div className="icon-btn-wrap">
+                                            <button className="act">並列式<i className="allocation01"></i></button>
+                                            <button>カスケード <i className="allocation02"></i></button>
+                                        </div>
+                                    </div>
+                                    
+                                </div>
+                            </div>
+                            <div className="grid-option-box">
+                                <div className="d-check-radio pop no-text">
+                                    <input type="radio" name="radio01" id="ra02" />
+                                    <label htmlFor="ra02"></label>
+                                </div>
+                                <div className="grid-option-block-form">
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <div className="grid-select" style={{width: '248px'}}>
+                                                <Qselect title={'瓦53A'} option={SelectOption01}/>
+                                            </div>
+                                            <button className="delete"></button>
+                                        </div>
+                                    </div>
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <span>W</span>
+                                            <div className="input-grid" style={{width: '100px'}}>
+                                                <input type="text" className="input-origin block" defaultValue={100} readOnly/>
+                                            </div>
+                                        </div>
+                                        <div className="flex-ment">
+                                            <span>L</span>
+                                            <div className="input-grid" style={{width: '100px'}}>
+                                                <input type="text" className="input-origin block" defaultValue={100} readOnly/>
+                                            </div>
+                                        </div>
+                                        
+                                    </div>
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <span>垂木の間隔</span>
+                                            <div className="grid-select" style={{width: '178px'}}>
+                                                <Qselect title={'세로 455mm이하'} option={SelectOption04}/>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="block-box">
+                                        <div className="icon-btn-wrap">
+                                            <button className="act">並列式<i className="allocation01"></i></button>
+                                            <button>カスケード <i className="allocation02"></i></button>
                                         </div>
                                     </div>
                                 </div>
-                                <div className="block-box">
-                                    <div className="icon-btn-wrap">
-                                        <button className="act">並列式<i className="allocation01"></i></button>
-                                        <button>カスケード <i className="allocation02"></i></button>
+                            </div>
+                            <div className="grid-option-box">
+                                <div className="d-check-radio pop no-text">
+                                    <input type="radio" name="radio01" id="ra02" />
+                                    <label htmlFor="ra02"></label>
+                                </div>
+                                <div className="grid-option-block-form">
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <div className="grid-select" style={{width: '248px'}}>
+                                                <Qselect title={'瓦53A'} option={SelectOption01}/>
+                                            </div>
+                                            <button className="delete"></button>
+                                        </div>
+                                    </div>
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <span>W</span>
+                                            <div className="input-grid" style={{width: '100px'}}>
+                                                <input type="text" className="input-origin block" defaultValue={100} readOnly/>
+                                            </div>
+                                        </div>
+                                        <div className="flex-ment">
+                                            <span>L</span>
+                                            <div className="input-grid" style={{width: '100px'}}>
+                                                <input type="text" className="input-origin block" defaultValue={100} readOnly/>
+                                            </div>
+                                        </div>
+                                        
+                                    </div>
+                                    <div className="block-box">
+                                        <div className="flex-ment">
+                                            <span>垂木の間隔</span>
+                                            <div className="grid-select" style={{width: '178px'}}>
+                                                <Qselect title={'세로 455mm이하'} option={SelectOption04}/>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="block-box">
+                                        <div className="icon-btn-wrap">
+                                            <button className="act">並列式<i className="allocation01"></i></button>
+                                            <button>カスケード <i className="allocation02"></i></button>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx
index 8bd8f42..0111b8a 100644
--- a/src/components/publishpage/PublishPage.jsx
+++ b/src/components/publishpage/PublishPage.jsx
@@ -209,11 +209,15 @@ export default function PublishPage() {
                     <li>2024-12-11</li>
                     <li>*배치면 초기설정 팝업 마지막 설정 버튼 추가</li>
                   </ul>
-                  <ul>
+                  <ul className='mb10'>
                     <li>2024-12-17</li>
                     <li>*배치면 초기설정 팝업 W,L input box 변환</li>
                     <li>*지붕면할당 팝업 W,L input box 변환</li>
                   </ul>
+                  <ul>
+                    <li>2025-01-03</li>
+                    <li>*지붕면 할당 팝업 y스크롤 생성</li>
+                  </ul>
                 </td>
                 <td className="t-center">2024-10-28</td>
               </tr>
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 9b1085f..582138a 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -251,6 +251,20 @@ $alert-color: #101010;
         border-bottom: 1px solid #424242;
     }
 }
+.grid-option-overflow{
+    max-height: 350px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+}
 .grid-option-wrap{
     .grid-option-box{
         display: flex;