92 lines
4.2 KiB
TypeScript
92 lines
4.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { Card } from '../../shared/ui/Card';
|
|
import { Button } from '../../shared/ui/Button';
|
|
import { Select } from '../../shared/ui/Select';
|
|
import { Save, Home, User } from 'lucide-react';
|
|
import { useAuth } from '../../shared/auth/AuthContext';
|
|
|
|
export function GeneralPreferencesPage() {
|
|
const { user } = useAuth();
|
|
const [preferences, setPreferences] = useState({
|
|
landingPage: localStorage.getItem(`landing_page_${user?.id}`) || '/home'
|
|
});
|
|
const [isSaved, setIsSaved] = useState(false);
|
|
|
|
const landingPageOptions = [
|
|
{ label: '플랫폼 소개 (기본)', value: '/home' },
|
|
{ label: '자산 대시보드', value: '/asset/dashboard' },
|
|
{ label: 'CCTV 모니터링', value: '/cctv/monitoring' },
|
|
{ label: '생산 대시보드', value: '/production/dashboard' }
|
|
];
|
|
|
|
const handleSave = () => {
|
|
localStorage.setItem(`landing_page_${user?.id}`, preferences.landingPage);
|
|
setIsSaved(true);
|
|
setTimeout(() => setIsSaved(false), 3000);
|
|
};
|
|
|
|
return (
|
|
<div className="page-container p-6 max-w-4xl mx-auto">
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-slate-900">기본 설정</h1>
|
|
<p className="text-slate-500 mt-1">사용자 개인의 플랫폼 환경을 설정합니다.</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6">
|
|
<Card className="p-6">
|
|
<div className="flex items-center gap-3 mb-6 border-b border-slate-100 pb-4">
|
|
<Home className="text-blue-600" size={24} />
|
|
<h2 className="text-lg font-bold">로그인 랜딩 페이지</h2>
|
|
</div>
|
|
|
|
<div className="max-w-md">
|
|
<p className="text-sm text-slate-600 mb-4">
|
|
로그인 시 또는 최상위 메뉴 이동 시 처음으로 표시될 화면을 선택하세요.
|
|
</p>
|
|
<Select
|
|
label="접속 시작 페이지"
|
|
value={preferences.landingPage}
|
|
onChange={(e) => setPreferences({ ...preferences, landingPage: e.target.value })}
|
|
options={landingPageOptions}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="p-6">
|
|
<div className="flex items-center gap-3 mb-6 border-b border-slate-100 pb-4">
|
|
<User className="text-indigo-600" size={24} />
|
|
<h2 className="text-lg font-bold">사용자 정보</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6 text-sm">
|
|
<div>
|
|
<span className="text-slate-500 block mb-1">사용자 이름</span>
|
|
<span className="font-bold text-slate-900">{user?.name}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-500 block mb-1">계정 등급</span>
|
|
<span className="font-bold text-indigo-600 capitalize">{user?.role}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-500 block mb-1">소속 부서</span>
|
|
<span className="font-medium text-slate-700">{user?.department || '미지정'}</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<div className="flex items-center justify-between bg-white p-4 rounded-xl border border-slate-200 shadow-sm mt-4">
|
|
<div className="text-sm">
|
|
{isSaved && <span className="text-green-600 font-bold animate-pulse">✓ 설정이 저장되었습니다.</span>}
|
|
</div>
|
|
<Button
|
|
onClick={handleSave}
|
|
icon={<Save size={18} />}
|
|
>
|
|
설정 저장
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|