jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환

Browse Source 
447+ 파일, 4500+ 줄 변경:
- gray-* → border/bg-muted/text-foreground/text-muted-foreground
- blue-* → primary/ring
- red-* → destructive
- green-* → emerald (일관성)
- indigo-* → primary
- yellow/orange → amber (통일)
- dark mode 변형도 시맨틱 토큰으로 변환

Made-with: Cursor
This commit is contained in:
DDD1542
2026-03-09 14:31:59 +09:00
parent d967cf0a0d
commit 4f10b5e42d
447 changed files with 4520 additions and 4520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx
View File

@@ -438,8 +438,8 @@ export default function MailReceivePage() {
<div
className={`mt-4 p-3 rounded-lg flex items-center gap-2 ${
testResult.success
? "bg-green-50 text-green-800 border border-green-200"
: "bg-red-50 text-red-800 border border-red-200"
? "bg-emerald-50 text-emerald-800 border border-emerald-200"
: "bg-destructive/10 text-red-800 border border-destructive/20"
}`}
>
{testResult.success ? (
@@ -460,7 +460,7 @@ export default function MailReceivePage() {
<div className="flex flex-col md:flex-row gap-3">
{/* 검색 */}
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/70" />
<input
type="text"
value={searchTerm}
@@ -511,7 +511,7 @@ export default function MailReceivePage() {
{filteredAndSortedMails.length}개의 메일이 검색되었습니다
{searchTerm && (
<span className="ml-2">
(검색어: <span className="font-medium text-orange-600">{searchTerm}</span>)
(검색어: <span className="font-medium text-amber-600">{searchTerm}</span>)
</span>
)}
</div>
@@ -527,14 +527,14 @@ export default function MailReceivePage() {
{loading ? (
<Card className="">
<CardContent className="flex justify-center items-center py-16">
<Loader2 className="w-8 h-8 animate-spin text-orange-500" />
<Loader2 className="w-8 h-8 animate-spin text-amber-500" />
<span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
</CardContent>
</Card>
) : filteredAndSortedMails.length === 0 ? (
<Card className="text-center py-16 bg-card ">
<CardContent className="pt-6">
<Mail className="w-16 h-16 mx-auto mb-4 text-gray-300" />
<Mail className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
<p className="text-muted-foreground mb-4">
{!selectedAccountId
? "메일 계정을 선택하세요"
@@ -560,9 +560,9 @@ export default function MailReceivePage() {
</Card>
) : (
<Card className="">
<CardHeader className="bg-gradient-to-r from-slate-50 to-gray-50 border-b">
<CardHeader className="bg-gradient-to-r from-slate-50 to-muted border-b">
<CardTitle className="flex items-center gap-2">
<Inbox className="w-5 h-5 text-orange-500" />
<Inbox className="w-5 h-5 text-amber-500" />
받은 메일함 ({filteredAndSortedMails.length}/{mails.length}개)
</CardTitle>
</CardHeader>
@@ -573,14 +573,14 @@ export default function MailReceivePage() {
key={mail.id}
onClick={() => handleMailClick(mail)}
className={`p-4 hover:bg-background transition-colors cursor-pointer ${
!mail.isRead ? "bg-blue-50/30" : ""
!mail.isRead ? "bg-primary/10/30" : ""
} ${selectedMailId === mail.id ? "bg-accent border-l-4 border-l-primary" : ""}`}
>
<div className="flex items-start gap-4">
{/* 읽음 표시 */}
<div className="flex-shrink-0 w-2 h-2 mt-2">
{!mail.isRead && (
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
<div className="w-2 h-2 bg-primary rounded-full"></div>
)}
</div>
@@ -598,7 +598,7 @@ export default function MailReceivePage() {
</span>
<div className="flex items-center gap-2">
{mail.hasAttachments && (
<Paperclip className="w-4 h-4 text-gray-400" />
<Paperclip className="w-4 h-4 text-muted-foreground/70" />
)}
<span className="text-xs text-muted-foreground">
{formatDate(mail.date)}
@@ -882,14 +882,14 @@ export default function MailReceivePage() {
) : loadingDetail ? (
<Card className="sticky top-6">
<CardContent className="flex justify-center items-center py-16">
<Loader2 className="w-8 h-8 animate-spin text-orange-500" />
<Loader2 className="w-8 h-8 animate-spin text-amber-500" />
<span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
</CardContent>
</Card>
) : (
<Card className="sticky top-6">
<CardContent className="flex flex-col justify-center items-center py-16 text-center">
<Mail className="w-16 h-16 mb-4 text-gray-300" />
<Mail className="w-16 h-16 mb-4 text-muted-foreground/50" />
<p className="text-muted-foreground">
메일을 선택하면 내용이 표시됩니다
</p>
@@ -900,10 +900,10 @@ export default function MailReceivePage() {
</div>
{/* 안내 정보 */}
<Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 ">
<Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-emerald-200 ">
<CardHeader>
<CardTitle className="text-lg flex items-center">
<CheckCircle className="w-5 h-5 mr-2 text-green-600" />
<CheckCircle className="w-5 h-5 mr-2 text-emerald-600" />
메일 수신 기능 완성! 🎉
</CardTitle>
</CardHeader>
@@ -913,81 +913,81 @@ export default function MailReceivePage() {
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<p className="font-medium text-gray-800 mb-2">📬 기본 기능</p>
<p className="font-medium text-foreground mb-2">📬 기본 기능</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>IMAP 프로토콜 메일 수신</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>메일 목록 표시</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>읽음/안읽음 상태</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>첨부파일 유무 표시</span>
</li>
</ul>
</div>
<div>
<p className="font-medium text-gray-800 mb-2">📄 상세보기</p>
<p className="font-medium text-foreground mb-2">📄 상세보기</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>HTML 본문 렌더링</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>텍스트 본문 보기</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>자동 읽음 처리</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>첨부파일 다운로드</span>
</li>
</ul>
</div>
<div>
<p className="font-medium text-gray-800 mb-2">🔍 고급 기능</p>
<p className="font-medium text-foreground mb-2">🔍 고급 기능</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>통합 검색 (제목/발신자/내용)</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>필터링 (읽음/첨부파일)</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>정렬 (날짜/발신자)</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>자동 새로고침 (30초)</span>
</li>
</ul>
</div>
<div>
<p className="font-medium text-gray-800 mb-2">🔒 보안</p>
<p className="font-medium text-foreground mb-2">🔒 보안</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>XSS 방지 (DOMPurify)</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>비밀번호 암호화</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="text-emerald-500 mr-2">✓</span>
<span>안전한 파일명 생성</span>
</li>
</ul>