fix: review apply

rename: export name modify

fix: function keyword, div tag remove

fix: convert CSF 3.0

fix: test label

fix: local variable position

fix: reset mock window.print

fix: apply userEvent.setUp

fix: change method name from test to it

fix: mock reset

fix: aria-labelledby test

fire: Certificate/index.tsx

rename: file name temp 변경

rename: Certificate로 변경

fix: Certificate import 수정

fix: tag, useParams query

fix: change to test

src/components/Certificate/Certificate.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+
+import Certificate from "./Certificate";
+
+const username = "testUser";
+const pathname = `/members/${username}/certificate`;
+
+const meta: Meta<typeof Certificate> = {
+  component: Certificate,
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={[pathname]}>
+        <Routes>
+          <Route path="/members/:member/certificate" element={<Story />} />
+        </Routes>
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Certificate> = {};

src/components/Certificate/Certificate.test.tsx

@@ -0,0 +1,57 @@
+import { afterAll, beforeEach, expect, test, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import Certificate from "./Certificate";
+
+const username = "testUser";
+const pathname = `/members/${username}/certificate`;
+
+beforeEach(() => {
+  render(
+    <MemoryRouter initialEntries={[pathname]}>
+      <Routes>
+        <Route path="/members/:member/certificate" element={<Certificate />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+});
+
+afterAll(() => {
+  vi.mocked(window.print).mockRestore();
+});
+
+test("render title", () => {
+  const heading = screen.getByRole("region", {
+    name: `${username}님의 수료증`,
+  });
+  expect(heading).toBeInTheDocument();
+});
+
+test("render content", () => {
+  const content = screen.getByText("귀하는 어쩌구 저쩌구");
+  expect(content).toBeInTheDocument();
+});
+
+test("render print button", () => {
+  const printButton = screen.getByRole("button", { name: "출력" });
+  expect(printButton).toBeInTheDocument();
+});
+
+test("calls window.print when the print button is clicked", async () => {
+  vi.spyOn(window, "print").mockImplementation(() => {});
+  const printButton = screen.getByRole("button", { name: "출력" });
+  const user = userEvent.setup();
+  await user.click(printButton);
+  expect(window.print).toHaveBeenCalledOnce();
+});
+
+test("render LinkedIn link", () => {
+  const linkedInLink = screen.getByRole("link", {
+    name: "링크드인에 공유하기",
+  });
+  expect(linkedInLink).toHaveAttribute(
+    "href",
+    `https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${username}&organizationId=104834174&certUrl=${pathname}`,
+  );
+});

src/components/Certificate/certificate.tsx → src/components/Certificate/Certificate.tsx

@@ -2,31 +2,29 @@ import { useLocation, useParams } from "react-router-dom";
 import { css } from "../../../styled-system/css";
 
 export default function Certificate() {
-  const { username } = useParams();
+  const { member } = useParams();
   const { pathname } = useLocation();
 
   /**
    * @description https://addtoprofile.linkedin.com/#header2
    * @argument field를 어디까지 채울것인가
    * @argument 프로필에 등록이라는 이미지가 존재하기에 대체할 것인가?
    */
-  const linkedInURL = `https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${username}&organizationId=104834174&certUrl=${pathname}`;
+  const linkedInURL = `https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${member}&organizationId=104834174&certUrl=${pathname}`;
 
   return (
-    <div>
-      <main>
-        <section>
-          <h2>{username}님의 수료증</h2>
-          <article>
-            <p>귀하는 어쩌구 저쩌구</p>
-          </article>
-        </section>
-        <section className={invisiblePrint}>
-          <button onClick={() => window.print()}>출력</button>
-          <a href={linkedInURL}>링크드인에 공유하기</a>
-        </section>
-      </main>
-    </div>
+    <main>
+      <section aria-labelledby="certification">
+        <h2 id="certification">{member}님의 수료증</h2>
+        <div>
+          <p>귀하는 어쩌구 저쩌구</p>
+        </div>
+      </section>
+      <section className={invisiblePrint}>
+        <button onClick={() => window.print()}>출력</button>
+        <a href={linkedInURL}>링크드인에 공유하기</a>
+      </section>
+    </main>
   );
 }
 

src/main.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import Certificate from "./components/Certificate/certificate";
+import Certificate from "./components/Certificate/Certificate";
 import ErrorPage from "./components/ErrorPage/ErrorPage";
 import Leaderboard from "./components/leaderboard/leaderboard";
 import Progress from "./components/progress/progress";