sales-frontend-components 0.0.77 → 0.0.79

package/dist/data-table/data-table.module.scss

@@ -0,0 +1,46 @@
+@use 'sales-frontend-design-system/design-system-context' as *;
+
+
+  // 리사이징 중일 때 시각적 피드백
+.is-resizing {
+    color: colors(text-body_1);
+    background-color: colors(surface-neutral_3);
+  }
+
+
+// 🎨 리사이징 핸들 스타일
+.resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5px; // 핸들 너비 (실제로는 투명)
+  height: 100%;
+  touch-action: none; // 모바일 터치 이벤트 제어
+  cursor: col-resize; // 커서 모양 변경
+  user-select: none; // 드래그 중 텍스트 선택 방지
+
+  // 핸들 오른쪽에 구분선 효과 추가
+  // &::after {
+  //   position: absolute;
+  //   top: 25%;
+  //   right: 2px;
+  //   width: 1px;
+  //   height: 50%;
+  //   content: '';
+  //   background-color: #c0c0c0;
+  //   transition: background-color 0.2s ease;
+  // }
+
+  // 핸들에 호버하거나, 부모 th가 리사이징 중일 때 구분선 강조
+  // &:hover::after,
+  // :global(.is-resizing) &::after {
+  //   background-color: #2979ff; // 활성화 색상
+  // }
+}
+
+// 🎨 피드백 메시지 셀 (Loading, No Data 등)
+.feedback-cell {
+  padding: 48px;
+  color: #757575;
+  text-align: center;
+}

package/dist/debug-tool/debug-tool.module.scss

@@ -0,0 +1,212 @@
+@use 'sales-frontend-design-system/design-system-context' as *;
+
+.debug-tool-container {
+  position: fixed;
+  right: spacing(20);
+  bottom: spacing(20);
+  z-index: 9999;
+}
+
+.debug-floating-button {
+  position: fixed;
+  right: 10px;
+  bottom: 80px;
+  border-radius: 50%;
+}
+
+.debug-menu-panel {
+  position: fixed;
+  right: spacing(20);
+  bottom: spacing(90); /* 버튼 위로 오도록 */
+  display: flex;
+  flex-direction: column;
+  width: 350px;
+  max-height: 500px;
+  background-color: colors(background-100);
+  border: 1px solid colors(border-neutral_3);
+  border-radius: radius-basic(medium);
+  box-shadow: shadow(medium);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: spacing(10) spacing(15);
+  background-color: colors(background-200);
+  border-bottom: 1px solid colors(border-neutral_2);
+}
+
+.panel-header h2 {
+  margin: 0;
+  font-size: font-size(subtitle3);
+}
+
+/* --- Console Log Panel --- */
+.log-list-container {
+  flex: 1;
+  padding: spacing(10);
+  overflow-y: auto;
+  font-family: monospace;
+  font-size: font-size(body4);
+}
+
+.log-item {
+  display: flex;
+  align-items: flex-start;
+  padding: spacing(4) spacing(0);
+  border-bottom: 1px solid colors(border-neutral_2);
+}
+
+.log-timestamp {
+  margin-right: spacing(10);
+  color: colors(text-neutral_1);
+}
+
+.log-message {
+  margin: 0;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.log-log {
+  color: colors(text-body);
+}
+
+.log-info {
+  color: colors(additional-semantic_1);
+}
+
+.log-warn {
+  color: colors(additional-semantic_3);
+}
+
+.log-error {
+  color: colors(additional-semantic_2);
+}
+
+.log-debug {
+  color: colors(text-neutral_2);
+}
+
+.log-return {
+  color: #8a2be2; // Keep as is if no direct mapping
+}
+
+/* --- Storage Panel --- */
+.storage-table-container {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.storage-table {
+  /* Keep for custom table styles if needed, otherwise remove */
+  width: 100%;
+  font-size: font-size(body4);
+  border-collapse: collapse;
+}
+
+.storage-row {
+  /* Keep for custom row styles if needed */
+  border-bottom: 1px solid colors(border-neutral_2);
+}
+
+.storage-key,
+.storage-value,
+.storage-actions {
+  /* Keep for custom cell styles if needed */
+  padding: spacing(8) spacing(12);
+  text-align: left;
+  word-break: break-all;
+}
+
+.storage-search-input {
+  /* New class for TextField in StoragePanel */
+  width: 100%;
+}
+
+/* --- Login Panel --- */
+.login-form-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: spacing(15);
+  padding: spacing(20);
+  overflow-y: auto;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: spacing(10);
+}
+
+/* --- Script Executor Panel --- */
+.script-executor-panel .panel-header {
+  flex-shrink: 0;
+}
+
+.script-executor-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.script-input-section {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 150px;
+  border-bottom: 1px solid colors(border-neutral_3);
+}
+
+.script-textarea {
+  flex: 1;
+  width: 100%;
+  padding: spacing(10);
+  font-family: monospace;
+  font-size: font-size(body3);
+  resize: none;
+  outline: none;
+  border: none;
+}
+
+.script-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: spacing(8);
+  border-top: 1px solid colors(border-neutral_2);
+}
+
+.script-output-section {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.script-output-section .panel-header {
+  padding: spacing(8) spacing(15);
+  background-color: colors(background-200);
+}
+
+.script-output-section .log-list-container {
+  background-color: colors(background-100);
+}
+
+/* --- Page Navigation Panel --- */
+.page-navigation-content {
+  display: flex;
+  gap: spacing(10);
+  align-items: center;
+  padding: spacing(20);
+}
+
+.log-content {
+  padding: 8px;
+  word-break: break-all;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}

package/dist/debug-tool/features/network-log/network-log.module.scss

@@ -0,0 +1,22 @@
+.search-container {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.log-list {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.log-summary {
+  word-break: break-all;
+}
+
+.log-content {
+  padding: 8px;
+  word-break: break-all;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}