feat : complete progress page

src/api/constants/problems.ts

@@ -0,0 +1,127 @@
+import type { Problem } from "../services/types";
+
+export const problems: Problem[] = [
+  { id: 128, title: "longest-consecutive-sequence", difficulty: "Med" },
+  { id: 1, title: "two-sum", difficulty: "Easy" },
+  {
+    id: 3,
+    title: "longest-substring-without-repeating-characters",
+    difficulty: "Med",
+  },
+  { id: 5, title: "longest-palindromic-substring", difficulty: "Med" },
+  { id: 133, title: "clone-graph", difficulty: "Med" },
+  { id: 261, title: "graph-valid-tree", difficulty: "Med" },
+  { id: 647, title: "palindromic-substrings", difficulty: "Med" },
+  { id: 11, title: "container-with-most-water", difficulty: "Med" },
+  { id: 139, title: "word-break", difficulty: "Med" },
+  { id: 141, title: "linked-list-cycle", difficulty: "Easy" },
+  { id: 268, title: "missing-number", difficulty: "Easy" },
+  { id: 15, title: "3sum", difficulty: "Med" },
+  { id: 143, title: "reorder-list", difficulty: "Med" },
+  { id: 269, title: "alien-dictionary", difficulty: "Hard" },
+  { id: 271, title: "encode-and-decode-strings", difficulty: "Med" },
+  { id: 19, title: "remove-nth-node-from-end-of-list", difficulty: "Med" },
+  { id: 20, title: "valid-parentheses", difficulty: "Easy" },
+  { id: 21, title: "merge-two-sorted-lists", difficulty: "Easy" },
+  { id: 23, title: "merge-k-sorted-lists", difficulty: "Hard" },
+  { id: 152, title: "maximum-product-subarray", difficulty: "Med" },
+  {
+    id: 153,
+    title: "find-minimum-in-rotated-sorted-array",
+    difficulty: "Med",
+  },
+  { id: 33, title: "search-in-rotated-sorted-array", difficulty: "Med" },
+  { id: 417, title: "pacific-atlantic-water-flow", difficulty: "Med" },
+  { id: 39, title: "combination-sum", difficulty: "Med" },
+  { id: 295, title: "find-median-from-data-stream", difficulty: "Hard" },
+  {
+    id: 297,
+    title: "serialize-and-deserialize-binary-tree",
+    difficulty: "Hard",
+  },
+  {
+    id: 424,
+    title: "longest-repeating-character-replacement",
+    difficulty: "Med",
+  },
+  { id: 300, title: "longest-increasing-subsequence", difficulty: "Med" },
+  { id: 48, title: "rotate-image", difficulty: "Med" },
+  { id: 49, title: "group-anagrams", difficulty: "Med" },
+  { id: 435, title: "non-overlapping-intervals", difficulty: "Med" },
+  { id: 53, title: "maximum-subarray", difficulty: "Easy" },
+  { id: 54, title: "spiral-matrix", difficulty: "Med" },
+  { id: 55, title: "jump-game", difficulty: "Med" },
+  { id: 56, title: "merge-intervals", difficulty: "Med" },
+  { id: 57, title: "insert-interval", difficulty: "Hard" },
+  { id: 572, title: "subtree-of-another-tree", difficulty: "Easy" },
+  { id: 62, title: "unique-paths", difficulty: "Med" },
+  { id: 190, title: "reverse-bits", difficulty: "Easy" },
+  { id: 191, title: "number-of-1-bits", difficulty: "Easy" },
+  { id: 322, title: "coin-change", difficulty: "Med" },
+  {
+    id: 323,
+    title: "number-of-connected-components-in-an-undirected-graph",
+    difficulty: "Med",
+  },
+  { id: 70, title: "climbing-stairs", difficulty: "Easy" },
+  { id: 198, title: "house-robber", difficulty: "Med" },
+  { id: 200, title: "number-of-islands", difficulty: "Med" },
+  { id: 73, title: "set-matrix-zeroes", difficulty: "Med" },
+  { id: 76, title: "minimum-window-substring", difficulty: "Hard" },
+  { id: 206, title: "reverse-linked-list", difficulty: "Easy" },
+  { id: 79, title: "word-search", difficulty: "Med" },
+  { id: 207, title: "course-schedule", difficulty: "Med" },
+  { id: 208, title: "implement-trie-prefix-tree", difficulty: "Med" },
+  { id: 338, title: "counting-bits", difficulty: "Easy" },
+  {
+    id: 211,
+    title: "design-add-and-search-words-data-structure",
+    difficulty: "Med",
+  },
+  { id: 212, title: "word-search-ii", difficulty: "Hard" },
+  { id: 213, title: "house-robber-ii", difficulty: "Med" },
+  { id: 217, title: "contains-duplicate", difficulty: "Easy" },
+  { id: 91, title: "decode-ways", difficulty: "Med" },
+  { id: 347, title: "top-k-frequent-elements", difficulty: "Med" },
+  { id: 253, title: "meeting-rooms-ii", difficulty: "Med" },
+  { id: 98, title: "validate-binary-search-tree", difficulty: "Med" },
+  { id: 226, title: "invert-binary-tree", difficulty: "Easy" },
+  { id: 100, title: "same-tree", difficulty: "Easy" },
+  { id: 1143, title: "longest-common-subsequence", difficulty: "Med" },
+  { id: 102, title: "binary-tree-level-order-traversal", difficulty: "Med" },
+  { id: 230, title: "kth-smallest-element-in-a-bst", difficulty: "Med" },
+  { id: 104, title: "maximum-depth-of-binary-tree", difficulty: "Easy" },
+  {
+    id: 105,
+    title: "construct-binary-tree-from-preorder-and-inorder-traversal",
+    difficulty: "Med",
+  },
+  {
+    id: 235,
+    title: "lowest-common-ancestor-of-a-binary-search-tree",
+    difficulty: "Easy",
+  },
+  { id: 238, title: "product-of-array-except-self", difficulty: "Med" },
+  { id: 242, title: "valid-anagram", difficulty: "Easy" },
+  { id: 371, title: "sum-of-two-integers", difficulty: "Med" },
+  { id: 252, title: "meeting-rooms", difficulty: "Easy" },
+  { id: 121, title: "best-time-to-buy-and-sell-stock", difficulty: "Easy" },
+  { id: 124, title: "binary-tree-maximum-path-sum", difficulty: "Hard" },
+  { id: 125, title: "valid-palindrome", difficulty: "Easy" },
+];
+
+export const problemMap: Record<Problem["title"], Problem> = problems.reduce(
+  (map, problem) => {
+    map[problem.title] = problem;
+    return map;
+  },
+  {} as Record<Problem["title"], Problem>,
+);
+
+export const problemCounts = problems.reduce(
+  (acc, problem) => {
+    acc[problem.difficulty] += 1;
+    return acc;
+  },
+  { Easy: 0, Med: 0, Hard: 0 },
+);

