feat: Certificate page implement

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

@@ -0,0 +1,33 @@
+import { useLocation, useParams } from "react-router-dom";
+import { css } from "../../../styled-system/css";
+
+export default function Certificate() {
+  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=${member}&organizationId=104834174&certUrl=${pathname}`;
+
+  return (
+    <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>
+  );
+}
+
+const invisiblePrint = css({
+  "@media print": { display: "none" },
+});

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";