From 87789f53487589c705c6b32cfacabd629dc8bd30 Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Fri, 22 Nov 2024 20:29:28 -0500
Subject: [PATCH 1/8] feat : convert profileurl to pass as prop

---
 src/components/Aside/Aside.stories.tsx    | 47 ++++++++++++
 src/components/Aside/Aside.test.tsx       | 63 ++++++++++++++++
 src/components/Aside/Aside.tsx            | 92 +++++++++++++++++++++++
 src/components/Progress/Progress.test.tsx | 38 ++++++++--
 src/components/Progress/Progress.tsx      | 46 ++++--------
 src/components/Sidebar/Sidebar.module.css |  8 ++
 6 files changed, 255 insertions(+), 39 deletions(-)
 create mode 100644 src/components/Aside/Aside.stories.tsx
 create mode 100644 src/components/Aside/Aside.test.tsx
 create mode 100644 src/components/Aside/Aside.tsx

diff --git a/src/components/Aside/Aside.stories.tsx b/src/components/Aside/Aside.stories.tsx
new file mode 100644
index 00000000..3820d94c
--- /dev/null
+++ b/src/components/Aside/Aside.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Aside from "./Aside";
+import { Grade } from "../../api/services/common/types.ts";
+
+const meta = {
+  component: Aside,
+} satisfies Meta<typeof Aside>;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {
+  args: {
+    githubUsername: "testuser",
+    easyTasks: "5/10",
+    mediumTasks: "8/10",
+    hardTasks: "3/5",
+    solvedTasks: 16,
+    totalTasks: 25,
+    profile_url: "https://example.com/profile.jpg", // Provide a valid URL or mock
+    cohort: 3,
+    grade: Grade.SMALL_TREE, // Assign an appropriate grade here
+  },
+};
+
+export const HighProgress: StoryObj<typeof meta> = {
+  args: {
+    ...Default.args,
+    solvedTasks: 28,
+    totalTasks: 30,
+    easyTasks: "10/10",
+    mediumTasks: "10/10",
+    hardTasks: "8/10",
+    grade: Grade.BIG_TREE, // Higher grade for more progress
+  },
+};
+
+export const NoTasks: StoryObj<typeof meta> = {
+  args: {
+    ...Default.args,
+    easyTasks: "0/0",
+    mediumTasks: "0/0",
+    hardTasks: "0/0",
+    solvedTasks: 0,
+    totalTasks: 0,
+    grade: Grade.SEED, // Minimal grade due to no tasks solved
+  },
+};
diff --git a/src/components/Aside/Aside.test.tsx b/src/components/Aside/Aside.test.tsx
new file mode 100644
index 00000000..0e347a08
--- /dev/null
+++ b/src/components/Aside/Aside.test.tsx
@@ -0,0 +1,63 @@
+import { test, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Aside from "./Aside";
+import { Grade } from "../../api/services/common/types.ts";
+
+test("renders the Aside component", () => {
+  render(
+    <Aside
+      githubUsername="testuser"
+      easyTasks="10/15"
+      mediumTasks="5/10"
+      hardTasks="2/5"
+      solvedTasks={17}
+      totalTasks={30}
+      profile_url="https://example.com/profile.jpg"
+      cohort={3}
+      grade={Grade.SMALL_TREE}
+    />,
+  );
+
+  const aside = screen.getByRole("complementary");
+  expect(aside).toBeInTheDocument();
+});
+
+test("displays the username", () => {
+  render(
+    <Aside
+      githubUsername="testuser"
+      easyTasks="10/15"
+      mediumTasks="5/10"
+      hardTasks="2/5"
+      solvedTasks={17}
+      totalTasks={30}
+      profile_url="https://example.com/profile.jpg"
+      cohort={3}
+      grade={Grade.SMALL_TREE}
+    />,
+  );
+
+  const username = screen.getByText(/testuser/i);
+  expect(username).toBeInTheDocument();
+});
+
+test("renders the button link with the text", () => {
+  render(
+    <Aside
+      githubUsername="testuser"
+      easyTasks="10/15"
+      mediumTasks="5/10"
+      hardTasks="2/5"
+      solvedTasks={17}
+      totalTasks={30}
+      profile_url="https://example.com/profile.jpg"
+      cohort={3}
+      grade={Grade.SMALL_TREE}
+    />,
+  );
+
+  const buttonLink = screen.getByRole("link", {
+    name: /리더보드로 돌아가기/i,
+  });
+  expect(buttonLink).toBeInTheDocument();
+});
diff --git a/src/components/Aside/Aside.tsx b/src/components/Aside/Aside.tsx
new file mode 100644
index 00000000..8de88bdd
--- /dev/null
+++ b/src/components/Aside/Aside.tsx
@@ -0,0 +1,92 @@
+import { useEffect } from "react";
+import styles from "./Aside.module.css";
+import Seed from "../../assets/Seed.png";
+import Sprout from "../../assets/Sprout.png";
+import YoungTree from "../../assets/YoungTree.png";
+import LargeTree from "../../assets/LargeTree.png";
+import { Grade } from "../../api/services/common/types.ts";
+
+interface AsideProps {
+  githubUsername: string;
+  easyTasks: string;
+  mediumTasks: string;
+  hardTasks: string;
+  solvedTasks: number;
+  totalTasks: number;
+  profile_url: string;
+  cohort: number;
+  grade: Grade;
+}
+
+const imageTable = {
+  SEED: Seed,
+  SPROUT: Sprout,
+  SMALL_TREE: YoungTree,
+  BIG_TREE: LargeTree,
+};
+
+
+export default function Aside({
+  githubUsername,
+  easyTasks,
+  mediumTasks,
+  hardTasks,
+  solvedTasks,
+  totalTasks,
+  profile_url,
+  cohort,
+  grade,
+}: AsideProps) {
+  const progressPercent = Math.min((solvedTasks / totalTasks) * 100, 100);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty(
+      "--progress",
+      `${progressPercent}%`,
+    );
+  }, [progressPercent]);
+
+  return (
+    <aside >
+      <div className={styles.container}>
+        <span className={styles.cohort}>{cohort}기</span>
+        <section className={styles.profile}>
+          <div className={styles.avatar}>
+            <div className={styles["progress-circle"]}></div>
+            <img src={profile_url} alt="User's profile picture" />
+          </div>
+          <div className={styles.progress}>
+          <a href={`https://github.com/DaleStudy/leetcode-study/pulls?q=is%3Apr+author%3A${githubUsername}`}>
+  풀이 보기
+</a>
+          </div>
+          <p className={styles.username}>{githubUsername}</p>
+        </section>
+
+        <section className={styles.currentStatus}>
+          <figure>
+          <img src={imageTable[grade]} alt={`${grade} 등급`} />
+          </figure>
+        </section>
+        <section className={styles.taskCounts}>
+          <div className={styles.task}>
+            <span className={styles.easy}>EASY</span>
+            <span>{easyTasks}</span>
+          </div>
+          <div className={styles.task}>
+            <span className={styles.medium}>MEDIUM</span>
+            <span>{mediumTasks}</span>
+          </div>
+          <div className={styles.task}>
+            <span className={styles.hard}>HARD</span>
+            <span>{hardTasks}</span>
+          </div>
+        </section>
+      </div>
+      <a href="../Leaderboard/Leaderboard.tsx" className={styles.buttonLink}>
+        리더보드로 돌아가기
+      </a>
+    </aside>
+  );
+}
+
diff --git a/src/components/Progress/Progress.test.tsx b/src/components/Progress/Progress.test.tsx
index 78c6e991..55411954 100644
--- a/src/components/Progress/Progress.test.tsx
+++ b/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(
@@ -94,4 +118,4 @@ function mockMember({ id = faker.internet.userName() }: { id?: string } = {}) {
     profileUrl: faker.internet.url(),
     solvedProblems: [],
   });
-}
+}
\ No newline at end of file
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index bc11aff9..4fa2d8e1 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -1,7 +1,11 @@
 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 "../../constants/problems";
 
 import useMembers from "../../hooks/useMembers";
 import styles from "./Progress.module.css";
@@ -19,9 +23,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 +34,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 +52,11 @@ 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}>
       <h1>풀이 현황</h1>
       <div className={styles.container}>
-        <section aria-labelledby="profile">
+        <section className={styles.sideBar} aria-labelledby="profile">
           <Sidebar
             githubUsername={member.name}
             easyProgress={easyProgress}
