chore: DX 설정을 추가합니다.

.eslintrc.js

@@ -0,0 +1,58 @@
+/** @type {import("eslint").Linter.Config} */
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    ecmaFeatures: {
+      jsx: true,
+    },
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ['@typescript-eslint', 'compat'],
+  rules: {
+    'no-console': 'off',
+    'no-continue': 'off',
+    'require-await': 'off',
+    'class-methods-use-this': 'off',
+
+    '@typescript-eslint/ban-ts-comment': 'warn',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/require-await': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/triple-slash-reference': 'off',
+
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'react/destructuring-assignment': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-boolean-value': 'off',
+    'react/jsx-wrap-multilines': 'off',
+    'react/no-array-index-key': 'warn',
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
+    'react/require-default-props': 'off',
+    'react/sort-comp': 'off',
+    'react/state-in-constructor': 'off',
+    'react/static-property-placement': 'off',
+    'react/display-name': 'off',
+
+    'react-hooks/exhaustive-deps': 'warn',
+
+    'compat/compat': 'warn',
+  },
+};

.npmrc

@@ -0,0 +1,2 @@
+enable-pre-post-scripts=true
+auto-install-peers=true

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  printWidth: 120,
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  trailingComma: "all",
+  quoteProps: "consistent",
+  useTabs: false
+};

package.json

@@ -2,27 +2,34 @@
   "name": "image-component",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.28.9",
+    "@tanstack/react-query-devtools": "^5.28.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
+    "@typescript-eslint/eslint-plugin": "7.4.0",
+    "@typescript-eslint/parser": "7.4.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-compat": "4.2.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "prettier": "3.2.5",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7"
   }
 }