feat : convert profileurl to pass as prop

src/components/Aside/Aside.module.css

@@ -1,5 +1,16 @@
 aside {
-  position: sticky;
+  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 */
+}
+
+.cohort {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .container {

src/components/Aside/Aside.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Aside from "./Aside";
+import { Grade } from "../../api/services/common/types.ts";
 
 const meta = {
   component: Aside,
@@ -10,11 +11,14 @@ export default meta;
 export const Default: StoryObj<typeof meta> = {
   args: {
     githubUsername: "testuser",
-    easyTasks: "10",
-    mediumTasks: "5",
-    hardTasks: "2",
-    solvedTasks: 17,
-    totalTasks: 30,
+    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
   },
 };
 
@@ -23,16 +27,21 @@ export const HighProgress: StoryObj<typeof meta> = {
     ...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",
-    mediumTasks: "0",
-    hardTasks: "0",
+    easyTasks: "0/0",
+    mediumTasks: "0/0",
+    hardTasks: "0/0",
     solvedTasks: 0,
     totalTasks: 0,
+    grade: Grade.SEED, // Minimal grade due to no tasks solved
   },
 };

src/components/Aside/Aside.test.tsx

@@ -1,48 +1,39 @@
 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"
-      mediumTasks="5"
-      hardTasks="2"
+      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 number of solved tasks", () => {
-  render(
-    <Aside
-      githubUsername="testuser"
-      easyTasks="10"
-      mediumTasks="5"
-      hardTasks="2"
-      solvedTasks={17}
-      totalTasks={30}
-    />,
-  );
-
-  const solvedTasksText = screen.getByText(/17 문제/i);
-  expect(solvedTasksText).toBeInTheDocument();
-});
-
 test("displays the username", () => {
   render(
     <Aside
       githubUsername="testuser"
-      easyTasks="10"
-      mediumTasks="5"
-      hardTasks="2"
+      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}
     />,
   );
 
@@ -54,11 +45,14 @@ test("renders the button link with the text", () => {
   render(
     <Aside
       githubUsername="testuser"
-      easyTasks="10"
-      mediumTasks="5"
-      hardTasks="2"
+      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}
     />,
   );
 

src/components/Aside/Aside.tsx

@@ -1,5 +1,10 @@
 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;
@@ -8,15 +13,28 @@ interface AsideProps {
   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);
 
@@ -30,21 +48,28 @@ export default function Aside({
   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="/SampleImg.png" alt="User's profile picture" />
+            <img src={profile_url} alt="User's profile picture" />
           </div>
           <div className={styles.progress}>
-            <span>{solvedTasks} 문제</span>
-            <div>PR 리스트</div>
+            <a
+              href={`https://github.com/DaleStudy/leetcode-study/pulls?q=is%3Apr+author%3A${githubUsername}`}
+            >
+              풀이 보기
+            </a>
           </div>
-          <p className={styles.username}>{githubUsername}</p>
+          <a href={`https://github.com/${githubUsername}`}>
+            {" "}
+            {githubUsername}{" "}
+          </a>
         </section>
 
         <section className={styles.currentStatus}>
           <figure>
-            <img src="image_url" alt="현재 등급 아이콘" />
+            <img src={imageTable[grade]} alt={`${grade} 등급`} />
           </figure>
         </section>
         <section className={styles.taskCounts}>

src/components/Progress/Progress.test.tsx

@@ -1,26 +1,19 @@
 import { beforeEach, describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
-import Progress from "./Progress"; // Adjust the import path as needed
+import { render, screen, waitFor } from "@testing-library/react";
+import Progress from "./Progress";
+import { mock } from "vitest-mock-extended";
+import useMembers from "../../hooks/useMembers";
+import { test, vi } from "vitest";
 
-describe("<Progress/>", () => {
-  beforeEach(() => render(<Progress />));
+vi.mock("../../hooks/useMembers");
 
-  it("renders the table", () => {
-    const table = screen.getByRole("table");
-    expect(table).toBeInTheDocument();
-  });
+test("render the site header", () => {
+  vi.mocked(useMembers).mockReturnValue(
+    mock({ isLoading: false, error: null, members: [] }),
+  );
 
-  it("renders the page header", () => {
-    const header = screen.getByRole("banner");
-    expect(header).toBeInTheDocument();
-  });
+  render(<Progress />);
 
-  it("renders the title", () => {
-    const heading = screen.getByRole("heading", { level: 1 });
-    expect(heading).toHaveTextContent("풀이 현황");
-  });
-
-  it("renders footer", () => {
-    expect(screen.getByRole("contentinfo"));
-  });
+  const header = screen.getByRole("banner");
+  expect(header).toBeInTheDocument();
 });

src/components/Progress/Progress.tsx

@@ -2,24 +2,58 @@ import Aside from "../Aside/Aside";
 import Footer from "../Footer/Footer";
 import Header from "../Header/Header";
 import Table from "../Table/Table";
-
+import { problems } from "../../constants/problems";
 import { getMembers } from "../../api/services/store/storeService";
 import useMembers from "../../hooks/useMembers";
-
 import styles from "./Progress.module.css";
 
 export default function Progress() {
   const { members, isLoading, error } = useMembers({ getMembers });
   console.log({ members, isLoading, error });
 
-  const githubUsername = "exampleUser";
-  const easyTasks = "5/10";
-  const mediumTasks = "3/10";
-  const hardTasks = "1/10";
-  const solvedTasks = 30;
-  const totalTasks = 30;
+  const memberId = new URL(location.href).searchParams.get("member"); // Using URL to fetch member ID
+
+  if (isLoading) return <p>Loading...</p>; // TODO replace with a proper loading component
+  if (error) return <p>Error!</p>; // TODO replace with a proper error component
+
+  const member = members.find((m) => m.id === memberId);
+  if (!member) return <p>Member not found!</p>;
+
+  // Calculate total tasks dynamically
+  const totalTasks = problems.length;
+  const easyProblemsCount = problems.filter(
+    (problem) => problem.difficulty === "easy",
+  ).length;
+  const mediumProblemsCount = problems.filter(
+    (problem) => problem.difficulty === "medium",
+  ).length;
+  const hardProblemsCount = problems.filter(
+    (problem) => problem.difficulty === "hard",
+  ).length;
+
+  const easySolved = member.solvedProblems.filter(
+    (p) => p.difficulty === "easy",
+  ).length;
+  const mediumSolved = member.solvedProblems.filter(
+    (p) => p.difficulty === "medium",
+  ).length;
+  const hardSolved = member.solvedProblems.filter(
+    (p) => p.difficulty === "hard",
+  ).length;
+  const totalSolved = member.solvedProblems.length;
+
+  const easyTasks = `${easySolved}/${easyProblemsCount}`;
+  const mediumTasks = `${mediumSolved}/${mediumProblemsCount}`;
+  const hardTasks = `${hardSolved}/${hardProblemsCount}`;
+
+  const grade = member.grade;
+
+  const cohort = member.cohort;
+
+  const profile_url = member.profileUrl || "SampleImg.png";
 
-  const problems = [
+  //TODO: need to pass the right member
+  const mockProblems = [
     {
       id: 128,
       title: "Longest Consecutive Sequence",
@@ -42,19 +76,21 @@ export default function Progress() {
       <h1>풀이 현황</h1>
       <div className={styles.container}>
         <section aria-labelledby="profile">
-          {/* Pass required props to Aside */}
           <Aside
-            githubUsername={githubUsername}
+            githubUsername={member.name}
             easyTasks={easyTasks}
             mediumTasks={mediumTasks}
             hardTasks={hardTasks}
-            solvedTasks={solvedTasks}
+            solvedTasks={totalSolved}
             totalTasks={totalTasks}
+            profile_url={profile_url}
+            cohort={cohort}
+            grade={grade}
           />
         </section>
 
         <section className={styles.problemList} aria-labelledby="problem-list">
-          <Table problems={problems} />
+          <Table problems={mockProblems} />
         </section>
       </div>