gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 관리자 회원/견적서 페이지 모바일 카드 뷰 추가

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-03-30 22:18:01 +09:00
parent fc96b665f5
commit 5d161ed48d
2 changed files with 262 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
app/admin/members/page.tsx
View File

@@ -38,13 +38,14 @@ export default function AdminMembersPage() {
); );
return ( return (
<div className="p-6 max-w-6xl mx-auto"> <div className="p-4 md:p-6 max-w-6xl mx-auto">
{/* 헤더 */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<div> <div>
<h1 className="text-white text-2xl font-bold">회원 관리</h1> <h1 className="text-white text-xl md:text-2xl font-bold">회원 관리</h1>
<p className="text-slate-400 text-sm mt-0.5">가입 회원 목록 및 결제 현황</p> <p className="text-slate-400 text-sm mt-0.5">가입 회원 목록 및 결제 현황</p>
</div> </div>
<span className="bg-slate-700 text-slate-300 px-3 py-1 rounded-full text-sm"> <span className="bg-slate-700 text-slate-300 px-3 py-1 rounded-full text-sm flex-shrink-0">
총 {members.length}명 총 {members.length}명
</span> </span>
</div> </div>
@@ -64,28 +65,25 @@ export default function AdminMembersPage() {
<div className="flex items-center justify-center h-48"> <div className="flex items-center justify-center h-48">
<div className="animate-spin w-8 h-8 border-2 border-red-500 border-t-transparent rounded-full" /> <div className="animate-spin w-8 h-8 border-2 border-red-500 border-t-transparent rounded-full" />
</div> </div>
) : filtered.length === 0 ? (
<div className="text-center py-16 text-slate-500">회원 데이터가 없습니다</div>
) : ( ) : (
<div className="bg-slate-900 rounded-2xl border border-slate-700/50 overflow-hidden"> <>
<table className="w-full text-sm"> {/* PC 테이블 뷰 */}
<thead> <div className="hidden md:block bg-slate-900 rounded-2xl border border-slate-700/50 overflow-x-auto">
<tr className="border-b border-slate-700/50"> <table className="w-full text-sm">
<th className="text-left px-5 py-3 text-slate-400 font-medium">이메일</th> <thead>
<th className="text-left px-5 py-3 text-slate-400 font-medium">이름</th> <tr className="border-b border-slate-700/50">
<th className="text-left px-5 py-3 text-slate-400 font-medium">가입일</th> <th className="text-left px-5 py-3 text-slate-400 font-medium">이메일</th>
<th className="text-left px-5 py-3 text-slate-400 font-medium">구독</th> <th className="text-left px-5 py-3 text-slate-400 font-medium">이름</th>
<th className="text-right px-5 py-3 text-slate-400 font-medium">결제 건수</th> <th className="text-left px-5 py-3 text-slate-400 font-medium">가입일</th>
<th className="text-right px-5 py-3 text-slate-400 font-medium">총 결제액</th> <th className="text-left px-5 py-3 text-slate-400 font-medium">구독</th>
</tr> <th className="text-right px-5 py-3 text-slate-400 font-medium">결제 건수</th>
</thead> <th className="text-right px-5 py-3 text-slate-400 font-medium">총 결제액</th>
<tbody>
{filtered.length === 0 ? (
<tr>
<td colSpan={6} className="text-center py-12 text-slate-500">
회원 데이터가 없습니다
</td>
</tr> </tr>
) : ( </thead>
filtered.map((m) => ( <tbody>
{filtered.map((m) => (
<tr key={m.id} className="border-b border-slate-800 last:border-0 hover:bg-slate-800/50 transition"> <tr key={m.id} className="border-b border-slate-800 last:border-0 hover:bg-slate-800/50 transition">
<td className="px-5 py-3 text-white">{m.email ?? '-'}</td> <td className="px-5 py-3 text-white">{m.email ?? '-'}</td>
<td className="px-5 py-3 text-slate-300">{m.full_name ?? '-'}</td> <td className="px-5 py-3 text-slate-300">{m.full_name ?? '-'}</td>
@@ -111,11 +109,57 @@ export default function AdminMembersPage() {
{m.totalPaid > 0 ? `₩${m.totalPaid.toLocaleString()}` : '-'} {m.totalPaid > 0 ? `₩${m.totalPaid.toLocaleString()}` : '-'}
</td> </td>
</tr> </tr>
)) ))}
)} </tbody>
</tbody> </table>
</table> </div>
</div>
{/* 모바일 카드 뷰 */}
<div className="md:hidden space-y-3">
{filtered.map((m) => (
<div key={m.id} className="bg-slate-900 rounded-xl border border-slate-700/50 p-4">
{/* 이메일 + 이름 */}
<div className="flex items-start justify-between mb-3">
<div className="min-w-0 flex-1">
<p className="text-white text-sm font-semibold truncate">{m.email ?? '-'}</p>
<p className="text-slate-400 text-xs mt-0.5">{m.full_name ?? '이름 없음'}</p>
</div>
{m.activeSub && (
<span className="ml-2 flex-shrink-0 text-xs font-semibold text-amber-400 bg-amber-900/20 px-2 py-0.5 rounded-full">
{PLAN_LABELS[m.activeSub.product_id] ?? m.activeSub.product_id}
</span>
)}
</div>
{/* 상세 정보 그리드 */}
<div className="grid grid-cols-3 gap-2 pt-3 border-t border-slate-800">
<div>
<p className="text-slate-500 text-xs mb-0.5">가입일</p>
<p className="text-slate-300 text-xs">{new Date(m.created_at).toLocaleDateString('ko-KR')}</p>
</div>
<div>
<p className="text-slate-500 text-xs mb-0.5">결제 건수</p>
<span className={`inline-block px-1.5 py-0.5 rounded-full text-xs ${m.orderCount > 0 ? 'bg-green-900/40 text-green-400' : 'bg-slate-700 text-slate-500'}`}>
{m.orderCount}건
</span>
</div>
<div>
<p className="text-slate-500 text-xs mb-0.5">총 결제액</p>
<p className="text-slate-200 text-xs font-medium">
{m.totalPaid > 0 ? `₩${m.totalPaid.toLocaleString()}` : '-'}
</p>
</div>
</div>
{m.activeSub && (
<p className="text-slate-600 text-xs mt-2">
구독 만료: {new Date(m.activeSub.expires_at).toLocaleDateString('ko-KR')}
</p>
)}
</div>
))}
</div>
</>
)} )}
</div> </div>
); );

