Panda CSS 의존성 제거 및 기존 코드 수정

package.json

@@ -13,19 +13,16 @@
     "test": "vitest",
     "coverage": "vitest run src --coverage",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "prepare": "husky & panda codegen"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.59.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
     "@eslint/js": "^9.13.0",
     "@faker-js/faker": "^9.0.3",
-    "@pandacss/dev": "^0.46.1",
     "@storybook/addon-essentials": "^8.3.6",
     "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",

src/components/Certificate/Certificate.module.css

@@ -0,0 +1,7 @@
+.certificate {
+  footer {
+    @media print {
+      display: none;
+    }
+  }
+}

src/components/Certificate/Certificate.tsx

@@ -1,4 +1,4 @@
-import { css } from "../../../styled-system/css";
+import styles from "./Certificate.module.css";
 
 export default function Certificate() {
   const member = new URL(location.href).searchParams.get("member");
@@ -11,21 +11,17 @@ export default function Certificate() {
   const linkedInURL = `https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${member}&organizationId=104834174&certUrl=${location.href}`;
 
   return (
-    <main>
+    <main className={styles.certificate}>
       <section aria-labelledby="certification">
         <h2 id="certification">{member}님의 수료증</h2>
         <div>
           <p>귀하는 어쩌구 저쩌구</p>
         </div>
       </section>
-      <section className={invisiblePrint}>
+      <footer>
         <button onClick={() => window.print()}>출력</button>
         <a href={linkedInURL}>링크드인에 공유하기</a>
-      </section>
+      </footer>
     </main>
   );
 }
-
-const invisiblePrint = css({
-  "@media print": { display: "none" },
-});

src/components/Leaderboard/Leaderboard.module.css

@@ -0,0 +1,9 @@
+.leaderboard {
+  article {
+    ul {
+      li {
+        margin-bottom: 20px;
+      }
+    }
+  }
+}

src/components/Leaderboard/Leaderboard.test.tsx

@@ -7,7 +7,7 @@ describe("<Leaderboard/>", () => {
 
   it("renders the members list section", () => {
     expect(
-      screen.getByRole("region", { name: /members list/i }),
+      screen.getByRole("article", { name: /members list/i }),
     ).toBeInTheDocument();
   });
 

src/components/Leaderboard/Leaderboard.tsx

@@ -1,3 +1,5 @@
+import styles from "./Leaderboard.module.css";
+
 export default function Leaderboard() {
   const members = [
     { name: "DaleSeo", solved: 71, rank: "새싹" },
@@ -9,14 +11,14 @@ export default function Leaderboard() {
   ];
 
   return (
-    <div>
+    <main className={styles.leaderboard}>
       <h1>Leaderboard</h1>
 
-      <section aria-labelledby="leaderboard">
+      <article aria-labelledby="leaderboard">
         <h2 id="leaderboard">Members List</h2>
         <ul>
           {members.map((member) => (
-            <li key={member.name} style={{ marginBottom: "20px" }}>
+            <li key={member.name}>
               <div>등급: {member.rank}</div>
               <div>진행 상황: {member.solved}</div>
               <div>
@@ -30,7 +32,7 @@ export default function Leaderboard() {
             </li>
           ))}
         </ul>
-      </section>
-    </div>
+      </article>
+    </main>
   );
 }

src/index.css

@@ -1 +1,82 @@
-@layer reset, base, tokens, recipes, utilities;
+:root {
+  --primary: #846de9;
+  --secondary: #24eaca;
+  --bg-100: #fdfdff;
+  --bg-200: #fbfaff;
+  --bg-300: #eee8fe;
+  --bg-400: #5333e1;
+  --text-900: #160b46;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+}
+
+* {
+  font-family: "Spoqa Han Sans Neo", "Noto Sans KR", sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  background: none;
+  border: none;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+a:visited {
+  color: inherit;
+}
+
+a:hover {
+  color: inherit;
+  text-decoration: none;
+  transition: 200ms;
+}
+
+a:active {
+  color: inherit;
+}
+
+a:focus {
+  outline: none;
+}
+
+button:hover {
+  transition: 200ms;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ol,
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+
+ol,
+ul {
+  list-style-type: none;
+}

tsconfig.app.json

@@ -23,8 +23,6 @@
   "include": [
     "src",
     /* Vitest */
-    "vitest.setup.ts",
-    /* PandaCSS */
-    "styled-system"
+    "vitest.setup.ts"
   ]
 }