From d92493b4e869719098b9e988cec02e982ebab759 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: Wed, 5 Feb 2025 09:54:08 +0900
Subject: [PATCH] =?UTF-8?q?=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

---
 .../ContextRoofAllocationSetting.jsx          | 325 +++++++++---------
 1 file changed, 169 insertions(+), 156 deletions(-)

diff --git a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
index 5bfad3e4..88188887 100644
--- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
@@ -45,175 +45,188 @@ export default function ContextRoofAllocationSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
-          <div className="allocation-select-wrap">
-            <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
-            <div className="grid-select">
-              <QSelectBox
-                options={roofMaterials}
-                value={roofMaterials[0]}
-                onChange={(e) => {
-                  // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
-                  setCurrentRoofMaterial(e)
-                }}
-                showKey={'roofMatlNm'}
-                sourceKey={'roofMatlCd'}
-                targetKey={'roofMatlCd'}
-              />
+        {currentRoofList && (
+          <>
+            <div className="modal-head modal-handle">
+              <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
+              <button className="modal-close" onClick={() => closePopup(id)}>
+                닫기
+              </button>
             </div>
-            <button
-              className="allocation-edit"
-              onClick={() => {
-                onAddRoofMaterial()
-              }}
-            >
-              <i className="edit-ico"></i>
-              {getMessage('modal.common.add')}
-            </button>
-          </div>
-          <div className="grid-option-wrap">
-            {currentRoofList.length > 0 &&
-              currentRoofList.map((roof, index) => {
-                return (
-                  <div className="grid-option-box" key={index}>
-                    <div className="d-check-radio pop no-text">
-                      <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
-                      <label
-                        htmlFor="ra01"
-                        onClick={(e) => {
-                          handleDefaultRoofMaterial(index)
-                        }}
-                      ></label>
-                    </div>
-                    <div className="grid-option-block-form">
-                      <div className="block-box">
-                        <div className="flex-ment">
-                          <div className="grid-select" style={{ width: '248px' }}>
-                            <QSelectBox
-                              options={roofMaterials}
-                              value={roof}
-                              showKey={'roofMatlNm'}
-                              sourceKey={'roofMatlCd'}
-                              targetKey={'roofMatlCd'}
-                              onChange={(e) => handleChangeRoofMaterial(e, index)}
-                            />
-                          </div>
-                          {index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
-                          {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
+            <div className="modal-body">
+              <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
+              <div className="allocation-select-wrap">
+                <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
+                <div className="grid-select">
+                  <QSelectBox
+                    options={roofMaterials}
+                    value={roofMaterials[0]}
+                    onChange={(e) => {
+                      // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
+                      setCurrentRoofMaterial(e)
+                    }}
+                    showKey={'roofMatlNm'}
+                    sourceKey={'roofMatlCd'}
+                    targetKey={'roofMatlCd'}
+                  />
+                </div>
+                <button
+                  className="allocation-edit"
+                  onClick={() => {
+                    onAddRoofMaterial()
+                  }}
+                >
+                  <i className="edit-ico"></i>
+                  {getMessage('modal.common.add')}
+                </button>
+              </div>
+              <div className="grid-option-overflow">
+                <div className="grid-option-wrap">
+                  {currentRoofList.map((roof, index) => {
+                    return (
+                      <div className="grid-option-box" key={index}>
+                        <div className="d-check-radio pop no-text">
+                          <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
+                          <label
+                            htmlFor="ra01"
+                            onClick={(e) => {
+                              handleDefaultRoofMaterial(index)
+                            }}
+                          ></label>
                         </div>
-                      </div>
-                      <div className="block-box">
-                        <div className="flex-ment">
-                          <span>{getMessage('slope')}</span>
-                          <div className="input-grid" style={{ width: '214px' }}>
-                            <input
-                              type="text"
-                              className="input-origin block"
-                              onChange={(e) => {
-                                handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
-                              }}
-                              defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
-                            />
-                          </div>
-                          <span>{pitchText}</span>
-                        </div>
-                      </div>
-                      {(roof.widAuth || roof.lenAuth) && (
-                        <div className="block-box">
-                          {roof.widAuth && (
+                        <div className="grid-option-block-form">
+                          <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={roof.width} readOnly={roof.widAuth === 'R'} />
+                              <div className="grid-select">
+                                <QSelectBox
+                                  options={roofMaterials}
+                                  value={roof}
+                                  showKey={'roofMatlNm'}
+                                  sourceKey={'roofMatlCd'}
+                                  targetKey={'roofMatlCd'}
+                                  onChange={(e) => handleChangeRoofMaterial(e, index)}
+                                />
                               </div>
+                              {index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
+                              {index !== 0 && (
+                                <span className="absol">
+                                  <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
+                                </span>
+                              )}
                             </div>
-                          )}
-                          {roof.lenAuth && (
+                          </div>
+                          <div className="block-box">
                             <div className="flex-ment">
-                              <span>L</span>
-                              <div className="input-grid" style={{ width: '100px' }}>
-                                <input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
+                              <span>{getMessage('slope')}</span>
+                              <div className="input-grid">
+                                <input
+                                  type="text"
+                                  className="input-origin block"
+                                  onChange={(e) => {
+                                    handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
+                                  }}
+                                  defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                                />
                               </div>
+                              <span className="absol">{pitchText}</span>
                             </div>
-                          )}
-                        </div>
-                      )}
-                      {(roof.raftAuth || roof.roofPchAuth) && (
-                        <div className="block-box">
-                          {roof.raftAuth && (
-                            <div className="block-box">
-                              <div className="flex-ment">
-                                <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                                {raftCodes.length > 0 && (
-                                  <div className="grid-select" style={{ width: '160px' }}>
-                                    <QSelectBox
-                                      options={raftCodes}
-                                      value={roof}
-                                      showKey={'clCodeNm'}
-                                      sourceKey={'clCode'}
-                                      targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
-                                    />
+                          </div>
+                          {(roof.widAuth || roof.lenAuth) && (
+                            <>
+                              {roof.widAuth && (
+                                <div className="block-box">
+                                  <div className="flex-ment">
+                                    <span>W</span>
+                                    <div className="input-grid">
+                                      <input type="text" className="input-origin block" defaultValue={roof.width} readOnly={roof.widAuth === 'R'} />
+                                    </div>
                                   </div>
-                                )}
-                              </div>
-                            </div>
-                          )}
-                          {roof.roofPchAuth && (
-                            <div className="block-box">
-                              <div className="flex-ment">
-                                <span>{getMessage('hajebichi')}</span>
-                                <div className="input-grid" style={{ width: '84px' }}>
-                                  <input
-                                    type="text"
-                                    className="input-origin block"
-                                    value={parseInt(roof.hajebichi)}
-                                    readOnly={roof.roofPchAuth === 'R'}
-                                  />
                                 </div>
-                              </div>
-                            </div>
+                              )}
+                              {roof.lenAuth && (
+                                <div className="block-box">
+                                  <div className="flex-ment">
+                                    <span>L</span>
+                                    <div className="input-grid">
+                                      <input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
+                            </>
                           )}
-                        </div>
-                      )}
-                      <div className="block-box">
-                        <div className="icon-btn-wrap">
-                          <button
-                            className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
-                            onClick={() => {
-                              handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
-                            }}
-                          >
-                            {getMessage('modal.roof.alloc.select.parallel')}
-                            <i className="allocation01"></i>
-                          </button>
-                          <button
-                            className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
-                            onClick={() => {
-                              handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
-                            }}
-                          >
-                            {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
-                          </button>
+                          {(roof.raftAuth || roof.roofPchAuth) && (
+                            <>
+                              {roof.raftAuth && (
+                                <div className="block-box">
+                                  <div className="flex-ment">
+                                    <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                                    {raftCodes.length > 0 && (
+                                      <div className="grid-select">
+                                        <QSelectBox
+                                          options={raftCodes}
+                                          value={roof}
+                                          showKey={'clCodeNm'}
+                                          sourceKey={'clCode'}
+                                          targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
+                                        />
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              )}
+                              {roof.roofPchAuth && (
+                                <div className="block-box">
+                                  <div className="flex-ment">
+                                    <span>{getMessage('hajebichi')}</span>
+                                    <div className="input-grid">
+                                      <input
+                                        type="text"
+                                        className="input-origin block"
+                                        value={parseInt(roof.hajebichi)}
+                                        readOnly={roof.roofPchAuth === 'R'}
+                                      />
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
+                            </>
+                          )}
+                          <div className="block-box">
+                            <div className="icon-btn-wrap">
+                              <button
+                                className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
+                                onClick={() => {
+                                  handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
+                                }}
+                              >
+                                {getMessage('modal.roof.alloc.select.parallel')}
+                                <i className="allocation01"></i>
+                              </button>
+                              <button
+                                className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
+                                onClick={() => {
+                                  handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
+                                }}
+                              >
+                                {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
+                              </button>
+                            </div>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </div>
-                )
-              })}
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleSaveContext}>
-              {getMessage('modal.roof.alloc.apply')}
-            </button>
-          </div>
-        </div>
+                    )
+                  })}
+                </div>
+              </div>
+              <div className="grid-btn-wrap">
+                <button className="btn-frame modal act" onClick={handleSaveContext}>
+                  {getMessage('modal.roof.alloc.apply')}
+                </button>
+              </div>
+            </div>
+          </>
+        )}
         <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>