This commit is contained in:
root committed
commit
33453ecc55
3475 files changed
+850363
No files matched your search
@@ -0,0 +1,221 @@
|
||||
/**
|
||||
* Copyright 2025 LY Corporation
|
||||
*
|
||||
* LY Corporation licenses this file to you under the Apache License,
|
||||
* version 2.0 (the "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at:
|
||||
*
|
||||
* https://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import type { GetServerSideProps } from 'next';
|
||||
|
||||
import SupportOperationsShell from '@/features/support-portal/ui/support-operations-shell.ui';
|
||||
import SupportStatusBadge from '@/features/support-portal/ui/support-status-badge.ui';
|
||||
import type { NextPageWithLayout } from '@/shared/types';
|
||||
import type { SupportTicketRecord } from '@/server/support-stub';
|
||||
import serverSideTranslations from '@/server-side-translations';
|
||||
import { AnonymousLayout } from '@/widgets/anonymous-layout';
|
||||
|
||||
const OpsPage: NextPageWithLayout = () => {
|
||||
const [tickets, setTickets] = useState<SupportTicketRecord[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [workingId, setWorkingId] = useState<number | null>(null);
|
||||
|
||||
const loadTickets = async () => {
|
||||
setIsLoading(true);
|
||||
setErrorMessage('');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/support/tickets');
|
||||
const data = (await response.json()) as SupportTicketRecord[] | { message?: string };
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('message' in data && data.message ? data.message : '승인 큐를 불러오지 못했습니다.');
|
||||
}
|
||||
|
||||
setTickets(data as SupportTicketRecord[]);
|
||||
} catch (error) {
|
||||
setErrorMessage(error instanceof Error ? error.message : '승인 큐 조회 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void loadTickets();
|
||||
}, []);
|
||||
|
||||
const pendingTickets = useMemo(
|
||||
() => tickets.filter((ticket) => ticket.requires_approval && ticket.approval_status === 'PENDING'),
|
||||
[tickets],
|
||||
);
|
||||
const approvedTickets = useMemo(
|
||||
() => tickets.filter((ticket) => ticket.approval_status === 'APPROVED'),
|
||||
[tickets],
|
||||
);
|
||||
|
||||
const handleApprove = async (ticketId: number) => {
|
||||
setWorkingId(ticketId);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/support/tickets/${ticketId}/approve`, {
|
||||
method: 'POST',
|
||||
});
|
||||
const data = (await response.json()) as { message?: string };
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message ?? '승인 처리에 실패했습니다.');
|
||||
}
|
||||
|
||||
await loadTickets();
|
||||
} catch (error) {
|
||||
setErrorMessage(error instanceof Error ? error.message : '승인 처리 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setWorkingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SupportOperationsShell
|
||||
currentTab="ops"
|
||||
eyebrow="Ops Console"
|
||||
title="운영 승인 큐에서 내부 승인 흐름을 정리하는 화면"
|
||||
description={[
|
||||
'승인형 요청만 추려서 운영자가 빠르게 확인하고 승인할 수 있게 구성했습니다.',
|
||||
'승인 후에는 같은 스텁 저장소에서 관리자 이슈 연결 페이지로 곧바로 이어집니다.',
|
||||
].join('\n')}
|
||||
aside={
|
||||
<div className="rounded-[24px] bg-[#f5efe2] p-4 text-[#594f39]">
|
||||
<p className="text-xs uppercase tracking-[0.22em] text-[#8a7c5c]">Queue state</p>
|
||||
<p className="mt-2 text-sm leading-6">
|
||||
pending={pendingTickets.length}
|
||||
<br />
|
||||
approved={approvedTickets.length}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="grid gap-6 lg:grid-cols-[minmax(0,1.25fr)_360px]">
|
||||
<section className="rounded-[32px] border border-white/80 bg-white/82 p-7 shadow-[0_18px_50px_rgba(43,63,50,0.08)]">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.22em] text-[#6f8374]">Approval queue</p>
|
||||
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.02em] text-[#1d3324]">승인 대기 요청</h2>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void loadTickets()}
|
||||
className="rounded-full border border-[#ccd8ca] bg-white px-4 py-2 text-sm font-medium text-[#284133] transition hover:bg-[#f7faf5]"
|
||||
>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading && <p className="mt-6 text-sm text-[#506055]">승인 큐를 불러오는 중입니다...</p>}
|
||||
|
||||
{!isLoading && errorMessage && (
|
||||
<div className="mt-6 rounded-[24px] border border-[#f2c7c7] bg-[#fff4f2] p-4 text-sm text-[#8d4343]">
|
||||
{errorMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !errorMessage && pendingTickets.length === 0 && (
|
||||
<div className="mt-6 rounded-[24px] bg-[#f3f5ef] p-8 text-sm text-[#526556]">
|
||||
현재 승인 대기 중인 요청이 없습니다.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-6 grid gap-4">
|
||||
{pendingTickets.map((ticket) => (
|
||||
<article
|
||||
key={ticket.ticket_id}
|
||||
className="rounded-[28px] border border-[#dde7dc] bg-[linear-gradient(135deg,_rgba(255,255,255,0.96),_rgba(245,250,244,0.92))] p-6"
|
||||
>
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-3">
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-[0.2em] text-[#6f8374]">
|
||||
<span>{ticket.workspace_name}</span>
|
||||
<span>•</span>
|
||||
<span>Ticket {ticket.ticket_id}</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold tracking-[-0.02em] text-[#1f3526]">{ticket.title}</h3>
|
||||
<p className="text-sm leading-7 text-[#546759]">{ticket.description}</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<SupportStatusBadge label="status" value={ticket.status_code} />
|
||||
<SupportStatusBadge label="approval" value={ticket.approval_status} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex flex-wrap items-center gap-2">
|
||||
<SupportStatusBadge label="sync" value={ticket.sync_status} />
|
||||
<span className="rounded-full bg-[#f0eadc] px-3 py-1 text-xs font-medium text-[#6d5a39]">
|
||||
requester {ticket.requester_id}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex items-center justify-between gap-4 rounded-[24px] bg-[#f6faf5] px-4 py-4">
|
||||
<p className="text-sm text-[#516456]">
|
||||
승인 시 운영 큐 상태가 정리되고, 관리자 페이지에서 이슈 생성이 가능해집니다.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
disabled={workingId === ticket.ticket_id}
|
||||
onClick={() => void handleApprove(ticket.ticket_id)}
|
||||
className="rounded-full bg-[#173629] px-5 py-2 text-sm font-medium text-white transition hover:bg-[#214937] disabled:cursor-not-allowed disabled:bg-[#9aaea1]"
|
||||
>
|
||||
{workingId === ticket.ticket_id ? '승인 처리 중...' : '승인'}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside className="flex flex-col gap-5">
|
||||
<section className="rounded-[28px] border border-[#dce6da] bg-white/78 p-6 shadow-[0_18px_45px_rgba(43,63,50,0.08)]">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-[#6d8272]">Approved backlog</p>
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
{approvedTickets.length === 0 ? (
|
||||
<p className="rounded-[22px] bg-[#eef4eb] px-4 py-4 text-sm text-[#516456]">
|
||||
아직 승인 완료 항목이 없습니다.
|
||||
</p>
|
||||
) : (
|
||||
approvedTickets.map((ticket) => (
|
||||
<div key={ticket.ticket_id} className="rounded-[22px] bg-[#eef4eb] px-4 py-4 text-sm text-[#2d4a39]">
|
||||
<p className="font-medium">{ticket.title}</p>
|
||||
<p className="mt-2 text-xs uppercase tracking-[0.18em] text-[#6b816e]">
|
||||
Ticket {ticket.ticket_id}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</SupportOperationsShell>
|
||||
);
|
||||
};
|
||||
|
||||
OpsPage.getLayout = (page: React.ReactNode) => {
|
||||
return <AnonymousLayout>{page}</AnonymousLayout>;
|
||||
};
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale)),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default OpsPage;
|
||||
Reference in new issue
Block a user