@@ -89,7 +71,7 @@ export default function Progress() {
         </section>
 
         <section className={styles.problemList} aria-labelledby="problem-list">
-          <Table problems={mockedProblems} />
+          <Table problems={problems} solvedProblems={member.solvedProblems} />
         </section>
       </div>
     </main>
diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css
index 4f8c6e59..63a91b26 100644
--- a/src/components/Sidebar/Sidebar.module.css
+++ b/src/components/Sidebar/Sidebar.module.css
@@ -1,10 +1,18 @@
 aside {
+<<<<<<< HEAD:src/components/Sidebar/Sidebar.module.css
   position: sticky;
   top: 87px;
   width: 260px;
   height: calc(100vh - 40px);
   overflow-y: auto;
   align-items: center;
+=======
+  position: sticky; /* Make the aside sticky */
+  top: 20px; /* Adjust this value to control when the sidebar becomes sticky */
+  width: 250px; /* Adjust the width as needed */
+  height: calc(100vh - 40px); /* Full viewport height minus top/bottom padding */
+  overflow-y: auto; /* Allow vertical scrolling inside the aside */
+>>>>>>> 4743ef2 (feat : convert profileurl to pass as prop):src/components/Aside/Aside.module.css
 }
 
 .cohort {

From c3d14d6e3a54a50ee67f33e86efc4b5d8f18beb6 Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Sat, 23 Nov 2024 15:03:40 -0500
Subject: [PATCH 2/8] feat : complete progress component

---
 src/components/Aside/Aside.stories.tsx    | 47 ------------
 src/components/Aside/Aside.test.tsx       | 63 ----------------
 src/components/Aside/Aside.tsx            | 92 -----------------------
 src/components/Progress/Progress.test.tsx | 41 +++++++++-
 src/components/Progress/Progress.tsx      | 36 ++++++++-
 src/components/Sidebar/Sidebar.module.css | 10 +--
 src/components/Table/Table.stories.tsx    |  2 +-
 src/components/Table/Table.test.tsx       |  2 +-
 src/components/Table/Table.tsx            |  2 +-
 9 files changed, 79 insertions(+), 216 deletions(-)
 delete mode 100644 src/components/Aside/Aside.stories.tsx
 delete mode 100644 src/components/Aside/Aside.test.tsx
 delete mode 100644 src/components/Aside/Aside.tsx

diff --git a/src/components/Aside/Aside.stories.tsx b/src/components/Aside/Aside.stories.tsx
deleted file mode 100644
index 3820d94c..00000000
--- a/src/components/Aside/Aside.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Aside from "./Aside";
-import { Grade } from "../../api/services/common/types.ts";
-
-const meta = {
-  component: Aside,
-} satisfies Meta<typeof Aside>;
-
-export default meta;
-
-export const Default: StoryObj<typeof meta> = {
-  args: {
-    githubUsername: "testuser",
-    easyTasks: "5/10",
-    mediumTasks: "8/10",
-    hardTasks: "3/5",
-    solvedTasks: 16,
-    totalTasks: 25,
-    profile_url: "https://example.com/profile.jpg", // Provide a valid URL or mock
-    cohort: 3,
-    grade: Grade.SMALL_TREE, // Assign an appropriate grade here
-  },
-};
-
-export const HighProgress: StoryObj<typeof meta> = {
-  args: {
-    ...Default.args,
-    solvedTasks: 28,
-    totalTasks: 30,
-    easyTasks: "10/10",
-    mediumTasks: "10/10",
-    hardTasks: "8/10",
-    grade: Grade.BIG_TREE, // Higher grade for more progress
-  },
-};
-
-export const NoTasks: StoryObj<typeof meta> = {
-  args: {
-    ...Default.args,
-    easyTasks: "0/0",
-    mediumTasks: "0/0",
-    hardTasks: "0/0",
-    solvedTasks: 0,
-    totalTasks: 0,
-    grade: Grade.SEED, // Minimal grade due to no tasks solved
-  },
-};
diff --git a/src/components/Aside/Aside.test.tsx b/src/components/Aside/Aside.test.tsx
deleted file mode 100644
index 0e347a08..00000000
--- a/src/components/Aside/Aside.test.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { test, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import Aside from "./Aside";
-import { Grade } from "../../api/services/common/types.ts";
-
-test("renders the Aside component", () => {
-  render(
-    <Aside
-      githubUsername="testuser"
-      easyTasks="10/15"
-      mediumTasks="5/10"
-      hardTasks="2/5"
-      solvedTasks={17}
-      totalTasks={30}
-      profile_url="https://example.com/profile.jpg"
-      cohort={3}
-      grade={Grade.SMALL_TREE}
-    />,
-  );
-
-  const aside = screen.getByRole("complementary");
-  expect(aside).toBeInTheDocument();
-});
-
-test("displays the username", () => {
-  render(
-    <Aside
-      githubUsername="testuser"
-      easyTasks="10/15"
-      mediumTasks="5/10"
-      hardTasks="2/5"
-      solvedTasks={17}
-      totalTasks={30}
-      profile_url="https://example.com/profile.jpg"
-      cohort={3}
-      grade={Grade.SMALL_TREE}
-    />,
-  );
-
-  const username = screen.getByText(/testuser/i);
-  expect(username).toBeInTheDocument();
-});
-
-test("renders the button link with the text", () => {
-  render(
-    <Aside
-      githubUsername="testuser"
-      easyTasks="10/15"
-      mediumTasks="5/10"
-      hardTasks="2/5"
-      solvedTasks={17}
-      totalTasks={30}
-      profile_url="https://example.com/profile.jpg"
-      cohort={3}
-      grade={Grade.SMALL_TREE}
-    />,
-  );
-
-  const buttonLink = screen.getByRole("link", {
-    name: /리더보드로 돌아가기/i,
-  });
-  expect(buttonLink).toBeInTheDocument();
-});
diff --git a/src/components/Aside/Aside.tsx b/src/components/Aside/Aside.tsx
deleted file mode 100644
index 8de88bdd..00000000
--- a/src/components/Aside/Aside.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useEffect } from "react";
-import styles from "./Aside.module.css";
-import Seed from "../../assets/Seed.png";
-import Sprout from "../../assets/Sprout.png";
-import YoungTree from "../../assets/YoungTree.png";
-import LargeTree from "../../assets/LargeTree.png";
-import { Grade } from "../../api/services/common/types.ts";
-
-interface AsideProps {
-  githubUsername: string;
-  easyTasks: string;
-  mediumTasks: string;
-  hardTasks: string;
-  solvedTasks: number;
-  totalTasks: number;
-  profile_url: string;
-  cohort: number;
-  grade: Grade;
-}
-
-const imageTable = {
-  SEED: Seed,
-  SPROUT: Sprout,
-  SMALL_TREE: YoungTree,
-  BIG_TREE: LargeTree,
-};
-
-
-export default function Aside({
-  githubUsername,
-  easyTasks,
-  mediumTasks,
-  hardTasks,
-  solvedTasks,
-  totalTasks,
-  profile_url,
-  cohort,
-  grade,
-}: AsideProps) {
-  const progressPercent = Math.min((solvedTasks / totalTasks) * 100, 100);
-
-  useEffect(() => {
-    document.documentElement.style.setProperty(
-      "--progress",
-      `${progressPercent}%`,
-    );
-  }, [progressPercent]);
-
-  return (
-    <aside >
-      <div className={styles.container}>
-        <span className={styles.cohort}>{cohort}기</span>
-        <section className={styles.profile}>
-          <div className={styles.avatar}>
-            <div className={styles["progress-circle"]}></div>
-            <img src={profile_url} alt="User's profile picture" />
-          </div>
-          <div className={styles.progress}>
-          <a href={`https://github.com/DaleStudy/leetcode-study/pulls?q=is%3Apr+author%3A${githubUsername}`}>
-  풀이 보기
-</a>
-          </div>
-          <p className={styles.username}>{githubUsername}</p>
-        </section>
-
-        <section className={styles.currentStatus}>
-          <figure>
-          <img src={imageTable[grade]} alt={`${grade} 등급`} />
-          </figure>
-        </section>
-        <section className={styles.taskCounts}>
-          <div className={styles.task}>
-            <span className={styles.easy}>EASY</span>
-            <span>{easyTasks}</span>
-          </div>
-          <div className={styles.task}>
-            <span className={styles.medium}>MEDIUM</span>
-            <span>{mediumTasks}</span>
-          </div>
-          <div className={styles.task}>
-            <span className={styles.hard}>HARD</span>
-            <span>{hardTasks}</span>
-          </div>
-        </section>
-      </div>
-      <a href="../Leaderboard/Leaderboard.tsx" className={styles.buttonLink}>
-        리더보드로 돌아가기
-      </a>
-    </aside>
-  );
-}
-
diff --git a/src/components/Progress/Progress.test.tsx b/src/components/Progress/Progress.test.tsx
index 55411954..263b9162 100644
--- a/src/components/Progress/Progress.test.tsx
+++ b/src/components/Progress/Progress.test.tsx
@@ -1,11 +1,37 @@
+<<<<<<< HEAD
 import { faker } from "@faker-js/faker";
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
+import { faker } from "@faker-js/faker";
+=======
+<<<<<<< HEAD
+>>>>>>> 2647efc (feat : convert profileurl to pass as prop)
+=======
+>>>>>>> 18e4279 (feat : complete progress component)
+>>>>>>> da91128 (feat : complete progress component)
 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";
+<<<<<<< HEAD
+import { type Member, Grade } from "../../api/services/types";
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
 import { type Member, Grade } from "../../api/services/types";
+=======
+<<<<<<< HEAD
+import { Member } from "../../api/services/types";
+=======
+>>>>>>> 4743ef2 (feat : convert profileurl to pass as prop)
+>>>>>>> 2647efc (feat : convert profileurl to pass as prop)
+=======
+import { Member } from "../../api/services/types";
+>>>>>>> 18e4279 (feat : complete progress component)
+>>>>>>> da91128 (feat : complete progress component)
 
 vi.mock("../../hooks/useMembers");
 
@@ -107,6 +133,12 @@ test("render page when query parameter is passed", async () => {
   // Wait for the member's name to appear
   const userNameElement = await screen.findByText(mockedMember.name);
   expect(userNameElement).toBeInTheDocument();
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+=======
+>>>>>>> 4743ef2 (feat : convert profileurl to pass as prop)
+>>>>>>> da91128 (feat : complete progress component)
 });
 
 function mockMember({ id = faker.internet.userName() }: { id?: string } = {}) {
@@ -118,4 +150,11 @@ function mockMember({ id = faker.internet.userName() }: { id?: string } = {}) {
     profileUrl: faker.internet.url(),
     solvedProblems: [],
   });
-}
\ No newline at end of file
+<<<<<<< HEAD
+}
+=======
+}
+=======
+});
+>>>>>>> 18e4279 (feat : complete progress component)
+>>>>>>> da91128 (feat : complete progress component)
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index 4fa2d8e1..e1a185d4 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -3,7 +3,11 @@ import { problemCounts, problemMap } from "../../constants/problems";
 import Sidebar from "../Sidebar/Sidebar";
 import Footer from "../Footer/Footer";
 import Header from "../Header/Header";
+<<<<<<< HEAD
 import { Table } from "../Table/Table";
+=======
+import Table from "../Table/Table";
+>>>>>>> da91128 (feat : complete progress component)
 import { getMembers } from "../../api/getMembers";
 import { problems, problemMap, problemCounts } from "../../constants/problems";
 