283
app/admin/quotes/page.tsx
View File

@@ -70,17 +70,17 @@ export default function AdminQuotesPage() {
} }
return ( return (
<div className="p-8"> <div className="p-4 md:p-8">
{/* 헤더 */} {/* 헤더 */}
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-6 md:mb-8 gap-3">
<div> <div>
<h1 className="text-2xl font-bold text-white">견적서 관리</h1> <h1 className="text-xl md:text-2xl font-bold text-white">견적서 관리</h1>
<p className="text-slate-400 text-sm mt-1">고객에게 제시할 견적서를 작성하고 관리합니다</p> <p className="text-slate-400 text-sm mt-1">고객에게 제시할 견적서를 작성하고 관리합니다</p>
</div> </div>
<button <button
onClick={handleCreate} onClick={handleCreate}
disabled={creating} disabled={creating}
className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 text-white font-semibold rounded-xl transition-all disabled:opacity-60" className="flex-shrink-0 flex items-center gap-2 px-4 md:px-5 py-2.5 bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 text-white font-semibold rounded-xl transition-all disabled:opacity-60 text-sm"
> >
{creating ? ( {creating ? (
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
@@ -89,7 +89,8 @@ export default function AdminQuotesPage() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg> </svg>
)} )}
새 견적서 작성 <span className="hidden sm:inline">새 견적서 작성</span>
<span className="sm:hidden">새 견적서</span>
</button> </button>
</div> </div>
@@ -103,97 +104,193 @@ export default function AdminQuotesPage() {
<p className="text-slate-600 text-sm mt-2">위 버튼을 눌러 첫 번째 견적서를 작성해보세요</p> <p className="text-slate-600 text-sm mt-2">위 버튼을 눌러 첫 번째 견적서를 작성해보세요</p>
</div> </div>
) : ( ) : (
<div className="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden"> <>
<table className="w-full"> {/* PC 테이블 뷰 */}
<thead> <div className="hidden md:block bg-slate-900 rounded-2xl border border-slate-800 overflow-x-auto">
<tr className="border-b border-slate-800"> <table className="w-full">
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">견적서명</th> <thead>
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">고객</th> <tr className="border-b border-slate-800">
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">합계</th> <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">견적서명</th>
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">상태</th> <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">고객</th>
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">유효기간</th> <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">합계</th>
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">작성일</th> <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">상태</th>
<th className="px-6 py-4" /> <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">유효기간</th>
</tr> <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">작성일</th>
</thead> <th className="px-6 py-4" />
<tbody className="divide-y divide-slate-800/60"> </tr>
{quotes.map((q) => { </thead>
const st = STATUS[q.status] ?? STATUS.draft; <tbody className="divide-y divide-slate-800/60">
const total = calcTotal(q.items ?? []); {quotes.map((q) => {
return ( const st = STATUS[q.status] ?? STATUS.draft;
<tr key={q.id} className="hover:bg-slate-800/30 transition-colors"> const total = calcTotal(q.items ?? []);
<td className="px-6 py-4"> return (
<Link href={`/admin/quotes/${q.id}`} className="text-white font-medium hover:text-blue-400 transition-colors"> <tr key={q.id} className="hover:bg-slate-800/30 transition-colors">
{q.title} <td className="px-6 py-4">
</Link> <Link href={`/admin/quotes/${q.id}`} className="text-white font-medium hover:text-blue-400 transition-colors">
</td> {q.title}
<td className="px-6 py-4">
<div className="text-slate-300 text-sm">{q.client_name || '—'}</div>
<div className="text-slate-500 text-xs">{q.client_email || ''}</div>
</td>
<td className="px-6 py-4 text-slate-300 text-sm font-mono">
{total > 0 ? `${total.toLocaleString()}원` : '—'}
</td>
<td className="px-6 py-4">
<span className={`inline-block text-xs font-semibold px-2.5 py-1 rounded-full ${st.color}`}>
{st.label}
</span>
</td>
<td className="px-6 py-4 text-slate-400 text-sm">
{q.valid_until ? q.valid_until.slice(0, 10) : '—'}
</td>
<td className="px-6 py-4 text-slate-500 text-sm">
{new Date(q.created_at).toLocaleDateString('ko-KR')}
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-2 justify-end">
{/* 공개 링크 복사 */}
<button
onClick={() => copyLink(q.public_token, q.id)}
title="고객용 링크 복사"
className="p-2 rounded-lg text-slate-400 hover:text-blue-400 hover:bg-slate-800 transition-all"
>
{copied === q.id ? (
<svg className="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
) : (
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
)}
</button>
{/* 편집 */}
<Link
href={`/admin/quotes/${q.id}`}
className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-all"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</Link> </Link>
{/* 삭제 */} </td>
<button <td className="px-6 py-4">
onClick={() => handleDelete(q.id)} <div className="text-slate-300 text-sm">{q.client_name || '—'}</div>
disabled={deleting === q.id} <div className="text-slate-500 text-xs">{q.client_email || ''}</div>
className="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-900/20 transition-all disabled:opacity-40" </td>
> <td className="px-6 py-4 text-slate-300 text-sm font-mono">
{deleting === q.id ? ( {total > 0 ? `${total.toLocaleString()}원` : '—'}
<span className="w-4 h-4 border-2 border-red-400/30 border-t-red-400 rounded-full animate-spin inline-block" /> </td>
) : ( <td className="px-6 py-4">
<span className={`inline-block text-xs font-semibold px-2.5 py-1 rounded-full ${st.color}`}>
{st.label}
</span>
</td>
<td className="px-6 py-4 text-slate-400 text-sm">
{q.valid_until ? q.valid_until.slice(0, 10) : '—'}
</td>
<td className="px-6 py-4 text-slate-500 text-sm">
{new Date(q.created_at).toLocaleDateString('ko-KR')}
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-2 justify-end">
<button
onClick={() => copyLink(q.public_token, q.id)}
title="고객용 링크 복사"
className="p-2 rounded-lg text-slate-400 hover:text-blue-400 hover:bg-slate-800 transition-all"
>
{copied === q.id ? (
<svg className="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
) : (
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
)}
</button>
<Link
href={`/admin/quotes/${q.id}`}
className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-all"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg> </svg>
)} </Link>
</button> <button
</div> onClick={() => handleDelete(q.id)}
</td> disabled={deleting === q.id}
</tr> className="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-900/20 transition-all disabled:opacity-40"
); >
})} {deleting === q.id ? (
</tbody> <span className="w-4 h-4 border-2 border-red-400/30 border-t-red-400 rounded-full animate-spin inline-block" />
</table> ) : (
</div> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
)}
</button>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
{/* 모바일 카드 뷰 */}
<div className="md:hidden space-y-3">
{quotes.map((q) => {
const st = STATUS[q.status] ?? STATUS.draft;
const total = calcTotal(q.items ?? []);
return (
<div key={q.id} className="bg-slate-900 rounded-xl border border-slate-800 p-4">
{/* 제목 + 상태 */}
<div className="flex items-start justify-between gap-2 mb-3">
<Link href={`/admin/quotes/${q.id}`} className="text-white font-semibold text-sm hover:text-blue-400 transition-colors flex-1">
{q.title}
</Link>
<span className={`flex-shrink-0 text-xs font-semibold px-2.5 py-1 rounded-full ${st.color}`}>
{st.label}
</span>
</div>
{/* 고객 정보 */}
{(q.client_name || q.client_email) && (
<div className="mb-3">
{q.client_name && <p className="text-slate-300 text-xs">{q.client_name}</p>}
{q.client_email && <p className="text-slate-500 text-xs">{q.client_email}</p>}
</div>
)}
{/* 상세 정보 */}
<div className="grid grid-cols-3 gap-2 pt-3 border-t border-slate-800 mb-3">
<div>
<p className="text-slate-500 text-xs mb-0.5">합계</p>
<p className="text-slate-200 text-xs font-mono font-medium">
{total > 0 ? `${total.toLocaleString()}원` : '—'}
</p>
</div>
<div>
<p className="text-slate-500 text-xs mb-0.5">유효기간</p>
<p className="text-slate-400 text-xs">{q.valid_until ? q.valid_until.slice(0, 10) : '—'}</p>
</div>
<div>
<p className="text-slate-500 text-xs mb-0.5">작성일</p>
<p className="text-slate-400 text-xs">{new Date(q.created_at).toLocaleDateString('ko-KR')}</p>
</div>
</div>
{/* 액션 버튼 */}
<div className="flex items-center gap-2 pt-3 border-t border-slate-800">
<button
onClick={() => copyLink(q.public_token, q.id)}
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg text-slate-400 hover:text-blue-400 hover:bg-slate-800 transition-all text-xs"
>
{copied === q.id ? (
<>
<svg className="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-green-400">복사됨</span>
</>
) : (
<>
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
링크 복사
</>
)}
</button>
<Link
href={`/admin/quotes/${q.id}`}
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-all text-xs"
>
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
편집
</Link>
<button
onClick={() => handleDelete(q.id)}
disabled={deleting === q.id}
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-900/20 transition-all disabled:opacity-40 text-xs"
>
{deleting === q.id ? (
<span className="w-3.5 h-3.5 border-2 border-red-400/30 border-t-red-400 rounded-full animate-spin inline-block" />
) : (
<>
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
삭제
</>
)}
</button>
</div>
</div>
);
})}
</div>
</>
)} )}
</div> </div>
); );