feat(WEB): 헤더 프로필 메뉴에 글자 크기 조절 기능 추가

- 프로필 드롭다운에 12~18px 글자 크기 선택 패널 추가
- +/- 버튼 및 프리셋 버튼(12~16px)으로 즉시 전환
- localStorage 저장으로 세션 간 설정 유지
- CSS 변수(--font-size) 기반 전체 폰트 비례 축소/확대
- 견적 등록 테스트 데이터에 할인 필드 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
유병철
2026-01-30 16:00:30 +09:00
parent 9efaef5950
commit 2315ffe64e
2 changed files with 76 additions and 0 deletions

View File

@@ -282,6 +282,8 @@ export function QuoteRegistrationV2({
vatType: "included",
remarks: "[DevFill] 테스트 견적입니다.",
status: "draft",
discountRate: 0,
discountAmount: 0,
locations: testLocations,
};

View File

@@ -28,6 +28,9 @@ import {
Award,
Bell,
Clock,
Minus,
Plus,
Type,
} from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
@@ -97,6 +100,29 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
const router = useRouter();
const pathname = usePathname(); // 현재 경로 추적
// 폰트 크기 조절 (12~18px, 기본 16px)
const FONT_SIZES = [12, 13, 14, 15, 16] as const;
const [fontSize, setFontSize] = useState(16);
useEffect(() => {
// 초기값: localStorage 또는 CSS 변수에서 읽기
const saved = localStorage.getItem('sam-font-size');
if (saved) {
const size = parseInt(saved, 10);
if (size >= 12 && size <= 18) {
setFontSize(size);
document.documentElement.style.setProperty('--font-size', `${size}px`);
}
}
}, []);
const handleFontSizeChange = useCallback((size: number) => {
const clamped = Math.max(12, Math.min(18, size));
setFontSize(clamped);
document.documentElement.style.setProperty('--font-size', `${clamped}px`);
localStorage.setItem('sam-font-size', String(clamped));
}, []);
// 확장된 서브메뉴 관리 (기본적으로 sales, master-data 확장)
const [expandedMenus, setExpandedMenus] = useState<string[]>(['sales', 'master-data']);
@@ -1151,6 +1177,54 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
{/* 구분선 */}
<div className="my-2 border-t border-border" />
{/* 글자 크기 조절 */}
<div className="px-2 py-1">
<div className="flex items-center gap-1 text-sm text-muted-foreground mb-1.5">
<Type className="h-3.5 w-3.5" />
<span className="text-xs font-medium"> </span>
<span className="ml-auto text-xs font-semibold text-foreground">{fontSize}px</span>
</div>
<div className="flex items-center gap-1">
<Button
variant="outline"
size="sm"
className="h-7 w-7 p-0 shrink-0"
onClick={(e) => { e.preventDefault(); handleFontSizeChange(fontSize - 1); }}
disabled={fontSize <= 12}
>
<Minus className="h-3 w-3" />
</Button>
<div className="flex items-center gap-0.5 flex-1 justify-center">
{FONT_SIZES.map((size) => (
<button
key={size}
type="button"
onClick={(e) => { e.preventDefault(); handleFontSizeChange(size); }}
className={`h-6 min-w-[28px] rounded text-xs font-medium transition-colors ${
fontSize === size
? 'bg-primary text-primary-foreground'
: 'hover:bg-muted text-muted-foreground'
}`}
>
{size}
</button>
))}
</div>
<Button
variant="outline"
size="sm"
className="h-7 w-7 p-0 shrink-0"
onClick={(e) => { e.preventDefault(); handleFontSizeChange(fontSize + 1); }}
disabled={fontSize >= 18}
>
<Plus className="h-3 w-3" />
</Button>
</div>
</div>
{/* 구분선 */}
<div className="my-2 border-t border-border" />
{/* 로그아웃 */}
<DropdownMenuItem onClick={handleLogout} className="rounded-lg text-red-600 hover:text-red-700 hover:bg-red-50">
<LogOut className="mr-2 h-4 w-4" />