Skip to content

fix: 매물 상세와 조회 오류·실시간 갱신 개선 #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dev-ant wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: 매물 상세와 조회 오류·실시간 갱신 개선 #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "devnogi-front",
"version": "1.0.33",
"version": "1.0.34",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
2 changes: 1 addition & 1 deletion scripts/test-production-workflow.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ test("production Compose requires the immutable image reference", () => {
test("package and lockfile agree on the next release version", () => {
const pkg = JSON.parse(read("package.json"));
const lock = JSON.parse(read("package-lock.json"));
assert.equal(pkg.version, "1.0.33");
assert.equal(pkg.version, "1.0.34");
assert.equal(lock.version, pkg.version);
assert.equal(lock.packages[""].version, pkg.version);
});
2 changes: 1 addition & 1 deletion scripts/workflow-contract.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ test("release version and immutable image contract are fixed", () => {
);
const pkg = JSON.parse(read("package.json"));
const lock = JSON.parse(read("package-lock.json"));
assert.equal(pkg.version, "1.0.33");
assert.equal(pkg.version, "1.0.34");
assert.equal(lock.version, pkg.version);
assert.equal(lock.packages[""].version, pkg.version);
assert.match(
Expand Down
76 changes: 52 additions & 24 deletions src/app/(main)/auction-history/AuctionHistoryClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";

import CategorySection from "@/components/commons/Category";
import CategoryDropdown from "@/components/commons/CategoryDropdown";
import DataFetchError from "@/components/commons/DataFetchError";
import { MetalwareFilterItem } from "@/components/commons/MetalwareSearchFilter";
import AuctionItemSearch from "@/components/page/auction-common/AuctionItemSearch";
import AuctionHistoryList from "@/components/page/auction-history/AuctionHistoryList";
Expand Down Expand Up @@ -530,7 +531,9 @@ export default function Page({ header }: { header?: React.ReactNode }) {
showMobileFilter,
} = useAuctionHistoryLayout();

const { data, isLoading, isFetching } = useAuctionHistory(searchParams);
const { data, isLoading, isFetching, isError, refetch } =
useAuctionHistory(searchParams);
const hasData = data !== undefined;
const { isPreviewEnabled, setIsPreviewEnabled } =
useAuctionItemPreviewPreference();

Expand All @@ -548,7 +551,7 @@ export default function Page({ header }: { header?: React.ReactNode }) {
option.direction === searchParams.direction,
) || SORT_OPTIONS[0];

const isResultCountLoading = isLoading || isFetching;
const isResultCountLoading = !hasData && isLoading;
const resultCountNode = isResultCountLoading ? (
<Skeleton className="inline-block h-4 w-12 align-middle rounded-md ml-1" />
) : (
Expand Down Expand Up @@ -1144,18 +1147,24 @@ export default function Page({ header }: { header?: React.ReactNode }) {
<div>
<div className="mb-4 flex items-center justify-between">
<div className="text-xs md:text-sm text-muted-foreground">
{itemName ? (
<>
<span className="font-semibold text-[var(--color-ds-primary)]">
{itemName}
</span>{" "}
검색결과
{resultCountNode}개
</>
{isError && !hasData ? (
"검색결과를 불러오지 못했습니다"
) : (
<>
검색결과
{resultCountNode}개
{itemName ? (
<>
<span className="font-semibold text-[var(--color-ds-primary)]">
{itemName}
</span>{" "}
검색결과
{resultCountNode}개
</>
) : (
<>
검색결과
{resultCountNode}개
</>
)}
</>
)}
</div>
Expand Down Expand Up @@ -1211,25 +1220,44 @@ export default function Page({ header }: { header?: React.ReactNode }) {
</div>
</div>

<AuctionHistoryList
items={allItems}
isLoading={isLoading}
previewEnabled={isPreviewEnabled}
/>
{isError && (
<DataFetchError
message={
hasData
? "거래내역을 갱신하지 못했습니다. 이전 결과를 표시합니다."
: "거래내역을 불러오지 못했습니다."
}
compact={hasData}
isRetrying={isFetching}
onRetry={() => {
if (!isFetching) void refetch();
}}
className="mb-4"
/>
)}
{(!isError || hasData) && (
<AuctionHistoryList
items={allItems}
isLoading={isLoading}
previewEnabled={isPreviewEnabled}
/>
)}

{isFetching && !isLoading && (
<div className="h-12 flex items-center justify-center">
<div className="text-sm text-muted-foreground">로딩 중...</div>
</div>
)}

<ItemInfoPagination
currentPage={currentPage}
totalPages={totalPages}
totalElements={totalElements}
pageSize={pageSize}
onPageChange={handlePageChange}
/>
{hasData && (
<ItemInfoPagination
currentPage={currentPage}
totalPages={totalPages}
totalElements={totalElements}
pageSize={pageSize}
onPageChange={handlePageChange}
/>
)}
</div>
</div>
</div>
Expand Down
61 changes: 57 additions & 4 deletions src/app/(main)/auction-history/page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
act,
cleanup,
fireEvent,
render,
Expand Down Expand Up @@ -365,16 +366,68 @@ describe("TradeLogPage", () => {
);
});

it("API 오류가 나면 로딩을 마치고 빈 목록을 렌더링한다", async () => {
fetchSpy.mockRejectedValue(new Error("API Error"));
it("최초 실패를 빈 결과와 구분하고 다시 시도로 복구한다", async () => {
fetchSpy
.mockResolvedValueOnce(Response.json({}, { status: 500 }))
.mockResolvedValue(response(["복구된 거래"]));
renderPage();
await screen.findByText("거래내역을 불러오지 못했습니다.");
expect(screen.queryByTestId("trade-log-list")).not.toBeInTheDocument();
expect(screen.queryByText("0")).not.toBeInTheDocument();
expect(
screen.queryByRole("button", { name: "다음 페이지" }),
).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "다시 시도" }));
expect(await screen.findByText("복구된 거래")).toBeInTheDocument();
expect(
screen.queryByText("거래내역을 불러오지 못했습니다."),
).not.toBeInTheDocument();
expect(fetchSpy).toHaveBeenCalledTimes(2);
});

it("같은 조건의 재조회 실패는 기존 거래와 건수를 유지한다", async () => {
fetchSpy
.mockResolvedValueOnce(response(["기존 거래"]))
.mockRejectedValue(new Error("offline"));
renderPage();
await screen.findByText("기존 거래");
await act(async () => {
await queryClient.invalidateQueries({ queryKey: ["auction-history"] });
});
await screen.findByText(
"거래내역을 갱신하지 못했습니다. 이전 결과를 표시합니다.",
);
expect(screen.getByText("기존 거래")).toBeInTheDocument();
expect(screen.getByText("1")).toBeInTheDocument();
fetchSpy.mockResolvedValue(response(["최신 거래"]));
fireEvent.click(screen.getByRole("button", { name: "다시 시도" }));
expect(await screen.findByText("최신 거래")).toBeInTheDocument();
expect(screen.queryByText("기존 거래")).not.toBeInTheDocument();
});

it("검색 조건 변경 후 실패하면 이전 조건의 결과를 표시하지 않는다", async () => {
fetchSpy
.mockResolvedValueOnce(response(["이전 조건 거래"]))
.mockRejectedValue(new Error("offline"));
renderPage();
await screen.findByText("이전 조건 거래");
fireEvent.click(screen.getByRole("button", { name: "Direct Search" }));
await screen.findByText("거래내역을 불러오지 못했습니다.");
expect(screen.queryByText("이전 조건 거래")).not.toBeInTheDocument();
});

it("성공한 빈 응답은 오류 없이 0건으로 표시한다", async () => {
fetchSpy.mockResolvedValue(response([]));
renderPage();
await waitFor(() => expect(fetchSpy).toHaveBeenCalled());
await waitFor(() =>
expect(screen.getByTestId("trade-log-list")).toHaveAttribute(
"aria-busy",
"false",
),
);
expect(screen.queryAllByTestId("log-item")).toHaveLength(0);
expect(screen.getByText("0")).toBeInTheDocument();
expect(
screen.queryByRole("button", { name: "다시 시도" }),
).not.toBeInTheDocument();
});
});
Loading
Loading