From 8bf54b1eec6172ac6cefa841a0cb935ff7565f06 Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Sun, 27 Oct 2024 22:12:51 -0400
Subject: [PATCH] fix : adjust file and folder names to pascal case for naming
 convention

---
 .../Leaderboard/Leaderboard.stories.tsx       | 23 +++++
 .../Leaderboard/Leaderboard.test.tsx          | 83 +++++++++++++++++++
 src/components/Leaderboard/Leaderboard.tsx    | 36 ++++++++
 .../leaderboard/leaderboard.stories.tsx       |  3 +-
 .../leaderboard/leaderboard.test.tsx          |  2 +-
 src/main.tsx                                  |  2 +-
 6 files changed, 146 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Leaderboard/Leaderboard.stories.tsx
 create mode 100644 src/components/Leaderboard/Leaderboard.test.tsx
 create mode 100644 src/components/Leaderboard/Leaderboard.tsx

diff --git a/src/components/Leaderboard/Leaderboard.stories.tsx b/src/components/Leaderboard/Leaderboard.stories.tsx
new file mode 100644
index 0000000..42c9d48
--- /dev/null
+++ b/src/components/Leaderboard/Leaderboard.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import Leaderboard from "./Leaderboard";
+
+const pathname = `/leaderboard`;
+
+
+const meta = {
+  component: Leaderboard,
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={[pathname]}>
+        <Routes>
+          <Route path="/leaderboard" element={<Story />} />
+        </Routes>
+      </MemoryRouter>
+    ),
+  ],
+} satisfies Meta<typeof Leaderboard>;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {};
diff --git a/src/components/Leaderboard/Leaderboard.test.tsx b/src/components/Leaderboard/Leaderboard.test.tsx
new file mode 100644
index 0000000..cd1752d
--- /dev/null
+++ b/src/components/Leaderboard/Leaderboard.test.tsx
@@ -0,0 +1,83 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Leaderboard from "./Leaderboard";
+
+const queryClient = new QueryClient();
+
+describe("<Leaderboard/>", () => {
+  beforeEach(() =>
+    render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>
+          <Routes>
+            <Route path="/" element={<Leaderboard />} />
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>,
+    ),
+  );
+
+  it("renders the members list section", () => {
+    expect(
+      screen.getByRole("region", { name: /members list/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the title", () => {
+    const heading = screen.getByRole("heading", { level: 1 });
+    expect(heading).toHaveTextContent("Leaderboard");
+  });
+
+  it("renders the member information", () => {
+    const members = [
+      { name: "DaleSeo", solved: 71, rank: "새싹" },
+      { name: "sounmind", solved: 69, rank: "나무" },
+      { name: "yolophg", solved: 65, rank: "새싹" },
+      { name: "Sunjae95", solved: 63, rank: "나무" },
+      { name: "HC-kang", solved: 62, rank: "나무" },
+      { name: "SamTheKorean", solved: 60, rank: "나무" },
+    ];
+
+    const memberItems = screen.getAllByRole("listitem");
+
+    expect(memberItems).toHaveLength(members.length);
+
+    members.forEach((member, index) => {
+      const memberItem = memberItems[index];
+      expect(memberItem).toHaveTextContent(`등급: ${member.rank}`);
+      expect(memberItem).toHaveTextContent(`진행 상황: ${member.solved}`);
+    });
+  });
+
+  it("renders the links for members", () => {
+    const members = [
+      { name: "DaleSeo" },
+      { name: "sounmind" },
+      { name: "yolophg" },
+      { name: "Sunjae95" },
+      { name: "HC-kang" },
+      { name: "SamTheKorean" },
+    ];
+
+    const progressLinks = screen.getAllByRole("link", { name: "풀이 보기" });
+    const certificateLinks = screen.getAllByRole("link", {
+      name: "수료증 보기",
+    });
+
+    expect(progressLinks).toHaveLength(members.length);
+    expect(certificateLinks).toHaveLength(members.length);
+
+    members.forEach((member, index) => {
+      expect(progressLinks[index]).toHaveAttribute(
+        "href",
+        `/progress?member=${member.name}`,
+      );
+      expect(certificateLinks[index]).toHaveAttribute(
+        "href",
+        `/certificate?member=${member.name}`,
+      );
+    });
+  });
+});
diff --git a/src/components/Leaderboard/Leaderboard.tsx b/src/components/Leaderboard/Leaderboard.tsx
new file mode 100644
index 0000000..cb3f95a
--- /dev/null
+++ b/src/components/Leaderboard/Leaderboard.tsx
@@ -0,0 +1,36 @@
+export default function Leaderboard() {
+  const members = [
+    { name: "DaleSeo", solved: 71, rank: "새싹" },
+    { name: "sounmind", solved: 69, rank: "나무" },
+    { name: "yolophg", solved: 65, rank: "새싹" },
+    { name: "Sunjae95", solved: 63, rank: "나무" },
+    { name: "HC-kang", solved: 62, rank: "나무" },
+    { name: "SamTheKorean", solved: 60, rank: "나무" },
+  ];
+
+  return (
+    <div>
+      <h1>Leaderboard</h1>
+
+      <section aria-labelledby="leaderboard">
+        <h2 id="leaderboard">Members List</h2>
+        <ul>
+          {members.map((member) => (
+            <li key={member.name} style={{ marginBottom: "20px" }}>
+              <div>등급: {member.rank}</div>
+              <div>진행 상황: {member.solved}</div>
+              <div>
+                <a href={`/progress?member=${member.name}`}>
+                  <button>풀이 보기</button>
+                </a>
+                <a href={`/certificate?member=${member.name}`}>
+                  <button>수료증 보기</button>
+                </a>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}
diff --git a/src/components/leaderboard/leaderboard.stories.tsx b/src/components/leaderboard/leaderboard.stories.tsx
index a960952..42c9d48 100644
--- a/src/components/leaderboard/leaderboard.stories.tsx
+++ b/src/components/leaderboard/leaderboard.stories.tsx
@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
-import Leaderboard from "./leaderboard";
+import Leaderboard from "./Leaderboard";
 
 const pathname = `/leaderboard`;
 
+
 const meta = {
   component: Leaderboard,
   decorators: [
diff --git a/src/components/leaderboard/leaderboard.test.tsx b/src/components/leaderboard/leaderboard.test.tsx
index b7cc9a1..cd1752d 100644
--- a/src/components/leaderboard/leaderboard.test.tsx
+++ b/src/components/leaderboard/leaderboard.test.tsx
@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import Leaderboard from "./leaderboard";
+import Leaderboard from "./Leaderboard";
 
 const queryClient = new QueryClient();
 
diff --git a/src/main.tsx b/src/main.tsx
index af26a3d..8cd27cf 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,7 +4,7 @@ import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Certificate from "./components/certificate/certificate";
 import ErrorPage from "./components/ErrorPage/ErrorPage";
-import Leaderboard from "./components/leaderboard/leaderboard";
+import Leaderboard from "./components/Leaderboard/Leaderboard";
 import Progress from "./components/progress/progress";
 import "./index.css";