refactor: CSS 파일 모듈화 및 컴포넌트별 직접 Import 구조 전환 (방안 B)

- HTML 내 CSS link 태그들을 삭제하고, 각 TS 진입점 파일에서 CSS 파일을 직접 import하도록 연동 - 스타일 파일들을 각 컴포넌트/뷰 디렉토리 옆으로 이동 배치 (Co-location) - guide.css, modal.css, dashboard.css, table.css, map-editor.css 이동 및 경로 갱신 - 디자인 시스템(common.css) 및 로그인 스타일(login.css)은 전역 배치 유지하고 main.ts에서 통합 임포트
2026-06-19 15:04:36 +09:00
parent 587e92a7da
commit e8bc42e5de
13 changed files with 7 additions and 9 deletions
--- a/src/views/List/table.css
+++ b/src/views/List/table.css
@@ -0,0 +1,150 @@
+/* --- Page Header for Description --- */
+.page-header {
+  padding: 1.5rem 2rem 0.5rem; /* Padding added for better whitespace */
+}
+
+.page-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.page-title {
+  font-size: var(--fs-lg);
+  font-weight: 600;
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+  margin: 0;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.page-description {
+  font-size: var(--fs-base);
+  color: var(--mute);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* --- Table View Styles --- */
+.table-container {
+  flex: 1;
+  background-color: var(--canvas);
+  overflow-x: auto;
+  overflow-y: auto;
+  position: relative;
+  max-width: 100%;
+}
+
+table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed; /* Force fixed layout to prevent horizontal scroll */
+}
+
+th, td {
+  padding: 0.8rem 1rem;
+  border-bottom: 1px solid var(--hairline);
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; /* Show ... for long text */
+}
+
+thead {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+th {
+  background-color: var(--canvas-soft) !important;
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+  box-shadow: inset 0 -1px 0 var(--hairline);
+  text-align: center; /* Set default header alignment to center */
+}
+
+td {
+  font-size: var(--fs-base);
+  color: var(--primary);
+  font-weight: 400;
+  text-align: left; /* Set default data alignment to left */
+}
+
+tbody tr:hover {
+  background-color: var(--canvas-soft-2);
+}
+
+/* 정렬 클래스 */
+.text-center { text-align: center !important; }
+.text-right { text-align: right !important; }
+.text-left { text-align: left !important; }
+
+/* 메모 컬럼 전용 */
+.col-memo {
+  white-space: nowrap !important; /* Keep as one line */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* --- Table Sorting --- */
+th.sortable {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  padding-right: 1.8rem !important;
+}
+
+th.sortable:hover {
+  background-color: var(--canvas-soft-2) !important;
+  color: var(--primary);
+}
+
+th.sortable::after {
+  content: '↕';
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--fs-xs);
+  opacity: 0.4;
+}
+
+th.sortable.asc::after { content: '▲'; opacity: 1; color: var(--primary); }
+th.sortable.desc::after { content: '▼'; opacity: 1; color: var(--primary); }
+
+/* --- Compact Table (Used in Dashboards/Modals) --- */
+.compact-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.compact-table th {
+  padding: 0.75rem 0.5rem;
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  color: var(--mute);
+  border-bottom: 1px solid var(--hairline);
+  background: var(--canvas-soft);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.compact-table td {
+  padding: 0.75rem 0.5rem;
+  font-size: var(--fs-sm);
+  border-bottom: 1px solid var(--hairline-soft, #f5f5f5);
+  color: var(--primary);
+}
+
+
+.compact-table tr.clickable-row:hover {
+  background: var(--canvas-soft);
+  cursor: pointer;
+}