50308dd340
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
439 lines
27 KiB
PHP
439 lines
27 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>바로빌 회원관리 - 코드브릿지엑스</title>
|
|
|
|
<!-- Fonts: Pretendard -->
|
|
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: { sans: ['Pretendard', 'sans-serif'] },
|
|
colors: {
|
|
background: 'rgb(250, 250, 250)',
|
|
primary: { DEFAULT: '#2563eb', foreground: '#ffffff' },
|
|
},
|
|
borderRadius: { 'card': '12px' }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- React & ReactDOM (Production) -->
|
|
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
|
|
<!--
|
|
Note: For production, Babel and Tailwind CDN should be pre-compiled.
|
|
Currently kept for rapid development and mobility.
|
|
-->
|
|
<!-- Babel for JSX -->
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
|
|
<!-- Icons: Lucide -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
<body class="bg-background text-slate-800 antialiased font-sans">
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel">
|
|
const { useState, useEffect, useRef } = React;
|
|
|
|
// --- Layout Components ---
|
|
|
|
const Header = () => (
|
|
<header className="bg-white border-b border-gray-100 sticky top-0 z-50">
|
|
<div className="max-w-7xl mx-auto px-4 lg:px-8 h-16 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white">
|
|
<i data-lucide="users" className="w-5 h-5"></i>
|
|
</div>
|
|
<h1 className="text-lg font-semibold text-slate-900">바로빌 회원관리 솔루션</h1>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-sm text-slate-500 font-medium">
|
|
<a href="../eaccount/index.php" className="hover:text-blue-600 flex items-center gap-1 bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-lg transition-colors border border-slate-100">
|
|
<i data-lucide="wallet" className="w-4 h-4 text-blue-500"></i> 계좌조회
|
|
</a>
|
|
<a href="../ecard/index.php" className="hover:text-blue-600 flex items-center gap-1 bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-lg transition-colors border border-slate-100">
|
|
<i data-lucide="credit-card" className="w-4 h-4 text-purple-500"></i> 카드내역
|
|
</a>
|
|
<a href="../tenant/index.php" className="hover:text-blue-600 flex items-center gap-1 bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-lg transition-colors border border-slate-100">
|
|
<i data-lucide="building" className="w-4 h-4 text-teal-500"></i> 테넌트관리
|
|
</a>
|
|
<a href="../barobill_registration/index.php" className="text-blue-600 flex items-center gap-1 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-100 cursor-default font-bold">
|
|
<i data-lucide="users" className="w-4 h-4 text-blue-600"></i> 회원관리
|
|
</a>
|
|
<a href="../etax/barobill_api_info.php" className="hover:text-blue-600 flex items-center gap-1 bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-lg transition-colors border border-slate-100">
|
|
<i data-lucide="book-open" className="w-4 h-4 text-orange-500"></i> API정보
|
|
</a>
|
|
|
|
<div className="h-4 w-px bg-slate-200 mx-2"></div>
|
|
|
|
<a href="../barobill/index.php" className="hover:text-blue-700 flex items-center gap-1">
|
|
<i data-lucide="layout-dashboard" className="w-4 h-4"></i> 현황
|
|
</a>
|
|
<a href="../etax/index.php" className="hover:text-blue-700 flex items-center gap-1">
|
|
<i data-lucide="file-text" className="w-4 h-4"></i> 세금계산서
|
|
</a>
|
|
<a href="../index.php" className="hover:text-blue-700 flex items-center gap-1">
|
|
<i data-lucide="home" className="w-4 h-4"></i> 홈
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
|
|
const StatCard = ({ title, value, subtext, icon, color = "blue" }) => {
|
|
const colors = {
|
|
blue: "bg-blue-50 text-blue-600",
|
|
green: "bg-green-50 text-green-600",
|
|
purple: "bg-purple-50 text-purple-600",
|
|
orange: "bg-orange-50 text-orange-600"
|
|
};
|
|
return (
|
|
<div className="bg-white rounded-card p-6 shadow-sm border border-slate-100">
|
|
<div className="flex items-start justify-between mb-2">
|
|
<h3 className="text-xs font-semibold text-slate-400 uppercase">{title}</h3>
|
|
<div className={`p-1.5 rounded-lg ${colors[color]}`}>{icon}</div>
|
|
</div>
|
|
<div className="text-2xl font-bold text-slate-900">{value}</div>
|
|
<div className="text-[10px] text-slate-400 mt-1">{subtext}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --- Forms & Modals ---
|
|
|
|
const MemberForm = ({ initialData = {}, onSubmit, isEditing = false, onCancel }) => {
|
|
const [formData, setFormData] = useState({
|
|
bizNo: '', corpName: '', ceoName: '', addr: '',
|
|
bizType: '', bizClass: '', id: '', pwd: '',
|
|
managerName: '', managerEmail: '', managerHP: '',
|
|
...initialData
|
|
});
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={(e) => { e.preventDefault(); onSubmit(formData); }} className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="col-span-2 md:col-span-1">
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">사업자번호</label>
|
|
<input name="bizNo" value={formData.bizNo} onChange={handleChange} disabled={isEditing} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm disabled:opacity-50" required />
|
|
</div>
|
|
<div className="col-span-2 md:col-span-1">
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">상호명</label>
|
|
<input name="corpName" value={formData.corpName} onChange={handleChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm" required />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">대표자명</label>
|
|
<input name="ceoName" value={formData.ceoName} onChange={handleChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm" required />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">업태</label>
|
|
<input name="bizType" value={formData.bizType} onChange={handleChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">종목</label>
|
|
<input name="bizClass" value={formData.bizClass} onChange={handleChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm" />
|
|
</div>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">주소</label>
|
|
<input name="addr" value={formData.addr} onChange={handleChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm" />
|
|
</div>
|
|
{!isEditing && (
|
|
<>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">바로빌 아이디</label>
|
|
<input name="id" value={formData.id} onChange={handleChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm" required />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">비밀번호</label>
|
|
<input type="password" name="pwd" value={formData.pwd} onChange={handleChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm" required />
|
|
</div>
|
|
</>
|
|
)}
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">담당자명</label>
|
|
<input name="managerName" value={formData.managerName} onChange={handleChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">담당자 HP</label>
|
|
<input name="managerHP" value={formData.managerHP} onChange={handleChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm" />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="text-[10px] font-bold text-slate-400 uppercase mb-1 block">담당자 이메일</label>
|
|
<input type="email" name="managerEmail" value={formData.managerEmail} onChange={handleChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm" />
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 pt-4">
|
|
<button type="submit" className="flex-1 py-3 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700">
|
|
{isEditing ? '정보 수정하기' : '회원사 등록하기'}
|
|
</button>
|
|
{onCancel && (
|
|
<button type="button" onClick={onCancel} className="px-6 py-3 bg-slate-100 text-slate-600 rounded-lg font-bold hover:bg-slate-200">
|
|
취소
|
|
</button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
const Modal = ({ isOpen, onClose, title, children }) => {
|
|
if (!isOpen) return null;
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm">
|
|
<div className="bg-white rounded-2xl w-full max-w-2xl overflow-hidden shadow-2xl">
|
|
<div className="p-4 border-b border-slate-100 flex justify-between items-center">
|
|
<h3 className="font-bold text-slate-800">{title}</h3>
|
|
<button onClick={onClose} className="p-2 text-slate-400 hover:text-slate-600"><i data-lucide="x" className="w-5 h-5"></i></button>
|
|
</div>
|
|
<div className="p-6 overflow-y-auto max-h-[80vh]">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --- Main App ---
|
|
|
|
const App = () => {
|
|
const [members, setMembers] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [activeTab, setActiveTab] = useState('list');
|
|
const [editingMember, setEditingMember] = useState(null);
|
|
|
|
// Auto-fill feature states
|
|
const [registerKey, setRegisterKey] = useState(0);
|
|
const [initialTestData, setInitialTestData] = useState({});
|
|
|
|
const fetchMembers = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch('api.php');
|
|
const text = await res.text();
|
|
try {
|
|
const data = JSON.parse(text);
|
|
if (data.error) {
|
|
alert(`서버 오류: ${data.message || data.error}\n${data.hint || ''}`);
|
|
}
|
|
setMembers(data.members || []);
|
|
} catch (parseError) {
|
|
console.error("Invalid JSON response:", text);
|
|
alert("서버로부터 올바르지 않은 응답이 수신되었습니다.\n\n[응답 내용]\n" + text.substring(0, 200) + (text.length > 200 ? '...' : '') + "\n\n요소: DB 연동 또는 테이블(init_db.php) 상태를 확인해주세요.");
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert("통신 오류가 발생했습니다.");
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchMembers();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => lucide.createIcons(), 100);
|
|
}, [activeTab, members, editingMember]);
|
|
|
|
const handleRegister = async (data) => {
|
|
try {
|
|
const res = await fetch('api.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
alert('회원사가 성공적으로 등록되었습니다.');
|
|
fetchMembers();
|
|
setActiveTab('list');
|
|
} else {
|
|
alert(`오류: ${result.error}`);
|
|
}
|
|
} catch (e) { alert('등록 중 통신 오류가 발생했습니다.'); }
|
|
};
|
|
|
|
const handleUpdate = async (data) => {
|
|
try {
|
|
const res = await fetch('api.php', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
alert('회원 정보가 수정되었습니다.');
|
|
setEditingMember(null);
|
|
fetchMembers();
|
|
} else {
|
|
alert(`오류: ${result.error}`);
|
|
}
|
|
} catch (e) { alert('수정 중 통신 오류가 발생했습니다.'); }
|
|
};
|
|
|
|
const handleDelete = async (id) => {
|
|
if (!confirm('정말로 이 회원사를 삭제하시겠습니까? 관련 데이터가 모두 삭제될 수 있습니다.')) return;
|
|
try {
|
|
const res = await fetch(`api.php?id=${id}`, { method: 'DELETE' });
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
alert('회원사가 삭제되었습니다.');
|
|
fetchMembers();
|
|
} else {
|
|
alert(`오류: ${result.error}`);
|
|
}
|
|
} catch (e) { alert('삭제 중 통신 오류가 발생했습니다.'); }
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<Header />
|
|
|
|
<main className="max-w-7xl mx-auto px-4 lg:px-8 py-8">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
<StatCard title="연동 회원사" value={members.length} subtext="DB 실시간 합계" icon={<i data-lucide="building"></i>} />
|
|
<StatCard title="API 키 상태" value="정상" subtext="바로빌 연동 중" icon={<i data-lucide="key"></i>} color="green" />
|
|
<StatCard title="트래픽" value="최적" subtext="최근 24시간" icon={<i data-lucide="zap"></i>} color="purple" />
|
|
<StatCard title="서버 상태" value="Excellent" subtext="지연시간 45ms" icon={<i data-lucide="server"></i>} color="orange" />
|
|
</div>
|
|
|
|
<div className="flex gap-1 bg-slate-100 p-1 rounded-xl mb-8 w-fit">
|
|
<button onClick={() => setActiveTab('list')} className={`px-6 py-2 text-sm font-bold rounded-lg ${activeTab === 'list' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-800'}`}>목록 조회</button>
|
|
<button onClick={() => setActiveTab('register')} className={`px-6 py-2 text-sm font-bold rounded-lg ${activeTab === 'register' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-800'}`}>신규 등록</button>
|
|
</div>
|
|
|
|
{activeTab === 'list' ? (
|
|
<div className="bg-white rounded-card shadow-sm border border-slate-100 overflow-hidden min-h-[400px]">
|
|
{loading ? (
|
|
<div className="p-20 text-center text-slate-400">데이터를 불러오는 중입니다...</div>
|
|
) : members.length === 0 ? (
|
|
<div className="p-20 text-center text-slate-400">등록된 회원사가 없습니다. 신규 등록을 진행해주세요.</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-sm">
|
|
<thead className="bg-slate-50 text-slate-500 font-medium">
|
|
<tr>
|
|
<th className="px-6 py-4">사업자번호</th>
|
|
<th className="px-6 py-4">상호 / 대표자</th>
|
|
<th className="px-6 py-4">바로빌 ID</th>
|
|
<th className="px-6 py-4">담당자 정보</th>
|
|
<th className="px-6 py-4 text-right">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-50">
|
|
{members.map((m) => (
|
|
<tr key={m.id} className="hover:bg-slate-50 transition-colors group">
|
|
<td className="px-6 py-4 font-mono text-slate-500">{m.biz_no}</td>
|
|
<td className="px-6 py-4">
|
|
<div className="font-bold text-slate-900">{m.corp_name}</div>
|
|
<div className="text-xs text-slate-400">{m.ceo_name}</div>
|
|
</td>
|
|
<td className="px-6 py-4 text-slate-600 font-medium">{m.barobill_id}</td>
|
|
<td className="px-6 py-4">
|
|
<div className="text-slate-700">{m.manager_name}</div>
|
|
<div className="text-[10px] text-slate-400">{m.manager_email}</div>
|
|
</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<div className="flex justify-end gap-1 opacity-10 group-hover:opacity-100 transition-opacity">
|
|
<button onClick={() => setEditingMember(m)} className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg" title="수정"><i data-lucide="edit-3" className="w-4 h-4"></i></button>
|
|
<button onClick={() => handleDelete(m.id)} className="p-2 text-red-600 hover:bg-red-50 rounded-lg" title="삭제"><i data-lucide="trash-2" className="w-4 h-4"></i></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="max-w-3xl animate-in slide-in-from-right-4 duration-300">
|
|
<div className="mb-6 flex justify-between items-center">
|
|
<div>
|
|
<h3 className="text-xl font-bold text-slate-900">신규 회원사 가입</h3>
|
|
<p className="text-xs text-slate-400">입력된 정보로 바로빌 RegistCorp API가 호출됩니다.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
const randomId = Math.random().toString(36).substring(2, 8);
|
|
const randomBiz = `123-45-${Math.floor(10000 + Math.random() * 90000)}`;
|
|
const testData = {
|
|
bizNo: randomBiz,
|
|
corpName: `테스트기업_${randomId}`,
|
|
ceoName: '홍길동',
|
|
addr: '서울특별시 강남구 테헤란로 123',
|
|
bizType: '서비스',
|
|
bizClass: '소프트웨어',
|
|
id: `test_${randomId}`,
|
|
pwd: 'password123!',
|
|
managerName: '김철수',
|
|
managerHP: '010-1234-5678',
|
|
managerEmail: `test_${randomId}@example.com`
|
|
};
|
|
// Trigger a custom event or use a state update mechanism
|
|
// provided by the child component if available.
|
|
// Since we're in the parent, we'll pass it down via a key or ref if needed,
|
|
// but for simpler implementation, we'll use a unique key to reset the form component with new initialData.
|
|
setRegisterKey(prev => prev + 1);
|
|
setInitialTestData(testData);
|
|
}}
|
|
className="flex items-center gap-2 px-4 py-2 bg-amber-100 text-amber-700 rounded-lg hover:bg-amber-200 transition-all font-bold text-xs"
|
|
title="랜덤 테스트 데이터 입력"
|
|
>
|
|
<i data-lucide="zap" className="w-4 h-4 fill-amber-500"></i>
|
|
자동 완성
|
|
</button>
|
|
</div>
|
|
<div className="bg-white rounded-card p-6 shadow-sm border border-slate-100">
|
|
<MemberForm key={registerKey} initialData={initialTestData} onSubmit={handleRegister} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<Modal isOpen={!!editingMember} onClose={() => setEditingMember(null)} title="회원사 정보 수정">
|
|
<MemberForm
|
|
initialData={{
|
|
id: editingMember?.id,
|
|
bizNo: editingMember?.biz_no,
|
|
corpName: editingMember?.corp_name,
|
|
ceoName: editingMember?.ceo_name,
|
|
addr: editingMember?.addr,
|
|
bizType: editingMember?.biz_type,
|
|
bizClass: editingMember?.biz_class,
|
|
managerName: editingMember?.manager_name,
|
|
managerEmail: editingMember?.manager_email,
|
|
managerHP: editingMember?.manager_hp
|
|
}}
|
|
isEditing={true}
|
|
onSubmit={handleUpdate}
|
|
onCancel={() => setEditingMember(null)}
|
|
/>
|
|
</Modal>
|
|
</main>
|
|
|
|
<footer className="mt-20 py-8 border-t border-slate-100 text-center">
|
|
<p className="text-slate-300 text-[10px]">© 2026 CodeBridgeX. Real-time DB CRUD Interface enabled.</p>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(<App />);
|
|
</script>
|
|
</body>
|
|
</html>
|