feat: 메인에 자율행동 설정을 표시한다

Ref와 Gateway의 옵션 순서와 유효 기간 문구를 따라 8열 마지막 셀에 상태를 더한다.\n활성 상태의 hover와 keyboard focus에서 상세 tooltip을 보이고, 비활성 상태는 표준으로 표시한다.
2026-08-27 16:37:47 +00:00
parent 68870be5e5
commit 9e5e580134
5 changed files with 193 additions and 1 deletions
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { formatAutorunUserDetail, type AutorunUserSummary } from '../../utils/autorunUser';
+
+const props = defineProps<{
+    autorun: AutorunUserSummary | null;
+}>();
+
+const detail = computed(() => (props.autorun ? formatAutorunUserDetail(props.autorun) : ''));
+</script>
+
+<template>
+    <span
+        class="main-autorun-status"
+        :class="{ 'main-autorun-status--enabled': autorun }"
+        :tabindex="autorun ? 0 : undefined"
+        :aria-describedby="autorun ? 'main-autorun-detail' : undefined"
+        data-main-autorun-status
+    >
+        기타 설정: {{ autorun ? '자율행동' : '표준' }}
+        <span v-if="autorun" id="main-autorun-detail" class="main-autorun-detail" role="tooltip">
+            {{ detail }}
+        </span>
+    </span>
+</template>
+
+<style scoped>
+.main-autorun-status {
+    position: relative;
+}
+
+.main-autorun-status--enabled {
+    cursor: help;
+}
+
+.main-autorun-detail {
+    position: absolute;
+    z-index: 40;
+    top: calc(100% + 6px);
+    right: 4px;
+    visibility: hidden;
+    box-sizing: border-box;
+    width: max-content;
+    max-width: min(520px, calc(100vw - 32px));
+    padding: 6px 8px;
+    border: 1px solid #52525b;
+    border-radius: 4px;
+    background: #18181b;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 45%);
+    color: #f4f4f5;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.4;
+    opacity: 0;
+    pointer-events: none;
+    text-align: left;
+    white-space: normal;
+}
+
+.main-autorun-status--enabled:hover .main-autorun-detail,
+.main-autorun-status--enabled:focus-visible .main-autorun-detail {
+    visibility: visible;
+    opacity: 1;
+}
+
+.main-autorun-status--enabled:focus-visible {
+    outline: 2px solid #fdba74;
+    outline-offset: -2px;
+}
+
+@media (max-width: 939.98px) {
+    .main-autorun-detail {
+        position: fixed;
+        z-index: 100;
+        top: auto;
+        right: 16px;
+        bottom: 61px;
+        left: 16px;
+        width: auto;
+        max-width: none;
+    }
+}
+</style>