Merge pull request #6 from Team-INSERT/feat/stylesheet-change

chore(dependency): vanilla extract로 의존성 변경

.eslintignore

@@ -1,4 +1,5 @@
 jest.config.js
 jest.setup.js
-next.config.js
-commitlint.config.js
+commitlint.config.js
+.eslintrc.js
+next.config.mjs

app/page.tsx

@@ -1,95 +1,7 @@
-import Image from "next/image";
-import styles from "./page.module.css";
+import React from "react";
 
-export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
+const Home = () => {
+  return <div />;
+};
 
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  );
-}
+export default Home;

next.config.mjs

@@ -1,13 +1,17 @@
 import { withSentryConfig } from "@sentry/nextjs";
-import stylexPlugin from "@stylexjs/nextjs-plugin";
+import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
+
+const withVanillaExtract = createVanillaExtractPlugin({
+  identifiers: ({ hash }) => `bumawiki_${hash}`,
+});
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig = withVanillaExtract({
   swcMinify: true,
   images: {
     domains: [],
   },
-};
+});
 
 export default withSentryConfig(
   nextConfig,

package.json

@@ -12,13 +12,11 @@
   },
   "dependencies": {
     "@sentry/nextjs": "^7.104.0",
-    "@stylexjs/babel-plugin": "^0.5.1",
-    "@stylexjs/nextjs-plugin": "^0.5.1",
-    "@stylexjs/stylex": "^0.5.1",
     "@tanstack/react-query": "^5.24.6",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
+    "@vanilla-extract/css": "^1.14.1",
     "autoprefixer": "^10.4.18",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
@@ -38,9 +36,11 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@stylexjs/babel-plugin": "^0.5.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@vanilla-extract/next-plugin": "^2.3.6",
     "eslint": "^8",
     "eslint-config-next": "14.1.1",
     "husky": "^9.0.11",