update: apply feedback:

src/components/Progress/Progress.tsx

@@ -1,12 +1,11 @@
-import Aside from "../Aside/Aside";
+import Sidebar from "../Sidebar/Sidebar";
 import Footer from "../Footer/Footer";
 import Header from "../Header/Header";
 import Table from "../Table/Table";
 import { getMembers } from "../../api/getMembers";
 import { problems } from "../../constants/problems";
 import { problemMap, problemCounts } from "../../constants/problems";
 
-
 import useMembers from "../../hooks/useMembers";
 import styles from "./Progress.module.css";
 
@@ -22,7 +21,7 @@ export default function Progress() {
   const member = members.find((m) => m.id === memberId);
   if (!member) return <p>Member not found!</p>;
 
-  const totalTasks = Object.values(problemMap).length;
+  const totalProblems = Object.values(problemMap).length;
   const {
     easy: easyProblemsCount,
     medium: mediumProblemsCount,
@@ -51,7 +50,7 @@ export default function Progress() {
 
   const { grade, cohort } = member;
 
-  const profile_url = member.profileUrl || "Logo.png";
+  const profileUrl = member.profileUrl || "Logo.png";
 
   // To be updated, this will be replaced by the real data in a seperate pr.
   const mockedProblems = [
@@ -81,14 +80,14 @@ export default function Progress() {
       <h1>풀이 현황</h1>
       <div className={styles.container}>
         <section aria-labelledby="profile">
-          <Aside
+          <Sidebar
             githubUsername={member.name}
             easyProgress={easyProgress}
             mediumProgress={mediumProgress}
             hardProgress={hardProgress}
-            solvedTasks={totalSolved}
-            totalTasks={totalTasks}
-            profile_url={profile_url}
+            solvedProblems={totalSolved}
+            totalProblems={totalProblems}
+            profileUrl={profileUrl}
             cohort={cohort}
             grade={grade}
           />

src/components/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Sidebar from "./Sidebar.tsx";
+import { Grade } from "../../api/services/types";
+
+const meta = {
+  component: Sidebar,
+  args: {
+    githubUsername: "testuser",
+    easyProgress: "5/10",
+    mediumProgress: "8/10",
+    hardProgress: "3/5",
+    solvedProblems: 16,
+    totalProblems: 25,
+    profileUrl: "https://avatars.githubusercontent.com/u/104721736?v=4",
+    cohort: 3,
+    grade: Grade.LEAF,
+  },
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {};
+
+export const HighProgress: StoryObj<typeof meta> = {
+  args: {
+    solvedProblems: 28,
+    totalProblems: 30,
+    easyProgress: "10/10",
+    mediumProgress: "10/10",
+    hardProgress: "8/10",
+    grade: Grade.FRUIT,
+  },
+};
+
+export const NoProblems: StoryObj<typeof meta> = {
+  args: {
+    easyProgress: "0/0",
+    mediumProgress: "0/0",
+    hardProgress: "0/0",
+    solvedProblems: 0,
+    totalProblems: 0,
+    grade: Grade.SEED,
+  },
+};

src/components/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,34 @@
+import { test, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Sidebar from "./Sidebar.tsx";
+import { Grade } from "../../api/services/types";
+
+test("renders Sidebar with all elements", () => {
+  render(
+    <Sidebar
+      githubUsername="testuser"
+      easyProgress="10/15"
+      mediumProgress="5/10"
+      hardProgress="2/5"
+      solvedProblems={17}
+      totalProblems={30}
+      profileUrl="example.png"
+      cohort={3}
+      grade={Grade.TREE}
+    />,
+  );
+
+  // Check if the sidebar exists
+  const sidebar = screen.getByRole("complementary");
+  expect(sidebar).toBeInTheDocument();
+
+  // Check if the username is displayed
+  const username = screen.getByText(/testuser/i);
+  expect(username).toBeInTheDocument();
+
+  // Check if the button link exists
+  const buttonLink = screen.getByRole("link", {
+    name: /리더보드로 돌아가기/i,
+  });
+  expect(buttonLink).toBeInTheDocument();
+});

src/components/Aside/Aside.tsx → src/components/Sidebar/Sidebar.tsx

@@ -1,49 +1,54 @@
-import { useEffect } from "react";
-import styles from "./Aside.module.css";
+import { useEffect, useRef } from "react";
+import styles from "./Sidebar.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 Github from "../../assets/Github.png";
-import { Grade } from "../../api/services/common/types.ts";
+import { Grade } from "../../api/services/types";
 
-interface AsideProps {
+interface SidebarProps {
   githubUsername: string;
   easyProgress: string;
   mediumProgress: string;
   hardProgress: string;
-  solvedTasks: number;
-  totalTasks: number;
-  profile_url: string;
+  solvedProblems: number;
+  totalProblems: number;
+  profileUrl: string;
   cohort: number;
   grade: Grade;
 }
 
 const imageTable = {
   SEED: Seed,
   SPROUT: Sprout,
-  SMALL_TREE: YoungTree,
-  BIG_TREE: LargeTree,
+  LEAF: Sprout,
+  BRANCH: Sprout,
+  FRUIT: YoungTree,
+  TREE: LargeTree,
 };
 
-export default function Aside({
+export default function Sidebar({
   githubUsername,
   easyProgress,
   mediumProgress,
   hardProgress,
-  solvedTasks,
-  totalTasks,
-  profile_url,
+  solvedProblems,
+  totalProblems,
+  profileUrl,
   cohort,
   grade,
-}: AsideProps) {
-  const progressPercent = Math.min((solvedTasks / totalTasks) * 100, 100);
+}: SidebarProps) {
+  const progressContainerRef = useRef<HTMLDivElement>(null);
+  const progressPercent = Math.min((solvedProblems / totalProblems) * 100, 100);
 
   useEffect(() => {
-    document.documentElement.style.setProperty(
-      "--progress",
-      `${progressPercent}%`,
-    );
+    if (progressContainerRef.current) {
+      progressContainerRef.current.style.setProperty(
+        "--progress",
+        `${progressPercent}%`,
+      );
+    }
   }, [progressPercent]);
 
   const taskProgress = [
@@ -54,15 +59,15 @@ export default function Aside({
 
   return (
     <aside>
-      <div className={styles.container}>
+      <div className={styles.container} ref={progressContainerRef}>
         <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" />
+            <img src={profileUrl} alt="User's profile picture" />
           </div>
           <div>
-            <span className={styles.gradientText}>{solvedTasks} </span>
+            <span className={styles.gradientText}>{solvedProblems} </span>
             <span className={styles.solidText}> 문제</span>
           </div>
           <div className={styles.progress}>