[-]: docs lint 파이프라인 복구

packages/document/.eslintrc.json

@@ -1,8 +1,7 @@
 {
   "extends": [
-    "next/babel",
     "next/core-web-vitals",
     "plugin:prettier/recommended",
     "plugin:tailwindcss/recommended"
   ]
-}
+}

packages/document/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "prebuild": "pnpm -C ../main build",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -30,7 +31,7 @@
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "eslint": "^9.1.0",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.2.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -41,4 +42,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.4.5"
   }
-}
+}

packages/document/src/components/code.tsx

@@ -111,7 +111,7 @@ export const Code: React.FC<{
           className={clsx(
             props.className,
             className,
-            'items flex h-full w-full flex-col justify-center overflow-x-auto rounded-lg p-4',
+            'flex size-full flex-col justify-center overflow-x-auto rounded-lg p-4',
           )}
           style={style}
         >
@@ -121,9 +121,9 @@ export const Code: React.FC<{
             }
 
             return (
-              <div {...getLineProps({ line, key: i })}>
+              <div key={i} {...getLineProps({ line, key: i })}>
                 {line.map((token, key) => (
-                  <span {...getTokenProps({ token, key })} />
+                  <span key={key} {...getTokenProps({ token, key })} />
                 ))}
               </div>
             );

packages/document/src/components/docs-layout.tsx

@@ -21,7 +21,7 @@ const TableHeader: React.FC<{
 
 export default function DocsLayout({ children }: { children?: React.ReactNode }) {
   return (
-    <div className="flex min-h-screen flex-col bg-white bg-opacity-50">
+    <div className="flex min-h-screen flex-col bg-white/50">
       <div className="mx-auto w-full max-w-4xl flex-1 px-2">
         <header className=" col-start-1 col-end-6 mb-16 mt-12 flex items-center justify-between px-2">
           <Link href="/">React Tutorial Overlay</Link>
@@ -49,7 +49,7 @@ export default function DocsLayout({ children }: { children?: React.ReactNode })
             </div>
           </nav>
 
-          <main className="prose-tutorial prose col-span-4 w-full flex-1 text-tutorial-900">{children}</main>
+          <main className="prose col-span-4 w-full flex-1 text-tutorial-900">{children}</main>
         </div>
       </div>
       <Footer />

packages/document/src/pages/_app.tsx

@@ -18,7 +18,7 @@ const components: MDXComponents = {
     props.className ? (
       <Code className={props.className} snippet={props.children as string} />
     ) : (
-      <code className="my-0.5 rounded bg-tutorial-300 bg-opacity-40 px-1 py-1" {...props} />
+      <code className="my-0.5 rounded bg-tutorial-300/40 p-1" {...props} />
     ),
 };
 

packages/document/src/pages/index.tsx

@@ -29,18 +29,18 @@ export default function Home() {
         description="A headless library that makes it easy to put tutorials on top of the screen."
       />
       <div className="container prose mx-auto flex flex-col items-center justify-center">
-        <h1 className="my-[5rem]">React Tutorial Overlay</h1>
+        <h1 className="my-20">React Tutorial Overlay</h1>
         <div className="flex gap-4">
           <button
             id="button-open"
             onClick={handleClick}
-            className="rounded-md bg-tutorial-600 px-[1rem] py-[0.5rem] text-tutorial-50"
+            className="rounded-md bg-tutorial-600 px-4 py-2 text-tutorial-50"
           >
             Start tutorial
           </button>
           <button
             id="button-docs"
-            className="rounded-md bg-tutorial-600 px-[1rem] py-[0.5rem] text-tutorial-50"
+            className="rounded-md bg-tutorial-600 px-4 py-2 text-tutorial-50"
             onClick={() => router.push('/docs')}
           >
             Documentation