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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user