Fix:스토리북 실행 시 esLint 오류 해결

.gitignore

@@ -8,6 +8,8 @@
 !.yarn/sdks
 !.yarn/versions
 
+node_modules
+
 # testing
 /coverage
 

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
-    "arcanis.vscode-zipfs"
+    "arcanis.vscode-zipfs",
+    "dbaeumer.vscode-eslint"
   ]
 }

.vscode/settings.json

@@ -4,5 +4,6 @@
     "**/.pnp.*": true
   },
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "eslint.nodePath": ".yarn/sdks"
 }

.yarn/sdks/eslint/bin/eslint.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/bin/eslint.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/bin/eslint.js your application uses
+module.exports = absRequire(`eslint/bin/eslint.js`);

.yarn/sdks/eslint/lib/api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint your application uses
+module.exports = absRequire(`eslint`);

.yarn/sdks/eslint/lib/unsupported-api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/use-at-your-own-risk
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/use-at-your-own-risk your application uses
+module.exports = absRequire(`eslint/use-at-your-own-risk`);

.yarn/sdks/eslint/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "eslint",
+  "version": "8.55.0-sdk",
+  "main": "./lib/api.js",
+  "type": "commonjs",
+  "bin": {
+    "eslint": "./bin/eslint.js"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./lib/api.js",
+    "./use-at-your-own-risk": "./lib/unsupported-api.js"
+  }
+}

package.json

@@ -54,6 +54,8 @@
     "@storybook/testing-library": "^0.2.2",
     "@vitejs/plugin-react": "^4.2.0",
     "babel-plugin-named-exports-order": "^0.0.2",
+    "eslint": "^8.55.0",
+    "eslint-config-react-app": "^7.0.1",
     "prop-types": "^15.8.1",
     "storybook": "^7.5.3",
     "vite": "^5.0.4",

yarn.lock

@@ -9162,7 +9162,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.3.0":
+"eslint@npm:^8.3.0, eslint@npm:^8.55.0":
   version: 8.55.0
   resolution: "eslint@npm:8.55.0"
   dependencies:
@@ -15159,6 +15159,8 @@ __metadata:
     "@types/react-dom": ^18.2.17
     "@vitejs/plugin-react": ^4.2.0
     babel-plugin-named-exports-order: ^0.0.2
+    eslint: ^8.55.0
+    eslint-config-react-app: ^7.0.1
     prop-types: ^15.8.1
     react: ^18.2.0
     react-dom: ^18.2.0