feat : add png files

src/components/Aside/Aside.module.css

@@ -1,6 +1,6 @@
 aside {
   position: sticky; /* Make the aside sticky */
-  top: 20px; /* Adjust this value to control when the sidebar becomes sticky */
+  top: 87px; /* Adjust this value to control when the sidebar becomes sticky */
   width: 250px; /* Adjust the width as needed */
   height: calc(
     100vh - 40px

src/components/Aside/Aside.tsx

@@ -61,10 +61,7 @@ export default function Aside({
               풀이 보기
             </a>
           </div>
-          <a href={`https://github.com/${githubUsername}`}>
-            {" "}
-            {githubUsername}{" "}
-          </a>
+          <a href={`https://github.com/${githubUsername}`}>{githubUsername}</a>
         </section>
 
         <section className={styles.currentStatus}>

src/components/Progress/Progress.test.tsx

@@ -1,19 +1,89 @@
-import { beforeEach, describe, expect, it } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { expect } from "vitest";
+import { render, screen } from "@testing-library/react";
 import Progress from "./Progress";
 import { mock } from "vitest-mock-extended";
 import useMembers from "../../hooks/useMembers";
 import { test, vi } from "vitest";
+import { Member } from "../../api/services/common/types";
 
 vi.mock("../../hooks/useMembers");
 
 test("render the site header", () => {
   vi.mocked(useMembers).mockReturnValue(
-    mock({ isLoading: false, error: null, members: [] }),
+    mock({
+      isLoading: false,
+      error: null,
+      members: [mock<Member>({ id: "sam", solvedProblems: [] })],
+    }),
   );
 
+  vi.stubGlobal("location", {
+    href: `http://example.com?member=sam`,
+    search: `?member=sam`,
+  });
+
   render(<Progress />);
 
   const header = screen.getByRole("banner");
   expect(header).toBeInTheDocument();
 });
+
+test("display error message if member is not found", () => {
+  vi.mocked(useMembers).mockReturnValue(
+    mock({ isLoading: false, error: null, members: [] }),
+  );
+
+  render(<Progress />);
+
+  const errorMessage = screen.getByText("Member not found!");
+  expect(errorMessage).toBeInTheDocument();
+});
+
+test("display member is not found when query paramemer is not passed", () => {
+  vi.mocked(useMembers).mockReturnValue(
+    mock({ isLoading: false, error: null, members: [] }),
+  );
+  vi.stubGlobal("location", {
+    href: "http://example.com",
+  });
+  render(<Progress />);
+
+  const errorMessage = screen.getByText("Member not found!");
+  expect(errorMessage).toBeInTheDocument();
+});
+
+test("render page when query parameter is passed", async () => {
+  const mockedMember = mock<Member>();
+  const mockedQueryParam = "evan";
+
+  mockedMember.id = mockedQueryParam;
+  mockedMember.name = "soundmin";
+  mockedMember.solvedProblems = [
+    { title: "Problem 1", difficulty: "easy" },
+    { title: "Problem 2", difficulty: "medium" },
+    { title: "Problem 3", difficulty: "easy" },
+  ];
+
+  vi.mocked(useMembers).mockReturnValue(
+    mock({
+      isLoading: false,
+      error: null,
+      members: [mockedMember],
+    }),
+  );
+
+  vi.stubGlobal("location", {
+    href: `http://example.com?member=${mockedQueryParam}`,
+    search: `?member=${mockedQueryParam}`,
+  });
+
+  render(<Progress />);
+
+  // Assert that the error message is not shown
+  const errorMessage = screen.queryByText("Member not found!");
+  expect(errorMessage).not.toBeInTheDocument();
+
+  // Wait for the member's name to appear
+  const userNameElement = await screen.findByText(mockedMember.name);
+  expect(userNameElement).toBeInTheDocument();
+});

src/components/Progress/Progress.tsx

@@ -11,15 +11,15 @@ export default function Progress() {
   const { members, isLoading, error } = useMembers({ getMembers });
   console.log({ members, isLoading, error });
 
-  const memberId = new URL(location.href).searchParams.get("member"); // Using URL to fetch member ID
+  const memberId = new URL(location.href).searchParams.get("member");
 
-  if (isLoading) return <p>Loading...</p>; // TODO replace with a proper loading component
+  if (isLoading) return <p>Loading...</p>;
   if (error) return <p>Error!</p>; // TODO replace with a proper error component
 
   const member = members.find((m) => m.id === memberId);
   if (!member) return <p>Member not found!</p>;
 
-  // Calculate total tasks dynamically
+  // dynamically format the member's tasks
   const totalTasks = problems.length;
   const easyProblemsCount = problems.filter(
     (problem) => problem.difficulty === "easy",
@@ -52,22 +52,26 @@ export default function Progress() {
 
   const profile_url = member.profileUrl || "SampleImg.png";
 
-  //TODO: need to pass the right member
-  const mockProblems = [
+  // To be fixed, this will be replaced by the real data in a seperate pr.
+  const mockedProblems = [
     {
-      id: 128,
-      title: "Longest Consecutive Sequence",
-      difficulty: "Med.",
+      id: 1,
+      title: "Problem 1",
+      difficulty: "easy",
       completed: true,
     },
-    { id: 1, title: "Two Sum", difficulty: "Easy", completed: true },
     {
-      id: 257,
-      title: "Binary Tree Paths",
-      difficulty: "Easy",
+      id: 2,
+      title: "Problem 2",
+      difficulty: "medium",
       completed: false,
     },
-    { id: 133, title: "Clone Graph", difficulty: "Med.", completed: true },
+    {
+      id: 3,
+      title: "Problem 3",
+      difficulty: "hard",
+      completed: true,
+    },
   ];
 
   return (
@@ -90,7 +94,7 @@ export default function Progress() {
         </section>
 
         <section className={styles.problemList} aria-labelledby="problem-list">
-          <Table problems={mockProblems} />
+          <Table problems={mockedProblems} />
         </section>
       </div>