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:
@@ -282,6 +282,8 @@ export function QuoteRegistrationV2({
|
||||
vatType: "included",
|
||||
remarks: "[DevFill] 테스트 견적입니다.",
|
||||
status: "draft",
|
||||
discountRate: 0,
|
||||
discountAmount: 0,
|
||||
locations: testLocations,
|
||||
};
|
||||
|
||||
|
||||
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user