바로빌 회원가입 추가
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
aweso
125
barobill_registration/api.php
Normal file
125
barobill_registration/api.php
Normal file
@@ -0,0 +1,125 @@
|
||||
<?php
|
||||
header('Content-Type: application/json');
|
||||
require_once("../lib/mydb.php");
|
||||
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
$pdo = db_connect();
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
handleGet($pdo);
|
||||
break;
|
||||
case 'POST':
|
||||
handlePost($pdo);
|
||||
break;
|
||||
case 'PUT':
|
||||
handlePut($pdo);
|
||||
break;
|
||||
case 'DELETE':
|
||||
handleDelete($pdo);
|
||||
break;
|
||||
default:
|
||||
echo json_encode(['error' => 'Method not allowed']);
|
||||
break;
|
||||
}
|
||||
|
||||
function handleGet($pdo) {
|
||||
if (isset($_GET['id'])) {
|
||||
$stmt = $pdo->prepare("SELECT * FROM barobill_members WHERE id = ?");
|
||||
$stmt->execute([$_GET['id']]);
|
||||
echo json_encode($stmt->fetch(PDO::FETCH_ASSOC));
|
||||
} else {
|
||||
$stmt = $pdo->query("SELECT * FROM barobill_members ORDER BY created_at DESC");
|
||||
echo json_encode(['members' => $stmt->fetchAll(PDO::FETCH_ASSOC)]);
|
||||
}
|
||||
}
|
||||
|
||||
function handlePost($pdo) {
|
||||
$data = json_decode(file_get_contents('php://input'), true);
|
||||
|
||||
// Simple duplicate check
|
||||
$check = $pdo->prepare("SELECT id FROM barobill_members WHERE biz_no = ?");
|
||||
$check->execute([$data['bizNo']]);
|
||||
if ($check->fetch()) {
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Business number already registered.']);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("INSERT INTO barobill_members
|
||||
(biz_no, corp_name, ceo_name, addr, biz_type, biz_class, barobill_id, barobill_pwd, manager_name, manager_email, manager_hp)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
|
||||
|
||||
$stmt->execute([
|
||||
$data['bizNo'],
|
||||
$data['corpName'],
|
||||
$data['ceoName'],
|
||||
$data['addr'],
|
||||
$data['bizType'],
|
||||
$data['bizClass'],
|
||||
$data['id'],
|
||||
password_hash($data['pwd'], PASSWORD_DEFAULT), // Note: In real API, pwd might not be stored like this or handled by Barobill
|
||||
$data['managerName'],
|
||||
$data['managerEmail'],
|
||||
$data['managerHP']
|
||||
]);
|
||||
|
||||
echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
|
||||
} catch (Exception $e) {
|
||||
http_response_code(500);
|
||||
echo json_encode(['error' => $e->getMessage()]);
|
||||
}
|
||||
}
|
||||
|
||||
function handlePut($pdo) {
|
||||
$data = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($data['id'])) {
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Missing member ID']);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("UPDATE barobill_members SET
|
||||
corp_name = ?, ceo_name = ?, addr = ?, biz_type = ?, biz_class = ?,
|
||||
manager_name = ?, manager_email = ?, manager_hp = ?
|
||||
WHERE id = ?");
|
||||
|
||||
$stmt->execute([
|
||||
$data['corpName'],
|
||||
$data['ceoName'],
|
||||
$data['addr'],
|
||||
$data['bizType'],
|
||||
$data['bizClass'],
|
||||
$data['managerName'],
|
||||
$data['managerEmail'],
|
||||
$data['managerHP'],
|
||||
$data['id']
|
||||
]);
|
||||
|
||||
echo json_encode(['success' => true]);
|
||||
} catch (Exception $e) {
|
||||
http_response_code(500);
|
||||
echo json_encode(['error' => $e->getMessage()]);
|
||||
}
|
||||
}
|
||||
|
||||
function handleDelete($pdo) {
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) {
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Missing member ID']);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("DELETE FROM barobill_members WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
echo json_encode(['success' => true]);
|
||||
} catch (Exception $e) {
|
||||
http_response_code(500);
|
||||
echo json_encode(['error' => $e->getMessage()]);
|
||||
}
|
||||
}
|
||||
?>
|
||||
@@ -14,19 +14,12 @@
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
},
|
||||
fontFamily: { sans: ['Pretendard', 'sans-serif'] },
|
||||
colors: {
|
||||
background: 'rgb(250, 250, 250)',
|
||||
primary: {
|
||||
DEFAULT: '#2563eb',
|
||||
foreground: '#ffffff',
|
||||
},
|
||||
primary: { DEFAULT: '#2563eb', foreground: '#ffffff' },
|
||||
},
|
||||
borderRadius: {
|
||||
'card': '12px',
|
||||
}
|
||||
borderRadius: { 'card': '12px' }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -35,14 +28,10 @@
|
||||
<!-- React & ReactDOM -->
|
||||
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
||||
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- 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">
|
||||
<body class="bg-background text-slate-800 antialiased font-sans">
|
||||
<div id="root"></div>
|
||||
|
||||
<script type="text/babel">
|
||||
@@ -52,25 +41,22 @@
|
||||
|
||||
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 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<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 font-bold">
|
||||
<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">
|
||||
<a href="../barobill/index.php" className="text-sm text-slate-500 hover:text-slate-900 flex items-center gap-1">
|
||||
<i data-lucide="layout-dashboard" className="w-4 h-4"></i>
|
||||
서비스 현황
|
||||
<div className="flex items-center gap-4 text-sm text-slate-500">
|
||||
<a href="../barobill/index.php" className="hover:text-blue-600 flex items-center gap-1">
|
||||
<i data-lucide="layout-dashboard" className="w-4 h-4"></i> 현황
|
||||
</a>
|
||||
<a href="../../5130/etax/index.php" className="text-sm text-slate-500 hover:text-slate-900 flex items-center gap-1">
|
||||
<i data-lucide="file-text" className="w-4 h-4"></i>
|
||||
전자세금계산서
|
||||
<a href="../../5130/etax/index.php" className="hover:text-blue-600 flex items-center gap-1">
|
||||
<i data-lucide="file-text" className="w-4 h-4"></i> 세금계산서
|
||||
</a>
|
||||
<a href="../index.php" className="text-sm text-slate-500 hover:text-slate-900 flex items-center gap-1">
|
||||
<i data-lucide="home" className="w-4 h-4"></i>
|
||||
홈으로
|
||||
<a href="../index.php" className="hover:text-blue-600 flex items-center gap-1">
|
||||
<i data-lucide="home" className="w-4 h-4"></i> 홈
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,34 +71,25 @@
|
||||
orange: "bg-orange-50 text-orange-600"
|
||||
};
|
||||
return (
|
||||
<div className="bg-white rounded-card p-6 shadow-sm border border-slate-100 transition-all hover:shadow-md">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<h3 className="text-sm font-medium text-slate-500">{title}</h3>
|
||||
<div className={`p-2 rounded-lg ${colors[color]}`}>
|
||||
{icon}
|
||||
</div>
|
||||
<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 mb-1">{value}</div>
|
||||
<div className="text-xs text-slate-400">{subtext}</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{value}</div>
|
||||
<div className="text-[10px] text-slate-400 mt-1">{subtext}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Membership Components ---
|
||||
// --- Forms & Modals ---
|
||||
|
||||
const MemberRegistrationForm = ({ onSubmit }) => {
|
||||
const MemberForm = ({ initialData = {}, onSubmit, isEditing = false, onCancel }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
bizNo: '',
|
||||
corpName: '',
|
||||
ceoName: '',
|
||||
addr: '',
|
||||
bizType: '',
|
||||
bizClass: '',
|
||||
id: '',
|
||||
pwd: '',
|
||||
managerName: '',
|
||||
managerEmail: '',
|
||||
managerHP: ''
|
||||
bizNo: '', corpName: '', ceoName: '', addr: '',
|
||||
bizType: '', bizClass: '', id: '', pwd: '',
|
||||
managerName: '', managerEmail: '', managerHP: '',
|
||||
...initialData
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
@@ -120,247 +97,261 @@
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
onSubmit(formData);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="bg-white rounded-card p-6 shadow-sm border border-slate-100">
|
||||
<div className="flex items-center gap-2 mb-6 pb-4 border-b border-slate-50">
|
||||
<i data-lucide="building-2" className="w-5 h-5 text-blue-600"></i>
|
||||
<h2 className="text-lg font-bold text-slate-800">1. 회원사 정보 (RegistCorp)</h2>
|
||||
<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="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="col-span-1">
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">사업자번호</label>
|
||||
<input type="text" name="bizNo" value={formData.bizNo} onChange={handleChange} placeholder="000-00-00000" className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" required />
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">상호명</label>
|
||||
<input type="text" name="corpName" value={formData.corpName} onChange={handleChange} placeholder="(주)상호명" className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" required />
|
||||
<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="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">대표자명</label>
|
||||
<input type="text" name="ceoName" value={formData.ceoName} onChange={handleChange} className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">업태</label>
|
||||
<input type="text" name="bizType" value={formData.bizType} onChange={handleChange} placeholder="서비스" className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">종목</label>
|
||||
<input type="text" name="bizClass" value={formData.bizClass} onChange={handleChange} placeholder="소프트웨어 개발" className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" />
|
||||
</div>
|
||||
<div className="md:col-span-3">
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">사업장 주소</label>
|
||||
<input type="text" name="addr" value={formData.addr} onChange={handleChange} className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" required />
|
||||
<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="bg-white rounded-card p-6 shadow-sm border border-slate-100">
|
||||
<div className="flex items-center gap-2 mb-6 pb-4 border-b border-slate-50">
|
||||
<i data-lucide="user-plus" className="w-5 h-5 text-green-600"></i>
|
||||
<h2 className="text-lg font-bold text-slate-800">2. 관리자 계정 정보</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">아이디 (최소 6자)</label>
|
||||
<input type="text" name="id" value={formData.id} onChange={handleChange} className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">비밀번호</label>
|
||||
<input type="password" name="pwd" value={formData.pwd} onChange={handleChange} className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">담당자 이름</label>
|
||||
<input type="text" name="managerName" value={formData.managerName} onChange={handleChange} className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">휴대폰 번호</label>
|
||||
<input type="tel" name="managerHP" value={formData.managerHP} onChange={handleChange} placeholder="010-0000-0000" className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" required />
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">이메일 주소</label>
|
||||
<input type="email" name="managerEmail" value={formData.managerEmail} onChange={handleChange} className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all" required />
|
||||
</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>
|
||||
|
||||
<button type="submit" className="w-full py-4 bg-blue-600 text-white rounded-xl shadow-lg shadow-blue-200 hover:bg-blue-700 hover:shadow-xl transition-all font-bold text-lg flex items-center justify-center gap-2">
|
||||
<i data-lucide="check-circle" className="w-5 h-5"></i>
|
||||
바로빌 회원사 등록 완료
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
const MemberList = ({ members, onAddAccount, onGetContacts }) => (
|
||||
<div className="bg-white rounded-card shadow-sm border border-slate-100 overflow-hidden">
|
||||
<div className="p-6 border-b border-slate-50 flex justify-between items-center">
|
||||
<h2 className="text-lg font-bold text-slate-800">관리 중인 회원사</h2>
|
||||
<span className="text-xs text-slate-500">총 {members.length}개 법인</span>
|
||||
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>
|
||||
<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">대표자</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, idx) => (
|
||||
<tr key={idx} className="hover:bg-slate-50 transition-colors">
|
||||
<td className="px-6 py-4 font-mono text-slate-600">{m.bizNo}</td>
|
||||
<td className="px-6 py-4 font-bold text-slate-900">{m.corpName}</td>
|
||||
<td className="px-6 py-4 text-slate-600">{m.ceoName}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="inline-flex items-center px-2 py-1 bg-green-50 text-green-700 rounded-md text-xs font-medium border border-green-100">
|
||||
정상 연동
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right space-x-2">
|
||||
<button onClick={() => onGetContacts(m.bizNo)} className="px-3 py-1.5 text-xs font-semibold text-slate-600 border border-slate-200 rounded-lg hover:bg-slate-100 transition-colors">
|
||||
연락처조회
|
||||
</button>
|
||||
<button onClick={() => onAddAccount(m.bizNo)} className="px-3 py-1.5 text-xs font-semibold text-blue-600 border border-blue-200 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
|
||||
계정추가
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
// --- Main App ---
|
||||
|
||||
const App = () => {
|
||||
const [members, setMembers] = useState([
|
||||
{ bizNo: '664-86-03713', corpName: '(주)코드브릿지엑스', ceoName: '이의찬' },
|
||||
{ bizNo: '311-46-00378', corpName: '김인태 컴퍼니', ceoName: '김인태' }
|
||||
]);
|
||||
const [activeTab, setActiveTab] = useState('register'); // 'register' or 'list'
|
||||
const [members, setMembers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState('list');
|
||||
const [editingMember, setEditingMember] = useState(null);
|
||||
|
||||
const fetchMembers = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch('api.php');
|
||||
const data = await res.json();
|
||||
setMembers(data.members || []);
|
||||
} catch (e) { console.error(e); }
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchMembers();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => lucide.createIcons(), 100);
|
||||
}, [activeTab]);
|
||||
}, [activeTab, members, editingMember]);
|
||||
|
||||
const handleRegister = (data) => {
|
||||
console.log("RegistCorp API Call:", data);
|
||||
alert(`${data.corpName} 회원사 등록이 요청되었습니다.`);
|
||||
setMembers([...members, data]);
|
||||
setActiveTab('list');
|
||||
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 handleAddAccount = (bizNo) => {
|
||||
const id = prompt("추가할 신규 계정 ID를 입력하세요.");
|
||||
if (id) {
|
||||
console.log(`AddUserToCorp for ${bizNo}: New ID ${id}`);
|
||||
alert(`${bizNo} 회원사에 계정(${id}) 추가 완료`);
|
||||
}
|
||||
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 handleGetContacts = (bizNo) => {
|
||||
console.log(`GetCorpMemberContacts for ${bizNo}`);
|
||||
alert(`${bizNo}의 계정 목록(GetCorpMemberContacts)을 조회합니다.`);
|
||||
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 sm:px-6 lg:px-8 py-8">
|
||||
{/* Summary Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<StatCard title="연동 회원사" value={members.length} subtext="등록된 총 회원사" icon={<i data-lucide="building"></i>} color="blue" />
|
||||
<StatCard title="관리자 계정" value="48" subtext="연동 계정 합계" icon={<i data-lucide="shield-check"></i>} color="green" />
|
||||
<StatCard title="API 호출" value="1,280" subtext="최근 24시간" icon={<i data-lucide="activity"></i>} color="purple" />
|
||||
<StatCard title="오류 건수" value="0" subtext="정상 운영 중" icon={<i data-lucide="alert-circle"></i>} color="orange" />
|
||||
<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>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 bg-slate-100 p-1 rounded-xl mb-8 w-fit">
|
||||
<button onClick={() => setActiveTab('register')} className={`px-6 py-2.5 text-sm font-bold rounded-lg transition-all ${activeTab === 'register' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-800'}`}>
|
||||
회원가입 (RegistCorp)
|
||||
</button>
|
||||
<button onClick={() => setActiveTab('list')} className={`px-6 py-2.5 text-sm font-bold rounded-lg transition-all ${activeTab === 'list' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-800'}`}>
|
||||
회원사 관리 (List)
|
||||
</button>
|
||||
<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>
|
||||
|
||||
{/* Content */}
|
||||
<div className={`${activeTab === 'register' ? 'block' : 'hidden'} max-w-4xl animate-in fade-in duration-500`}>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-xl font-bold text-slate-900">신규 회원사 가입</h3>
|
||||
<p className="text-sm text-slate-500">바로빌 API 연동을 위한 사업자 정보를 입력해주세요.</p>
|
||||
</div>
|
||||
<MemberRegistrationForm onSubmit={handleRegister} />
|
||||
</div>
|
||||
|
||||
<div className={`${activeTab === 'list' ? 'block' : 'hidden'} animate-in slide-in-from-bottom-4 duration-500`}>
|
||||
<MemberList members={members} onAddAccount={handleAddAccount} onGetContacts={handleGetContacts} />
|
||||
</div>
|
||||
|
||||
{/* Guide Section */}
|
||||
<section className="mt-12 p-8 bg-blue-900 rounded-3xl text-white relative overflow-hidden">
|
||||
<div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">입점 프로세스 가이드</h2>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-700 flex items-center justify-center font-bold">1</div>
|
||||
<div>
|
||||
<p className="font-bold">계정 가입 (RegistCorp)</p>
|
||||
<p className="text-sm text-blue-200">신규 회원사가 없는 경우 바로빌 계정을 즉시 생성합니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-700 flex items-center justify-center font-bold">2</div>
|
||||
<div>
|
||||
<p className="font-bold">기존 계정 연결</p>
|
||||
<p className="text-sm text-blue-200">이미 가입된 회원사인 경우 파트너 콘솔에서 수동 승인 후 연동됩니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-700 flex items-center justify-center font-bold">3</div>
|
||||
<div>
|
||||
<p className="font-bold">데이터 수집 시작</p>
|
||||
<p className="text-sm text-blue-200">홈택스 스크래핑 및 카드/계좌 조회가 즉시 활성화됩니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20">
|
||||
<h4 className="font-bold mb-4 flex items-center gap-2">
|
||||
<i data-lucide="info" className="w-5 h-5"></i>
|
||||
개발 유의사항
|
||||
</h4>
|
||||
<div className="text-sm text-blue-100 space-y-3">
|
||||
<p>• 사업자번호와 아이디는 가입 후 <strong>변경이 불가능</strong>합니다.</p>
|
||||
<p>• 회원사 관리는 파트너 콘솔과 API를 통해 실시간 동기화됩니다.</p>
|
||||
<p>• 계정 추가 시(AddUserToCorp) 기존 마스터 계정의 권한을 상속받습니다.</p>
|
||||
{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>
|
||||
<a href="https://dev.barobill.co.kr/docs/guides/%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EA%B8%B0%EB%8A%A5-%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0" target="_blank" className="mt-6 inline-flex items-center gap-2 text-sm font-bold bg-white text-blue-900 px-6 py-2.5 rounded-lg hover:bg-blue-50 transition-colors">
|
||||
공식 문서 확인하기
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-w-3xl animate-in slide-in-from-right-4 duration-300">
|
||||
<div className="mb-6">
|
||||
<h3 className="text-xl font-bold text-slate-900">신규 회원사 가입</h3>
|
||||
<p className="text-xs text-slate-400">입력된 정보로 바로빌 RegistCorp API가 호출됩니다.</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-card p-6 shadow-sm border border-slate-100">
|
||||
<MemberForm onSubmit={handleRegister} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<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-12 border-t border-slate-100 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 text-center">
|
||||
<p className="text-slate-400 text-sm">© 2026 CodeBridgeX. Powered by Barobill API.</p>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
|
||||
12
barobill_registration/init_db.php
Normal file
12
barobill_registration/init_db.php
Normal file
@@ -0,0 +1,12 @@
|
||||
<?php
|
||||
require_once("../lib/mydb.php");
|
||||
|
||||
try {
|
||||
$pdo = db_connect();
|
||||
$sql = file_get_contents("schema.sql");
|
||||
$pdo->exec($sql);
|
||||
echo "Table 'barobill_members' initialized successfully.";
|
||||
} catch (Exception $e) {
|
||||
echo "Error: " . $e->getMessage();
|
||||
}
|
||||
?>
|
||||
Reference in New Issue
Block a user