SamProject/sam-sales
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

바로빌 회원가입 모듈개발

Browse Source 
🤖 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
2026-01-13 21:21:29 +09:00
parent d5b7a3c060
commit 179c89a514
1 changed files with 373 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

373
barobill_registration/index.php Normal file
View File

@@ -0,0 +1,373 @@
<!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 -->
<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">
<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 sm:px-6 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">
<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>
서비스 현황
</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>
<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>
</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 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>
<div className="text-2xl font-bold text-slate-900 mb-1">{value}</div>
<div className="text-xs text-slate-400">{subtext}</div>
</div>
);
};
// --- Membership Components ---
const MemberRegistrationForm = ({ onSubmit }) => {
const [formData, setFormData] = useState({
bizNo: '',
corpName: '',
ceoName: '',
addr: '',
bizType: '',
bizClass: '',
id: '',
pwd: '',
managerName: '',
managerEmail: '',
managerHP: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
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>
</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>
<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 />
</div>
</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>
<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>
</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'
useEffect(() => {
setTimeout(() => lucide.createIcons(), 100);
}, [activeTab]);
const handleRegister = (data) => {
console.log("RegistCorp API Call:", data);
alert(`${data.corpName} 회원사 등록이 요청되었습니다.`);
setMembers([...members, data]);
setActiveTab('list');
};
const handleAddAccount = (bizNo) => {
const id = prompt("추가할 신규 계정 ID를 입력하세요.");
if (id) {
console.log(`AddUserToCorp for ${bizNo}: New ID ${id}`);
alert(`${bizNo} 회원사에 계정(${id}) 추가 완료`);
}
};
const handleGetContacts = (bizNo) => {
console.log(`GetCorpMemberContacts for ${bizNo}`);
alert(`${bizNo}의 계정 목록(GetCorpMemberContacts)을 조회합니다.`);
};
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" />
</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>
</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>
</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>
</section>
</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>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>