fix: esm-cjs 충돌로 인해 발생하는 오류를 수정 및 ts-node -> tsx로 변경 (#ATR-575)

.eslintrc.cjs

@@ -4,13 +4,11 @@ module.exports = {
     'airbnb',
     'airbnb-typescript',
     'plugin:tailwindcss/recommended',
-    'plugin:prettier/recommended',
     'plugin:import/recommended',
     'prettier',
   ],
   parser: '@typescript-eslint/parser',
   rules: {
-    'prettier/prettier': 'error',
     'import/extensions': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/react-in-jsx-scope': 'off',

packages/icons/package.json

@@ -12,15 +12,15 @@
     "lint": "eslint .",
     "lint-staged": "lint-staged",
     "build": "pnpm renew && tsup",
-    "generate": "pnpm svgo:emoji && pnpm svgo:outline && pnpm svgo:solid && pnpm svgr:emoji && pnpm svgr:outline && pnpm svgr:solid && pnpm generate",
+    "generate": "pnpm svgo:emoji && pnpm svgo:outline && pnpm svgo:solid && pnpm svgr:emoji && pnpm svgr:outline && pnpm svgr:solid && pnpm export",
     "renew": "pnpm svgo:emoji && pnpm svgo:outline && pnpm svgo:solid && pnpm update:emoji && pnpm update:outline && pnpm update:solid && pnpm export",
-    "export": "ts-node ./scripts/generateExports.ts && eslint --fix .",
+    "export": "tsx ./scripts/generateExports.ts && prettier --write . --ignore-unknown",
     "svgo:emoji": "svgo -f ./src/emoji/svg --config=svgo.emoji.mjs",
     "svgo:outline": "svgo -f ./src/outline/svg --config=svgo.outline.mjs",
     "svgo:solid": "svgo -f ./src/solid/svg --config=svgo.solid.mjs",
-    "svgr:emoji": "svgr --no-index --template ./svgr-template.js --no-prettier --icon --typescript --out-dir src/emoji/react src/emoji/svg",
-    "svgr:outline": "svgr --no-index --template ./svgr-template.js --no-prettier --icon --typescript --out-dir src/outline/react src/outline/svg",
-    "svgr:solid": "svgr --no-index --template ./svgr-template.js --no-prettier --icon --typescript --out-dir src/solid/react src/solid/svg",
+    "svgr:emoji": "svgr --no-index --template svgr-template.cjs --no-prettier --icon --typescript --out-dir src/emoji/react src/emoji/svg",
+    "svgr:outline": "svgr --no-index --template svgr-template.cjs --no-prettier --icon --typescript --out-dir src/outline/react src/outline/svg",
+    "svgr:solid": "svgr --no-index --template svgr-template.cjs --no-prettier --icon --typescript --out-dir src/solid/react src/solid/svg",
     "update:emoji": "pnpm svgr:emoji --ignore-existing",
     "update:outline": "pnpm svgr:outline --ignore-existing",
     "update:solid": "pnpm svgr:solid --ignore-existing"
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@attraction/config": "workspace:^",
     "@svgr/cli": "^8.1.0",
-    "svgo": "^3.3.2"
+    "svgo": "^3.3.2",
+    "tsx": "^4.16.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",

packages/icons/scripts/generateExports.ts

@@ -1,8 +1,13 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable no-console */
 
-const fs = require('fs')
-const path = require('path')
+import { promises as fs } from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+// __dirname 을 ESM 에서 사용할 수 있도록 변환
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 // 관리할 디렉토리
 const directories = [
@@ -13,32 +18,24 @@ const directories = [
 
 const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
 
-directories.forEach(({ dir, subDir }) => {
-  const directoryPath = path.join(__dirname, '..', 'src', dir, subDir)
-  const outputPath = path.join(__dirname, '..', 'src', dir, 'index.ts')
-
-  fs.readdir(directoryPath, (err: NodeJS.ErrnoException, files: string[]) => {
-    if (err) {
-      console.error('Error reading directory', err)
+directories.forEach(async ({ dir, subDir }) => {
+  const directoryPath = path.join(dirname, '..', 'src', dir, subDir)
+  const outputPath = path.join(dirname, '..', 'src', dir, 'index.ts')
 
-      return
-    }
+  try {
+    const files = await fs.readdir(directoryPath)
 
     const exportStatements = files
       .filter((file) => file.endsWith('.tsx'))
       .map((file) => {
         const componentName = file.replace('.tsx', '')
-
         return `export { default as ${componentName}${capitalize(dir)} } from './${subDir}/${componentName}';\n`
       })
       .join('')
 
-    fs.writeFile(outputPath, exportStatements, (err: NodeJS.ErrnoException) => {
-      if (err) {
-        console.error('Error writing to file', err)
-        return
-      }
-      console.log(`Exports generated successfully for ${dir}.`)
-    })
-  })
+    await fs.writeFile(outputPath, exportStatements)
+    console.log(`Exports generated successfully for ${dir}.`)
+  } catch (err) {
+    console.error('Error processing directory', err)
+  }
 })

packages/icons/tsconfig.json

@@ -20,6 +20,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", "tailwind.config.js", "svgr-template.js"],
+  "include": ["**/*.ts", "**/*.tsx", "tailwind.config.js", "svgr-template.cjs"],
   "exclude": ["node_modules"]
 }