gbpark
2c0a97f2ba
- components/builder/* 폐기 (12-grid 미완성 빌더 14개 파일)
- components/template-builder/TemplateBuilder.tsx 신규
(자유배치 + 3뷰 + Zustand 스토어 + 드래그/리사이즈/히스토리/격자)
- admin/builder/page.tsx 진입점 전환 (BuilderLayout → TemplateBuilder)
- 타입 정리: FreePosition / TemplateComponent / ViewConfig / Card /
Dashboard / CardConnection 추가, 레거시(GridPosition/TemplateKind/
DEFAULT_COMPONENT_LAYOUTS/CANVAS_KEYWORDS) @deprecated 표기
- v2-* 마이그레이션 1차:
· 완전: v2-table-list (ResizeObserver), v2-table-search-widget (@container)
· 경량: button/input/select/date/text-display/card-display/aggregation-widget
(withContainerQuery HOC)
- 다크 모드 대응: Tailwind dark: variant 21패턴 71곳 치환
- /test-card-responsive PoC 검증 페이지
세션 후반 버그 픽스 (phase1-log §7):
- test-card-responsive (main) 그룹 밖 이동 (AppLayout 탭 시스템 회피)
- useRegistryPalette default_size {width,height}/{w,h} 포맷 정규화
- dark: variant 중복 체인 정리
검증: (A) 반응형 메커니즘, (B) TemplateBuilder UI 통과
(C) 기존 VEX 화면은 마이그레이션 미완 상태라 Phase 2 이후 개별 진행
스펙: notes/gbpark/2026-04-10-card-engine-final-spec.md
로그: notes/gbpark/2026-04-10-card-engine-phase1-log.md
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
57 lines
2.0 KiB
CSS
57 lines
2.0 KiB
CSS
/*
|
|
* v2-table-search-widget 반응형 래퍼 (2026-04-10, Phase 1 Step 6)
|
|
*
|
|
* 카드 컨테이너 너비를 기준으로 검색 위젯의 내부 레이아웃을 강제 재배치.
|
|
* TableSearchWidget 내부는 일체 건드리지 않고, 부모 래퍼 div 의 container query
|
|
* 만으로 narrow 모드(카드 폭 < 600px) 에서 세로 스택으로 재배열한다.
|
|
*
|
|
* 작동 원리:
|
|
* .v2-tsw-responsive-root → container-type: inline-size
|
|
* 위젯 루트가 이 컨테이너의 폭을 감지 (뷰포트가 아닌 카드 폭 기준)
|
|
* narrow 조건에서는 !important 로 Tailwind flex-row 레이아웃을 덮어씀
|
|
*/
|
|
.v2-tsw-responsive-root {
|
|
container-type: inline-size;
|
|
container-name: v2-tsw;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* wide (기본): TableSearchWidget 의 기존 레이아웃 그대로 */
|
|
|
|
/* narrow: 카드 컨테이너 폭 < 600px → 전체 세로 스택 */
|
|
@container v2-tsw (max-width: 599px) {
|
|
/* 위젯 루트 flex 컨테이너를 세로로 강제 */
|
|
.v2-tsw-responsive-root > div {
|
|
flex-direction: column !important;
|
|
align-items: stretch !important;
|
|
flex-wrap: nowrap !important;
|
|
}
|
|
|
|
/* 루트 바로 아래의 모든 요소를 전체 너비로 */
|
|
.v2-tsw-responsive-root > div > * {
|
|
width: 100% !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
/* 필터 입력 박스들 (flex-1 안쪽) 도 세로로 재배치 */
|
|
.v2-tsw-responsive-root > div > div.flex-1,
|
|
.v2-tsw-responsive-root > div > .flex.flex-1 {
|
|
flex-direction: column !important;
|
|
gap: 0.5rem !important;
|
|
}
|
|
|
|
/* 개별 필터 입력 아이템 전체 너비 */
|
|
.v2-tsw-responsive-root > div > div.flex-1 > div,
|
|
.v2-tsw-responsive-root > div > .flex.flex-1 > div {
|
|
flex: 1 1 100% !important;
|
|
width: 100% !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
/* 오른쪽의 데이터 건수 + 설정 버튼 영역도 전체 너비, 왼쪽 정렬 */
|
|
.v2-tsw-responsive-root > div > div.flex-shrink-0 {
|
|
justify-content: space-between !important;
|
|
}
|
|
}
|