feat : add Table component

src/components/Progress/Progress.module.css

@@ -1,4 +1,18 @@
 .progress {
-  /* 컴포넌트가 헤더에 가려져서 임의로 지정했으니 컴포넌트 개발자가 설계에 맞게 수정해주시면 됩니다  */
+  width: 80%;
+  margin: 0 auto;
   margin-top: 100px;
 }
+
+.container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.profile {
+  width: 20%;
+}
+
+.problemList {
+  width: 80%;
+}

src/components/Progress/Progress.test.tsx

@@ -5,6 +5,11 @@ import Progress from "./Progress"; // Adjust the import path as needed
 describe("<Progress/>", () => {
   beforeEach(() => render(<Progress />));
 
+  it("renders the table", () => {
+    const table = screen.getByRole("table");
+    expect(table).toBeInTheDocument();
+  });
+
   it("renders the page header", () => {
     const header = screen.getByRole("banner");
     expect(header).toBeInTheDocument();
@@ -29,22 +34,4 @@ describe("<Progress/>", () => {
     expect(screen.getByText(/^Med.: \d{1,2}\/\d{1,2}$/)).toBeInTheDocument();
     expect(screen.getByText(/^Hard: \d{1,2}\/\d{1,2}$/)).toBeInTheDocument();
   });
-
-  it("renders the task list", () => {
-    const taskItems = screen.getAllByRole("listitem");
-    expect(taskItems).toHaveLength(4); // Since there are 4 tasks defined
-
-    const expectedTasks = [
-      { title: "Longest Consecutive Sequence", difficulty: "Med." },
-      { title: "Two Sum", difficulty: "Easy" },
-      { title: "Binary Tree Paths", difficulty: "Easy" },
-      { title: "Clone Graph", difficulty: "Med." },
-    ];
-
-    expectedTasks.forEach((task, index) => {
-      const taskItem = taskItems[index];
-      expect(taskItem).toHaveTextContent(task.title);
-      expect(taskItem).toHaveTextContent(task.difficulty);
-    });
-  });
 });

src/components/Progress/Progress.tsx

@@ -1,41 +1,46 @@
 import styles from "./Progress.module.css";
 import Header from "../Header/Header";
+import Table from "../Table/Table";
 
 export default function Progress() {
-  const tasks = [
-    { 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." },
+  const problems = [
+    {
+      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 },
   ];
 
   return (
     <main className={styles.progress}>
       <Header />
       <h1>Progress</h1>
-      <section aria-labelledby="profile">
-        <h2 id="profile">Profile Section</h2>
-        <div>
-          <img src="profile_image_url" alt="Profile" />
-          <h3>0 Attempting</h3>
-          <p>Easy: 12/12</p>
-          <p>Med.: 22/22</p>
-          <p>Hard: 1/1</p>
-        </div>
-        <button>PR 리스트</button>
-      </section>
+      <div className={styles.container}>
+        <section aria-labelledby="profile">
+          <h2 id="profile">Profile Section</h2>
+          <div>
+            <img src="profile_image_url" alt="Profile" />
+            <h3>0 Attempting</h3>
+            <p>Easy: 12/12</p>
+            <p>Med.: 22/22</p>
+            <p>Hard: 1/1</p>
+          </div>
+          <button>PR 리스트</button>
+        </section>
 
-      <section aria-labelledby="problem-list">
-        <h2 id="problem-list">Task List</h2>
-        <ul>
-          {tasks.map((task) => (
-            <li key={task.id}>
-              <span>{task.title}</span>
-              <span> {task.difficulty}</span>
-            </li>
-          ))}
-        </ul>
-      </section>
+        <section className={styles.problemList} aria-labelledby="problem-list">
+          <Table problems={problems} />
+        </section>
+      </div>
     </main>
   );
 }

src/components/Table/Table.module.css

@@ -0,0 +1,63 @@
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th {
+  height: 48px;
+  background-color: var(--bg-100);
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  text-align: center;
+}
+
+/* Row & Cell Styles */
+td {
+  height: 48px;
+}
+
+tr:nth-child(odd) {
+  background-color: var(--bg-200);
+}
+
+tr:nth-child(even) {
+  background-color: var(--bg-100);
+}
+
+/* Problem column */
+.problemHeading {
+  padding-left: 17px;
+  text-align: left;
+}
+
+.problemData {
+  padding-left: 17px;
+  text-align: left;
+  width: 52%;
+}
+
+/* Difficulty column */
+.difficultyHeading,
+.difficultyData {
+  text-align: center;
+  width: 25%;
+}
+
+.easy {
+  color: #1cbaba;
+}
+
+.medium {
+  color: #ffb700;
+}
+
+.hard {
+  color: #f63737;
+}
+
+/* Status column */
+.statusHeading,
+.statusData {
+  text-align: center;
+  width: 23%;
+}

src/components/Table/Table.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Table from "./Table";
+
+const meta: Meta<typeof Table> = {
+  component: Table,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Table> = {
+  args: {
+    problems: [
+      {
+        id: 1,
+        title: "Example Problem 1",
+        difficulty: "Easy",
+        completed: true,
+      },
+    ],
+  },
+};

src/components/Table/Table.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen, within } from "@testing-library/react";
+import { test, expect } from "vitest";
+import Table from "./Table";
+
+const problems = [
+  {
+    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 },
+];
+
+test("renders table headers", () => {
+  render(<Table problems={problems} />);
+  expect(
+    screen.getByRole("columnheader", { name: "Problem Title" }),
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("columnheader", { name: "Problem Difficulty" }),
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("columnheader", { name: "Problem Completion Status" }),
+  ).toBeInTheDocument();
+});
+
+test("renders number of problem rows", () => {
+  render(<Table problems={problems} />);
+  const rows = screen.getAllByRole("row");
+  expect(rows).toHaveLength(problems.length + 1); // +1 for the header row
+});
+
+test("renders icon for completed/incomplete problems", () => {
+  render(<Table problems={problems} />);
+  const rows = screen.getAllByRole("row").slice(1); // Exclude header row
+
+  rows.forEach((row, index) => {
+    const { completed } = problems[index];
+    const iconLabel = completed ? "Completed problem" : "Incomplete problem";
+    expect(within(row).getByLabelText(iconLabel)).toBeInTheDocument();
+  });
+});

src/components/Table/Table.tsx

@@ -0,0 +1,119 @@
+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[];
+}
+
+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"
+          fill-opacity="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 }: TableProps) {
+  return (
+    <table className={styles.table}>
+      <thead>
+        <tr>
+          <th
+            className={styles.problemHeading}
+            scope="col"
+            aria-label="Problem Title"
+          >
+            Problem
+          </th>
+          <th
+            className={styles.difficultyHeading}
+            scope="col"
+            aria-label="Problem Difficulty"
+          >
+            Difficulty
+          </th>
+          <th
+            className={styles.statusHeading}
+            scope="col"
+            aria-label="Problem Completion Status"
+          >
+            Status
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {problems.map((problem) => {
+          const problemIcon = getTaskIcon(problem.completed);
+          const difficultyClass = getDifficultyClass(problem.difficulty);
+
+          return (
+            <tr key={problem.id}>
+              <td className={styles.problemData}>
+                {problem.id}. {problem.title}
+              </td>
+              <td className={`${styles.difficultyData} ${difficultyClass}`}>
+                {problem.difficulty}
+              </td>
+              <td
+                className={styles.statusData}
+                aria-label={problem.completed ? "Completed" : "Incomplete"}
+              >
+                {problemIcon}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+export default Table;