From 5aef867110fa08f9f023b6efabb47239e4eba4dc Mon Sep 17 00:00:00 2001
From: hyungi <hyungi@Hyungiui-Macmini.local>
Date: Thu, 16 Oct 2025 07:11:50 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20=EA=B5=AC=EB=A7=A4=EC=8B=A0?=
 =?UTF-8?q?=EC=B2=AD=20=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 업로드 당시 분류된 정보를 그대로 표시하도록 수정
- 복잡한 BOM 페이지 스타일 분류 로직 제거
- 간단하고 안정적인 테이블 형태로 자재 목록 표시
- 카테고리별 그룹화 유지하되 에러 방지를 위해 단순화

✅ 해결된 문제:
- 구매신청 페이지에서 몇몇 항목이 깨지던 문제 해결
- 업로드 당시 정보를 그대로 보여주도록 개선
---
 frontend/src/pages/PurchaseRequestPage.jsx | 156 +++++++++------------
 1 file changed, 66 insertions(+), 90 deletions(-)

diff --git a/frontend/src/pages/PurchaseRequestPage.jsx b/frontend/src/pages/PurchaseRequestPage.jsx
index abe4269..11b3fbf 100644
--- a/frontend/src/pages/PurchaseRequestPage.jsx
+++ b/frontend/src/pages/PurchaseRequestPage.jsx
@@ -155,97 +155,73 @@ const PurchaseRequestPage = ({ onNavigate, fileId, jobNo, selectedProject }) =>
                             </div>
                             
                             <div className="materials-table">
