diff --git a/src/pages/Leaderboard/Leaderboard.module.css b/src/pages/Leaderboard/Leaderboard.module.css index 78c6ecb..878052e 100644 --- a/src/pages/Leaderboard/Leaderboard.module.css +++ b/src/pages/Leaderboard/Leaderboard.module.css @@ -29,6 +29,26 @@ } } +.gradeCriteria { + display: flex; + margin-top: 10px; + font-size: 8px; + gap: 3px; + align-items: center; + img { + width: 10px; + height: 10px; + @media (min-width: 1080px) { + width: 16px; + height: 16px; + } + } + @media (min-width: 1080px) { + margin-top: 3px; + font-size: 14px; + } +} + .toolbar { display: flex; flex-direction: column; diff --git a/src/pages/Leaderboard/Leaderboard.test.tsx b/src/pages/Leaderboard/Leaderboard.test.tsx index bd7071d..1f79abb 100644 --- a/src/pages/Leaderboard/Leaderboard.test.tsx +++ b/src/pages/Leaderboard/Leaderboard.test.tsx @@ -131,6 +131,23 @@ test("render the search bar", () => { expect(screen.getByLabelText("검색 창")); }); +test("render the grade creteria", () => { + vi.mocked(useMembers).mockReturnValue( + mock({ + isLoading: false, + error: null, + members: [mockMember()], + totalCohorts: 0, + filter: { name: "", cohort: null }, + setFilter: vi.fn(), + }), + ); + + render(); + + expect(screen.getByText(/등급 기준/)).toBeInTheDocument(); +}); + function mockMember() { const userName = faker.internet.username(); const cohort = faker.number.int({ min: 1, max: 9 }); diff --git a/src/pages/Leaderboard/Leaderboard.tsx b/src/pages/Leaderboard/Leaderboard.tsx index b1b58db..3df0613 100644 --- a/src/pages/Leaderboard/Leaderboard.tsx +++ b/src/pages/Leaderboard/Leaderboard.tsx @@ -37,6 +37,12 @@ export default function Leaderboard() { /> +
+ + 등급 기준(문제 수) : 나무(70+), 열매(60+), 가지(45+), 잎새(30+), + 새싹(15+), 씨앗(0+) +
+ {error ? (