fix(WEB): 모바일 반응형 UI 개선 및 개소 정보 수정 모달 추가

- CalendarHeader: 모바일에서 주/월 버튼 2줄 레이아웃으로 분리
- MobileCard: 제목 텍스트 overflow 시 truncate 적용
- DetailActions: 모바일 하단 sticky 버튼 바 overflow 수정
- OrderDetailForm: 모바일 하단 sticky 버튼 바 overflow 수정
- LocationDetailPanel: 오픈사이즈 옆 수정 버튼에 모달 연결
- LocationListPanel: 개소 목록에 수정/삭제 버튼 추가
- LocationEditModal: 개소 정보 수정 팝업 신규 생성

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
유병철
2026-01-27 11:28:12 +09:00
parent 6586db4996
commit 55e92bc7b4
8 changed files with 441 additions and 88 deletions

View File

@@ -103,33 +103,35 @@ export function DetailActions({
const actualSubmitLabel = submitLabel || (isCreateMode ? '등록' : '저장');
// Fixed 스타일: 화면 하단에 고정 (사이드바 상태에 따라 동적 계산)
// 사이드바 펼침: w-64(256px), 접힘: w-24(96px), 차이: 160px
// 모바일: 좌우 여백 16px (left-4 right-4)
// 태블릿/데스크탑: 사이드바 펼침(w-64=256px), 접힘(w-24=96px) + 여백 고려
const stickyStyles = sticky
? `fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300`
? `fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'}`
: '';
// 공통 레이아웃: 왼쪽(뒤로) | 오른쪽(액션들)
// 모바일: 아이콘만, 태블릿 이상: 아이콘 + 텍스트
return (
<div className={cn('flex items-center justify-between', stickyStyles, className)}>
<div className={cn('flex items-center justify-between gap-2', stickyStyles, className)}>
{/* 왼쪽: 목록으로 (view) 또는 취소 (edit/create) */}
{isViewMode ? (
showBack && onBack ? (
<Button variant="outline" onClick={onBack}>
<ArrowLeft className="w-4 h-4 mr-2" />
{backLabel}
<Button variant="outline" onClick={onBack} size="sm" className="md:size-default">
<ArrowLeft className="w-4 h-4 md:mr-2" />
<span className="hidden md:inline">{backLabel}</span>
</Button>
) : (
<div />
)
) : (
<Button variant="outline" onClick={onCancel} disabled={isSubmitting}>
<X className="w-4 h-4 mr-2" />
{cancelLabel}
<Button variant="outline" onClick={onCancel} disabled={isSubmitting} size="sm" className="md:size-default">
<X className="w-4 h-4 md:mr-2" />
<span className="hidden md:inline">{cancelLabel}</span>
</Button>
)}
{/* 오른쪽: 추가액션 + 삭제 + 수정/저장/등록 */}
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 md:gap-2">
{extraActions}
{/* 삭제 버튼: view, edit 모드에서 표시 (create는 삭제할 대상 없음) */}
@@ -138,26 +140,27 @@ export function DetailActions({
variant="outline"
onClick={onDelete}
disabled={isSubmitting}
className="text-destructive hover:bg-destructive hover:text-destructive-foreground"
size="sm"
className="text-destructive hover:bg-destructive hover:text-destructive-foreground md:size-default"
>
<Trash2 className="w-4 h-4 mr-2" />
{deleteLabel}
<Trash2 className="w-4 h-4 md:mr-2" />
<span className="hidden md:inline">{deleteLabel}</span>
</Button>
)}
{/* 수정 버튼: view 모드에서만 */}
{isViewMode && canEdit && showEdit && onEdit && (
<Button onClick={onEdit}>
<Edit className="w-4 h-4 mr-2" />
{editLabel}
<Button onClick={onEdit} size="sm" className="md:size-default">
<Edit className="w-4 h-4 md:mr-2" />
<span className="hidden md:inline">{editLabel}</span>
</Button>
)}
{/* 저장/등록 버튼: edit, create 모드에서만 */}
{!isViewMode && showSave && onSubmit && (
<Button onClick={onSubmit} disabled={isSubmitting}>
<Save className="w-4 h-4 mr-2" />
{actualSubmitLabel}
<Button onClick={onSubmit} disabled={isSubmitting} size="sm" className="md:size-default">
<Save className="w-4 h-4 md:mr-2" />
<span className="hidden md:inline">{actualSubmitLabel}</span>
</Button>
)}
</div>