fix:법인차량관리 버튼 색상 개선 (slate → blue)
- 배경색과 구분되도록 slate 색상을 blue로 변경 - 차량 등록, 저장 버튼 등이 더 눈에 띄게 표시 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -279,12 +279,12 @@ function CorporateVehiclesManagement() {
|
||||
<header className="bg-white border-b border-gray-200 rounded-t-xl mb-6">
|
||||
<div className="px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 bg-slate-100 rounded-xl"><Car className="w-6 h-6 text-slate-600" /></div>
|
||||
<div className="p-2 bg-blue-100 rounded-xl"><Car className="w-6 h-6 text-blue-600" /></div>
|
||||
<div><h1 className="text-xl font-bold text-gray-900">법인차량관리</h1><p className="text-sm text-gray-500">Corporate Vehicles</p></div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={handleDownload} className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"><Download className="w-4 h-4" /><span className="text-sm">Excel</span></button>
|
||||
<button onClick={handleAdd} className="flex items-center gap-2 px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white rounded-lg"><Plus className="w-4 h-4" /><span className="text-sm font-medium">차량 등록</span></button>
|
||||
<button onClick={handleAdd} className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg"><Plus className="w-4 h-4" /><span className="text-sm font-medium">차량 등록</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -317,7 +317,7 @@ function CorporateVehiclesManagement() {
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
|
||||
<input type="text" placeholder="차량번호, 모델, 운전자 검색..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500" />
|
||||
<input type="text" placeholder="차량번호, 모델, 운전자 검색..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{ownershipTypes.map(t => (
|
||||
@@ -328,7 +328,7 @@ function CorporateVehiclesManagement() {
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{['all', 'active', 'maintenance'].map(status => (
|
||||
<button key={status} onClick={() => setFilterStatus(status)} className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${filterStatus === status ? (status === 'active' ? 'bg-emerald-600 text-white' : status === 'maintenance' ? 'bg-amber-500 text-white' : 'bg-slate-600 text-white') : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}>
|
||||
<button key={status} onClick={() => setFilterStatus(status)} className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${filterStatus === status ? (status === 'active' ? 'bg-emerald-600 text-white' : status === 'maintenance' ? 'bg-amber-500 text-white' : 'bg-blue-600 text-white') : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}>
|
||||
{status === 'all' ? '전체' : getStatusLabel(status)}
|
||||
</button>
|
||||
))}
|
||||
@@ -351,22 +351,22 @@ function CorporateVehiclesManagement() {
|
||||
{/* 차량 목록 */}
|
||||
{loading ? (
|
||||
<div className="text-center py-12 text-gray-400">
|
||||
<div className="animate-spin w-8 h-8 border-4 border-slate-500 border-t-transparent rounded-full mx-auto mb-4"></div>
|
||||
<div className="animate-spin w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
|
||||
<p>차량 목록을 불러오는 중...</p>
|
||||
</div>
|
||||
) : filteredVehicles.length === 0 ? (
|
||||
<div className="text-center py-12 text-gray-400">
|
||||
<Car className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
||||
<p>등록된 차량이 없습니다.</p>
|
||||
<button onClick={handleAdd} className="mt-4 px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white rounded-lg text-sm">차량 등록하기</button>
|
||||
<button onClick={handleAdd} className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm">차량 등록하기</button>
|
||||
</div>
|
||||
) : (
|
||||
filteredVehicles.map(item => (
|
||||
<div key={item.id} onClick={() => handleEdit(item)} className={`grid grid-cols-12 gap-4 px-4 py-3 border-b border-gray-100 cursor-pointer transition-colors hover:bg-slate-50 ${item.status !== 'active' ? 'opacity-60 bg-gray-50' : ''}`}>
|
||||
<div key={item.id} onClick={() => handleEdit(item)} className={`grid grid-cols-12 gap-4 px-4 py-3 border-b border-gray-100 cursor-pointer transition-colors hover:bg-blue-50 ${item.status !== 'active' ? 'opacity-60 bg-gray-50' : ''}`}>
|
||||
{/* 차량 (모델 + 종류/연식) */}
|
||||
<div className="col-span-3 flex items-center gap-2">
|
||||
<div className={`p-1.5 rounded-lg ${item.status === 'active' ? 'bg-slate-100' : 'bg-gray-100'}`}>
|
||||
<Car className={`w-4 h-4 ${item.status === 'active' ? 'text-slate-600' : 'text-gray-400'}`} />
|
||||
<div className={`p-1.5 rounded-lg ${item.status === 'active' ? 'bg-blue-100' : 'bg-gray-100'}`}>
|
||||
<Car className={`w-4 h-4 ${item.status === 'active' ? 'text-blue-600' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="font-medium text-gray-900 truncate">{item.model}</p>
|
||||
@@ -487,7 +487,7 @@ function CorporateVehiclesManagement() {
|
||||
<div className="flex gap-3 mt-6">
|
||||
{modalMode === 'edit' && <button onClick={() => handleDelete(editingItem.id)} className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg" disabled={saving}>삭제</button>}
|
||||
<button onClick={() => setShowModal(false)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50" disabled={saving}>취소</button>
|
||||
<button onClick={handleSave} className="flex-1 px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white rounded-lg flex items-center justify-center gap-2" disabled={saving}>
|
||||
<button onClick={handleSave} className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center gap-2" disabled={saving}>
|
||||
{saving && <Loader className="w-4 h-4 animate-spin" />}
|
||||
{modalMode === 'add' ? '등록' : '저장'}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user