From 6ebe12f4c5634b054326107186af52cde24bf364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Tue, 14 Jan 2025 14:36:24 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B8=B0=EB=B3=B8=EC=84=A4=EC=A0=95=20->=20?=
 =?UTF-8?q?=EB=AA=A8=EB=93=88=20=ED=8D=BC=EB=B8=94=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../floor-plan/modal/basic/step/Module.jsx    | 298 +++++++++---------
 .../modal/basic/step/ModuleTabContents.jsx    |  42 ++-
 2 files changed, 179 insertions(+), 161 deletions(-)

diff --git a/src/components/floor-plan/modal/basic/step/Module.jsx b/src/components/floor-plan/modal/basic/step/Module.jsx
index 32b85e56..10035c86 100644
--- a/src/components/floor-plan/modal/basic/step/Module.jsx
+++ b/src/components/floor-plan/modal/basic/step/Module.jsx
@@ -81,178 +81,182 @@ export default function Module({}) {
 
   return (
     <>
-      <div className="module-table-flex-wrap mb10">
-        <div className="module-table-box">
-          <div className="module-table-inner">
-            <div className="outline-form mb10">
-              <span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
-              <div className="grid-select">
-                {moduleList && (
-                  <QSelectBox
-                    options={moduleList}
-                    value={moduleSelectionInitParams}
-                    targetKey={'moduleTpCd'}
-                    sourceKey={'itemTp'}
-                    showKey={'itemNm'}
-                    onChange={handleChangeModule}
-                  />
-                )}
+      <div className="roof-module-tab2-overflow">
+        <div className="module-table-flex-wrap mb10">
+          <div className="module-table-box">
+            <div className="module-table-inner">
+              <div className="outline-form mb10">
+                <span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
+                <div className="grid-select">
+                  {moduleList && (
+                    <QSelectBox
+                      options={moduleList}
+                      value={moduleSelectionInitParams}
+                      targetKey={'moduleTpCd'}
+                      sourceKey={'itemTp'}
+                      showKey={'itemNm'}
+                      onChange={handleChangeModule}
+                    />
+                  )}
+                </div>
+              </div>
+              <div className="roof-module-table">
+                <table>
+                  <thead>
+                    <tr>
+                      {moduleData.header.map((header) => {
+                        return (
+                          <th key={header.prop} style={{ width: header.width ? header.width + 'px' : '' }}>
+                            {header.name}
+                          </th>
+                        )
+                      })}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {selectedModules.itemList &&
+                      selectedModules.itemList.map((row) => (
+                        <>
+                          <tr>
+                            <td>
+                              <div className="color-wrap">
+                                <span className="color-box" style={{ backgroundColor: row.color }}></span>
+                                <span className="name">{row.itemNm}</span>
+                              </div>
+                            </td>
+                            <td className="al-r">{Number(row.shortAxis).toFixed(0)}</td>
+                            <td className="al-r">{Number(row.longAxis).toFixed(0)}</td>
+                            <td className="al-r">{Number(row.wpOut).toFixed(0)}</td>
+                          </tr>
+                        </>
+                      ))}
+                  </tbody>
+                </table>
               </div>
-            </div>
-            <div className="roof-module-table">
-              <table>
-                <thead>
-                  <tr>
-                    {moduleData.header.map((header) => {
-                      return (
-                        <th key={header.prop} style={{ width: header.width ? header.width + 'px' : '' }}>
-                          {header.name}
-                        </th>
-                      )
-                    })}
-                  </tr>
-                </thead>
-                <tbody>
-                  {selectedModules.itemList &&
-                    selectedModules.itemList.map((row) => (
-                      <>
-                        <tr>
-                          <td>
-                            <div className="color-wrap">
-                              <span className="color-box" style={{ backgroundColor: row.color }}></span>
-                              <span className="name">{row.itemNm}</span>
-                            </div>
-                          </td>
-                          <td className="al-r">{Number(row.shortAxis).toFixed(0)}</td>
-                          <td className="al-r">{Number(row.longAxis).toFixed(0)}</td>
-                          <td className="al-r">{Number(row.wpOut).toFixed(0)}</td>
-                        </tr>
-                      </>
-                    ))}
-                </tbody>
-              </table>
             </div>
           </div>
-        </div>
-        <div className="module-table-box none-flex">
-          <div className="module-table-inner">
-            <div className="module-table-tit">{getMessage('modal.module.basic.setting.module.stuff.info')}</div>
-            <div className="eaves-keraba-table">
-              <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.surface.type')}</div>
-                <div className="eaves-keraba-td">
-                  <div className="outline-form">
-                    <div className="grid-select" style={{ width: '95.77px', flex: 'none' }}>
-                      {roughnessCodes.length > 0 && (
-                        <QSelectBox
-                          options={roughnessCodes}
-                          value={managementState}
-                          targetKey={'surfaceTypeValue'}
-                          sourceKey={'clCode'}
-                          showKey={'clCodeNm'}
-                          onChange={handleChangeSurfaceType}
+
+          <div className="module-table-box none-flex">
+            <div className="module-table-inner">
+              <div className="module-table-tit">{getMessage('modal.module.basic.setting.module.stuff.info')}</div>
+              <div className="eaves-keraba-table">
+                <div className="eaves-keraba-item">
+                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.surface.type')}</div>
+                  <div className="eaves-keraba-td">
+                    <div className="outline-form">
+                      <div className="grid-select">
+                        {roughnessCodes.length > 0 && (
+                          <QSelectBox
+                            options={roughnessCodes}
+                            value={managementState}
+                            targetKey={'surfaceTypeValue'}
+                            sourceKey={'clCode'}
+                            showKey={'clCodeNm'}
+                            onChange={handleChangeSurfaceType}
+                          />
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="eaves-keraba-item">
+                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.fitting.height')}</div>
+                  <div className="eaves-keraba-td">
+                    <div className="outline-form">
+                      <div className="grid-select mr10">
+                        <input
+                          type="text"
+                          className="input-origin block"
+                          value={inputInstallHeight}
+                          onChange={(e) => setInputInstallHeight(e.target.value)}
                         />
-                      )}
+                      </div>
+                      <span className="thin">mm</span>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.fitting.height')}</div>
-                <div className="eaves-keraba-td">
-                  <div className="outline-form">
-                    <div className="grid-select mr10">
-                      <input
-                        type="text"
-                        className="input-origin block"
-                        value={inputInstallHeight}
-                        onChange={(e) => setInputInstallHeight(e.target.value)}
-                      />
+                <div className="eaves-keraba-item">
+                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</div>
+                  <div className="eaves-keraba-td">
+                    <div className="outline-form">
+                      <div className="grid-select mr10">
+                        {windSpeedCodes.length > 0 && managementState && (
+                          <QSelectBox
+                            title={''}
+                            options={windSpeedCodes}
+                            value={managementState}
+                            targetKey={'standardWindSpeedId'}
+                            sourceKey={'clCode'}
+                            showKey={'clCodeNm'}
+                            onChange={handleChangeWindSpeed}
+                          />
+                        )}
+                      </div>
+                      <span className="thin">m/s</span>
                     </div>
-                    <span className="thin">mm</span>
                   </div>
                 </div>
-              </div>
-              <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</div>
-                <div className="eaves-keraba-td">
-                  <div className="outline-form">
-                    <div className="grid-select mr10">
-                      {windSpeedCodes.length > 0 && managementState && (
-                        <QSelectBox
-                          title={''}
-                          options={windSpeedCodes}
-                          value={managementState}
-                          targetKey={'standardWindSpeedId'}
-                          sourceKey={'clCode'}
-                          showKey={'clCodeNm'}
-                          onChange={handleChangeWindSpeed}
+                <div className="eaves-keraba-item">
+                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</div>
+                  <div className="eaves-keraba-td">
+                    <div className="outline-form">
+                      <div className="grid-select mr10">
+                        <input
+                          type="text"
+                          className="input-origin block"
+                          value={inputVerticalSnowCover}
+                          onChange={(e) => setInputVerticalSnowCover(e.target.value)}
                         />
-                      )}
+                      </div>
+                      <span className="thin">mm</span>
                     </div>
-                    <span className="thin">m/s</span>
-                  </div>
-                </div>
-              </div>
-              <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</div>
-                <div className="eaves-keraba-td">
-                  <div className="outline-form">
-                    <div className="grid-select mr10">
-                      <input
-                        type="text"
-                        className="input-origin block"
-                        value={inputVerticalSnowCover}
-                        onChange={(e) => setInputVerticalSnowCover(e.target.value)}
-                      />
-                    </div>
-                    <span className="thin">mm</span>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div className="module-table-box mb10">
-        <div className="module-box-tab">
+
+        <div className="module-table-box mb10">
+          <div className="module-box-tab">
+            {addedRoofs &&
+              addedRoofs.map((roof, index) => (
+                <button key={index} className={`module-btn ${roofTab === index ? 'act' : ''}`} onClick={() => (roof ? handleRoofTab(index) : null)}>
+                  {roof !== undefined ? `屋根材${index + 1}` : '-'}
+                </button>
+              ))}
+          </div>
           {addedRoofs &&
             addedRoofs.map((roof, index) => (
-              <button key={index} className={`module-btn ${roofTab === index ? 'act' : ''}`} onClick={() => (roof ? handleRoofTab(index) : null)}>
-                {roof !== undefined ? `屋根材${index + 1}` : '-'}
-              </button>
+              <div style={{ display: roofTab === index ? 'block' : 'none' }} key={index}>
+                <ModuleTabContents
+                  key={index}
+                  index={index}
+                  addRoof={roof}
+                  roofTab={index}
+                  moduleCommonSelectionData={moduleSelectionData.common}
+                  moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]}
+                  setModuleSelectionData={setModuleSelectionData}
+                  tempModuleSelectionData={tempModuleSelectionData}
+                  setTempModuleSelectionData={setTempModuleSelectionData}
+                />
+              </div>
             ))}
         </div>
-        {addedRoofs &&
-          addedRoofs.map((roof, index) => (
-            <div style={{ display: roofTab === index ? 'block' : 'none' }} key={index}>
-              <ModuleTabContents
-                key={index}
-                index={index}
-                addRoof={roof}
-                roofTab={index}
-                moduleCommonSelectionData={moduleSelectionData.common}
-                moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]}
-                setModuleSelectionData={setModuleSelectionData}
-                tempModuleSelectionData={tempModuleSelectionData}
-                setTempModuleSelectionData={setTempModuleSelectionData}
-              />
-            </div>
-          ))}
-      </div>
-
-      <div className="module-bottom">
-        <div className="module-table-box ">
-          <div className="warning-guide">
-            <div className="warning">
-              {getMessage('modal.module.basic.setting.module.setting.info1')}
-              <br />
-              {getMessage('modal.module.basic.setting.module.setting.info2')}
+        <div className="module-bottom">
+          <div className="module-table-box ">
+            <div className="warning-guide">
+              <div className="warning">
+                {getMessage('modal.module.basic.setting.module.setting.info1')}
+                <br />
+                {getMessage('modal.module.basic.setting.module.setting.info2')}
+              </div>
             </div>
           </div>
