eomsangdonandClaude Fable 5
f60ecc255f
프로젝트/사용자 관리 컨테이너와 같은 형태로 통일한다. 등록 폼을 화면에 상시
노출하지 않고, 우측 상단 [+] 모달로 받아 그룹(임시 프로젝트명) 아래 파일 표를
그린다.
프론트엔드
- B01_Dashboard_UI_TempModal.ts 신설: 등록/추가 모달(임시 프로젝트명 + 파일 선택,
고른 파일을 모달 안 표로 표시, 하단 [취소][확인] — 기존 대시보드 모달과 동일 규격)
- B01_Dashboard_UI_TempUpload.ts: 섹션 전체(제목·[+]·목록)를 반환하도록 변경.
그룹 카드 + 파일 표(종류/파일명/크기/상태/작업), 그룹별 [파일 추가],
파일별 [삭제], 진행률은 해당 파일 행 안에서 표시
- 청크마다 목록을 다시 조회하지 않고 막대 DOM만 갱신하도록 정리
- 대시보드 배치: 프로젝트 컨테이너 바로 아래(역할 3분기 모두)
백엔드
- DELETE /api/temp-uploads/{batch_id}/files/{file_type}: DB 행과 임시 저장소
실제 파일을 함께 삭제. 필수 파일이 빠지면 상태를 uploading으로 되돌리고
만료일은 최초 완료 시점 기준을 유지
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
127 lines
3.1 KiB
CSS
127 lines
3.1 KiB
CSS
/* =============================================================================
|
|
* B01_Dashboard_UI_Style_Temp.css
|
|
* 임시 보관함 섹션 — 그룹(임시 프로젝트명) + 하위 파일 표, 등록 모달
|
|
* 표·모달 껍데기는 대시보드 공통 스타일을 그대로 쓰고, 여기서는 그룹 카드와
|
|
* 진행률 막대만 정의한다. 색·간격은 theme.css 변수만 사용한다.
|
|
* ========================================================================== */
|
|
|
|
.b01-temp__hint {
|
|
margin: 0 0 var(--spacing-16);
|
|
font-size: 12px;
|
|
color: var(--color-muted-text, var(--color-primary-text));
|
|
}
|
|
|
|
.b01-temp__empty {
|
|
padding: var(--spacing-16);
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: var(--color-muted-text, var(--color-primary-text));
|
|
}
|
|
|
|
.b01-temp__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
/* 그룹 = 임시 프로젝트명 1건. 아래에 파일 표가 붙는다. */
|
|
.b01-temp__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-16);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
/* 프로젝트로 옮긴 묶음은 이력이라 흐리게 — 지금 쓸 수 있는 자료와 구분한다. */
|
|
.b01-temp__group.is-linked {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.b01-temp__group-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.b01-temp__group-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.b01-temp__group-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b01-temp__group-meta {
|
|
font-size: 12px;
|
|
color: var(--color-muted-text, var(--color-primary-text));
|
|
}
|
|
|
|
.b01-temp__badge {
|
|
padding: 2px var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b01-temp__group.is-completed .b01-temp__badge {
|
|
border-color: var(--color-success);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.b01-temp__group.is-uploading .b01-temp__badge {
|
|
border-color: var(--color-warning);
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
/* 업로드 진행률은 모달이 아니라 해당 파일 행 안에서 보여 준다(2026-08-08 사용자 지시). */
|
|
.b01-temp__progress {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 140px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.b01-temp__progress-bar {
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background: var(--color-canvas);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b01-temp__progress-bar > div {
|
|
height: 100%;
|
|
background: var(--color-primary);
|
|
transition: width 0.2s ease;
|
|
}
|
|
|
|
/* ── 등록/추가 모달 ───────────────────────────────────────────────────── */
|
|
|
|
.b01-temp__hidden-input {
|
|
display: none;
|
|
}
|
|
|
|
.b01-temp__modal-pick {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8);
|
|
margin: var(--spacing-8) 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.b01-temp__modal-list {
|
|
max-height: 40vh;
|
|
overflow-y: auto;
|
|
}
|