-                                {/* 카테고리별로 그룹화하여 표시 */}
-                                {(() => {
-                                    // 카테고리별로 자재 그룹화
-                                    const groupedByCategory = requestMaterials.reduce((acc, material) => {
-                                        const category = material.category || 'UNKNOWN';
-                                        if (!acc[category]) acc[category] = [];
-                                        acc[category].push(material);
-                                        return acc;
-                                    }, {});
-                                    
-                                    return Object.entries(groupedByCategory).map(([category, materials]) => (
-                                        <div key={category} style={{ marginBottom: '30px' }}>
-                                            <h3 style={{ 
-                                                background: '#f0f0f0', 
-                                                padding: '10px', 
-                                                borderRadius: '4px',
-                                                fontSize: '14px',
-                                                fontWeight: 'bold'
-                                            }}>
-                                                {category} ({materials.length}개)
-                                            </h3>
-                                            <table>
-                                                <thead>
-                                                    <tr>
-                                                        <th>No</th>
-                                                        <th>카테고리</th>
-                                                        <th>자재 설명</th>
-                                                        <th>크기</th>
-                                                        {category === 'BOLT' ? <th>길이</th> : <th>스케줄</th>}
-                                                        <th>재질</th>
-                                                        <th>수량</th>
-                                                        <th>사용자요구</th>
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    {materials.map((material, idx) => (
-                                                        <tr key={material.item_id || `${category}-${idx}`}>
-                                                            <td>{idx + 1}</td>
-                                                            <td>
-                                                                <span className="category-badge">
-                                                                    {material.category}
-                                                                </span>
-                                                            </td>
-                                                            <td>{material.description}</td>
-                                                            <td>{material.size || '-'}</td>
-                                                            <td>{material.schedule || '-'}</td>
-                                                            <td>{material.material_grade || '-'}</td>
-                                                            <td>
-                                                                {material.category === 'PIPE' ? (
-                                                                    <div>
+                                {/* 업로드 당시 분류된 정보를 그대로 표시 */}
+                                {requestMaterials.length === 0 ? (
+                                    <div className="empty-state">자재 정보가 없습니다</div>
+                                ) : (
+                                    <div>
+                                        {/* 카테고리별로 그룹화하여 표시 */}
+                                        {(() => {
+                                            // 카테고리별로 자재 그룹화
+                                            const groupedByCategory = requestMaterials.reduce((acc, material) => {
+                                                const category = material.category || material.classified_category || 'UNKNOWN';
+                                                if (!acc[category]) acc[category] = [];
+                                                acc[category].push(material);
+                                                return acc;
+                                            }, {});
+                                            
+                                            return Object.entries(groupedByCategory).map(([category, materials]) => (
+                                                <div key={category} style={{ marginBottom: '30px' }}>
+                                                    <h3 style={{ 
+                                                        background: '#f0f0f0', 
+                                                        padding: '10px', 
+                                                        borderRadius: '4px',
+                                                        fontSize: '14px',
+                                                        fontWeight: 'bold'
+                                                    }}>
+                                                        {category} ({materials.length}개)
+                                                    </h3>
+                                                    <table>
+                                                        <thead>
+                                                            <tr>
+                                                                <th>No</th>
+                                                                <th>카테고리</th>
+                                                                <th>자재 설명</th>
+                                                                <th>크기</th>
+                                                                <th>스케줄</th>
+                                                                <th>재질</th>
+                                                                <th>수량</th>
+                                                                <th>사용자요구</th>
+                                                            </tr>
+                                                        </thead>
+                                                        <tbody>
+                                                            {materials.map((material, idx) => (
+                                                                <tr key={material.item_id || material.id || `${category}-${idx}`}>
+                                                                    <td>{idx + 1}</td>
+                                                                    <td>
+                                                                        <span className="category-badge">
+                                                                            {material.category || material.classified_category}
+                                                                        </span>
+                                                                    </td>
+                                                                    <td>{material.description || material.original_description}</td>
+                                                                    <td>{material.size || material.size_spec || '-'}</td>
+                                                                    <td>{material.schedule || '-'}</td>
+                                                                    <td>{material.material_grade || material.full_material_grade || '-'}</td>
+                                                                    <td>
                                                                         <span style={{ fontWeight: 'bold' }}>
-                                                                            {(() => {
-                                                                                // 총 길이와 개수 계산
-                                                                                let totalLengthMm = material.total_length || 0;
-                                                                                let totalCount = 0;
-                                                                                
-                                                                                if (material.pipe_lengths && material.pipe_lengths.length > 0) {
-                                                                                    // pipe_lengths 배열에서 총 개수 계산
-                                                                                    totalCount = material.pipe_lengths.reduce((sum, p) => sum + parseFloat(p.quantity || 0), 0);
-                                                                                } else if (material.material_ids && material.material_ids.length > 0) {
-                                                                                    totalCount = material.material_ids.length;
-                                                                                    if (!totalLengthMm) {
-                                                                                        totalLengthMm = totalCount * 6000;
-                                                                                    }
-                                                                                } else {
-                                                                                    totalCount = parseFloat(material.quantity) || 1;
-                                                                                    if (!totalLengthMm) {
-                                                                                        totalLengthMm = totalCount * 6000;
-                                                                                    }
-                                                                                }
-                                                                                
-                                                                                // 6,000mm를 1본으로 계산
-                                                                                const pipeCount = Math.ceil(totalLengthMm / 6000);
-                                                                                
-                                                                // 형식: 2본(11,000mm/40개)
-                                                                return `${pipeCount}본(${totalLengthMm.toLocaleString()}mm/${totalCount}개)`;
-                                                            })()}
-                                                        </span>
-                                                                    </div>
-                                                                ) : (
-                                                                    `${material.quantity} ${material.unit || 'EA'}`
-                                                                )}
-                                                            </td>
-                                                            <td>{material.user_requirement || '-'}</td>
-                                                        </tr>
-                                                    ))}
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                    ));
-                                })()}
+                                                                            {Math.round(material.quantity || material.requested_quantity || 0)} {material.unit || material.requested_unit || '개'}
+                                                                        </span>
+                                                                    </td>
+                                                                    <td>{material.user_requirement || '-'}</td>
+                                                                </tr>
+                                                            ))}
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                            ));
+                                        })()}
+                                    </div>
+                                )}
                             </div>
                         </>
                     ) : (