443 lines
19 KiB
HTML
443 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ChemiFactory 공급사 관리</title>
|
|
<!-- Google Fonts Inter -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<!-- 테마 적용 (base.css보다 먼저 로드해 FOWT 방지) -->
|
|
<script src="js/theme.js"></script>
|
|
<link rel="stylesheet" href="css/base.css">
|
|
<style>
|
|
.header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
.search-container {
|
|
display: flex;
|
|
gap: 12px;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
.form-control {
|
|
background-color: var(--overlay-hover);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: 10px 16px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--border-focus);
|
|
background-color: var(--overlay-strong);
|
|
}
|
|
.grid-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 24px;
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 992px) {
|
|
.grid-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
.list-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
.list-table th, .list-table td {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
text-align: left;
|
|
}
|
|
.list-table th {
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
.list-table tr {
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.list-table tr:hover {
|
|
background-color: var(--overlay-subtle);
|
|
}
|
|
.list-table tr.active-row {
|
|
background-color: var(--nav-active-bg);
|
|
border-left: 3px solid var(--accent-blue);
|
|
}
|
|
|
|
/* 탭 구조 */
|
|
.tabs-header {
|
|
display: flex;
|
|
gap: 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin-bottom: 16px;
|
|
}
|
|
.tab-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all 0.2s;
|
|
}
|
|
.tab-btn:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
.tab-btn.active {
|
|
color: var(--accent-blue);
|
|
font-weight: 600;
|
|
}
|
|
.tab-btn.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: var(--accent-blue);
|
|
}
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
/* 모달 스타일 */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--modal-backdrop);
|
|
backdrop-filter: blur(4px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.modal-content {
|
|
background-color: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
box-shadow: 0 10px 30px var(--card-shadow);
|
|
animation: modalFadeIn 0.3s ease;
|
|
}
|
|
@keyframes modalFadeIn {
|
|
from { opacity: 0; transform: translateY(-20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 12px;
|
|
}
|
|
.modal-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
.close-btn {
|
|
font-size: 24px;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
.close-btn:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 6px;
|
|
font-weight: 500;
|
|
}
|
|
.modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
margin-top: 24px;
|
|
border-top: 1px solid var(--border-color);
|
|
padding-top: 16px;
|
|
}
|
|
.btn-secondary {
|
|
background-color: var(--overlay-hover);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.btn-secondary:hover {
|
|
background-color: var(--overlay-strong);
|
|
}
|
|
.btn-danger {
|
|
background-color: var(--accent-red);
|
|
color: var(--text-on-accent);
|
|
}
|
|
.btn-danger:hover {
|
|
background-color: var(--danger-solid);
|
|
box-shadow: 0 0 12px var(--accent-red-glow);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- 공통 사이드바 -->
|
|
<aside class="sidebar" id="sidebar"></aside>
|
|
|
|
<!-- 메인 콘텐츠 영역 -->
|
|
<main class="main-content">
|
|
<header class="content-header">
|
|
<div class="page-title">
|
|
<h1>공급사 관리</h1>
|
|
<p>원자재 공급처 정보, 공급사 담당자 연락처망 및 자재 매입 활동 내역을 관리합니다.</p>
|
|
</div>
|
|
<button class="btn btn-primary" id="btn-add-supplier">+ 공급사 추가</button>
|
|
</header>
|
|
|
|
<div class="grid-layout">
|
|
<!-- 왼쪽: 공급사 목록 -->
|
|
<div class="card">
|
|
<div class="header-row">
|
|
<h2 class="section-title" style="margin:0;">공급사 목록</h2>
|
|
<div class="search-container">
|
|
<input type="text" id="search-supplier" class="form-control" placeholder="공급사명 검색...">
|
|
</div>
|
|
</div>
|
|
<div style="overflow-x: auto;">
|
|
<table class="list-table">
|
|
<thead>
|
|
<tr>
|
|
<th>공급사명(한글)</th>
|
|
<th>대표 번호</th>
|
|
<th>등록번호</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="supplier-list-body">
|
|
<tr>
|
|
<td colspan="3" style="text-align: center; color: var(--text-muted); padding: 30px 0;">데이터를 불러오는 중...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 오른쪽: 선택된 공급사 상세정보 -->
|
|
<div class="card" id="supplier-detail-card" style="display: none;">
|
|
<div class="header-row" style="border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 16px;">
|
|
<div>
|
|
<h2 id="detail-name-kr" style="margin: 0; font-size: 20px; font-weight: 700;">공급사명</h2>
|
|
<p id="detail-name-en" style="color: var(--text-secondary); font-size: 13px; margin: 4px 0 0 0;">English Name</p>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-secondary" id="btn-edit-supplier" style="padding: 6px 12px; font-size: 13px;">수정</button>
|
|
<button class="btn btn-danger" id="btn-delete-supplier" style="padding: 6px 12px; font-size: 13px;">삭제</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 24px; font-size: 14px;">
|
|
<p style="margin-bottom: 8px;"><strong style="color: var(--text-secondary);">사업자등록번호:</strong> <span id="detail-brn"></span></p>
|
|
<p style="margin-bottom: 8px;"><strong style="color: var(--text-secondary);">대표 연락처:</strong> <span id="detail-contact"></span></p>
|
|
<p style="margin-bottom: 8px;"><strong style="color: var(--text-secondary);">주소:</strong> <span id="detail-address"></span></p>
|
|
</div>
|
|
|
|
<!-- 탭메뉴 -->
|
|
<div class="tabs-header">
|
|
<button class="tab-btn active" data-tab="tab-contacts">담당자 정보</button>
|
|
<button class="tab-btn" data-tab="tab-activities">원재료 매입 일지</button>
|
|
</div>
|
|
|
|
<!-- 탭 1: 공급사 담당자 정보 -->
|
|
<div id="tab-contacts" class="tab-content active">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
|
<h3 style="font-size: 15px; font-weight: 600;">공급처 담당자 목록</h3>
|
|
<button class="btn btn-primary" id="btn-add-contact" style="padding: 6px 12px; font-size: 12px;">+ 담당자 추가</button>
|
|
</div>
|
|
<div style="overflow-x: auto;">
|
|
<table class="list-table" style="font-size: 13px;">
|
|
<thead>
|
|
<tr>
|
|
<th>이름</th>
|
|
<th>직급/소속</th>
|
|
<th>연락처</th>
|
|
<th>이메일</th>
|
|
<th>관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="contact-list-body">
|
|
<!-- 담당자 정보 리스트 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 탭 2: 매입 활동 기록 -->
|
|
<div id="tab-activities" class="tab-content">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
|
<h3 style="font-size: 15px; font-weight: 600;">매입 및 거래 내역</h3>
|
|
<button class="btn btn-primary" id="btn-add-activity" style="padding: 6px 12px; font-size: 12px;">+ 일지 추가</button>
|
|
</div>
|
|
<div style="overflow-x: auto;">
|
|
<table class="list-table" style="font-size: 13px;">
|
|
<thead>
|
|
<tr>
|
|
<th>날짜</th>
|
|
<th>활동 구분</th>
|
|
<th>상세 내용 및 메모</th>
|
|
<th>관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="activity-list-body">
|
|
<!-- 매입 거래 이력 리스트 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 상세 대기 안내 카드 -->
|
|
<div class="card" id="supplier-placeholder-card" style="display: flex; align-items: center; justify-content: center; height: 300px; color: var(--text-secondary);">
|
|
<div>왼쪽 목록에서 공급사를 선택하시면 상세 내역을 확인할 수 있습니다.</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 공급사 추가/수정 모달 -->
|
|
<div id="supplier-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" id="supplier-modal-title">공급사 등록</h3>
|
|
<button class="close-btn">×</button>
|
|
</div>
|
|
<form id="supplier-form">
|
|
<input type="hidden" id="supplier-id">
|
|
<div class="form-group">
|
|
<label for="supp-name-kr">공급사 한글명 *</label>
|
|
<input type="text" id="supp-name-kr" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="supp-name-en">공급사 영문명</label>
|
|
<input type="text" id="supp-name-en" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="supp-brn">사업자등록번호</label>
|
|
<input type="text" id="supp-brn" class="form-control" placeholder="123-45-67890">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="supp-contact">대표 연락처</label>
|
|
<input type="text" id="supp-contact" class="form-control" placeholder="02-1234-5678">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="supp-address">회사 주소</label>
|
|
<input type="text" id="supp-address" class="form-control">
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary close-modal-btn">취소</button>
|
|
<button type="submit" class="btn btn-primary">저장</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 담당자 추가/수정 모달 -->
|
|
<div id="contact-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" id="contact-modal-title">담당자 등록</h3>
|
|
<button class="close-btn">×</button>
|
|
</div>
|
|
<form id="contact-form">
|
|
<input type="hidden" id="contact-id">
|
|
<div class="form-group">
|
|
<label for="cont-name">담당자 이름 *</label>
|
|
<input type="text" id="cont-name" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cont-position">직급/부서</label>
|
|
<input type="text" id="cont-position" class="form-control" placeholder="예: 영업부 과장">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cont-phone">연락처</label>
|
|
<input type="text" id="cont-phone" class="form-control" placeholder="010-1234-5678">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cont-email">이메일 주소</label>
|
|
<input type="email" id="cont-email" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cont-location">근무처/사무실 위치</label>
|
|
<input type="text" id="cont-location" class="form-control" placeholder="예: 공장 1F">
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary close-modal-btn">취소</button>
|
|
<button type="submit" class="btn btn-primary">저장</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 매입 일지 추가/수정 모달 -->
|
|
<div id="activity-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" id="activity-modal-title">매입 일지 등록</h3>
|
|
<button class="close-btn">×</button>
|
|
</div>
|
|
<form id="activity-form">
|
|
<input type="hidden" id="activity-id">
|
|
<div class="form-group">
|
|
<label for="act-date">매입 날짜 *</label>
|
|
<input type="date" id="act-date" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="act-type">활동 구분 *</label>
|
|
<select id="act-type" class="form-control" required>
|
|
<option value="원재료 입고">원재료 입고</option>
|
|
<option value="자재 미팅">자재 상담/미팅</option>
|
|
<option value="매입 견적 요청">매입 견적 요청</option>
|
|
<option value="발주 협의">발주 및 계약 협의</option>
|
|
<option value="기타">기타</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="act-memo">메모 / 매입 상세 내역 *</label>
|
|
<textarea id="act-memo" class="form-control" style="height: 100px; resize: none;" required></textarea>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary close-modal-btn">취소</button>
|
|
<button type="submit" class="btn btn-primary">저장</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 스크립트 연결 -->
|
|
<script src="js/common.js"></script>
|
|
<script src="js/supplier.js"></script>
|
|
</body>
|
|
</html>
|