105 lines
4.3 KiB
TypeScript
105 lines
4.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Inbox, Mail, Clock, AlertCircle, RefreshCw } from "lucide-react";
|
||
|
|
|
||
|
|
export default function MailReceivePage() {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-50">
|
||
|
|
<div className="w-full max-w-none px-4 py-8 space-y-8">
|
||
|
|
{/* 페이지 제목 */}
|
||
|
|
<div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-3xl font-bold text-gray-900">메일 수신함</h1>
|
||
|
|
<p className="mt-2 text-gray-600">받은 메일을 확인하고 관리합니다</p>
|
||
|
|
</div>
|
||
|
|
<Button variant="outline" size="sm" disabled>
|
||
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
||
|
|
새로고침
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 메일 목록 미리보기 */}
|
||
|
|
<Card className="shadow-sm">
|
||
|
|
<CardHeader className="bg-gradient-to-r from-slate-50 to-gray-50 border-b">
|
||
|
|
<CardTitle className="flex items-center gap-2">
|
||
|
|
<Inbox className="w-5 h-5 text-orange-500" />
|
||
|
|
받은 메일함
|
||
|
|
</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="p-6">
|
||
|
|
{/* 빈 상태 */}
|
||
|
|
<div className="text-center py-16">
|
||
|
|
<Mail className="w-16 h-16 mx-auto mb-4 text-gray-300" />
|
||
|
|
<h3 className="text-lg font-semibold text-gray-700 mb-2">
|
||
|
|
메일 수신 기능 준비 중
|
||
|
|
</h3>
|
||
|
|
<p className="text-gray-500 mb-6">
|
||
|
|
IMAP/POP3 기반 메일 수신 기능이 곧 추가될 예정입니다.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* 예상 레이아웃 미리보기 */}
|
||
|
|
<div className="max-w-3xl mx-auto space-y-2">
|
||
|
|
{[1, 2, 3].map((i) => (
|
||
|
|
<div
|
||
|
|
key={i}
|
||
|
|
className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg border border-gray-200 opacity-40"
|
||
|
|
>
|
||
|
|
<div className="w-10 h-10 bg-gray-200 rounded-full" />
|
||
|
|
<div className="flex-1 text-left">
|
||
|
|
<div className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
|
||
|
|
<div className="h-3 bg-gray-200 rounded w-2/3" />
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-gray-400">
|
||
|
|
<Clock className="w-4 h-4" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* 안내 정보 */}
|
||
|
|
<Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200 shadow-sm">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-lg flex items-center">
|
||
|
|
<AlertCircle className="w-5 h-5 mr-2 text-blue-500" />
|
||
|
|
구현 예정 기능
|
||
|
|
</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-gray-700 mb-4">
|
||
|
|
💡 메일 수신함에 추가될 기능들:
|
||
|
|
</p>
|
||
|
|
<ul className="space-y-2 text-sm text-gray-600">
|
||
|
|
<li className="flex items-start">
|
||
|
|
<span className="text-blue-500 mr-2">✓</span>
|
||
|
|
<span>IMAP/POP3 프로토콜을 통한 메일 수신</span>
|
||
|
|
</li>
|
||
|
|
<li className="flex items-start">
|
||
|
|
<span className="text-blue-500 mr-2">✓</span>
|
||
|
|
<span>받은 메일 목록 조회 및 검색</span>
|
||
|
|
</li>
|
||
|
|
<li className="flex items-start">
|
||
|
|
<span className="text-blue-500 mr-2">✓</span>
|
||
|
|
<span>메일 읽음/읽지않음 상태 관리</span>
|
||
|
|
</li>
|
||
|
|
<li className="flex items-start">
|
||
|
|
<span className="text-blue-500 mr-2">✓</span>
|
||
|
|
<span>첨부파일 다운로드</span>
|
||
|
|
</li>
|
||
|
|
<li className="flex items-start">
|
||
|
|
<span className="text-blue-500 mr-2">✓</span>
|
||
|
|
<span>메일 필터링 및 정렬</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|