src/junkbox_shared_ui/assets/app-icons/{app}/icon-180.png, icon-192.png, icon-512.png는 favicon, apple touch icon, PWA manifest에서 사용할 수 있는 앱 아이콘 PNG 산출물임.
src/junkbox_shared_ui/templates/base.html은 공통 베이스 템플릿임.
스타일 빌드는 hub-ui-base.css, hub-ui-mobile.css, hub-ui-desktop.css를 각각 생성하는 구조를 사용함.
tailwind.config.cjs의 content 범위에는 공통 자산과 UI 앱의 TypeScript/TSX 소스를 포함해야 함. 앱 화면이 새 Tailwind 유틸리티 클래스를 사용하면 해당 클래스가 content 범위에 포함되었는지 확인한 뒤 shared-ui 스타일 빌드에서 공통 산출물로 생성함.
Tailwind utility layer는 hub-ui-base.css 산출물에 포함됨. UI 앱의 Vite 빌드는 앱 JavaScript 산출물만 갱신하므로, 새 Tailwind 유틸리티를 실제 브라우저 CSS에 반영하려면 shared-ui 빌드를 함께 실행해야 함.
화면 크기와 무관한 상호작용 효과는 hub-ui-base.css에 두고, 모바일 고정 폭이나 safe-area처럼 모바일 화면 구조에 직접 종속된 규칙만 hub-ui-mobile.css에 둠.
데스크탑 화면도 hub-ui-base.css를 로드하므로 SPA 전환, skeleton, 안정 로딩, 터치 피드백 같은 공통 장치를 필요 시 동일한 React 계층과 CSS 클래스로 사용할 수 있음.
공통 베이스 템플릿은 viewport-fit=cover, theme-color, 서비스 워커 등록 같은 모바일/PWA 공통 진입점을 제공함.
공통 베이스 템플릿은 favicon_url 컨텍스트가 있으면 <link rel="icon">을 렌더링함.
stylesheet 매크로와 공통 베이스 템플릿은 shared_ui_asset(asset_name) 헬퍼를 통해 hub-ui-base.css, hub-ui-mobile.css, hub-ui-desktop.css, junkbox-tabulator.css, app-shell.js에 버전 쿼리를 붙인 URL을 렌더링함.
공통 베이스 템플릿은 기본적으로 body_mode_class 기준으로 모바일 화면에는 base + mobile, 데스크탑 화면에는 base + desktop 조합을 로드함.
화면 컨텍스트의 include_mobile_css, include_desktop_css 값은 기본 CSS 조합에 필요한 모드 CSS를 추가로 포함할 때 사용함.
/portal은 본문 모바일 고정 폭과 공통 메뉴바 반응형 동작을 함께 만족해야 하므로 base + mobile + desktop 조합을 사용함.
Vite dev client와 React refresh preamble도 같은 베이스 템플릿의 단일 선언 지점에서 처리함.
spa_navigation=true 컨텍스트를 받은 화면은 공통 앱 셸 링크 클릭을 junkbox:spa-navigate 브라우저 이벤트로 전환할 수 있음.
shared-ui는 앱 셸, 패널, 버튼, 입력창, 칩, 토스트, 모달, 그리드 래퍼, 모바일 고정 폭 클래스 같은 공통 자산을 제공함.
shared-ui는 공통 SVG 아이콘과 공통 브라우저 유틸도 제공함.
React 아이콘 모듈은 IconMenu, IconPlus, IconTrash, IconChevronDown 같은 재사용 아이콘을 제공함. 접힘 상태를 표현하는 화면은 IconChevronDown의 회전으로 아래·위 방향을 전환하며 별도 SVG를 만들지 않음.
shared-ui는 화면 크기와 무관한 SPA 전환용 .jb-spa-route-stage, .jb-spa-route-settling 기반 안착 애니메이션, jb-skeleton 계열 클래스를 base CSS로 제공함.
shared-ui는 터치 환경에서 버튼, 카드, segmented tab, 다크 필드가 가볍게 눌리는 피드백을 공통 base CSS로 제공함.
shared-ui는 액션 영역 칸막이용 jb-action-divider, Sortable 핸들/ghost/chosen/fallback 공통 클래스, 대시보드 카드 드래그 클래스, 투자 항목 드래그 클래스를 base CSS로 제공함.
jb-segmented-tabs, jb-segmented-tabs--fill, jb-segmented-tabs--scrollable, jb-segmented-tab, jb-segmented-tab-icon, jb-segmented-tab-label은 SegmentedTabs의 표준 외형과 폭 정책을 담당함.
공통 segmented tab은 대시보드 PC 탭의 낮은 대비, 얇은 경계선, rounded-jb-sm 반경을 기준으로 하며, 과하게 둥근 pill 외형을 표준으로 사용하지 않음.
jb-portal-card-title은 포털 APP/SERVICE 카드 이름을 normal weight로 표시하는 제목 클래스이며, 카드 이름에 별도 굵은 강조를 적용하지 않음.
jb-sortable-drag-handle, jb-sortable-drag-dots, jb-sortable-drag-dot은 공통 드래그 핸들 외형을 담당함.
jb-sortable-chosen, jb-sortable-ghost, jb-sortable-dragging, jb-sortable-fallback은 Sortable 상태별 시각 규칙을 담당함.
jb-dashboard-grid는 PC 기준 4열 x 2행 고정 슬롯 대시보드 배치를 제공하고, 모바일 기준 1열 자연 높이 목록으로 전환됨.
jb-dashboard-card-shell, jb-dashboard-card-head-actions, jb-dashboard-card-drag, jb-dashboard-asset-drag은 대시보드 큰 카드와 카드 내부 투자 항목 정렬을 같은 공통 sortable 규칙에 연결하기 위한 클래스임.
jb-dashboard-icon-button, jb-dashboard-favorite-button은 대시보드 카드 헤더의 아이콘 버튼과 즐겨찾기 활성 상태를 표현함.
jb-dashboard-news-list, jb-dashboard-asset-list, jb-dashboard-process-list는 PC 고정 카드 높이 안에서 내부 스크롤을 사용할 수 있는 대시보드 목록 영역임.
jb-dashboard-mobile-tab-trigger, jb-dashboard-mobile-tab-main은 모바일 대시보드에서 현재 보기 선택 버튼을 표시하고, PC 인라인 탭과 같은 옵션 집합을 하단 선택 시트로 연결하기 위한 클래스임.
shared-ui는 모바일 바텀 액션바, 모바일 시트, 모바일 고정 폭처럼 실제 모바일 레이아웃에 종속된 규칙만 mobile CSS로 제공함.
shared-ui는 데스크톱 작업 화면용 jb-workspace-screen-fit, jb-grid-panel-viewport, 공통 카운트 칩, 플랫 로딩 오버레이 스타일을 제공함.
jb-input은 텍스트 입력 전용 시각 규칙을 사용하며 select chevron 배경을 포함하지 않음.
jb-select를 모바일 선택 시트 trigger 버튼 외형으로 사용할 때 화면 컴포넌트는 별도 chevron 텍스트나 아이콘을 중복 추가하지 않음.
텍스트 선택 시 입력창, select, 버튼의 selection 색상은 공통 다크 테마 안에서 안정적으로 보이도록 shared-ui가 관리함.
jb-mobile-card, jb-mobile-card-soft, jb-dark-field, jb-dark-chip, jb-dark-status 계열 클래스는 workout과 hub 양쪽에서 공유하는 다크 톤 자산임. jb-mobile-card--selected는 기본 모바일 카드 위에 선택 상태를 적용하는 modifier이며, 청색 계열 테두리와 내부 강조를 제공함.
jb-dark-field는 input/select 공통 다크 필드로 사용할 수 있으며, select option과 optgroup도 공통 다크 배경과 밝은 글자를 사용함.
jb-chess-* 계열 클래스는 Chess 복기의 대국 목록, 보드, 수별 분석 3영역과 모바일 단일 컬럼 화면을 지원하는 공통 base CSS 클래스임.
jb-chess-board-context 계열 클래스는 실제 진행·엔진 최선수 비교·PV 재생의 보조 표기를 위한 고정 높이 영역임. 보드와 같은 가로 폭으로 정렬하며, 표시 상태 전환으로 체스판 위치가 변하지 않도록 함.
jb-chess-board-context__best와 jb-chess-board-context__actual은 최선수와 실제 수를 구분하는 표기임.
jb-chess-left-history와 jb-chess-left-history__list는 계정 영역 아래에서 내부 스크롤하는 완료 대국 목록 영역임.
jb-chess-history-card 계열 클래스는 상대와 결과를 첫 줄에, 종료 시각·사용자 색상 또는 관전 여부·엔진 상태를 둘째 줄에 표시하는 압축형 대국 카드임.
jb-mobile-page, jb-mobile-bottom-bar-page, jb-mobile-bottom-bar, jb-workout-set-grid, jb-workout-latest-record-* 계열 클래스는 모바일 편집 UX를 공통 규칙 안에서 구현하는 클래스임.
jb-workout-set-head는 세트 입력 그리드 헤더의 크기, 두께, 자간, muted 색상만 담당하며 대문자 변환을 강제하지 않음. 따라서 중량(kg) 같은 단위 표기는 소스 문구의 대소문자를 그대로 유지함.
jb-mobile-bottom-bar는 모바일 viewport 하단 고정 액션 영역이며, SPA 라우트 전환 컨테이너 안에서도 화면 하단 기준으로 동작해야 함.
--jb-mobile-bottom-bar-clearance는 액션바 높이와 safe-area-inset-bottom을 반영한 공통 본문 하단 여백임. jb-mobile-page는 이 값을 기본 적용하며, jb-mobile-bottom-bar-page는 기존 본문 구조의 flex 간격을 바꾸지 않고 동일한 모바일 폭과 하단 여백만 적용하는 컨테이너임.
jb-mobile-bottom-bar-icon은 목록·삭제 같은 고정 폭 아이콘 액션에 사용함. 아이콘 버튼은 shrink-0으로 폭을 고정하고, 주요 텍스트 액션은 flex-1으로 남은 폭을 사용함.
어떤 레이아웃과 시각 규칙을 선택해야 하는지는 docs/junkbox/common/guide-jb-common-ui.md를 따르고, 이 문서는 그 규칙을 구현하는 클래스와 산출물 위치를 설명하는 데 집중함.