+          {/* 설정 오류시 노출 */}
+          <div className="reset-word">※ 施工方法が選択できません。 基準風速または基準積雪量を確認してください。</div>
         </div>
-        {/* 설정 오류시 노출 */}
-        <div className="reset-word">※ 施工方法が選択できません。 基準風速または基準積雪量を確認してください。</div>
       </div>
     </>
   )
diff --git a/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx b/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx
index 24f76a35..128d207b 100644
--- a/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx
+++ b/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx
@@ -284,6 +284,22 @@ export default function ModuleTabContents({
               {globalPitchText}）
             </div>
             <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">マンドンピッチ</div>
+                <div className="eaves-keraba-td">
+                  <div className="grid-select">
+                    <QSelectBox
+                      options={raftCodes}
+                      value={addRoof}
+                      sourceKey={'clCode'}
+                      targetKey={'raftBaseCd'}
+                      showKey={'clCodeNm'}
+                      disabled={roofMaterial.raftAuth === 'R' ? true : false}
+                      onChange={handleChangeRaftBase}
+                    />
+                  </div>
+                </div>
+              </div>
               <div className="eaves-keraba-item">
                 {roofMaterial && ['C'].includes(roofMaterial.lenAuth) && (
                   <>
@@ -308,20 +324,18 @@ export default function ModuleTabContents({
                   <>
                     <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
                     <div className="eaves-keraba-td">
-                      <div className="keraba-flex">
-                        <div className="grid-select">
-                          {raftCodes.length > 0 && (
-                            <QSelectBox
-                              options={raftCodes}
-                              value={addRoof}
-                              sourceKey={'clCode'}
-                              targetKey={'raftBaseCd'}
-                              showKey={'clCodeNm'}
-                              disabled={roofMaterial.raftAuth === 'R' ? true : false}
-                              onChange={handleChangeRaftBase}
-                            />
-                          )}
-                        </div>
+                      <div className="grid-select">
+                        {raftCodes.length > 0 && (
+                          <QSelectBox
+                            options={raftCodes}
+                            value={addRoof}
+                            sourceKey={'clCode'}
+                            targetKey={'raftBaseCd'}
+                            showKey={'clCodeNm'}
+                            disabled={roofMaterial.raftAuth === 'R' ? true : false}
+                            onChange={handleChangeRaftBase}
+                          />
+                        )}
                       </div>
                     </div>
                   </>