Spaces:

jamesLeeeeeee
/

ocr

Running

App Files Files Community

jamesLeeeeeee commited on Nov 21, 2025

Commit

0f7d155

verified ·

1 Parent(s): 33ce322

샘플로 몇개 넣어서 확인가능해야하지 않을까?

Browse files

Files changed (4) hide show

components/header.js +1 -0
deployment.html +44 -4
index.html +3 -0
sample.html +263 -0

components/header.js CHANGED Viewed

@@ -48,6 +48,7 @@ class CustomHeader extends HTMLElement {
                             <a href="/deployment.html" class="nav-link font-medium">작업 배포</a>
                             <a href="/admin-detail.html" class="nav-link font-medium">관리 상세</a>
                             <a href="/worker.html" class="nav-link font-medium">작업자</a>
                         </div>
 <div class="flex items-center space-x-4">
                             <button class="bg-undefined-500 hover:bg-undefined-600 text-white px-4 py-2 rounded-full text-sm font-medium transition-all duration-300">

                             <a href="/deployment.html" class="nav-link font-medium">작업 배포</a>
                             <a href="/admin-detail.html" class="nav-link font-medium">관리 상세</a>
                             <a href="/worker.html" class="nav-link font-medium">작업자</a>
+                            <a href="/sample.html" class="nav-link font-medium">샘플 데이터</a>
                         </div>
 <div class="flex items-center space-x-4">
                             <button class="bg-undefined-500 hover:bg-undefined-600 text-white px-4 py-2 rounded-full text-sm font-medium transition-all duration-300">

deployment.html CHANGED Viewed

@@ -82,30 +82,70 @@
             <!-- 대기 문서 -->
             <div class="bg-gray-50 rounded-xl p-4">
                 <h3 class="font-semibold text-gray-800 mb-4 text-center">대기 문서 📥</h3>
-                <div id="waitingColumn" class="space-y-4 min-h-96">
                 </div>
             </div>
             <!-- 배포 중 -->
             <div class="bg-blue-50 rounded-xl p-4">
                 <h3 class="font-semibold text-blue-800 mb-4 text-center">배포 중 🚀</h3>
-                <div id="deployingColumn" class="space-y-4 min-h-96">
                 </div>
             </div>
             <!-- 진행 중 -->
             <div class="bg-yellow-50 rounded-xl p-4">
                 <h3 class="font-semibold text-yellow-800 mb-4 text-center">진행 중 ⚡</h3>
-                <div id="progressColumn" class="space-y-4 min-h-96">
                 </div>
             </div>
             <!-- 완료 -->
             <div class="bg-green-50 rounded-xl p-4">
                 <h3 class="font-semibold text-green-800 mb-4 text-center">완료 ✅</h3>
-                <div id="completedColumn" class="space-y-4 min-h-96">
                 </div>
             </div>
         </div>
     </main>

             <!-- 대기 문서 -->
             <div class="bg-gray-50 rounded-xl p-4">
                 <h3 class="font-semibold text-gray-800 mb-4 text-center">대기 문서 📥</h3>
+            <div id="waitingColumn" class="space-y-4 min-h-96">
+                <div class="document-card bg-white rounded-lg p-4 shadow-md border border-gray-200 cursor-move" draggable="true" data-document-id="1">
+                    <div class="flex justify-between items-start mb-2">
+                    <span class="text-sm font-medium text-gray-700">건축 도면 #2456</span>
+                    <span class="priority-badge bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">높음</span>
+                </div>
+                <div class="text-xs text-gray-500 mb-2">도면</div>
+                <div class="flex justify-between items-center">
+                    <span class="text-xs text-gray-400">마감: 2024-03-15</span>
+                    <button class="worker-select-btn text-xs bg-primary-500 text-white px-2 py-1 rounded">작업자 선택</button>
                 </div>
             </div>
+</div>
             <!-- 배포 중 -->
             <div class="bg-blue-50 rounded-xl p-4">
                 <h3 class="font-semibold text-blue-800 mb-4 text-center">배포 중 🚀</h3>
+            <div id="deployingColumn" class="space-y-4 min-h-96">
+                <div class="document-card bg-white rounded-lg p-4 shadow-md border border-gray-200 cursor-move" draggable="true" data-document-id="2">
+                    <div class="flex justify-between items-start mb-2">
+                    <span class="text-sm font-medium text-gray-700">시공 계획서 #1890</span>
+                    <span class="priority-badge bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">보통</span>
+                </div>
+                <div class="text-xs text-gray-500 mb-2">계획서</div>
+                <div class="flex justify-between items-center">
+                    <span class="text-xs text-gray-400">마감: 2024-03-20</span>
+                    <button class="worker-select-btn text-xs bg-primary-500 text-white px-2 py-1 rounded">재배포</button>
                 </div>
             </div>
+</div>
             <!-- 진행 중 -->
             <div class="bg-yellow-50 rounded-xl p-4">
                 <h3 class="font-semibold text-yellow-800 mb-4 text-center">진행 중 ⚡</h3>
+            <div id="progressColumn" class="space-y-4 min-h-96">
+                <div class="document-card bg-white rounded-lg p-4 shadow-md border border-gray-200 cursor-move" draggable="true" data-document-id="3">
+                    <div class="flex justify-between items-start mb-2">
+                    <span class="text-sm font-medium text-gray-700">공사 명세서 #3124</span>
+                    <span class="priority-badge bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">낮음</span>
+                </div>
+                <div class="text-xs text-gray-500 mb-2">명세서</div>
+                <div class="flex justify-between items-center">
+                    <span class="text-xs text-gray-400">마감: 2024-03-25</span>
+                    <button class="worker-select-btn text-xs bg-primary-500 text-white px-2 py-1 rounded">작업자 변경</button>
                 </div>
             </div>
+</div>
             <!-- 완료 -->
             <div class="bg-green-50 rounded-xl p-4">
                 <h3 class="font-semibold text-green-800 mb-4 text-center">완료 ✅</h3>
+            <div id="completedColumn" class="space-y-4 min-h-96">
+                <div class="document-card bg-white rounded-lg p-4 shadow-md border border-gray-200 cursor-move" draggable="true" data-document-id="4">
+                    <div class="flex justify-between items-start mb-2">
+                    <span class="text-sm font-medium text-gray-700">안전 계획서 #4567</span>
+                    <span class="priority-badge bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">높음</span>
+                </div>
+                <div class="text-xs text-gray-500 mb-2">계획서</div>
+                <div class="flex justify-between items-center">
+                    <span class="text-xs text-gray-400">마감: 2024-03-12</span>
+                    <button class="worker-select-btn text-xs bg-primary-500 text-white px-2 py-1 rounded">검수 대기</button>
                 </div>
             </div>
+</div>
         </div>
     </main>

index.html CHANGED Viewed

@@ -86,6 +86,9 @@
                 <a href="/worker.html" class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105">
                     작업자 로그인
                 </a>
             </div>
 </div>
     </main>

                 <a href="/worker.html" class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105">
                     작업자 로그인
                 </a>
+                <a href="/sample.html" class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105">
+                    샘플 데이터
+                </a>
             </div>
 </div>
     </main>

sample.html ADDED Viewed

	@@ -0,0 +1,263 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>샘플 데이터 - OCR 정밀 교정 공방</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'primary': {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gradient-to-br from-primary-50 to-primary-100 min-h-screen">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-primary-900 mb-4">샘플 데이터 📊</h1>
+            <p class="text-lg text-primary-700 max-w-2xl mx-auto">
+                실제 작업 환경을 경험할 수 있는 샘플 데이터입니다. OCR 텍스트 수정과 공정/공종 라벨링을 연습해보세요.
+            </p>
+        </div>
+        <!-- 샘플 문서 섹션 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
+            <!-- 샘플 1 -->
+            <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200">
+                <div class="w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center mb-4">
+                    <i data-feather="file-text" class="text-white"></i>
+                </div>
+                <h3 class="text-xl font-semibold text-primary-900 mb-2">건축 도면 샘플</h3>
+                <p class="text-primary-700 mb-4">건축 도면에서 추출된 OCR 텍스트를 수정하고 공종을 라벨링합니다.</p>
+                <div class="ocr-container mb-4">
+                    <div class="ocr-text-area">
+건축허가 신청서
+신청인: 홍길동
+주소: 서울시 강남구 테헤란로 123
+건물용도: 업무시설
+대지면적: 1,200㎡
+건축면적: 800㎡
+연면적: 3,600㎡
+구조: 철근콘크리트조
+규모: 지하 2층, 지상 10층
+공사개요:
+- 지하주차장 시설
+- 친환경 설계 적용
+- 지진에 강한 구조 설계
+허가신청일: 2024년 3월 1일
+                    </div>
+                </div>
+                <div class="space-y-3">
+                    <div>
+                        <label class="block text-sm text-primary-600 mb-1">공정 선택</label>
+                        <select class="process-select">
+                            <option>기본설계</option>
+                            <option>실시설계</option>
+                            <option>인허가</option>
+                            <option>공사준비</option>
+                            <option>시공</option>
+                            <option>준공검사</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm text-primary-600 mb-1">공종 선택</label>
+                        <select class="process-select">
+                            <option>토공사</option>
+                            <option>콘크리트공사</option>
+                            <option>철근공사</option>
+                            <option>목공사</option>
+                            <option>도장공사</option>
+                        </select>
+                    </div>
+                    <button class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
+                            샘플 작업 시작
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- 샘플 2 -->
+            <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200">
+                <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mb-4">
+                    <i data-feather="clipboard" class="text-white"></i>
+                </div>
+                <h3 class="text-xl font-semibold text-primary-900 mb-2">시공 계획서 샘플</h3>
+                <p class="text-primary-700 mb-4">시공 계획서의 OCR 텍스트를 교정하고 적절한 공정을 라벨링합니다.</p>
+                <div class="ocr-container mb-4">
+                    <div class="ocr-text-area">
+시공계획서
+프로젝트명: ABC 빌딩 신축공사
+시공사: ㈜한국건설
+공사기간: 2024.03.01 ~ 2024.12.31
+주요공정:
+1. 가설공사 (3월)
+2. 토목공사 (4월~5월)
+3. 건축공사 (6월~11월)
+4. 마감공사 (12월)
+안전관리계획:
+- 주간 안전회의
+- 정기 안전점검
+- 안전교육 실시
+품질관리계획:
+- 자재검수
+- 공정별 검사
+- 최종 검수
+                    </div>
+                </div>
+                <div class="space-y-3">
+                    <div>
+                        <label class="block text-sm text-primary-600 mb-1">공정 선택</label>
+                        <select class="process-select">
+                            <option>가설공사</option>
+                            <option>토목공사</option>
+                            <option>건축공사</option>
+                            <option>마감공사</option>
+                            <option>준공검사</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm text-primary-600 mb-1">공종 선택</label>
+                        <select class="process-select">
+                            <option>가설공사</option>
+                            <option>토공사</option>
+                            <option>콘크리트공사</option>
+                            <option>철근공사</option>
+                            <option>방수공사</option>
+                        </select>
+                    </div>
+                    <button class="w-full bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
+                            샘플 작업 시작
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- 샘플 3 -->
+            <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200">
+                <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mb-4">
+                    <i data-feather="trending-up" class="text-white"></i>
+                </div>
+                <h3 class="text-xl font-semibold text-primary-900 mb-2">공사 명세서 샘플</h3>
+                <p class="text-primary-700 mb-4">공사 명세서의 OCR 텍스트를 정밀하게 수정합니다.</p>
+                <div class="ocr-container mb-4">
+                    <div class="ocr-text-area">
+공사명세서
+공사명: XYZ 아파트 리모델링
+시공사: ㈜대한건설
+공사기간: 2024.04.01 ~ 2024.10.31
+시방서:
+- 콘크리트: 24MPa 이상
+- 철근: SD400
+- 도장: 아크릴 수성페인트
+공사비 내역:
+1. 가설비: 50,000,000원
+2. 자재비: 800,000,000원
+3. 인건비: 350,000,000원
+4. 경비: 100,000,000원
+총 공사비: 1,300,000,000원
+                    </div>
+                </div>
+                <div class="space-y-3">
+                    <div>
+                        <label class="block text-sm text-primary-600 mb-1">공정 선택</label>
+                        <select class="process-select">
+                            <option>설계</option>
+                            <option>자재조달</option>
+                            <option>시공</option>
+                            <option>마감</option>
+                            <option>검수</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm text-primary-600 mb-1">공종 선택</label>
+                        <select class="process-select">
+                            <option>철근공사</option>
+                            <option>콘크리트공사</option>
+                            <option>타일공사</option>
+                            <option>도장공사</option>
+                            <option>전기공사</option>
+                        </select>
+                    </div>
+                    <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
+                            샘플 작업 시작
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 작업 진행률 샘플 -->
+        <div class="bg-white rounded-2xl p-8 shadow-lg border border-primary-200">
+            <h2 class="text-2xl font-bold text-primary-900 mb-6 text-center">샘플 작업 진행률 📈</h2>
+            <div class="space-y-6">
+                <div>
+                    <div class="flex justify-between mb-2">
+                        <span class="text-primary-700">건축 도면 샘플</span>
+                        <span class="text-primary-700 font-medium">75%</span>
+                    </div>
+                    <div class="w-full bg-primary-200 rounded-full h-3">
+                        <div class="bg-primary-500 h-3 rounded-full" style="width: 75%"></div>
+                </div>
+                <div>
+                    <div class="flex justify-between mb-2">
+                        <span class="text-primary-700">시공 계획서 샘플</span>
+                        <span class="text-primary-700 font-medium">50%</span>
+                    </div>
+                    <div class="w-full bg-primary-200 rounded-full h-3">
+                        <div class="bg-primary-500 h-3 rounded-full" style="width: 50%"></div>
+                </div>
+                <div>
+                    <div class="flex justify-between mb-2">
+                        <span class="text-primary-700">공사 명세서 샘플</span>
+                        <span class="text-primary-700 font-medium">25%</span>
+                    </div>
+                    <div class="w-full bg-primary-200 rounded-full h-3">
+                        <div class="bg-primary-500 h-3 rounded-full" style="width: 25%"></div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>