feat(gateway): expand release error details

app/gateway-frontend/e2e/server-operations.spec.ts

@@ -26,6 +26,9 @@ type FixtureState = {
         status: OperationStatus;
         sourceMode?: 'BRANCH' | 'COMMIT';
         sourceRef?: string;
+        resolvedCommitSha?: string;
+        completedAt?: string;
+        error?: string;
         payload: Record<string, unknown>;
         requestedBy: string;
         createdAt: string;
@@ -877,6 +880,131 @@ test('controls gateway deployment and rollback through the external controller q
     expect(state.requestBodies.some((entry) => entry.operation === 'admin.releases.requestGatewayRollback')).toBe(true);
 });
 
+test('moves long Gateway release errors out of the table column into an expandable detail row', async ({
+    page,
+}, testInfo) => {
+    const longError = [
+        'Gateway release did not become ready before the timeout.',
+        'Error: gateway-frontend readiness check failed after 30 attempts',
+        '    at waitForGatewayReadiness (/srv/core/release-controller/dist/releaseController.js:842:19)',
+        'controller-output-without-breaks-'.repeat(12),
+    ].join('\n');
+    const operationId = '88888888-8888-4888-8888-888888888888';
+    const state: FixtureState = {
+        operations: [],
+        gatewayOperations: [
+            {
+                id: operationId,
+                type: 'DEPLOY',
+                status: 'FAILED',
+                sourceMode: 'COMMIT',
+                sourceRef: 'cccccccccccccccccccccccccccccccccccccccc',
+                resolvedCommitSha: 'cccccccccccccccccccccccccccccccccccccccc',
+                completedAt: '2026-08-01T02:03:00.000Z',
+                error: longError,
+                payload: {},
+                requestedBy: 'admin',
+                createdAt: '2026-08-01T02:00:00.000Z',
+                updatedAt: '2026-08-01T02:03:00.000Z',
+            },
+        ],
+        gatewayLogsEmpty: true,
+        runtimeRunning: true,
+        requestBodies: [],
+    };
+    await installFixture(page, state);
+
+    await page.goto('admin/releases');
+    const table = page.getByTestId('gateway-release-table');
+    await expect(table.getByRole('columnheader')).toHaveCount(6);
+    await expect(table.getByRole('columnheader', { name: '오류', exact: true })).toHaveCount(0);
+    await expect(table.getByRole('columnheader', { name: '상세', exact: true })).toBeVisible();
+
+    const errorToggle = page.getByTestId('gateway-release-error-toggle');
+    await expect(errorToggle).toHaveText('오류 보기');
+    await expect(errorToggle).toHaveAttribute('aria-expanded', 'false');
+    await expect(page.getByTestId('gateway-release-error-detail')).toBeHidden();
+
+    await errorToggle.focus();
+    const focusedToggleStyle = await errorToggle.evaluate((element) => {
+        const style = getComputedStyle(element);
+        return {
+            outlineStyle: style.outlineStyle,
+            outlineWidth: style.outlineWidth,
+            color: style.color,
+        };
+    });
+    expect(focusedToggleStyle.outlineStyle).not.toBe('none');
+    expect(parseFloat(focusedToggleStyle.outlineWidth)).toBeGreaterThanOrEqual(2);
+
+    await errorToggle.hover();
+    await errorToggle.click();
+    await expect(errorToggle).toHaveText('오류 닫기');
+    await expect(errorToggle).toHaveAttribute('aria-expanded', 'true');
+    const errorDetail = page.getByTestId('gateway-release-error-detail');
+    await expect(errorDetail).toContainText('Gateway release did not become ready');
+    await expect(errorDetail).toContainText('controller-output-without-breaks');
+    const desktopGeometry = await table.evaluate((element) => {
+        const headings = Array.from(element.querySelectorAll('thead th'));
+        const detail = element.querySelector('[data-testid="gateway-release-error-detail"]');
+        const detailCell = detail?.querySelector('td');
+        const errorText = detail?.querySelector('pre');
+        return {
+            tableWidth: element.getBoundingClientRect().width,
+            scrollerWidth: element.parentElement?.getBoundingClientRect().width ?? 0,
+            tableLayout: getComputedStyle(element).tableLayout,
+            columnCount: headings.length,
+            detailColSpan: detailCell?.getAttribute('colspan'),
+            detailWidth: detailCell?.getBoundingClientRect().width ?? 0,
+            errorWhiteSpace: errorText ? getComputedStyle(errorText).whiteSpace : '',
+            errorOverflowWrap: errorText ? getComputedStyle(errorText).overflowWrap : '',
+        };
+    });
+    expect(desktopGeometry).toMatchObject({
+        tableLayout: 'fixed',
+        columnCount: 6,
+        detailColSpan: '6',
+        errorWhiteSpace: 'pre-wrap',
+    });
+    expect(desktopGeometry.tableWidth).toBeGreaterThanOrEqual(680);
+    expect(desktopGeometry.detailWidth).toBeGreaterThanOrEqual(desktopGeometry.tableWidth - 1);
+    await page.screenshot({ path: testInfo.outputPath('gateway-release-error-expanded-desktop.png'), fullPage: true });
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await expect(table.getByRole('columnheader')).toHaveCount(4);
+    await expect(table.getByRole('columnheader', { name: '소스', exact: true })).toHaveCount(0);
+    await expect(table.getByRole('columnheader', { name: '해석 커밋', exact: true })).toHaveCount(0);
+    const mobileGeometry = await table.evaluate((element) => {
+        const scroller = element.parentElement!;
+        const scrollerRect = scroller.getBoundingClientRect();
+        const detailRect = element
+            .querySelector('[data-testid="gateway-release-error-detail"]')!
+            .getBoundingClientRect();
+        return {
+            tableWidth: element.getBoundingClientRect().width,
+            scrollerX: scrollerRect.x,
+            scrollerWidth: scrollerRect.width,
+            scrollerScrollWidth: scroller.scrollWidth,
+            detailWidth: detailRect.width,
+            viewportWidth: document.documentElement.clientWidth,
+            documentScrollWidth: document.documentElement.scrollWidth,
+        };
+    });
+    expect(mobileGeometry.tableWidth).toBeLessThanOrEqual(mobileGeometry.scrollerWidth + 1);
+    expect(mobileGeometry.detailWidth).toBeGreaterThanOrEqual(mobileGeometry.tableWidth - 1);
+    expect(mobileGeometry.scrollerScrollWidth).toBeLessThanOrEqual(mobileGeometry.scrollerWidth + 1);
+    expect(mobileGeometry.scrollerX).toBeGreaterThanOrEqual(0);
+    expect(mobileGeometry.scrollerX + mobileGeometry.scrollerWidth).toBeLessThanOrEqual(
+        mobileGeometry.viewportWidth
+    );
+    expect(mobileGeometry.documentScrollWidth).toBeLessThanOrEqual(mobileGeometry.viewportWidth);
+    await page.screenshot({ path: testInfo.outputPath('gateway-release-error-expanded-mobile.png'), fullPage: true });
+
+    await errorToggle.click();
+    await expect(errorToggle).toHaveAttribute('aria-expanded', 'false');
+    await expect(page.getByTestId('gateway-release-error-detail')).toBeHidden();
+});
+
 test('explains terminal releases created before controller progress logging', async ({ page }) => {
     const state: FixtureState = {
         operations: [],

app/gateway-frontend/src/views/ServerOperationsView.vue

@@ -88,6 +88,7 @@ const profileOperationLogViewport = ref<HTMLElement>();
 const gatewayReleaseState = ref<GatewayReleaseState | null>(null);
 const gatewayReleaseOperations = ref<GatewayReleaseOperation[]>([]);
 const selectedGatewayOperationId = ref('');
+const expandedGatewayErrorOperationId = ref('');
 const gatewayReleaseLogs = ref<GatewayReleaseLog[]>([]);
 const gatewayReleaseLogCursor = ref<string>();
 const gatewayReleaseLogStatus = ref('');
@@ -169,7 +170,7 @@ const gatewayReleaseLogEmptyMessage = computed(() => {
         return 'controller 로그를 기다리고 있습니다…';
     }
     if (operation.error) {
-        return `이 작업에는 controller 로그가 기록되지 않았습니다. 작업 오류: ${operation.error}`;
+        return '이 작업에는 controller 로그가 기록되지 않았습니다. 작업 이력의 오류 상세를 확인하세요.';
     }
     return '이 작업에는 controller 로그가 기록되지 않았습니다. 로그 지원 controller 적용 전 작업일 수 있습니다.';
 });
@@ -444,6 +445,11 @@ const selectGatewayReleaseOperation = (operationId: string) => {
     selectedGatewayOperationId.value = operationId;
 };
 
+const toggleGatewayReleaseError = (operationId: string) => {
+    expandedGatewayErrorOperationId.value =
+        expandedGatewayErrorOperationId.value === operationId ? '' : operationId;
+};
+
 const requestDeploy = async () => {
     clearStatus();
     if (
@@ -1136,45 +1142,97 @@ onBeforeUnmount(() => {
                     </div>
                 </section>
                 <div class="overflow-x-auto">
-                    <table class="w-full min-w-[760px] text-left text-xs" data-testid="gateway-release-table">
+                    <table
+                        class="w-full table-fixed text-left text-xs sm:min-w-[680px]"
+                        data-testid="gateway-release-table"
+                    >
+                        <colgroup>
+                            <col class="w-[32%] sm:w-[144px]" />
+                            <col class="w-[17%] sm:w-[68px]" />
+                            <col class="w-[20%] sm:w-[88px]" />
+                            <col class="hidden sm:table-column sm:w-[128px]" />
+                            <col class="hidden sm:table-column sm:w-[112px]" />
+                            <col class="w-[31%] sm:w-[140px]" />
+                        </colgroup>
                         <thead class="border-b border-zinc-700 text-zinc-500">
                             <tr>
                                 <th class="p-2">시각</th>
                                 <th class="p-2">작업</th>
                                 <th class="p-2">상태</th>
-                                <th class="p-2">소스</th>
+                                <th class="hidden p-2 sm:table-cell">소스</th>
-                                <th class="p-2">해석 커밋</th>
+                                <th class="hidden p-2 sm:table-cell">해석 커밋</th>
-                                <th class="p-2">오류</th>
+                                <th class="p-2">상세</th>
-                                <th class="p-2">로그</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr
+                            <template v-for="operation in gatewayReleaseOperations" :key="operation.id">
-                                v-for="operation in gatewayReleaseOperations"
+                                <tr class="border-b border-zinc-800 align-top">
-                                :key="operation.id"
+                                    <td class="p-2">{{ formatTime(operation.createdAt) }}</td>
-                                class="border-b border-zinc-800"
+                                    <td class="p-2">
-                            >
+                                        <div>{{ operation.type }}</div>
-                                <td class="p-2">{{ formatTime(operation.createdAt) }}</td>
+                                        <div
-                                <td class="p-2">{{ operation.type }}</td>
+                                            class="mt-1 truncate font-mono text-[10px] text-zinc-500 sm:hidden"
-                                <td class="p-2">{{ operation.status }}</td>
+                                            :title="operation.sourceRef"
-                                <td class="p-2 font-mono">{{ operation.sourceRef }}</td>
+                                        >
-                                <td class="p-2 font-mono">{{ shortSha(operation.resolvedCommitSha) }}</td>
+                                            {{ operation.sourceRef ?? '-' }}
-                                <td class="max-w-xs p-2 text-red-300">{{ operation.error }}</td>
+                                        </div>
-                                <td class="p-2">
+                                    </td>
-                                    <button
+                                    <td class="p-2 font-semibold">{{ operation.status }}</td>
-                                        type="button"
+                                    <td class="hidden p-2 font-mono sm:table-cell">
-                                        class="rounded border border-zinc-700 px-2 py-1 text-zinc-300 hover:bg-zinc-800"
+                                        <div class="truncate" :title="operation.sourceRef">{{ operation.sourceRef }}</div>
-                                        :class="
+                                    </td>
-                                            operation.id === selectedGatewayOperationId
+                                    <td class="hidden p-2 font-mono sm:table-cell">
-                                                ? 'border-violet-500 text-violet-200'
+                                        {{ shortSha(operation.resolvedCommitSha) }}
-                                                : ''
+                                    </td>
-                                        "
+                                    <td class="p-2">
-                                        @click="selectGatewayReleaseOperation(operation.id)"
+                                        <div class="flex flex-wrap gap-2">
-                                    >
+                                            <button
-                                        보기
+                                                type="button"
-                                    </button>
+                                                class="rounded border border-zinc-700 px-2 py-1 text-zinc-300 hover:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-400"
-                                </td>
+                                                :class="
-                            </tr>
+                                                    operation.id === selectedGatewayOperationId
+                                                        ? 'border-violet-500 text-violet-200'
+                                                        : ''
+                                                "
+                                                @click="selectGatewayReleaseOperation(operation.id)"
+                                            >
+                                                로그
+                                            </button>
+                                            <button
+                                                v-if="operation.error"
+                                                type="button"
+                                                class="rounded border border-red-800 px-2 py-1 text-red-300 hover:bg-red-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-400"
+                                                :aria-expanded="expandedGatewayErrorOperationId === operation.id"
+                                                :aria-controls="`gateway-release-error-${operation.id}`"
+                                                data-testid="gateway-release-error-toggle"
+                                                @click="toggleGatewayReleaseError(operation.id)"
+                                            >
+                                                {{ expandedGatewayErrorOperationId === operation.id ? '오류 닫기' : '오류 보기' }}
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr
+                                    v-if="operation.error"
+                                    v-show="expandedGatewayErrorOperationId === operation.id"
+                                    :id="`gateway-release-error-${operation.id}`"
+                                    class="border-b border-red-900/70 bg-red-950/30"
+                                    data-testid="gateway-release-error-detail"
+                                >
+                                    <td colspan="6" class="p-4">
+                                        <div
+                                            class="rounded border border-red-900/70 bg-zinc-950 px-4 py-3"
+                                            role="region"
+                                            :aria-label="`${operation.type} 릴리스 오류 상세`"
+                                        >
+                                            <div class="mb-2 text-xs font-semibold text-red-300">오류 상세</div>
+                                            <pre
+                                                class="whitespace-pre-wrap break-all font-mono text-xs leading-5 text-red-200"
+                                            >{{ operation.error }}</pre>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </template>
                         </tbody>
                     </table>
                 </div>