@@ -11,7 +15,11 @@ import useMembers from "../../hooks/useMembers";
 import styles from "./Progress.module.css";
 
 export default function Progress() {
+<<<<<<< HEAD
   const { members, isLoading, error } = useMembers({ getMembers });
+=======
+  const { members, isLoading, error } = useMembers({ getMembers });  
+>>>>>>> da91128 (feat : complete progress component)
 
   const memberId = new URL(location.href).searchParams.get("member");
 
@@ -52,6 +60,32 @@ export default function Progress() {
 
   const profileUrl = member.profileUrl || "Logo.png";
 
+<<<<<<< HEAD
+=======
+  // To be updated, this will be replaced by the real data in a seperate pr.
+  const mockedProblems = [
+  // Calculate total tasks dynamically
+    {
+      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,
+    },
+  ];
+
+>>>>>>> da91128 (feat : complete progress component)
   return (
     <main className={styles.progress}>
       <h1>풀이 현황</h1>
@@ -76,4 +110,4 @@ export default function Progress() {
       </div>
     </main>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css
index 63a91b26..352730a5 100644
--- a/src/components/Sidebar/Sidebar.module.css
+++ b/src/components/Sidebar/Sidebar.module.css
@@ -1,18 +1,10 @@
 aside {
-<<<<<<< HEAD:src/components/Sidebar/Sidebar.module.css
   position: sticky;
   top: 87px;
   width: 260px;
   height: calc(100vh - 40px);
   overflow-y: auto;
   align-items: center;
-=======
-  position: sticky; /* Make the aside sticky */
-  top: 20px; /* Adjust this value to control when the sidebar becomes sticky */
-  width: 250px; /* Adjust the width as needed */
-  height: calc(100vh - 40px); /* Full viewport height minus top/bottom padding */
-  overflow-y: auto; /* Allow vertical scrolling inside the aside */
->>>>>>> 4743ef2 (feat : convert profileurl to pass as prop):src/components/Aside/Aside.module.css
 }
 
 .cohort {
@@ -196,4 +188,4 @@ aside {
       transform: translateY(8px);
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index 8a30c657..7941b134 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -36,4 +36,4 @@ export const Default: StoryObj<typeof Table> = {
       },
     ],
   },
-};
+};
\ No newline at end of file
diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
index b996c779..5f38e281 100644
--- a/src/components/Table/Table.test.tsx
+++ b/src/components/Table/Table.test.tsx
@@ -42,4 +42,4 @@ test("renders icon for completed/incomplete problems", () => {
     const iconLabel = completed ? "Completed problem" : "Incomplete problem";
     expect(within(row).getByLabelText(iconLabel)).toBeInTheDocument();
   });
-});
+});
\ No newline at end of file
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 84ff60df..f685c209 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -116,4 +116,4 @@ function Table({ problems }: TableProps) {
   );
 }
 
-export default Table;
+export default Table;
\ No newline at end of file

From cae807ad7a4e639961b9303fdb39c3e6dd792233 Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Tue, 3 Dec 2024 21:36:37 -0500
Subject: [PATCH 3/8] feat : add id to problems

---
 src/constants/problems.ts | 162 ++++++++++++++++++--------------------
 1 file changed, 75 insertions(+), 87 deletions(-)

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

From d0cbb0a2e1ef4899de40dc20339a44bb588d29a7 Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Tue, 3 Dec 2024 22:07:02 -0500
Subject: [PATCH 4/8] update : change the difficulty to adjust to design and
 related codes to match it

---
 src/api/services/types.ts                 |   3 +-
 src/components/Progress/Progress.test.tsx |   6 +
 src/components/Progress/Progress.tsx      |   9 ++
 src/components/Table/Table.tsx            |  28 ++--
 src/constants/problems.ts                 | 152 +++++++++++-----------
 5 files changed, 112 insertions(+), 86 deletions(-)

diff --git a/src/api/services/types.ts b/src/api/services/types.ts
index 2e973d22..51653b4d 100644
--- a/src/api/services/types.ts
+++ b/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: string;
   title: string;
   difficulty: Difficulty;
 };
