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/:username/certificate" element={<Story />} />
+        </Routes>
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Certificate> = {};

src/components/Certificate/certificate.test.tsx

@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, it, 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";
+
+describe("<Certificate />", () => {
+  const username = "testUser";
+  const pathname = `/members/${username}/certificate`;
+
+  beforeEach(() => {
+    vi.spyOn(window, "print").mockImplementation(() => {});
+    render(
+      <MemoryRouter initialEntries={[pathname]}>
+        <Routes>
+          <Route
+            path="/members/:username/certificate"
+            element={<Certificate />}
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+  });
+
+  it("render title", () => {
+    const heading = screen.getByRole("heading", { level: 2 });
+    expect(heading).toHaveTextContent(`${username}님의 수료증`);
+  });
+
+  it("render content", () => {
+    const content = screen.getByText("귀하는 어쩌구 저쩌구");
+    expect(content).toBeInTheDocument();
+  });
+
+  it("render print button", () => {
+    const printButton = screen.getByRole("button", { name: "출력" });
+    expect(printButton).toBeInTheDocument();
+  });
+
+  it("calls window.print when the print button is clicked", async () => {
+    const printButton = screen.getByRole("button", { name: "출력" });
+    const user = userEvent.setup();
+    await user.click(printButton);
+    expect(window.print).toHaveBeenCalledOnce();
+  });
+
+  it("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 { username } = 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}`;
+
+  return (
+    <main>
+      <section>
+        <h2>{username}님의 수료증</h2>
+        <article>
+          <p>귀하는 어쩌구 저쩌구</p>
+        </article>
+      </section>
+      <section className={invisiblePrint}>
+        <button onClick={() => window.print()}>출력</button>
+        <a href={linkedInURL}>링크드인에 공유하기</a>
+      </section>
+    </main>
+  );
+}
+
+const invisiblePrint = css({
+  "@media print": { display: "none" },
+});

src/components/Certificate/index.tsx

@@ -0,0 +1,3 @@
+import Certificate from "./certificate";
+
+export default Certificate;

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";
 import ErrorPage from "./components/ErrorPage/ErrorPage";
 import Leaderboard from "./components/leaderboard/leaderboard";
 import Progress from "./components/progress/progress";