feat : add grade criteria text and add test

DaleStudy · Jan 21, 2025 · 2cee898 · 2cee898
1 parent a6a6516
commit 2cee898
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 0 deletions.
diff --git 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
@@ -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(<Leaderboard />);
+
+  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
@@ -37,6 +37,12 @@ export default function Leaderboard() {
             />
           </section>
 
+          <section className={styles.gradeCriteria}>
+            <img src="/information-icon.svg"></img>
+            등급 기준(문제 수) : 나무(70+), 열매(60+), 가지(45+), 잎새(30+),
+            새싹(15+), 씨앗(0+)
+          </section>
+
           {error ? (
             <div className={styles.serverErrorWrapper}>
               <ServerError />