diff --git a/src/components/Progress/Progress.test.tsx b/src/components/Progress/Progress.test.tsx
index 263b9162..55bf4b11 100644
--- a/src/components/Progress/Progress.test.tsx
+++ b/src/components/Progress/Progress.test.tsx
@@ -103,9 +103,15 @@ test("render page when query parameter is passed", async () => {
   mockedMember.id = mockedQueryParam;
   mockedMember.name = "soundmin";
   mockedMember.solvedProblems = [
+<<<<<<< HEAD
     { id: 31, title: "Problem 1", difficulty: "Easy" },
     { id: 52, title: "Problem 2", difficulty: "Med" },
     { id: 30, title: "Problem 3", difficulty: "Hard" },
+=======
+    { id: 31, title: "Problem 1", difficulty: "easy" },
+    { id: 52, title: "Problem 2", difficulty: "medium" },
+    { id: 30, title: "Problem 3", difficulty: "easy" },
+>>>>>>> de28551 (update : change the difficulty to adjust to design and related codes to match it)
   ];
 
   vi.mocked(useMembers).mockReturnValue(
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index e1a185d4..70555b62 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -60,6 +60,7 @@ export default function Progress() {
 
   const profileUrl = member.profileUrl || "Logo.png";
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 =======
   // To be updated, this will be replaced by the real data in a seperate pr.
@@ -86,6 +87,8 @@ export default function Progress() {
   ];
 
 >>>>>>> da91128 (feat : complete progress component)
+=======
+>>>>>>> de28551 (update : change the difficulty to adjust to design and related codes to match it)
   return (
     <main className={styles.progress}>
       <h1>풀이 현황</h1>
@@ -105,7 +108,13 @@ export default function Progress() {
         </section>
 
         <section className={styles.problemList} aria-labelledby="problem-list">
+<<<<<<< HEAD
           <Table problems={problems} solvedProblems={member.solvedProblems} />
+=======
+          <Table problems={problems}
+                 solvedProblems={member.solvedProblems}
+          />
+>>>>>>> de28551 (update : change the difficulty to adjust to design and related codes to match it)
         </section>
       </div>
     </main>
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index f685c209..602c2c5b 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,15 +1,14 @@
 import styles from "./Table.module.css";
 
-// temporary interface for now until we have data fetching hook
 interface Problem {
   id: number;
   title: string;
   difficulty: string;
-  completed: boolean;
 }
 
 interface TableProps {
   problems: Problem[];
+  solvedProblems: Problem[];
 }
 
 function getTaskIcon(completed: boolean) {
@@ -54,14 +53,14 @@ function getTaskIcon(completed: boolean) {
 function getDifficultyClass(difficulty: string) {
   if (difficulty === "Easy") {
     return styles.easy;
-  } else if (difficulty === "Med.") {
+  } else if (difficulty === "Med") {
     return styles.medium;
   } else {
     return styles.hard;
   }
 }
 
-function Table({ problems }: TableProps) {
+function Table({ problems, solvedProblems }: TableProps) {
   return (
     <table className={styles.table}>
       <thead>
@@ -91,20 +90,30 @@ function Table({ problems }: TableProps) {
       </thead>
       <tbody>
         {problems.map((problem) => {
-          const problemIcon = getTaskIcon(problem.completed);
+          const isCompleted = (solvedProblems || []).some(
+            (solved) => solved.id === problem.id
+          );
+          const problemIcon = getTaskIcon(isCompleted);
           const difficultyClass = getDifficultyClass(problem.difficulty);
 
+          // Replace hyphens (-) with spaces in the title
+          const formattedTitle = problem.title.replace(/-/g, " ");
+
+          // Add a period to "Med" only
+          const difficultyLabel =
+            problem.difficulty === "Med" ? `${problem.difficulty}.` : problem.difficulty;
+
           return (
             <tr key={problem.id}>
               <td className={styles.problemData}>
-                {problem.id}. {problem.title}
+                {problem.id}. {formattedTitle}
               </td>
               <td className={`${styles.difficultyData} ${difficultyClass}`}>
-                {problem.difficulty}
+                {difficultyLabel}
               </td>
               <td
                 className={styles.statusData}
-                aria-label={problem.completed ? "Completed" : "Incomplete"}
+                aria-label={isCompleted ? "Completed" : "Incomplete"}
               >
                 {problemIcon}
               </td>
@@ -116,4 +125,5 @@ function Table({ problems }: TableProps) {
   );
 }
 
-export default Table;
\ No newline at end of file
+
+export default Table;
diff --git a/src/constants/problems.ts b/src/constants/problems.ts
index 8bf67b08..065b231a 100644
--- a/src/constants/problems.ts
+++ b/src/constants/problems.ts
@@ -1,81 +1,81 @@
 import type { Problem } from "../api/services/types";
 
 export const problems: Problem[] = [
-  { id: "128", title: "longest-consecutive-sequence", difficulty: "medium" },
-  { id: "1", title: "two-sum", difficulty: "easy" },
-  { id: "3", title: "longest-substring-without-repeating-characters", difficulty: "medium" },
-  { id: "5", title: "longest-palindromic-substring", difficulty: "medium" },
-  { id: "133", title: "clone-graph", difficulty: "medium" },
-  { id: "261", title: "graph-valid-tree", difficulty: "medium" },
-  { id: "647", title: "palindromic-substrings", difficulty: "medium" },
-  { id: "11", title: "container-with-most-water", difficulty: "medium" },
-  { id: "139", title: "word-break", difficulty: "medium" },
-  { id: "141", title: "linked-list-cycle", difficulty: "easy" },
-  { id: "268", title: "missing-number", difficulty: "easy" },
-  { id: "15", title: "3sum", difficulty: "medium" },
-  { id: "143", title: "reorder-list", difficulty: "medium" },
-  { id: "269", title: "alien-dictionary", difficulty: "hard" },
-  { id: "271", title: "encode-and-decode-strings", difficulty: "medium" },
-  { id: "19", title: "remove-nth-node-from-end-of-list", difficulty: "medium" },
-  { 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: "medium" },
-  { id: "153", title: "find-minimum-in-rotated-sorted-array", difficulty: "medium" },
-  { id: "33", title: "search-in-rotated-sorted-array", difficulty: "medium" },
-  { id: "417", title: "pacific-atlantic-water-flow", difficulty: "medium" },
-  { id: "39", title: "combination-sum", difficulty: "medium" },
-  { 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: "medium" },
-  { id: "300", title: "longest-increasing-subsequence", difficulty: "medium" },
-  { id: "48", title: "rotate-image", difficulty: "medium" },
-  { id: "49", title: "group-anagrams", difficulty: "medium" },
-  { id: "435", title: "non-overlapping-intervals", difficulty: "medium" },
-  { id: "53", title: "maximum-subarray", difficulty: "easy" },
-  { id: "54", title: "spiral-matrix", difficulty: "medium" },
-  { id: "55", title: "jump-game", difficulty: "medium" },
-  { id: "56", title: "merge-intervals", difficulty: "medium" },
-  { id: "57", title: "insert-interval", difficulty: "hard" },
-  { id: "572", title: "subtree-of-another-tree", difficulty: "easy" },
-  { id: "62", title: "unique-paths", difficulty: "medium" },
-  { id: "190", title: "reverse-bits", difficulty: "easy" },
-  { id: "191", title: "number-of-1-bits", difficulty: "easy" },
-  { id: "322", title: "coin-change", difficulty: "medium" },
-  { id: "323", title: "number-of-connected-components-in-an-undirected-graph", difficulty: "medium" },
-  { id: "70", title: "climbing-stairs", difficulty: "easy" },
-  { id: "198", title: "house-robber", difficulty: "medium" },
-  { id: "200", title: "number-of-islands", difficulty: "medium" },
-  { id: "73", title: "set-matrix-zeroes", difficulty: "medium" },
-  { id: "76", title: "minimum-window-substring", difficulty: "hard" },
-  { id: "206", title: "reverse-linked-list", difficulty: "easy" },
-  { id: "79", title: "word-search", difficulty: "medium" },
-  { id: "207", title: "course-schedule", difficulty: "medium" },
-  { id: "208", title: "implement-trie-prefix-tree", difficulty: "medium" },
-  { id: "338", title: "counting-bits", difficulty: "easy" },
-  { id: "211", title: "design-add-and-search-words-data-structure", difficulty: "medium" },
-  { id: "212", title: "word-search-ii", difficulty: "hard" },
-  { id: "213", title: "house-robber-ii", difficulty: "medium" },
-  { id: "217", title: "contains-duplicate", difficulty: "easy" },
-  { id: "91", title: "decode-ways", difficulty: "medium" },
-  { id: "347", title: "top-k-frequent-elements", difficulty: "medium" },
-  { id: "253", title: "meeting-rooms-ii", difficulty: "medium" },
-  { id: "98", title: "validate-binary-search-tree", difficulty: "medium" },
-  { id: "226", title: "invert-binary-tree", difficulty: "easy" },
-  { id: "100", title: "same-tree", difficulty: "easy" },
-  { id: "1143", title: "longest-common-subsequence", difficulty: "medium" },
-  { id: "102", title: "binary-tree-level-order-traversal", difficulty: "medium" },
-  { id: "230", title: "kth-smallest-element-in-a-bst", difficulty: "medium" },
-  { id: "104", title: "maximum-depth-of-binary-tree", difficulty: "easy" },
-  { id: "105", title: "construct-binary-tree-from-preorder-and-inorder-traversal", difficulty: "medium" },
-  { id: "235", title: "lowest-common-ancestor-of-a-binary-search-tree", difficulty: "easy" },
-  { id: "238", title: "product-of-array-except-self", difficulty: "medium" },
-  { id: "242", title: "valid-anagram", difficulty: "easy" },
-  { id: "371", title: "sum-of-two-integers", difficulty: "medium" },
-  { 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" },
+  { 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(
@@ -91,5 +91,5 @@ export const problemCounts = problems.reduce(
     acc[problem.difficulty] += 1;
     return acc;
   },
-  { easy: 0, medium: 0, hard: 0 },
+  { Easy: 0, Med: 0, Hard: 0 },
 );

From 1c40319618bec9cb73b94ce951fdb92f89196568 Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Tue, 3 Dec 2024 23:00:10 -0500
Subject: [PATCH 5/8] fix : adjust the margin for design

---
 src/components/Progress/Progress.module.css | 14 ++++--
 src/components/Progress/Progress.test.tsx   |  7 +++
 src/components/Progress/Progress.tsx        |  6 ++-
 src/components/Sidebar/Sidebar.module.css   |  2 +-
 src/components/Table/Table.stories.tsx      |  2 +-
 src/components/Table/Table.test.tsx         | 30 ++++++++++---
 src/components/Table/Table.tsx              | 11 ++---
 src/constants/problems.ts                   | 48 +++++++++++++++++----
 8 files changed, 95 insertions(+), 25 deletions(-)

diff --git a/src/components/Progress/Progress.module.css b/src/components/Progress/Progress.module.css
index 73e67e87..13b03227 100644
--- a/src/components/Progress/Progress.module.css
+++ b/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%;
 }
diff --git a/src/components/Progress/Progress.test.tsx b/src/components/Progress/Progress.test.tsx
index 55bf4b11..59740bf4 100644
--- a/src/components/Progress/Progress.test.tsx
+++ b/src/components/Progress/Progress.test.tsx
@@ -140,6 +140,7 @@ test("render page when query parameter is passed", async () => {
   const userNameElement = await screen.findByText(mockedMember.name);
   expect(userNameElement).toBeInTheDocument();
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 <<<<<<< HEAD
 =======
@@ -163,4 +164,10 @@ function mockMember({ id = faker.internet.userName() }: { id?: string } = {}) {
 =======
 });
 >>>>>>> 18e4279 (feat : complete progress component)
+<<<<<<< HEAD
 >>>>>>> da91128 (feat : complete progress component)
+=======
+=======
+});
+>>>>>>> 8133827 (fix : adjust the margin for design)
+>>>>>>> a89544a (fix : adjust the margin for design)
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index 70555b62..4ee779b5 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -108,6 +108,7 @@ export default function Progress() {
         </section>
 
         <section className={styles.problemList} aria-labelledby="problem-list">
+<<<<<<< HEAD
 <<<<<<< HEAD
           <Table problems={problems} solvedProblems={member.solvedProblems} />
 =======
@@ -115,8 +116,11 @@ export default function Progress() {
                  solvedProblems={member.solvedProblems}
           />
 >>>>>>> de28551 (update : change the difficulty to adjust to design and related codes to match it)
+=======
+          <Table problems={problems} solvedProblems={member.solvedProblems} />
+>>>>>>> a89544a (fix : adjust the margin for design)
         </section>
       </div>
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css
index 352730a5..4f8c6e59 100644
--- a/src/components/Sidebar/Sidebar.module.css
+++ b/src/components/Sidebar/Sidebar.module.css
@@ -188,4 +188,4 @@ aside {
       transform: translateY(8px);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index 7941b134..8a30c657 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -36,4 +36,4 @@ export const Default: StoryObj<typeof Table> = {
       },
     ],
   },
-};
\ No newline at end of file
+};
diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
index 5f38e281..fcbf0ead 100644
--- a/src/components/Table/Table.test.tsx
+++ b/src/components/Table/Table.test.tsx
@@ -14,8 +14,19 @@ const problems = [
   { id: 133, title: "Clone Graph", difficulty: "Med.", completed: true },
 ];
 
+const solvedProblems = [
+  {
+    id: 128,
+    title: "Longest Consecutive Sequence",
+    difficulty: "Med.",
+    completed: true,
+  },
+  { id: 257, title: "Binary Tree Paths", difficulty: "Easy", completed: false },
+  { id: 133, title: "Clone Graph", difficulty: "Med.", completed: true },
+];
+
 test("renders table headers", () => {
-  render(<Table problems={problems} />);
+  render(<Table problems={problems} solvedProblems={solvedProblems} />);
   expect(
     screen.getByRole("columnheader", { name: "Problem Title" }),
   ).toBeInTheDocument();
@@ -34,12 +45,21 @@ test("renders number of problem rows", () => {
 });
 
 test("renders icon for completed/incomplete problems", () => {
-  render(<Table problems={problems} />);
-  const rows = screen.getAllByRole("row").slice(1); // Exclude header row
+  render(
+    <Table
+      problems={problems}
+      solvedProblems={problems.filter((p) => p.completed)}
+    />,
+  );
+
+  const rows = screen.getAllByRole("row").slice(1); // Skip the header row
 
   rows.forEach((row, index) => {
     const { completed } = problems[index];
     const iconLabel = completed ? "Completed problem" : "Incomplete problem";
-    expect(within(row).getByLabelText(iconLabel)).toBeInTheDocument();
+
+    // This ensures that we check for the icon's aria-label inside the row
+    const icon = within(row).getByLabelText(iconLabel);
+    expect(icon).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 602c2c5b..4bf1fa72 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -21,7 +21,7 @@ function getTaskIcon(completed: boolean) {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         aria-hidden="true"
-        aria-label="Completed problem"
+        aria-label="Completed problem" // Keep this as is
       >
         <path
           d="M6.1136 13.725L0.263593 7.62349C-0.0878643 7.25692 -0.0878643 6.66256 0.263593 6.29596L1.53636 4.96843C1.88781 4.60182 2.4577 4.60182 2.80915 4.96843L6.75 9.07869L15.1908 0.274927C15.5423 -0.0916425 16.1122 -0.0916425 16.4636 0.274927L17.7364 1.60246C18.0879 1.96903 18.0879 2.56338 17.7364 2.92998L7.3864 13.7251C7.0349 14.0916 6.46506 14.0916 6.1136 13.725Z"
@@ -38,7 +38,7 @@ function getTaskIcon(completed: boolean) {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         aria-hidden="true"
-        aria-label="Incomplete problem"
+        aria-label="Incomplete problem" // Keep this as is
       >
         <path
           d="M14.7102 13.2417C15.1516 13.697 15.0813 14.3733 14.5501 14.7516C14.0189 15.13 13.2299 15.0697 12.7886 14.6144L7.5 9.17397L2.21144 14.6144C1.77008 15.0697 0.98109 15.13 0.44989 14.7516C-0.0813089 14.3733 -0.151615 13.697 0.289749 13.2417L5.87125 7.5L0.289749 1.75828C-0.151615 1.30296 -0.0813089 0.626678 0.44989 0.248361C0.98109 -0.129956 1.77008 -0.0696936 2.21144 0.385627L7.5 5.82603L12.7886 0.385627C13.2299 -0.0696936 14.0189 -0.129956 14.5501 0.248361C15.0813 0.626678 15.1516 1.30296 14.7102 1.75828L9.12875 7.5L14.7102 13.2417Z"
@@ -91,7 +91,7 @@ function Table({ problems, solvedProblems }: TableProps) {
       <tbody>
         {problems.map((problem) => {
           const isCompleted = (solvedProblems || []).some(
-            (solved) => solved.id === problem.id
+            (solved) => solved.id === problem.id,
           );
           const problemIcon = getTaskIcon(isCompleted);
           const difficultyClass = getDifficultyClass(problem.difficulty);
@@ -101,7 +101,9 @@ function Table({ problems, solvedProblems }: TableProps) {
 
           // Add a period to "Med" only
           const difficultyLabel =
-            problem.difficulty === "Med" ? `${problem.difficulty}.` : problem.difficulty;
+            problem.difficulty === "Med"
+              ? `${problem.difficulty}.`
+              : problem.difficulty;
 
           return (
             <tr key={problem.id}>
@@ -125,5 +127,4 @@ function Table({ problems, solvedProblems }: TableProps) {
   );
 }
 
-
 export default Table;
diff --git a/src/constants/problems.ts b/src/constants/problems.ts
index 065b231a..0d67b681 100644
--- a/src/constants/problems.ts
+++ b/src/constants/problems.ts
@@ -3,7 +3,11 @@ import type { Problem } from "../api/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: "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" },
@@ -21,13 +25,25 @@ export const problems: Problem[] = [
   { 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: "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: "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" },
@@ -42,7 +58,11 @@ export const problems: Problem[] = [
   { 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: "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" },
@@ -53,7 +73,11 @@ export const problems: Problem[] = [
   { 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: "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" },
@@ -67,8 +91,16 @@ export const problems: Problem[] = [
   { 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: "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" },

From a930979a4a042af80f0c5551ffd1be80d7f3651b Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Tue, 3 Dec 2024 23:32:54 -0500
Subject: [PATCH 6/8] update : adjust stories and test with new props

---
 src/components/Progress/Progress.test.tsx |  20 ++++
 src/components/Progress/Progress.tsx      |   4 +
 src/components/Table/Table.stories.tsx    | 106 +++++++++++++++++++---
 src/components/Table/Table.test.tsx       |  35 +++----
 src/components/Table/Table.tsx            |   7 +-
 5 files changed, 136 insertions(+), 36 deletions(-)

diff --git a/src/components/Progress/Progress.test.tsx b/src/components/Progress/Progress.test.tsx
index 59740bf4..30f9c49c 100644
--- a/src/components/Progress/Progress.test.tsx
+++ b/src/components/Progress/Progress.test.tsx
@@ -1,4 +1,5 @@
 <<<<<<< HEAD
+<<<<<<< HEAD
 import { faker } from "@faker-js/faker";
 =======
 <<<<<<< HEAD
@@ -10,6 +11,9 @@ import { faker } from "@faker-js/faker";
 =======
 >>>>>>> 18e4279 (feat : complete progress component)
 >>>>>>> da91128 (feat : complete progress component)
+=======
+import { faker } from "@faker-js/faker";
+>>>>>>> 2434ee4 (update : adjust stories and test with new props)
 import { expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import Progress from "./Progress";
@@ -17,6 +21,7 @@ import { mock } from "vitest-mock-extended";
 import useMembers from "../../hooks/useMembers";
 import { test, vi } from "vitest";
 <<<<<<< HEAD
+<<<<<<< HEAD
 import { type Member, Grade } from "../../api/services/types";
 =======
 <<<<<<< HEAD
@@ -32,6 +37,9 @@ import { Member } from "../../api/services/types";
 import { Member } from "../../api/services/types";
 >>>>>>> 18e4279 (feat : complete progress component)
 >>>>>>> da91128 (feat : complete progress component)
+=======
+import { type Member, Grade } from "../../api/services/types";
+>>>>>>> 2434ee4 (update : adjust stories and test with new props)
 
 vi.mock("../../hooks/useMembers");
 
@@ -103,6 +111,7 @@ test("render page when query parameter is passed", async () => {
   mockedMember.id = mockedQueryParam;
   mockedMember.name = "soundmin";
   mockedMember.solvedProblems = [
+<<<<<<< HEAD
 <<<<<<< HEAD
     { id: 31, title: "Problem 1", difficulty: "Easy" },
     { id: 52, title: "Problem 2", difficulty: "Med" },
@@ -112,6 +121,11 @@ test("render page when query parameter is passed", async () => {
     { id: 52, title: "Problem 2", difficulty: "medium" },
     { id: 30, title: "Problem 3", difficulty: "easy" },
 >>>>>>> de28551 (update : change the difficulty to adjust to design and related codes to match it)
+=======
+    { id: "31", title: "Problem 1", difficulty: "Easy" },
+    { id: "52", title: "Problem 2", difficulty: "Med" },
+    { id: "30", title: "Problem 3", difficulty: "Hard" },
+>>>>>>> 2434ee4 (update : adjust stories and test with new props)
   ];
 
   vi.mocked(useMembers).mockReturnValue(
@@ -141,11 +155,14 @@ test("render page when query parameter is passed", async () => {
   expect(userNameElement).toBeInTheDocument();
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 <<<<<<< HEAD
 =======
 >>>>>>> 4743ef2 (feat : convert profileurl to pass as prop)
 >>>>>>> da91128 (feat : complete progress component)
+=======
+>>>>>>> 2434ee4 (update : adjust stories and test with new props)
 });
 
 function mockMember({ id = faker.internet.userName() }: { id?: string } = {}) {
@@ -161,6 +178,7 @@ function mockMember({ id = faker.internet.userName() }: { id?: string } = {}) {
 }
 =======
 }
+<<<<<<< HEAD
 =======
 });
 >>>>>>> 18e4279 (feat : complete progress component)
@@ -171,3 +189,5 @@ function mockMember({ id = faker.internet.userName() }: { id?: string } = {}) {
 });
 >>>>>>> 8133827 (fix : adjust the margin for design)
 >>>>>>> a89544a (fix : adjust the margin for design)
+=======
+>>>>>>> 2434ee4 (update : adjust stories and test with new props)
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index 4ee779b5..98e7694e 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -15,11 +15,15 @@ import useMembers from "../../hooks/useMembers";
 import styles from "./Progress.module.css";
 
 export default function Progress() {
+<<<<<<< HEAD
 <<<<<<< HEAD
   const { members, isLoading, error } = useMembers({ getMembers });
 =======
   const { members, isLoading, error } = useMembers({ getMembers });  
 >>>>>>> da91128 (feat : complete progress component)
+=======
+  const { members, isLoading, error } = useMembers({ getMembers });
+>>>>>>> 2434ee4 (update : adjust stories and test with new props)
 
   const memberId = new URL(location.href).searchParams.get("member");
 
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index 8a30c657..c4bea25c 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -3,37 +3,121 @@ import Table from "./Table";
 
 const meta: Meta<typeof Table> = {
   component: Table,
+  args: {
+    problems: [
+      {
+        id: "1",
+        title: "Two Sum",
+        difficulty: "Easy",
+      },
+      {
+        id: "128",
+        title: "Longest Consecutive Sequence",
+        difficulty: "Med",
+      },
+      {
+        id: "133",
+        title: "Clone Graph",
+        difficulty: "Med",
+      },
+      {
+        id: "295",
+        title: "Find Median From Data Stream",
+        difficulty: "Hard",
+      },
+    ],
+    solvedProblems: [
+      {
+        id: "1",
+        title: "Two Sum",
+        difficulty: "Easy",
+      },
+      {
+        id: "133",
+        title: "Clone Graph",
+        difficulty: "Med",
+      },
+    ],
+  },
 };
 
 export default meta;
 
-export const Default: StoryObj<typeof Table> = {
+export const Default: StoryObj<typeof Table> = {};
+
+export const AllCompleted: StoryObj<typeof Table> = {
+  args: {
+    problems: [
+      {
+        id: "1",
+        title: "Two Sum",
+        difficulty: "Easy",
+      },
+      {
+        id: "128",
+        title: "Longest Consecutive Sequence",
+        difficulty: "Med",
+      },
+      {
+        id: "133",
+        title: "Clone Graph",
+        difficulty: "Med",
+      },
+      {
+        id: "295",
+        title: "Find Median From Data Stream",
+        difficulty: "Hard",
+      },
+    ],
+    solvedProblems: [
+      {
+        id: "1",
+        title: "Two Sum",
+        difficulty: "Easy",
+      },
+      {
+        id: "128",
+        title: "Longest Consecutive Sequence",
+        difficulty: "Med",
+      },
+      {
+        id: "133",
+        title: "Clone Graph",
+        difficulty: "Med",
+      },
+      {
+        id: "295",
+        title: "Find Median From Data Stream",
+        difficulty: "Hard",
+      },
+    ],
+  },
+};
+
+export const NoCompletedProblems: StoryObj<typeof Table> = {
   args: {
     problems: [
       {
-        id: 1,
+        id: "1",
         title: "Two Sum",
         difficulty: "Easy",
-        completed: true,
       },
       {
-        id: 128,
+        id: "128",
         title: "Longest Consecutive Sequence",
-        difficulty: "Med.",
-        completed: false,
+        difficulty: "Med",
       },
       {
-        id: 133,
+        id: "133",
         title: "Clone Graph",
-        difficulty: "Med.",
-        completed: true,
+        difficulty: "Med",
       },
       {
-        id: 295,
+        id: "295",
         title: "Find Median From Data Stream",
         difficulty: "Hard",
-        completed: false,
       },
     ],
+    solvedProblems: [],
   },
 };
diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
index fcbf0ead..45631fec 100644
--- a/src/components/Table/Table.test.tsx
+++ b/src/components/Table/Table.test.tsx
@@ -4,25 +4,23 @@ import Table from "./Table";
 
 const problems = [
   {
-    id: 128,
+    id: "128",
     title: "Longest Consecutive Sequence",
     difficulty: "Med.",
-    completed: true,
   },
-  { id: 1, title: "Two Sum", difficulty: "Easy", completed: true },
-  { id: 257, title: "Binary Tree Paths", difficulty: "Easy", completed: false },
-  { id: 133, title: "Clone Graph", difficulty: "Med.", completed: true },
+  { id: "1", title: "Two Sum", difficulty: "Easy" },
+  { id: "257", title: "Binary Tree Paths", difficulty: "Easy" },
+  { id: "133", title: "Clone Graph", difficulty: "Med." },
 ];
 
 const solvedProblems = [
   {
-    id: 128,
+    id: "128",
     title: "Longest Consecutive Sequence",
     difficulty: "Med.",
-    completed: true,
   },
-  { id: 257, title: "Binary Tree Paths", difficulty: "Easy", completed: false },
-  { id: 133, title: "Clone Graph", difficulty: "Med.", completed: true },
+  { id: "257", title: "Binary Tree Paths", difficulty: "Easy" },
+  { id: "133", title: "Clone Graph", difficulty: "Med." },
 ];
 
 test("renders table headers", () => {
@@ -39,26 +37,21 @@ test("renders table headers", () => {
 });
 
 test("renders number of problem rows", () => {
-  render(<Table problems={problems} />);
+  render(<Table problems={problems} solvedProblems={solvedProblems} />);
   const rows = screen.getAllByRole("row");
-  expect(rows).toHaveLength(problems.length + 1); // +1 for the header row
+  expect(rows).toHaveLength(problems.length + 1);
 });
 
 test("renders icon for completed/incomplete problems", () => {
-  render(
-    <Table
-      problems={problems}
-      solvedProblems={problems.filter((p) => p.completed)}
-    />,
-  );
+  render(<Table problems={problems} solvedProblems={solvedProblems} />);
 
-  const rows = screen.getAllByRole("row").slice(1); // Skip the header row
+  const rows = screen.getAllByRole("row").slice(1);
 
   rows.forEach((row, index) => {
-    const { completed } = problems[index];
-    const iconLabel = completed ? "Completed problem" : "Incomplete problem";
+    const problem = problems[index];
+    const isCompleted = solvedProblems.some((p) => p.id === problem.id);
+    const iconLabel = isCompleted ? "Completed problem" : "Incomplete problem";
 
-    // This ensures that we check for the icon's aria-label inside the row
     const icon = within(row).getByLabelText(iconLabel);
     expect(icon).toBeInTheDocument();
   });
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 4bf1fa72..84e441d3 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,7 +1,7 @@
 import styles from "./Table.module.css";
 
 interface Problem {
-  id: number;
+  id: string;
   title: string;
   difficulty: string;
 }
@@ -21,7 +21,7 @@ function getTaskIcon(completed: boolean) {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         aria-hidden="true"
-        aria-label="Completed problem" // Keep this as is
+        aria-label="Completed problem"
       >
         <path
           d="M6.1136 13.725L0.263593 7.62349C-0.0878643 7.25692 -0.0878643 6.66256 0.263593 6.29596L1.53636 4.96843C1.88781 4.60182 2.4577 4.60182 2.80915 4.96843L6.75 9.07869L15.1908 0.274927C15.5423 -0.0916425 16.1122 -0.0916425 16.4636 0.274927L17.7364 1.60246C18.0879 1.96903 18.0879 2.56338 17.7364 2.92998L7.3864 13.7251C7.0349 14.0916 6.46506 14.0916 6.1136 13.725Z"
@@ -38,7 +38,7 @@ function getTaskIcon(completed: boolean) {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         aria-hidden="true"
-        aria-label="Incomplete problem" // Keep this as is
+        aria-label="Incomplete problem"
       >
         <path
           d="M14.7102 13.2417C15.1516 13.697 15.0813 14.3733 14.5501 14.7516C14.0189 15.13 13.2299 15.0697 12.7886 14.6144L7.5 9.17397L2.21144 14.6144C1.77008 15.0697 0.98109 15.13 0.44989 14.7516C-0.0813089 14.3733 -0.151615 13.697 0.289749 13.2417L5.87125 7.5L0.289749 1.75828C-0.151615 1.30296 -0.0813089 0.626678 0.44989 0.248361C0.98109 -0.129956 1.77008 -0.0696936 2.21144 0.385627L7.5 5.82603L12.7886 0.385627C13.2299 -0.0696936 14.0189 -0.129956 14.5501 0.248361C15.0813 0.626678 15.1516 1.30296 14.7102 1.75828L9.12875 7.5L14.7102 13.2417Z"
@@ -96,7 +96,6 @@ function Table({ problems, solvedProblems }: TableProps) {
           const problemIcon = getTaskIcon(isCompleted);
           const difficultyClass = getDifficultyClass(problem.difficulty);
 
-          // Replace hyphens (-) with spaces in the title
           const formattedTitle = problem.title.replace(/-/g, " ");
 
           // Add a period to "Med" only

From bf7a76d0b72ef726bb07da06dbaf2d340bae22f5 Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Fri, 6 Dec 2024 13:52:16 -0500
Subject: [PATCH 7/8] feat : apply feedback

---
 src/api/services/types.ts                    |   2 +-
 src/components/Progress/Progress.stories.tsx |  32 +++-
 src/components/Progress/Progress.test.tsx    |   6 +
 src/components/Progress/Progress.tsx         |   4 +
 src/components/Table/Table.module.css        |   5 +
 src/components/Table/Table.stories.tsx       |  38 ++---
 src/components/Table/Table.test.tsx          |  16 +-
 src/components/Table/Table.tsx               | 104 +++++++------
 src/constants/problems.ts                    | 150 +++++++++----------
 9 files changed, 198 insertions(+), 159 deletions(-)

diff --git a/src/api/services/types.ts b/src/api/services/types.ts
index 51653b4d..ead7c6c2 100644
--- a/src/api/services/types.ts
+++ b/src/api/services/types.ts
@@ -25,7 +25,7 @@ export type Submission = {
 export type Difficulty = "Easy" | "Med" | "Hard";
 
 export type Problem = {
-  id: string;
+  id: number;
   title: string;
   difficulty: Difficulty;
 };
diff --git a/src/components/Progress/Progress.stories.tsx b/src/components/Progress/Progress.stories.tsx
index 14847b5e..b609a8ac 100644
--- a/src/components/Progress/Progress.stories.tsx
+++ b/src/components/Progress/Progress.stories.tsx
@@ -1,10 +1,36 @@
 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: "evan",
+    },
+    msw: {
+      handlers: [
+        http.get("https://api.example.com/members", () =>
+          HttpResponse.json([
+            {
+              id: "evan",
+              name: "soundmin",
+              cohort: 3,
+              grade: "A",
+              profileUrl: "https://example.com/avatar.png",
+              solvedProblems: [
+                { id: 31, title: "Problem 1", difficulty: "Easy" },
+                { id: 52, title: "Problem 2", difficulty: "Medium" },
+                { id: 30, title: "Problem 3", difficulty: "Hard" },
+              ],
+            },
+          ]),
+        ),
+      ],
+    },
+  },
+};
 
 export default meta;
 
-export const Default: StoryObj<typeof meta> = {};
+export const Default: StoryObj<typeof Progress> = {};
diff --git a/src/components/Progress/Progress.test.tsx b/src/components/Progress/Progress.test.tsx
index 30f9c49c..c66ba0c0 100644
--- a/src/components/Progress/Progress.test.tsx
+++ b/src/components/Progress/Progress.test.tsx
@@ -112,6 +112,7 @@ test("render page when query parameter is passed", async () => {
   mockedMember.name = "soundmin";
   mockedMember.solvedProblems = [
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
     { id: 31, title: "Problem 1", difficulty: "Easy" },
     { id: 52, title: "Problem 2", difficulty: "Med" },
@@ -126,6 +127,11 @@ test("render page when query parameter is passed", async () => {
     { id: "52", title: "Problem 2", difficulty: "Med" },
     { id: "30", title: "Problem 3", difficulty: "Hard" },
 >>>>>>> 2434ee4 (update : adjust stories and test with new props)
+=======
+    { id: 31, title: "Problem 1", difficulty: "Easy" },
+    { id: 52, title: "Problem 2", difficulty: "Med" },
+    { id: 30, title: "Problem 3", difficulty: "Hard" },
+>>>>>>> b7f50c1 (feat : apply feedback)
   ];
 
   vi.mocked(useMembers).mockReturnValue(
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index 98e7694e..beded012 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -4,10 +4,14 @@ import Sidebar from "../Sidebar/Sidebar";
 import Footer from "../Footer/Footer";
 import Header from "../Header/Header";
 <<<<<<< HEAD
+<<<<<<< HEAD
 import { Table } from "../Table/Table";
 =======
 import Table from "../Table/Table";
 >>>>>>> da91128 (feat : complete progress component)
+=======
+import { Table } from "../Table/Table";
+>>>>>>> b7f50c1 (feat : apply feedback)
 import { getMembers } from "../../api/getMembers";
 import { problems, problemMap, problemCounts } from "../../constants/problems";
 
diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css
index 103ba561..23645859 100644
--- a/src/components/Table/Table.module.css
+++ b/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;
 }
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index c4bea25c..98be004d 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -6,34 +6,34 @@ const meta: Meta<typeof Table> = {
   args: {
     problems: [
       {
-        id: "1",
+        id: 1,
         title: "Two Sum",
         difficulty: "Easy",
       },
       {
-        id: "128",
+        id: 128,
         title: "Longest Consecutive Sequence",
         difficulty: "Med",
       },
       {
-        id: "133",
+        id: 133,
         title: "Clone Graph",
         difficulty: "Med",
       },
       {
-        id: "295",
+        id: 295,
         title: "Find Median From Data Stream",
         difficulty: "Hard",
       },
     ],
     solvedProblems: [
       {
-        id: "1",
+        id: 1,
         title: "Two Sum",
         difficulty: "Easy",
       },
       {
-        id: "133",
+        id: 133,
         title: "Clone Graph",
         difficulty: "Med",
       },
@@ -49,44 +49,44 @@ export const AllCompleted: StoryObj<typeof Table> = {
   args: {
     problems: [
       {
-        id: "1",
+        id: 1,
         title: "Two Sum",
         difficulty: "Easy",
       },
       {
-        id: "128",
+        id: 128,
         title: "Longest Consecutive Sequence",
         difficulty: "Med",
       },
       {
-        id: "133",
+        id: 133,
         title: "Clone Graph",
         difficulty: "Med",
       },
       {
-        id: "295",
+        id: 295,
         title: "Find Median From Data Stream",
         difficulty: "Hard",
       },
     ],
     solvedProblems: [
       {
-        id: "1",
+        id: 1,
         title: "Two Sum",
         difficulty: "Easy",
       },
       {
-        id: "128",
+        id: 128,
         title: "Longest Consecutive Sequence",
         difficulty: "Med",
       },
       {
-        id: "133",
+        id: 133,
         title: "Clone Graph",
         difficulty: "Med",
       },
       {
-        id: "295",
+        id: 295,
         title: "Find Median From Data Stream",
         difficulty: "Hard",
       },
@@ -94,26 +94,26 @@ export const AllCompleted: StoryObj<typeof Table> = {
   },
 };
 
-export const NoCompletedProblems: StoryObj<typeof Table> = {
+export const NoCompleted: StoryObj<typeof Table> = {
   args: {
     problems: [
       {
-        id: "1",
+        id: 1,
         title: "Two Sum",
         difficulty: "Easy",
       },
       {
-        id: "128",
+        id: 128,
         title: "Longest Consecutive Sequence",
         difficulty: "Med",
       },
       {
-        id: "133",
+        id: 133,
         title: "Clone Graph",
         difficulty: "Med",
       },
       {
-        id: "295",
+        id: 295,
         title: "Find Median From Data Stream",
         difficulty: "Hard",
       },
diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
index 45631fec..536fe63a 100644
--- a/src/components/Table/Table.test.tsx
+++ b/src/components/Table/Table.test.tsx
@@ -1,26 +1,26 @@
 import { render, screen, within } from "@testing-library/react";
 import { test, expect } from "vitest";
-import Table from "./Table";
+import { Table } from "./Table";
 
 const problems = [
   {
-    id: "128",
+    id: 128,
     title: "Longest Consecutive Sequence",
     difficulty: "Med.",
   },
-  { id: "1", title: "Two Sum", difficulty: "Easy" },
-  { id: "257", title: "Binary Tree Paths", difficulty: "Easy" },
-  { id: "133", title: "Clone Graph", difficulty: "Med." },
+  { id: 1, title: "Two Sum", difficulty: "Easy" },
+  { id: 257, title: "Binary Tree Paths", difficulty: "Easy" },
+  { id: 133, title: "Clone Graph", difficulty: "Med." },
 ];
 
 const solvedProblems = [
   {
-    id: "128",
+    id: 128,
     title: "Longest Consecutive Sequence",
     difficulty: "Med.",
   },
-  { id: "257", title: "Binary Tree Paths", difficulty: "Easy" },
-  { id: "133", title: "Clone Graph", difficulty: "Med." },
+  { id: 257, title: "Binary Tree Paths", difficulty: "Easy" },
+  { id: 133, title: "Clone Graph", difficulty: "Med." },
 ];
 
 test("renders table headers", () => {
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 84e441d3..1acf9845 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,7 +1,7 @@
 import styles from "./Table.module.css";
 
 interface Problem {
-  id: string;
+  id: number;
   title: string;
   difficulty: string;
 }
@@ -11,56 +11,7 @@ interface TableProps {
   solvedProblems: Problem[];
 }
 
-function getTaskIcon(completed: boolean) {
-  if (completed) {
-    return (
-      <svg
-        width="18"
-        height="14"
-        viewBox="0 0 18 14"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        aria-hidden="true"
-        aria-label="Completed problem"
-      >
-        <path
-          d="M6.1136 13.725L0.263593 7.62349C-0.0878643 7.25692 -0.0878643 6.66256 0.263593 6.29596L1.53636 4.96843C1.88781 4.60182 2.4577 4.60182 2.80915 4.96843L6.75 9.07869L15.1908 0.274927C15.5423 -0.0916425 16.1122 -0.0916425 16.4636 0.274927L17.7364 1.60246C18.0879 1.96903 18.0879 2.56338 17.7364 2.92998L7.3864 13.7251C7.0349 14.0916 6.46506 14.0916 6.1136 13.725Z"
-          fill="#846DE9"
-        />
-      </svg>
-    );
-  } else {
-    return (
-      <svg
-        width="15"
-        height="15"
-        viewBox="0 0 15 15"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        aria-hidden="true"
-        aria-label="Incomplete problem"
-      >
-        <path
-          d="M14.7102 13.2417C15.1516 13.697 15.0813 14.3733 14.5501 14.7516C14.0189 15.13 13.2299 15.0697 12.7886 14.6144L7.5 9.17397L2.21144 14.6144C1.77008 15.0697 0.98109 15.13 0.44989 14.7516C-0.0813089 14.3733 -0.151615 13.697 0.289749 13.2417L5.87125 7.5L0.289749 1.75828C-0.151615 1.30296 -0.0813089 0.626678 0.44989 0.248361C0.98109 -0.129956 1.77008 -0.0696936 2.21144 0.385627L7.5 5.82603L12.7886 0.385627C13.2299 -0.0696936 14.0189 -0.129956 14.5501 0.248361C15.0813 0.626678 15.1516 1.30296 14.7102 1.75828L9.12875 7.5L14.7102 13.2417Z"
-          fill="#846DE9"
-          fillOpacity="0.4"
-        />
-      </svg>
-    );
-  }
-}
-
-function getDifficultyClass(difficulty: string) {
-  if (difficulty === "Easy") {
-    return styles.easy;
-  } else if (difficulty === "Med") {
-    return styles.medium;
-  } else {
-    return styles.hard;
-  }
-}
-
-function Table({ problems, solvedProblems }: TableProps) {
+export function Table({ problems, solvedProblems }: TableProps) {
   return (
     <table className={styles.table}>
       <thead>
@@ -90,7 +41,7 @@ function Table({ problems, solvedProblems }: TableProps) {
       </thead>
       <tbody>
         {problems.map((problem) => {
-          const isCompleted = (solvedProblems || []).some(
+          const isCompleted = solvedProblems.some(
             (solved) => solved.id === problem.id,
           );
           const problemIcon = getTaskIcon(isCompleted);
@@ -126,4 +77,51 @@ function Table({ problems, solvedProblems }: TableProps) {
   );
 }
 
-export default Table;
+function getTaskIcon(completed: boolean) {
+  if (completed) {
+    return (
+      <svg
+        width="18"
+        height="14"
+        viewBox="0 0 18 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        aria-label="Completed problem"
+      >
+        <path
+          d="M6.1136 13.725L0.263593 7.62349C-0.0878643 7.25692 -0.0878643 6.66256 0.263593 6.29596L1.53636 4.96843C1.88781 4.60182 2.4577 4.60182 2.80915 4.96843L6.75 9.07869L15.1908 0.274927C15.5423 -0.0916425 16.1122 -0.0916425 16.4636 0.274927L17.7364 1.60246C18.0879 1.96903 18.0879 2.56338 17.7364 2.92998L7.3864 13.7251C7.0349 14.0916 6.46506 14.0916 6.1136 13.725Z"
+          fill="#846DE9"
+        />
+      </svg>
+    );
+  } else {
+    return (
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        aria-label="Incomplete problem"
+      >
+        <path
+          d="M14.7102 13.2417C15.1516 13.697 15.0813 14.3733 14.5501 14.7516C14.0189 15.13 13.2299 15.0697 12.7886 14.6144L7.5 9.17397L2.21144 14.6144C1.77008 15.0697 0.98109 15.13 0.44989 14.7516C-0.0813089 14.3733 -0.151615 13.697 0.289749 13.2417L5.87125 7.5L0.289749 1.75828C-0.151615 1.30296 -0.0813089 0.626678 0.44989 0.248361C0.98109 -0.129956 1.77008 -0.0696936 2.21144 0.385627L7.5 5.82603L12.7886 0.385627C13.2299 -0.0696936 14.0189 -0.129956 14.5501 0.248361C15.0813 0.626678 15.1516 1.30296 14.7102 1.75828L9.12875 7.5L14.7102 13.2417Z"
+          fill="#846DE9"
+          fillOpacity="0.4"
+        />
+      </svg>
+    );
+  }
+}
+
+function getDifficultyClass(difficulty: string) {
+  if (difficulty === "Easy") {
+    return styles.easy;
+  } else if (difficulty === "Med") {
+    return styles.medium;
+  } else {
+    return styles.hard;
+  }
+}
diff --git a/src/constants/problems.ts b/src/constants/problems.ts
index 0d67b681..42cf4669 100644
--- a/src/constants/problems.ts
+++ b/src/constants/problems.ts
@@ -1,113 +1,113 @@
 import type { Problem } from "../api/services/types";
 
 export const problems: Problem[] = [
-  { id: "128", title: "longest-consecutive-sequence", difficulty: "Med" },
-  { id: "1", title: "two-sum", difficulty: "Easy" },
+  { id: 128, title: "longest-consecutive-sequence", difficulty: "Med" },
+  { id: 1, title: "two-sum", difficulty: "Easy" },
   {
-    id: "3",
+    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: 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",
+    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: 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",
+    id: 297,
     title: "serialize-and-deserialize-binary-tree",
     difficulty: "Hard",
   },
   {
-    id: "424",
+    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: 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",
+    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: 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",
+    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: 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",
+    id: 105,
     title: "construct-binary-tree-from-preorder-and-inorder-traversal",
     difficulty: "Med",
   },
   {
-    id: "235",
+    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" },
+  { 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(

From e3e7bbe136f4fac3e933a06b22c8b4ee9c8b30c9 Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Sat, 7 Dec 2024 23:03:32 -0500
Subject: [PATCH 8/8] update : move problem to api

---
 src/{ => api}/constants/problems.ts           |  2 +-
 .../services/process/processService.test.ts   |  2 +-
 src/api/services/process/processService.ts    |  2 +-
 src/components/Progress/Progress.stories.tsx  | 30 ++++---
 src/components/Progress/Progress.test.tsx     | 78 -------------------
 src/components/Progress/Progress.tsx          | 66 ++--------------
 src/components/Table/Table.stories.tsx        |  2 +-
 src/hooks/useMembers.test.ts                  |  2 +-
 8 files changed, 27 insertions(+), 157 deletions(-)
 rename src/{ => api}/constants/problems.ts (99%)

diff --git a/src/constants/problems.ts b/src/api/constants/problems.ts
similarity index 99%
rename from src/constants/problems.ts
rename to src/api/constants/problems.ts
index 42cf4669..bebf0440 100644
--- a/src/constants/problems.ts
+++ b/src/api/constants/problems.ts
@@ -1,4 +1,4 @@
-import type { Problem } from "../api/services/types";
+import type { Problem } from "../services/types";
 
 export const problems: Problem[] = [
   { id: 128, title: "longest-consecutive-sequence", difficulty: "Med" },
diff --git a/src/api/services/process/processService.test.ts b/src/api/services/process/processService.test.ts
index 248ce5f2..68c6cdcc 100644
--- a/src/api/services/process/processService.test.ts
+++ b/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";
diff --git a/src/api/services/process/processService.ts b/src/api/services/process/processService.ts
index 5cea736c..88a5bf70 100644
--- a/src/api/services/process/processService.ts
+++ b/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,
diff --git a/src/components/Progress/Progress.stories.tsx b/src/components/Progress/Progress.stories.tsx
index b609a8ac..4c341e7b 100644
--- a/src/components/Progress/Progress.stories.tsx
+++ b/src/components/Progress/Progress.stories.tsx
@@ -6,25 +6,23 @@ const meta: Meta<typeof Progress> = {
   component: Progress,
   parameters: {
     query: {
-      member: "evan",
+      member: "sunjae95",
     },
     msw: {
       handlers: [
-        http.get("https://api.example.com/members", () =>
-          HttpResponse.json([
-            {
-              id: "evan",
-              name: "soundmin",
-              cohort: 3,
-              grade: "A",
-              profileUrl: "https://example.com/avatar.png",
-              solvedProblems: [
-                { id: 31, title: "Problem 1", difficulty: "Easy" },
-                { id: 52, title: "Problem 2", difficulty: "Medium" },
-                { id: 30, title: "Problem 3", difficulty: "Hard" },
-              ],
-            },
-          ]),
+        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",
+              },
+            ]),
         ),
       ],
     },
diff --git a/src/components/Progress/Progress.test.tsx b/src/components/Progress/Progress.test.tsx
index c66ba0c0..36964106 100644
--- a/src/components/Progress/Progress.test.tsx
+++ b/src/components/Progress/Progress.test.tsx
@@ -1,45 +1,11 @@
-<<<<<<< HEAD
-<<<<<<< HEAD
 import { faker } from "@faker-js/faker";
-=======
-<<<<<<< HEAD
-<<<<<<< HEAD
-import { faker } from "@faker-js/faker";
-=======
-<<<<<<< HEAD
->>>>>>> 2647efc (feat : convert profileurl to pass as prop)
-=======
->>>>>>> 18e4279 (feat : complete progress component)
->>>>>>> da91128 (feat : complete progress component)
-=======
-import { faker } from "@faker-js/faker";
->>>>>>> 2434ee4 (update : adjust stories and test with new props)
 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";
-<<<<<<< HEAD
-<<<<<<< HEAD
-import { type Member, Grade } from "../../api/services/types";
-=======
-<<<<<<< HEAD
-<<<<<<< HEAD
 import { type Member, Grade } from "../../api/services/types";
-=======
-<<<<<<< HEAD
-import { Member } from "../../api/services/types";
-=======
->>>>>>> 4743ef2 (feat : convert profileurl to pass as prop)
->>>>>>> 2647efc (feat : convert profileurl to pass as prop)
-=======
-import { Member } from "../../api/services/types";
->>>>>>> 18e4279 (feat : complete progress component)
->>>>>>> da91128 (feat : complete progress component)
-=======
-import { type Member, Grade } from "../../api/services/types";
->>>>>>> 2434ee4 (update : adjust stories and test with new props)
 
 vi.mock("../../hooks/useMembers");
 
@@ -111,27 +77,9 @@ test("render page when query parameter is passed", async () => {
   mockedMember.id = mockedQueryParam;
   mockedMember.name = "soundmin";
   mockedMember.solvedProblems = [
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-    { id: 31, title: "Problem 1", difficulty: "Easy" },
-    { id: 52, title: "Problem 2", difficulty: "Med" },
-    { id: 30, title: "Problem 3", difficulty: "Hard" },
-=======
-    { id: 31, title: "Problem 1", difficulty: "easy" },
-    { id: 52, title: "Problem 2", difficulty: "medium" },
-    { id: 30, title: "Problem 3", difficulty: "easy" },
->>>>>>> de28551 (update : change the difficulty to adjust to design and related codes to match it)
-=======
-    { id: "31", title: "Problem 1", difficulty: "Easy" },
-    { id: "52", title: "Problem 2", difficulty: "Med" },
-    { id: "30", title: "Problem 3", difficulty: "Hard" },
->>>>>>> 2434ee4 (update : adjust stories and test with new props)
-=======
     { id: 31, title: "Problem 1", difficulty: "Easy" },
     { id: 52, title: "Problem 2", difficulty: "Med" },
     { id: 30, title: "Problem 3", difficulty: "Hard" },
->>>>>>> b7f50c1 (feat : apply feedback)
   ];
 
   vi.mocked(useMembers).mockReturnValue(
@@ -159,16 +107,6 @@ test("render page when query parameter is passed", async () => {
   // Wait for the member's name to appear
   const userNameElement = await screen.findByText(mockedMember.name);
   expect(userNameElement).toBeInTheDocument();
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
-<<<<<<< HEAD
-=======
->>>>>>> 4743ef2 (feat : convert profileurl to pass as prop)
->>>>>>> da91128 (feat : complete progress component)
-=======
->>>>>>> 2434ee4 (update : adjust stories and test with new props)
 });
 
 function mockMember({ id = faker.internet.userName() }: { id?: string } = {}) {
@@ -180,20 +118,4 @@ function mockMember({ id = faker.internet.userName() }: { id?: string } = {}) {
     profileUrl: faker.internet.url(),
     solvedProblems: [],
   });
-<<<<<<< HEAD
-}
-=======
 }
-<<<<<<< HEAD
-=======
-});
->>>>>>> 18e4279 (feat : complete progress component)
-<<<<<<< HEAD
->>>>>>> da91128 (feat : complete progress component)
-=======
-=======
-});
->>>>>>> 8133827 (fix : adjust the margin for design)
->>>>>>> a89544a (fix : adjust the margin for design)
-=======
->>>>>>> 2434ee4 (update : adjust stories and test with new props)
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index beded012..91dab93c 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -1,33 +1,19 @@
-import { getMembers } from "../../api/getMembers";
-import { problemCounts, problemMap } from "../../constants/problems";
 import Sidebar from "../Sidebar/Sidebar";
 import Footer from "../Footer/Footer";
 import Header from "../Header/Header";
-<<<<<<< HEAD
-<<<<<<< HEAD
-import { Table } from "../Table/Table";
-=======
-import Table from "../Table/Table";
->>>>>>> da91128 (feat : complete progress component)
-=======
 import { Table } from "../Table/Table";
->>>>>>> b7f50c1 (feat : apply feedback)
 import { getMembers } from "../../api/getMembers";
-import { problems, problemMap, problemCounts } from "../../constants/problems";
+import {
+  problems,
+  problemMap,
+  problemCounts,
+} from "../../api/constants/problems";
 
 import useMembers from "../../hooks/useMembers";
 import styles from "./Progress.module.css";
 
 export default function Progress() {
-<<<<<<< HEAD
-<<<<<<< HEAD
-  const { members, isLoading, error } = useMembers({ getMembers });
-=======
-  const { members, isLoading, error } = useMembers({ getMembers });  
->>>>>>> da91128 (feat : complete progress component)
-=======
   const { members, isLoading, error } = useMembers({ getMembers });
->>>>>>> 2434ee4 (update : adjust stories and test with new props)
 
   const memberId = new URL(location.href).searchParams.get("member");
 
@@ -68,37 +54,9 @@ export default function Progress() {
 
   const profileUrl = member.profileUrl || "Logo.png";
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
-  // To be updated, this will be replaced by the real data in a seperate pr.
-  const mockedProblems = [
-  // Calculate total tasks dynamically
-    {
-      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,
-    },
-  ];
-
->>>>>>> da91128 (feat : complete progress component)
-=======
->>>>>>> de28551 (update : change the difficulty to adjust to design and related codes to match it)
   return (
     <main className={styles.progress}>
+      <Header />
       <h1>풀이 현황</h1>
       <div className={styles.container}>
         <section className={styles.sideBar} aria-labelledby="profile">
@@ -116,19 +74,11 @@ export default function Progress() {
         </section>
 
         <section className={styles.problemList} aria-labelledby="problem-list">
-<<<<<<< HEAD
-<<<<<<< HEAD
           <Table problems={problems} solvedProblems={member.solvedProblems} />
-=======
-          <Table problems={problems}
-                 solvedProblems={member.solvedProblems}
-          />
->>>>>>> de28551 (update : change the difficulty to adjust to design and related codes to match it)
-=======
-          <Table problems={problems} solvedProblems={member.solvedProblems} />
->>>>>>> a89544a (fix : adjust the margin for design)
         </section>
       </div>
+
+      <Footer />
     </main>
   );
 }
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index 98be004d..f9dad7ca 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import Table from "./Table";
+import { Table } from "./Table";
 
 const meta: Meta<typeof Table> = {
   component: Table,
diff --git a/src/hooks/useMembers.test.ts b/src/hooks/useMembers.test.ts
index 2749c409..0c01e862 100644
--- a/src/hooks/useMembers.test.ts
+++ b/src/hooks/useMembers.test.ts
@@ -4,7 +4,7 @@ import { faker } from "@faker-js/faker";
 
 import { Grade, type Member } from "../api/services/types";
 import useMembers from "./useMembers";
-import { problems } from "../constants/problems";
+import { problems } from "../api/constants/problems";
 
 function createMockMember(custom: Partial<Member> = {}): Member {
   return {