src/api/services/process/processService.test.ts

@@ -2,7 +2,7 @@ import { faker } from "@faker-js/faker";
 import { expect, test } from "vitest";
 import { mock } from "vitest-mock-extended";
 
-import { problems } from "../../../constants/problems";
+import { problems } from "../../constants/problems";
 import type { Config } from "../../config/types";
 import { Grade, MemberIdentity, Submission } from "../types";
 import { createProcessService } from "./processService";

src/api/services/process/processService.ts

@@ -1,4 +1,4 @@
-import { problemMap } from "../../../constants/problems";
+import { problemMap } from "../../constants/problems";
 import type { Config } from "../../config/types";
 import {
   Grade,

src/api/services/types.ts

@@ -22,9 +22,10 @@ export type Submission = {
   language: string;
 };
 
-export type Difficulty = "easy" | "medium" | "hard";
+export type Difficulty = "Easy" | "Med" | "Hard";
 
 export type Problem = {
+  id: number;
   title: string;
   difficulty: Difficulty;
 };

src/components/Progress/Progress.module.css

@@ -1,19 +1,25 @@
 .progress {
   width: 80%;
   margin: 0 auto;
-  margin-top: 100px;
+  margin-top: 120px;
+  max-width: 1200px;
+}
+
+h1 {
+  font-size: 24px;
 }
 
 .container {
   display: flex;
   justify-content: space-between;
+  margin-top: 30px;
+  gap: 20px;
 }
 
-.profile {
+.sideBar {
   width: 20%;
 }
 
 .problemList {
-  margin-top: 77px;
-  width: 80%;
+  width: 75%;
 }

src/components/Progress/Progress.stories.tsx

@@ -1,10 +1,34 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Progress from "./Progress";
+import { http, HttpResponse } from "msw";
 
-const meta = {
+const meta: Meta<typeof Progress> = {
   component: Progress,
-} satisfies Meta<typeof Progress>;
+  parameters: {
+    query: {
+      member: "sunjae95",
+    },
+    msw: {
+      handlers: [
+        http.get("https://api.github.com/orgs/DaleStudy/teams", () =>
+          HttpResponse.json([{ name: "leetcode02" }]),
+        ),
+        http.get(
+          "https://api.github.com/orgs/DaleStudy/teams/leetcode02/members",
+          () =>
+            HttpResponse.json([
+              {
+                login: "Sunjae95",
+                avatar_url:
+                  "https://avatars.githubusercontent.com/u/63578094?v=4",
+              },
+            ]),
+        ),
+      ],
+    },
+  },
+};
 
 export default meta;
 
-export const Default: StoryObj<typeof meta> = {};
+export const Default: StoryObj<typeof Progress> = {};

src/components/Progress/Progress.test.tsx

@@ -1,13 +1,37 @@
 import { faker } from "@faker-js/faker";
+import { expect } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { expect, test, vi } from "vitest";
+import Progress from "./Progress";
 import { mock } from "vitest-mock-extended";
-import { type Member, Grade } from "../../api/services/types";
 import useMembers from "../../hooks/useMembers";
-import Progress from "./Progress";
+import { test, vi } from "vitest";
+import { type Member, Grade } from "../../api/services/types";
 
 vi.mock("../../hooks/useMembers");
 
+test("render the site header", () => {
+  vi.mocked(useMembers).mockReturnValue(
+    mock({
+      isLoading: false,
+      error: null,
+      members: [mockMember({ id: "sam" })],
+      totalCohorts: 3, // Add missing property
+      filter: { name: "", cohort: null }, // Add missing property
+      setFilter: vi.fn(), // Add mock function
+    }),
+  );
+
+  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({
@@ -53,9 +77,9 @@ test("render page when query parameter is passed", async () => {
   mockedMember.id = mockedQueryParam;
   mockedMember.name = "soundmin";
   mockedMember.solvedProblems = [
-    { title: "Problem 1", difficulty: "easy" },
-    { title: "Problem 2", difficulty: "medium" },
-    { title: "Problem 3", difficulty: "easy" },
+    { id: 31, title: "Problem 1", difficulty: "Easy" },
+    { id: 52, title: "Problem 2", difficulty: "Med" },
+    { id: 30, title: "Problem 3", difficulty: "Hard" },
   ];
 
   vi.mocked(useMembers).mockReturnValue(

src/components/Progress/Progress.tsx

@@ -1,7 +1,13 @@
-import { getMembers } from "../../api/getMembers";
-import { problemCounts, problemMap } from "../../constants/problems";
 import Sidebar from "../Sidebar/Sidebar";
-import Table from "../Table/Table";
+import Footer from "../Footer/Footer";
+import Header from "../Header/Header";
+import { Table } from "../Table/Table";
+import { getMembers } from "../../api/getMembers";
+import {
+  problems,
+  problemMap,
+  problemCounts,
+} from "../../api/constants/problems";
 
 import useMembers from "../../hooks/useMembers";
 import styles from "./Progress.module.css";
@@ -19,9 +25,9 @@ export default function Progress() {
 
   const totalProblems = Object.values(problemMap).length;
   const {
-    easy: easyProblemsCount,
-    medium: mediumProblemsCount,
-    hard: hardProblemsCount,
+    Easy: easyProblemsCount,
+    Med: mediumProblemsCount,
+    Hard: hardProblemsCount,
   } = problemCounts;
 
   const solvedCounts = member.solvedProblems.reduce(
@@ -30,13 +36,13 @@ export default function Progress() {
       acc.total += 1;
       return acc;
     },
-    { easy: 0, medium: 0, hard: 0, total: 0 },
+    { Easy: 0, Med: 0, Hard: 0, total: 0 },
   );
 
   const {
-    easy: easySolved,
-    medium: mediumSolved,
-    hard: hardSolved,
+    Easy: easySolved,
+    Med: mediumSolved,
+    Hard: hardSolved,
     total: totalSolved,
   } = solvedCounts;
 
@@ -48,33 +54,12 @@ export default function Progress() {
 
   const profileUrl = member.profileUrl || "Logo.png";
 
-  // To be updated, this will be replaced by the real data in a seperate pr.
-  const mockedProblems = [
-    {
-      id: 1,
-      title: "Problem 1",
-      difficulty: "easy",
-      completed: true,
-    },
-    {
-      id: 2,
-      title: "Problem 2",
-      difficulty: "medium",
-      completed: false,
-    },
-    {
-      id: 3,
-      title: "Problem 3",
-      difficulty: "hard",
-      completed: true,
-    },
-  ];
-
   return (
     <main className={styles.progress}>
+      <Header />
       <h1>풀이 현황</h1>
       <div className={styles.container}>
-        <section aria-labelledby="profile">
+        <section className={styles.sideBar} aria-labelledby="profile">
           <Sidebar
             githubUsername={member.name}
             easyProgress={easyProgress}
@@ -89,9 +74,11 @@ export default function Progress() {
         </section>
 
         <section className={styles.problemList} aria-labelledby="problem-list">
-          <Table problems={mockedProblems} />
+          <Table problems={problems} solvedProblems={member.solvedProblems} />
         </section>
       </div>
+
+      <Footer />
     </main>
   );
 }

src/components/Table/Table.module.css

@@ -34,6 +34,7 @@ tr:nth-child(even) {
   padding-left: 17px;
   text-align: left;
   width: 52%;
+  font-weight: var(--font-weight-regular);
 }
 
 /* Difficulty column */
@@ -43,6 +44,10 @@ tr:nth-child(even) {
   width: 25%;
 }
 
+.difficultyData {
+  font-weight: var(--font-weight-medium);
+}
+
 .easy {
   color: #1cbaba;
 }