fix: eslint, prettier 적용되도록 수정

.eslintignore

@@ -0,0 +1,3 @@
+build
+dist
+public

.eslintrc.cjs

@@ -1,51 +1,58 @@
 module.exports = {
   root: true,
-
-  env: {
-    browser: true,
-    node: true,
-  },
-
-  parser: '@typescript-eslint/parser',
-
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    project: './tsconfig.json',
-    tsconfigRootDir: __dirname,
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-
-  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
-
+  env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
+    "eslint:recommended",
+    //"plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
   ],
-
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react/jsx-uses-react': 0,
-    'react/react-in-jsx-scope': 0,
-    'react-hooks/exhaustive-deps': 1,
-    '@typescript-eslint/no-explicit-any': 0,
-    'no-console': [
-      'warn',
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "prettier/prettier": [
+      "warn",
       {
-        allow: ['warn', 'error'],
+        endOfLine: "auto",
       },
     ],
-    'prettier/prettier': 'error'
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
+    eqeqeq: "error", // 항상 일치 연산자(=== 및 !==) 사용을 강제
+    curly: "error", // 제어문에서 항상 중괄호 사용을 강제
+    quotes: ["error", "single"], // 문자열은 항상 홀 따옴표로 설정
+    "comma-style": ["error", "last"], // 쉼표 스타일을 (객체에서)마지막 요소 뒤에 사용하도록 설정
+    "no-unused-vars": "warn", // 사용되지 않는 변수에 대한 경고 표시
+    "no-console": "warn", // console 사용 시 경고 표시
+    "no-extra-semi": "error", // 추가적인 세미콜론 사용을 방지
+    "no-unused-expressions": "error", // 사용되지 않는 표현식에 대한 경고 표시
+    indent: ["error", 2], // 들여쓰기는 두 칸으로 설정
+    semi: ["warn", "always"], // 항상 세미콜론 사용을 적극 권장
+    "no-undef": "error", // 정의되지 않은 변수에 대한 경고 표시
+    "no-trailing-spaces": "warn", // 줄 끝에 공백 사용을 방지
+    "no-multiple-empty-lines": "warn", // 연속된 빈 줄 사용을 방지
+    "arrow-spacing": "warn", // 화살표 함수의 화살표 주변에 공백 사용을 강제
+    "no-const-assign": "error", // const 변수에 재할당을 방지
+    //"no-extra-parens": "warn", // 불필요한 괄호 사용을 방지
+    "no-multi-spaces": "error", // 연속된 공백 사용을 방지
+    "prefer-const": "error", // 변수 재할당을 하지 않는 경우 const 사용을 권장
+    "no-else-return": "warn", // else 블록에서 return 사용을 방지
+    "no-floating-decimal": "error", // 소수점 앞에 있는 0 생략을 방지
+    "no-new-object": "error", // Object 생성자 사용을 방지
+    "no-shadow": "error", // 외부 범위에서 이미 선언된 변수와 동일한 이름의 변수를 선언하는 것을 방지
+    "no-param-reassign": "error", // 함수 매개변수의 재할당을 방지
+    "prefer-template": "warn", // 문자열 연결 대신 템플릿 리터럴 사용을 권장
+    radix: "error", // parseInt() 함수 사용 시 진수를 명시적으로 지정하도록 강제
+    "no-useless-constructor": "error", // 불필요한 생성자 사용을 방지
+    "no-alert": "warn", // alert() 함수 사용을 방지
+    "no-empty-pattern": "warn", // 빈 객체나 배열 분해 사용을 방지
+    "no-eval": "error", // eval() 함수 사용을 방지
+    "no-implicit-globals": "error", // 암묵적인 전역 변수 사용을 방지
+    "no-implied-eval": "error", // 암시적인 eval() 사용을 방지
+    "no-loop-func": "error", // 루프 내에서 함수 선언을 방지
+    "no-iterator": "error", // __iterator__ 속성 사용을 방지
+    "no-new-wrappers": "error", // 기본 객체 래퍼 클래스 사용을 방지
+    "no-restricted-globals": "error", // 특정한 전역 변수 사용을 방지
+    "no-return-assign": "warn", // 할당문을 리턴문에서 사용을 방지
   },
-
-  ignorePatterns: ['node_modules/'],
 };

.gitignore

@@ -26,3 +26,15 @@ dist-ssr
 
 #각자 알아서 env 파일 만들고 관리하기 !
 .env
+
+### yarn ###
+# used Zero-Install
+/.yarn
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+install-state.gz

package.json

@@ -14,30 +14,39 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@eslint/js": "8.57.0",
+    "@stylelint/postcss-css-in-js": "^0.38.0",
     "@svgr/cli": "^8.1.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "8.57.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "globals": "^15.11.0",
     "postcss-styled-syntax": "^0.7.0",
-    "stylelint": "^16.10.0",
+    "postcss-syntax": "^0.36.2",
+    "prettier": "^3.2.5",
+    "stylelint": "^16.5.0",
+    "stylelint-config-clean-order": "^5.4.2",
     "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-styled-components": "^0.1.1",
     "stylelint-order": "^6.0.4",
-    "typescript": "^5.6.3",
+    "typescript": "^5.2.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.2.0",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "packageManager": "[email protected]"
 }

src/apis/apis.ts

@@ -1 +1 @@
-//예시
+//예시

src/pages/Main/Main.tsx

@@ -1,18 +1,15 @@
 //import React from 'react'
-import * as S from "./Main.styled"
-import { BtnFloating } from '@assets/svgs'
-import { Hihi } from "@assets/svgs"
+import * as S from './Main.styled';
+import { BtnFloating } from '@assets/svgs';
+import { Hihi } from '@assets/svgs';
 
 const Main = () => {
-  console.log("hi");
-  console.log('hi');
-  console.log("hi");
   return (
     <S.MainWrapper>
       테스트테스트
-      <BtnFloating width={'100px'} height={'100px'}/>
+      <BtnFloating width={'100px'} height={'100px'} />
     </S.MainWrapper>
-  )
-}
+  );
+};
 
-export default Main
+export default Main;

tsconfig.json

@@ -1,7 +1,38 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@assets/*": ["src/assets/*"],
+      "@pages/*": ["src/pages/*"],
+      "@components/*": ["src/components/*"],
+      "@styles/*": ["src/styles/*"],
+      "@constants/*": ["src/constants/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@utils/*": ["src/utils/*"],
+      "@apis/*": ["src/apis/*"]
+    },
+
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "types": ["vite-plugin-svgr/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "src/svg.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -1,24 +1,11 @@
 {
   "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
+    "composite": true,
     "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
   },
   "include": ["vite.config.ts"]
 }