From c6b2f9b31ca5d82e048cb605312ee5c19b622980 Mon Sep 17 00:00:00 2001 From: zero0205 Date: Wed, 8 Jan 2025 11:40:55 +0900 Subject: [PATCH 01/15] =?UTF-8?q?:wrench:=20[Chore]:=20airbnb=20eslint=20?= =?UTF-8?q?=EB=AA=A8=EB=93=88=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/.eslintrc | 11 +- apps/client/package.json | 7 + pnpm-lock.yaml | 442 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 451 insertions(+), 9 deletions(-) diff --git a/apps/client/.eslintrc b/apps/client/.eslintrc index c62c6898..70e53bec 100644 --- a/apps/client/.eslintrc +++ b/apps/client/.eslintrc @@ -1,7 +1,7 @@ { "parser": "@typescript-eslint/parser", "parserOptions": { - "project": ["./apps/client/tsconfig.json"], + "project": "./tsconfig.json", "ecmaVersion": 12, "sourceType": "module", "ecmaFeatures": { @@ -12,13 +12,7 @@ "browser": true, "es2021": true }, - "extends": [ - "eslint:recommended", - "plugin:react/recommended", - "plugin:react-hooks/recommended", - "plugin:@typescript-eslint/recommended", - "prettier" - ], + "extends": ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "prettier"], "settings": { "react": { "version": "detect" @@ -29,7 +23,6 @@ "react/react-in-jsx-scope": "off", "react/no-unescaped-entities": "off", "react/prop-types": "off", - "react-hooks/exhaustive-deps": "warn", "@typescript-eslint/no-explicit-any": "warn", "@typescript-eslint/no-unused-vars": [ "error", diff --git a/apps/client/package.json b/apps/client/package.json index 731560f5..563857a2 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -33,10 +33,16 @@ "@types/node": "^20.3.1", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", + "@typescript-eslint/eslint-plugin": "^7.18.0", + "@typescript-eslint/parser": "^7.18.0", "@vitejs/plugin-react-swc": "^3.5.0", "autoprefixer": "^10.4.20", "eslint": "*", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-airbnb-typescript": "^18.0.0", "eslint-config-prettier": "*", + "eslint-plugin-import": "^2.31.0", + "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-prettier": "*", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.0.0", @@ -44,6 +50,7 @@ "postcss": "^8.4.47", "prettier": "*", "tailwindcss": "^3.4.14", + "typescript": "workspace:*", "vite": "^5.4.10" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 98038132..44974df7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -348,6 +348,12 @@ importers: '@types/react-dom': specifier: ^18.3.1 version: 18.3.1 + '@typescript-eslint/eslint-plugin': + specifier: ^7.18.0 + version: 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/parser': + specifier: ^7.18.0 + version: 7.18.0(eslint@8.57.1)(typescript@5.6.3) '@vitejs/plugin-react-swc': specifier: ^3.5.0 version: 3.7.1(vite@5.4.10(@types/node@20.17.6)(terser@5.36.0)) @@ -357,9 +363,21 @@ importers: eslint: specifier: '*' version: 8.57.1 + eslint-config-airbnb: + specifier: ^19.0.4 + version: 19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.1))(eslint-plugin-react-hooks@5.0.0(eslint@8.57.1))(eslint-plugin-react@7.37.2(eslint@8.57.1))(eslint@8.57.1) + eslint-config-airbnb-typescript: + specifier: ^18.0.0 + version: 18.0.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) eslint-config-prettier: specifier: '*' version: 8.10.0(eslint@8.57.1) + eslint-plugin-import: + specifier: ^2.31.0 + version: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1) + eslint-plugin-jsx-a11y: + specifier: ^6.10.2 + version: 6.10.2(eslint@8.57.1) eslint-plugin-prettier: specifier: '*' version: 4.2.1(eslint-config-prettier@8.10.0(eslint@8.57.1))(eslint@8.57.1)(prettier@2.8.8) @@ -381,6 +399,9 @@ importers: tailwindcss: specifier: ^3.4.14 version: 3.4.14(ts-node@10.9.2(@swc/core@1.8.0)(@types/node@20.17.6)(typescript@5.6.3)) + typescript: + specifier: '*' + version: 5.6.3 vite: specifier: ^5.4.10 version: 5.4.10(@types/node@20.17.6)(terser@5.36.0) @@ -2361,6 +2382,9 @@ packages: cpu: [x64] os: [win32] + '@rtsao/scc@1.1.0': + resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} + '@scarf/scarf@1.4.0': resolution: {integrity: sha512-xxeapPiUXdZAE3che6f3xogoJPeZgig6omHEy1rIY5WVsB3H2BHNnZH+gHG6x91SCWyQCzWGsuL2Hh3ClO5/qQ==} @@ -2754,6 +2778,9 @@ packages: '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} + '@types/json5@0.0.29': + resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} + '@types/jsonwebtoken@9.0.5': resolution: {integrity: sha512-VRLSGzik+Unrup6BsouBeHsf4d1hOEgYWTm/7Nmw1sXoN1+tRly/Gy/po3yeahnP4jfnQWWAhQAqcNfH7ngOkA==} @@ -2857,6 +2884,17 @@ packages: typescript: optional: true + '@typescript-eslint/eslint-plugin@7.18.0': + resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==} + engines: {node: ^18.18.0 || >=20.0.0} + peerDependencies: + '@typescript-eslint/parser': ^7.0.0 + eslint: ^8.56.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/parser@6.21.0': resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==} engines: {node: ^16.0.0 || >=18.0.0} @@ -2867,10 +2905,24 @@ packages: typescript: optional: true + '@typescript-eslint/parser@7.18.0': + resolution: {integrity: sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==} + engines: {node: ^18.18.0 || >=20.0.0} + peerDependencies: + eslint: ^8.56.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/scope-manager@6.21.0': resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==} engines: {node: ^16.0.0 || >=18.0.0} + '@typescript-eslint/scope-manager@7.18.0': + resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==} + engines: {node: ^18.18.0 || >=20.0.0} + '@typescript-eslint/type-utils@6.21.0': resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==} engines: {node: ^16.0.0 || >=18.0.0} @@ -2881,10 +2933,24 @@ packages: typescript: optional: true + '@typescript-eslint/type-utils@7.18.0': + resolution: {integrity: sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==} + engines: {node: ^18.18.0 || >=20.0.0} + peerDependencies: + eslint: ^8.56.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/types@6.21.0': resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==} engines: {node: ^16.0.0 || >=18.0.0} + '@typescript-eslint/types@7.18.0': + resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==} + engines: {node: ^18.18.0 || >=20.0.0} + '@typescript-eslint/typescript-estree@6.21.0': resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==} engines: {node: ^16.0.0 || >=18.0.0} @@ -2894,16 +2960,35 @@ packages: typescript: optional: true + '@typescript-eslint/typescript-estree@7.18.0': + resolution: {integrity: sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==} + engines: {node: ^18.18.0 || >=20.0.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/utils@6.21.0': resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 + '@typescript-eslint/utils@7.18.0': + resolution: {integrity: sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==} + engines: {node: ^18.18.0 || >=20.0.0} + peerDependencies: + eslint: ^8.56.0 + '@typescript-eslint/visitor-keys@6.21.0': resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==} engines: {node: ^16.0.0 || >=18.0.0} + '@typescript-eslint/visitor-keys@7.18.0': + resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==} + engines: {node: ^18.18.0 || >=20.0.0} + '@ungap/structured-clone@1.2.0': resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} @@ -3085,6 +3170,10 @@ packages: resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==} engines: {node: '>=10'} + aria-query@5.3.2: + resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==} + engines: {node: '>= 0.4'} + array-buffer-byte-length@1.0.1: resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==} engines: {node: '>= 0.4'} @@ -3107,6 +3196,10 @@ packages: resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==} engines: {node: '>= 0.4'} + array.prototype.findlastindex@1.2.5: + resolution: {integrity: sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==} + engines: {node: '>= 0.4'} + array.prototype.flat@1.3.2: resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==} engines: {node: '>= 0.4'} @@ -3126,6 +3219,9 @@ packages: asap@2.0.6: resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==} + ast-types-flow@0.0.8: + resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==} + async@0.2.10: resolution: {integrity: sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ==} @@ -3158,9 +3254,17 @@ packages: resolution: {integrity: sha512-NZKeq9AfyQvEeNlN0zSYAaWrmBffJh3IELMZfRpJVWgrpEbtEpnjvzqBPf+mxoI287JohRDoa+/nsfqqiZmF6g==} engines: {node: '>= 6.0.0'} + axe-core@4.10.2: + resolution: {integrity: sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==} + engines: {node: '>=4'} + axios@1.7.7: resolution: {integrity: sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==} + axobject-query@4.1.0: + resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==} + engines: {node: '>= 0.4'} + babel-jest@29.7.0: resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -3490,6 +3594,9 @@ packages: resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==} engines: {'0': node >= 0.8} + confusing-browser-globals@1.0.11: + resolution: {integrity: sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==} + consola@2.15.3: resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==} @@ -3590,6 +3697,9 @@ packages: resolution: {integrity: sha512-Wa3cgG4+IC9zqezwozLbVBIiJ7Cjg1J2hPxvXcp1F3SFjzQzbdiGhOtI1thVfRBnBCX3kvCW63iaP9v+4yYa8w==} hasBin: true + damerau-levenshtein@1.0.8: + resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==} + data-uri-to-buffer@4.0.1: resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==} engines: {node: '>= 12'} @@ -3617,6 +3727,14 @@ packages: supports-color: optional: true + debug@3.2.7: + resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + debug@4.3.7: resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==} engines: {node: '>=6.0'} @@ -3851,12 +3969,76 @@ packages: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} + eslint-config-airbnb-base@15.0.0: + resolution: {integrity: sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==} + engines: {node: ^10.12.0 || >=12.0.0} + peerDependencies: + eslint: ^7.32.0 || ^8.2.0 + eslint-plugin-import: ^2.25.2 + + eslint-config-airbnb-typescript@18.0.0: + resolution: {integrity: sha512-oc+Lxzgzsu8FQyFVa4QFaVKiitTYiiW3frB9KYW5OWdPrqFc7FzxgB20hP4cHMlr+MBzGcLl3jnCOVOydL9mIg==} + peerDependencies: + '@typescript-eslint/eslint-plugin': ^7.0.0 + '@typescript-eslint/parser': ^7.0.0 + eslint: ^8.56.0 + + eslint-config-airbnb@19.0.4: + resolution: {integrity: sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==} + engines: {node: ^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^7.32.0 || ^8.2.0 + eslint-plugin-import: ^2.25.3 + eslint-plugin-jsx-a11y: ^6.5.1 + eslint-plugin-react: ^7.28.0 + eslint-plugin-react-hooks: ^4.3.0 + eslint-config-prettier@8.10.0: resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==} hasBin: true peerDependencies: eslint: '>=7.0.0' + eslint-import-resolver-node@0.3.9: + resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==} + + eslint-module-utils@2.12.0: + resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==} + engines: {node: '>=4'} + peerDependencies: + '@typescript-eslint/parser': '*' + eslint: '*' + eslint-import-resolver-node: '*' + eslint-import-resolver-typescript: '*' + eslint-import-resolver-webpack: '*' + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true + eslint: + optional: true + eslint-import-resolver-node: + optional: true + eslint-import-resolver-typescript: + optional: true + eslint-import-resolver-webpack: + optional: true + + eslint-plugin-import@2.31.0: + resolution: {integrity: sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==} + engines: {node: '>=4'} + peerDependencies: + '@typescript-eslint/parser': '*' + eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9 + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true + + eslint-plugin-jsx-a11y@6.10.2: + resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==} + engines: {node: '>=4.0'} + peerDependencies: + eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9 + eslint-plugin-prettier@4.2.1: resolution: {integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==} engines: {node: '>=12.0.0'} @@ -4783,6 +4965,10 @@ packages: json-stable-stringify-without-jsonify@1.0.1: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} + json5@1.0.2: + resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==} + hasBin: true + json5@2.2.3: resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} engines: {node: '>=6'} @@ -4821,6 +5007,13 @@ packages: kuler@2.0.0: resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==} + language-subtag-registry@0.3.23: + resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==} + + language-tags@1.0.9: + resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==} + engines: {node: '>=0.10'} + leven@3.1.0: resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==} engines: {node: '>=6'} @@ -5228,6 +5421,10 @@ packages: resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==} engines: {node: '>= 0.4'} + object.groupby@1.0.3: + resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==} + engines: {node: '>= 0.4'} + object.values@1.2.0: resolution: {integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==} engines: {node: '>= 0.4'} @@ -5953,6 +6150,10 @@ packages: resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==} engines: {node: '>=18'} + string.prototype.includes@2.0.1: + resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==} + engines: {node: '>= 0.4'} + string.prototype.matchall@4.0.11: resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==} engines: {node: '>= 0.4'} @@ -6210,6 +6411,9 @@ packages: resolution: {integrity: sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==} engines: {node: '>=10.13.0'} + tsconfig-paths@3.15.0: + resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==} + tsconfig-paths@4.2.0: resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==} engines: {node: '>=6'} @@ -9043,6 +9247,8 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.24.4': optional: true + '@rtsao/scc@1.1.0': {} + '@scarf/scarf@1.4.0': {} '@sinclair/typebox@0.27.8': {} @@ -9562,6 +9768,8 @@ snapshots: '@types/json-schema@7.0.15': {} + '@types/json5@0.0.29': {} + '@types/jsonwebtoken@9.0.5': dependencies: '@types/node': 20.17.6 @@ -9700,6 +9908,24 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)': + dependencies: + '@eslint-community/regexpp': 4.12.1 + '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/scope-manager': 7.18.0 + '@typescript-eslint/type-utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/visitor-keys': 7.18.0 + eslint: 8.57.1 + graphemer: 1.4.0 + ignore: 5.3.2 + natural-compare: 1.4.0 + ts-api-utils: 1.4.0(typescript@5.6.3) + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.3.3)': dependencies: '@typescript-eslint/scope-manager': 6.21.0 @@ -9713,11 +9939,29 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3)': + dependencies: + '@typescript-eslint/scope-manager': 7.18.0 + '@typescript-eslint/types': 7.18.0 + '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3) + '@typescript-eslint/visitor-keys': 7.18.0 + debug: 4.3.7(supports-color@5.5.0) + eslint: 8.57.1 + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/scope-manager@6.21.0': dependencies: '@typescript-eslint/types': 6.21.0 '@typescript-eslint/visitor-keys': 6.21.0 + '@typescript-eslint/scope-manager@7.18.0': + dependencies: + '@typescript-eslint/types': 7.18.0 + '@typescript-eslint/visitor-keys': 7.18.0 + '@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.3.3)': dependencies: '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3) @@ -9730,8 +9974,22 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/type-utils@7.18.0(eslint@8.57.1)(typescript@5.6.3)': + dependencies: + '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3) + '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3) + debug: 4.3.7(supports-color@5.5.0) + eslint: 8.57.1 + ts-api-utils: 1.4.0(typescript@5.6.3) + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/types@6.21.0': {} + '@typescript-eslint/types@7.18.0': {} + '@typescript-eslint/typescript-estree@6.21.0(typescript@5.3.3)': dependencies: '@typescript-eslint/types': 6.21.0 @@ -9747,6 +10005,21 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/typescript-estree@7.18.0(typescript@5.6.3)': + dependencies: + '@typescript-eslint/types': 7.18.0 + '@typescript-eslint/visitor-keys': 7.18.0 + debug: 4.3.7(supports-color@5.5.0) + globby: 11.1.0 + is-glob: 4.0.3 + minimatch: 9.0.5 + semver: 7.6.3 + ts-api-utils: 1.4.0(typescript@5.6.3) + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.3.3)': dependencies: '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1) @@ -9761,11 +10034,27 @@ snapshots: - supports-color - typescript + '@typescript-eslint/utils@7.18.0(eslint@8.57.1)(typescript@5.6.3)': + dependencies: + '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1) + '@typescript-eslint/scope-manager': 7.18.0 + '@typescript-eslint/types': 7.18.0 + '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3) + eslint: 8.57.1 + transitivePeerDependencies: + - supports-color + - typescript + '@typescript-eslint/visitor-keys@6.21.0': dependencies: '@typescript-eslint/types': 6.21.0 eslint-visitor-keys: 3.4.3 + '@typescript-eslint/visitor-keys@7.18.0': + dependencies: + '@typescript-eslint/types': 7.18.0 + eslint-visitor-keys: 3.4.3 + '@ungap/structured-clone@1.2.0': {} '@vitejs/plugin-react-swc@3.7.1(vite@5.4.10(@types/node@20.17.6)(terser@5.36.0))': @@ -9958,6 +10247,8 @@ snapshots: dependencies: tslib: 2.8.1 + aria-query@5.3.2: {} + array-buffer-byte-length@1.0.1: dependencies: call-bind: 1.0.7 @@ -9987,6 +10278,15 @@ snapshots: es-object-atoms: 1.0.0 es-shim-unscopables: 1.0.2 + array.prototype.findlastindex@1.2.5: + dependencies: + call-bind: 1.0.7 + define-properties: 1.2.1 + es-abstract: 1.23.3 + es-errors: 1.3.0 + es-object-atoms: 1.0.0 + es-shim-unscopables: 1.0.2 + array.prototype.flat@1.3.2: dependencies: call-bind: 1.0.7 @@ -10022,6 +10322,8 @@ snapshots: asap@2.0.6: {} + ast-types-flow@0.0.8: {} + async@0.2.10: {} async@3.2.6: {} @@ -10052,6 +10354,8 @@ snapshots: aws-ssl-profiles@1.1.2: {} + axe-core@4.10.2: {} + axios@1.7.7: dependencies: follow-redirects: 1.15.9 @@ -10060,6 +10364,8 @@ snapshots: transitivePeerDependencies: - debug + axobject-query@4.1.0: {} + babel-jest@29.7.0(@babel/core@7.26.0): dependencies: '@babel/core': 7.26.0 @@ -10456,6 +10762,8 @@ snapshots: readable-stream: 2.3.8 typedarray: 0.0.6 + confusing-browser-globals@1.0.11: {} + consola@2.15.3: {} content-disposition@0.5.4: @@ -10583,6 +10891,8 @@ snapshots: temp: 0.9.4 word-wrap: 1.2.5 + damerau-levenshtein@1.0.8: {} + data-uri-to-buffer@4.0.1: {} data-view-buffer@1.0.1: @@ -10609,6 +10919,10 @@ snapshots: dependencies: ms: 2.0.0 + debug@3.2.7: + dependencies: + ms: 2.1.3 + debug@4.3.7(supports-color@5.5.0): dependencies: ms: 2.1.3 @@ -10896,10 +11210,105 @@ snapshots: escape-string-regexp@4.0.0: {} + eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1): + dependencies: + confusing-browser-globals: 1.0.11 + eslint: 8.57.1 + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1) + object.assign: 4.1.5 + object.entries: 1.1.8 + semver: 6.3.1 + + eslint-config-airbnb-typescript@18.0.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1): + dependencies: + '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3) + eslint: 8.57.1 + eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) + transitivePeerDependencies: + - eslint-plugin-import + + eslint-config-airbnb@19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.1))(eslint-plugin-react-hooks@5.0.0(eslint@8.57.1))(eslint-plugin-react@7.37.2(eslint@8.57.1))(eslint@8.57.1): + dependencies: + eslint: 8.57.1 + eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1) + eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1) + eslint-plugin-react: 7.37.2(eslint@8.57.1) + eslint-plugin-react-hooks: 5.0.0(eslint@8.57.1) + object.assign: 4.1.5 + object.entries: 1.1.8 + eslint-config-prettier@8.10.0(eslint@8.57.1): dependencies: eslint: 8.57.1 + eslint-import-resolver-node@0.3.9: + dependencies: + debug: 3.2.7 + is-core-module: 2.15.1 + resolve: 1.22.8 + transitivePeerDependencies: + - supports-color + + eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@8.57.1): + dependencies: + debug: 3.2.7 + optionalDependencies: + '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3) + eslint: 8.57.1 + eslint-import-resolver-node: 0.3.9 + transitivePeerDependencies: + - supports-color + + eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1): + dependencies: + '@rtsao/scc': 1.1.0 + array-includes: 3.1.8 + array.prototype.findlastindex: 1.2.5 + array.prototype.flat: 1.3.2 + array.prototype.flatmap: 1.3.2 + debug: 3.2.7 + doctrine: 2.1.0 + eslint: 8.57.1 + eslint-import-resolver-node: 0.3.9 + eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@8.57.1) + hasown: 2.0.2 + is-core-module: 2.15.1 + is-glob: 4.0.3 + minimatch: 3.1.2 + object.fromentries: 2.0.8 + object.groupby: 1.0.3 + object.values: 1.2.0 + semver: 6.3.1 + string.prototype.trimend: 1.0.8 + tsconfig-paths: 3.15.0 + optionalDependencies: + '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3) + transitivePeerDependencies: + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - supports-color + + eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.1): + dependencies: + aria-query: 5.3.2 + array-includes: 3.1.8 + array.prototype.flatmap: 1.3.2 + ast-types-flow: 0.0.8 + axe-core: 4.10.2 + axobject-query: 4.1.0 + damerau-levenshtein: 1.0.8 + emoji-regex: 9.2.2 + eslint: 8.57.1 + hasown: 2.0.2 + jsx-ast-utils: 3.3.5 + language-tags: 1.0.9 + minimatch: 3.1.2 + object.fromentries: 2.0.8 + safe-regex-test: 1.0.3 + string.prototype.includes: 2.0.1 + eslint-plugin-prettier@4.2.1(eslint-config-prettier@8.10.0(eslint@8.57.1))(eslint@8.57.1)(prettier@2.8.8): dependencies: eslint: 8.57.1 @@ -12210,6 +12619,10 @@ snapshots: json-stable-stringify-without-jsonify@1.0.1: {} + json5@1.0.2: + dependencies: + minimist: 1.2.8 + json5@2.2.3: {} jsonc-parser@3.2.1: {} @@ -12261,6 +12674,12 @@ snapshots: kuler@2.0.0: {} + language-subtag-registry@0.3.23: {} + + language-tags@1.0.9: + dependencies: + language-subtag-registry: 0.3.23 + leven@3.1.0: {} levn@0.4.1: @@ -12643,6 +13062,12 @@ snapshots: es-abstract: 1.23.3 es-object-atoms: 1.0.0 + object.groupby@1.0.3: + dependencies: + call-bind: 1.0.7 + define-properties: 1.2.1 + es-abstract: 1.23.3 + object.values@1.2.0: dependencies: call-bind: 1.0.7 @@ -13431,6 +13856,12 @@ snapshots: get-east-asian-width: 1.3.0 strip-ansi: 7.1.0 + string.prototype.includes@2.0.1: + dependencies: + call-bind: 1.0.7 + define-properties: 1.2.1 + es-abstract: 1.23.3 + string.prototype.matchall@4.0.11: dependencies: call-bind: 1.0.7 @@ -13670,6 +14101,10 @@ snapshots: dependencies: typescript: 5.3.3 + ts-api-utils@1.4.0(typescript@5.6.3): + dependencies: + typescript: 5.6.3 + ts-interface-checker@0.1.13: {} ts-jest@29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@20.17.6)(ts-node@10.9.2(@swc/core@1.8.0)(@types/node@20.17.6)(typescript@5.3.3)))(typescript@5.3.3): @@ -13776,6 +14211,13 @@ snapshots: enhanced-resolve: 5.17.1 tsconfig-paths: 4.2.0 + tsconfig-paths@3.15.0: + dependencies: + '@types/json5': 0.0.29 + json5: 1.0.2 + minimist: 1.2.8 + strip-bom: 3.0.0 + tsconfig-paths@4.2.0: dependencies: json5: 2.2.3 From 4dbb3a3cece4ee17de23c95923ec2f0beb768312 Mon Sep 17 00:00:00 2001 From: zero0205 Date: Wed, 8 Jan 2025 11:53:57 +0900 Subject: [PATCH 02/15] =?UTF-8?q?:recycle:=20[Refactor]:=20eslint=20--fix?= =?UTF-8?q?=20=EC=98=B5=EC=85=98=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=EB=90=9C=20=ED=8C=8C=EC=9D=BC=EB=93=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/Router.tsx | 2 +- .../src/components/ChatContainer/index.tsx | 14 +++++----- .../src/components/ErrorCharacter/index.tsx | 4 +-- .../src/components/Header/LogInButton.tsx | 2 +- apps/client/src/components/Header/index.tsx | 2 +- .../src/components/LoadingCharacter/index.tsx | 28 +++++++++---------- .../src/components/WelcomeCharacter/index.tsx | 4 +-- apps/client/src/components/ui/input.tsx | 6 ++-- apps/client/src/components/ui/toast.tsx | 4 +-- apps/client/src/components/ui/toaster.tsx | 6 ++-- apps/client/src/hooks/useConsumer.ts | 2 +- apps/client/src/hooks/useProducer.ts | 8 +++--- apps/client/src/hooks/useTheme.ts | 2 +- apps/client/src/hooks/useToast.ts | 4 +-- apps/client/src/hooks/useTransport.ts | 4 +-- .../src/pages/Broadcast/BroadcastPlayer.tsx | 16 +++++------ .../src/pages/Broadcast/RecordButton.tsx | 8 +++--- apps/client/src/pages/Broadcast/index.tsx | 10 +++---- apps/client/src/pages/Home/FieldFilter.tsx | 2 +- apps/client/src/pages/Home/LiveCard.tsx | 4 +-- apps/client/src/pages/Home/LiveList.tsx | 8 +++--- apps/client/src/pages/Home/Search.tsx | 2 +- apps/client/src/pages/Live/LiveCamperInfo.tsx | 4 +-- apps/client/src/pages/Live/LivePlayer.tsx | 6 ++-- apps/client/src/pages/Live/index.tsx | 4 +-- apps/client/src/pages/Profile/Attendance.tsx | 4 +-- .../client/src/pages/Profile/EditUserInfo.tsx | 4 +-- apps/client/src/pages/Profile/UserInfo.tsx | 2 +- apps/client/src/pages/Record/RecordList.tsx | 4 +-- apps/client/src/pages/Record/RecordPlayer.tsx | 2 +- apps/client/src/pages/Record/index.tsx | 4 +-- apps/client/src/services/axios.ts | 4 +-- apps/client/src/utils/utils.ts | 4 +-- 33 files changed, 86 insertions(+), 98 deletions(-) diff --git a/apps/client/src/Router.tsx b/apps/client/src/Router.tsx index f621b769..56ce88f5 100644 --- a/apps/client/src/Router.tsx +++ b/apps/client/src/Router.tsx @@ -1,11 +1,11 @@ import { createBrowserRouter } from 'react-router-dom'; -import App from './App'; import Home from '@pages/Home'; import Profile from '@pages/Profile'; import Live from '@pages/Live'; import Broadcast from '@pages/Broadcast'; import Auth from '@pages/Auth'; import Record from '@pages/Record'; +import App from './App'; import ProtectedRoute from './ProtectedRoute'; const routerOptions = { diff --git a/apps/client/src/components/ChatContainer/index.tsx b/apps/client/src/components/ChatContainer/index.tsx index c636e2b1..8f2f0048 100644 --- a/apps/client/src/components/ChatContainer/index.tsx +++ b/apps/client/src/components/ChatContainer/index.tsx @@ -1,11 +1,11 @@ import { useState, useEffect, useRef, useContext } from 'react'; import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@components/ui/card'; import { Input } from '@components/ui/input'; -import { SmileIcon } from '@/components/Icons'; import { useSocket } from '@hooks/useSocket'; import ErrorCharacter from '@components/ErrorCharacter'; -import { AuthContext } from '@/contexts/AuthContext'; import { createPortal } from 'react-dom'; +import { AuthContext } from '@/contexts/AuthContext'; +import { SmileIcon } from '@/components/Icons'; import ChatEndModal from './ChatEndModal'; interface Chat { @@ -16,7 +16,7 @@ interface Chat { const chatServerUrl = import.meta.env.VITE_CHAT_SERVER_URL; -const ChatContainer = ({ roomId, isProducer }: { roomId: string; isProducer: boolean }) => { +function ChatContainer({ roomId, isProducer }: { roomId: string; isProducer: boolean }) { const { isLoggedIn } = useContext(AuthContext); // 채팅 방 입장 const [isJoinedRoom, setIsJoinedRoom] = useState(false); @@ -37,10 +37,10 @@ const ChatContainer = ({ roomId, isProducer }: { roomId: string; isProducer: boo const setUpRoom = async (isProducer: boolean) => { if (isProducer) { - socket?.emit('createRoom', { roomId: roomId }); + socket?.emit('createRoom', { roomId }); } else { // 채팅방 입장 - socket?.emit('joinRoom', { roomId: roomId }, () => {}); + socket?.emit('joinRoom', { roomId }, () => {}); // 채팅방 종료 이벤트 socket?.on('chatClosed', () => { setShowModal(true); @@ -62,7 +62,7 @@ const ChatContainer = ({ roomId, isProducer }: { roomId: string; isProducer: boo const handleSendChat = () => { if (inputValue.trim() && socket) { - socket.emit('chat', { roomId: roomId, message: inputValue }); + socket.emit('chat', { roomId, message: inputValue }); } setInputValue(''); }; @@ -142,6 +142,6 @@ const ChatContainer = ({ roomId, isProducer }: { roomId: string; isProducer: boo {showModal && createPortal(, document.body)} ); -}; +} export default ChatContainer; diff --git a/apps/client/src/components/ErrorCharacter/index.tsx b/apps/client/src/components/ErrorCharacter/index.tsx index b22591bb..f940671f 100644 --- a/apps/client/src/components/ErrorCharacter/index.tsx +++ b/apps/client/src/components/ErrorCharacter/index.tsx @@ -3,7 +3,7 @@ interface ErrorCharacterProps { message?: string; } -const ErrorCharacter = ({ size = 300, message = 'Error' }: ErrorCharacterProps): JSX.Element => { +function ErrorCharacter({ size = 300, message = 'Error' }: ErrorCharacterProps): JSX.Element { return (
@@ -82,6 +82,6 @@ const ErrorCharacter = ({ size = 300, message = 'Error' }: ErrorCharacterProps):

{message}

); -}; +} export default ErrorCharacter; diff --git a/apps/client/src/components/Header/LogInButton.tsx b/apps/client/src/components/Header/LogInButton.tsx index e8631430..c6b1c5ba 100644 --- a/apps/client/src/components/Header/LogInButton.tsx +++ b/apps/client/src/components/Header/LogInButton.tsx @@ -1,10 +1,10 @@ import { useState } from 'react'; import WelcomeCharacter from '@components/WelcomeCharacter'; -import { useAuth } from '@/hooks/useAuth'; import { Button } from '@components/ui/button'; import { createPortal } from 'react-dom'; import Modal from '@components/Modal'; import { GithubIcon, GoogleIcon } from '@components/Icons'; +import { useAuth } from '@/hooks/useAuth'; import axiosInstance from '@/services/axios'; function LogInButton() { diff --git a/apps/client/src/components/Header/index.tsx b/apps/client/src/components/Header/index.tsx index a6b5e3f7..bb38eca3 100644 --- a/apps/client/src/components/Header/index.tsx +++ b/apps/client/src/components/Header/index.tsx @@ -2,9 +2,9 @@ import { useContext, useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Character, Logo } from '@components/Icons'; import { Avatar, AvatarFallback, AvatarImage } from '@components/ui/avatar'; +import { cn } from '@utils/utils'; import { AuthContext } from '@/contexts/AuthContext'; import axiosInstance from '@/services/axios'; -import { cn } from '@utils/utils'; import LogInButton from './LogInButton'; import { Button } from '../ui/button'; import { useAuth } from '@/hooks/useAuth'; diff --git a/apps/client/src/components/LoadingCharacter/index.tsx b/apps/client/src/components/LoadingCharacter/index.tsx index d7cb3771..c45fdee8 100644 --- a/apps/client/src/components/LoadingCharacter/index.tsx +++ b/apps/client/src/components/LoadingCharacter/index.tsx @@ -2,53 +2,53 @@ interface LoadingCharacterProps { size?: number; } -const LoadingCharacter = ({ size = 300 }: LoadingCharacterProps): JSX.Element => { +function LoadingCharacter({ size = 300 }: LoadingCharacterProps): JSX.Element { return (
- {/*-- Shadow */} + {/* -- Shadow */} - {/*-- Body */} + {/* -- Body */} - {/*-- Left Ear/Antenna */} + {/* -- Left Ear/Antenna */} - {/*-- Right Ear/Antenna */} + {/* -- Right Ear/Antenna */} - {/*-- Camera Lens/Eye */} + {/* -- Camera Lens/Eye */} - {/*-- Smile (static) */} + {/* -- Smile (static) */} - {/*-- Blush */} + {/* -- Blush */} - {/*-- Legs */} + {/* -- Legs */} - {/*-- Arms holding display */} + {/* -- Arms holding display */} - {/*-- Display */} + {/* -- Display */} - {/*-- Loading Spinner */} + {/* -- Loading Spinner */} @@ -63,7 +63,7 @@ const LoadingCharacter = ({ size = 300 }: LoadingCharacterProps): JSX.Element => - {/*-- Loading Text */} + {/* -- Loading Text */}
); -}; +} export default LoadingCharacter; diff --git a/apps/client/src/components/WelcomeCharacter/index.tsx b/apps/client/src/components/WelcomeCharacter/index.tsx index 2d743d8c..885e265d 100644 --- a/apps/client/src/components/WelcomeCharacter/index.tsx +++ b/apps/client/src/components/WelcomeCharacter/index.tsx @@ -32,7 +32,7 @@ function WelcomeCharacter({ size, className }: Props) { - {/*} Left Ear/Antenna */} + {/* } Left Ear/Antenna */} @@ -60,7 +60,7 @@ function WelcomeCharacter({ size, className }: Props) { - {/*} Happy Smile */} + {/* } Happy Smile */} >( - ({ className, type, ...props }, ref) => { - return ( + ({ className, type, ...props }, ref) => ( >( ref={ref} {...props} /> - ); - }, + ), ); Input.displayName = 'Input'; diff --git a/apps/client/src/components/ui/toast.tsx b/apps/client/src/components/ui/toast.tsx index da67acd7..e27ae6cc 100644 --- a/apps/client/src/components/ui/toast.tsx +++ b/apps/client/src/components/ui/toast.tsx @@ -40,9 +40,7 @@ const toastVariants = cva( const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps ->(({ className, variant, ...props }, ref) => { - return ; -}); +>(({ className, variant, ...props }, ref) => ); Toast.displayName = ToastPrimitives.Root.displayName; const ToastAction = React.forwardRef< diff --git a/apps/client/src/components/ui/toaster.tsx b/apps/client/src/components/ui/toaster.tsx index c09813a6..622b5eb1 100644 --- a/apps/client/src/components/ui/toaster.tsx +++ b/apps/client/src/components/ui/toaster.tsx @@ -6,8 +6,7 @@ export function Toaster() { return ( - {toasts.map(function ({ id, title, description, action, ...props }) { - return ( + {toasts.map(({ id, title, description, action, ...props }) => (
{title && {title}} @@ -16,8 +15,7 @@ export function Toaster() { {action} - ); - })} + ))} ); diff --git a/apps/client/src/hooks/useConsumer.ts b/apps/client/src/hooks/useConsumer.ts index 744530da..c3efd24c 100644 --- a/apps/client/src/hooks/useConsumer.ts +++ b/apps/client/src/hooks/useConsumer.ts @@ -1,8 +1,8 @@ import { useEffect, useRef, useState } from 'react'; import { Transport, Device, MediaKind } from 'mediasoup-client/lib/types'; -import { ConnectTransportResponse, TransportInfo } from '@/types/mediasoupTypes'; import { Socket } from 'socket.io-client'; import { checkDependencies } from '@utils/utils'; +import { ConnectTransportResponse, TransportInfo } from '@/types/mediasoupTypes'; interface UseConsumerProps { socket: Socket | null; diff --git a/apps/client/src/hooks/useProducer.ts b/apps/client/src/hooks/useProducer.ts index 9c72d3bc..d0990fc3 100644 --- a/apps/client/src/hooks/useProducer.ts +++ b/apps/client/src/hooks/useProducer.ts @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from 'react'; import { Transport, Device, Producer } from 'mediasoup-client/lib/types'; -import { ConnectTransportResponse, TransportInfo } from '@/types/mediasoupTypes'; import { Socket } from 'socket.io-client'; +import { ConnectTransportResponse, TransportInfo } from '@/types/mediasoupTypes'; import { checkDependencies } from '@/utils/utils'; import { ENCODING_OPTIONS } from '@/constants/videoOptions'; @@ -102,13 +102,13 @@ export const useProducer = ({ mediaStream.getTracks().forEach(track => { const producerConfig: Record = { - track: track, + track, stopTracks: false, }; if (track.kind === 'video') { - producerConfig['encodings'] = ENCODING_OPTIONS; - producerConfig['codecOptions'] = { + producerConfig.encodings = ENCODING_OPTIONS; + producerConfig.codecOptions = { videoGoogleStartBitrate: 1000, }; } diff --git a/apps/client/src/hooks/useTheme.ts b/apps/client/src/hooks/useTheme.ts index 697b2ffb..d8ec706b 100644 --- a/apps/client/src/hooks/useTheme.ts +++ b/apps/client/src/hooks/useTheme.ts @@ -1,5 +1,5 @@ -import { ThemeContext } from '@/contexts/ThemeContext'; import { useContext, useLayoutEffect } from 'react'; +import { ThemeContext } from '@/contexts/ThemeContext'; export const useTheme = () => { const { theme, setTheme } = useContext(ThemeContext); diff --git a/apps/client/src/hooks/useToast.ts b/apps/client/src/hooks/useToast.ts index 4d8b1e64..cdab9b6f 100644 --- a/apps/client/src/hooks/useToast.ts +++ b/apps/client/src/hooks/useToast.ts @@ -64,7 +64,7 @@ const addToRemoveQueue = (toastId: string) => { toastTimeouts.delete(toastId); dispatch({ type: 'REMOVE_TOAST', - toastId: toastId, + toastId, }); }, TOAST_REMOVE_DELAY); @@ -160,7 +160,7 @@ function toast({ ...props }: Toast) { }); return { - id: id, + id, dismiss, update, }; diff --git a/apps/client/src/hooks/useTransport.ts b/apps/client/src/hooks/useTransport.ts index 46954c9c..802cae80 100644 --- a/apps/client/src/hooks/useTransport.ts +++ b/apps/client/src/hooks/useTransport.ts @@ -2,8 +2,8 @@ import * as mediasoupClient from 'mediasoup-client'; import { useEffect, useState } from 'react'; import { RtpCapabilities } from 'mediasoup-client/lib/RtpParameters'; import { Device } from 'mediasoup-client/lib/types'; -import { checkDependencies } from '@/utils/utils'; import { Socket } from 'socket.io-client'; +import { checkDependencies } from '@/utils/utils'; import { TransportInfo } from '@/types/mediasoupTypes'; interface UseTransportProps { @@ -56,7 +56,7 @@ export const useTransport = ({ socket, roomId, isProducer = false }: UseTranspor return; } - socket.emit('createTransport', { roomId: roomId, isProducer }, (response: TransportInfo) => { + socket.emit('createTransport', { roomId, isProducer }, (response: TransportInfo) => { setTransportInfo(response); }); }; diff --git a/apps/client/src/pages/Broadcast/BroadcastPlayer.tsx b/apps/client/src/pages/Broadcast/BroadcastPlayer.tsx index 5b5dc059..9715d77c 100644 --- a/apps/client/src/pages/Broadcast/BroadcastPlayer.tsx +++ b/apps/client/src/pages/Broadcast/BroadcastPlayer.tsx @@ -1,6 +1,6 @@ +import { useEffect, useRef } from 'react'; import { RESOLUTION_OPTIONS } from '@/constants/videoOptions'; import { Tracks } from '@/types/mediasoupTypes'; -import { useEffect, useRef } from 'react'; interface BroadcastPlayerProps { mediaStream: MediaStream | null; @@ -41,11 +41,11 @@ function BroadcastPlayer({ }, [isScreenSharing, screenStream]); useEffect(() => { - tracksRef.current['mediaAudio'] = mediaStream?.getAudioTracks()[0]; + tracksRef.current.mediaAudio = mediaStream?.getAudioTracks()[0]; }, [mediaStream]); useEffect(() => { - tracksRef.current['screenAudio'] = screenStream?.getAudioTracks()[0]; + tracksRef.current.screenAudio = screenStream?.getAudioTracks()[0]; }, [screenStream]); // 미디어스트림 캔버스에 넣기 @@ -53,8 +53,8 @@ function BroadcastPlayer({ const canvas = canvasRef.current; if (!canvas) return; - canvas.width = RESOLUTION_OPTIONS['high'].width; - canvas.height = RESOLUTION_OPTIONS['high'].height; + canvas.width = RESOLUTION_OPTIONS.high.width; + canvas.height = RESOLUTION_OPTIONS.high.height; const context = canvas.getContext('2d'); if (!context) return; @@ -99,7 +99,7 @@ function BroadcastPlayer({ const startDrawing = async () => { draw(); - tracksRef.current['video'] = canvas.captureStream(30).getVideoTracks()[0]; + tracksRef.current.video = canvas.captureStream(30).getVideoTracks()[0]; videoRef.current?.play(); screenShareRef.current?.play(); if (!isStreamReady) setIsStreamReady(true); @@ -134,8 +134,8 @@ function BroadcastPlayer({ /> { if (!socket?.connected || !roomId) return; - socket.emit('startRecord', { roomId: roomId }, (response: { success: boolean }) => { + socket.emit('startRecord', { roomId }, (response: { success: boolean }) => { if (response.success) setIsRecording(true); }); }; const handleStopRecording = (data: FormInput) => { if (!socket?.connected || !roomId) return; - socket.emit('stopRecord', { roomId: roomId, title: data.title }, (response: { success: boolean }) => { + socket.emit('stopRecord', { roomId, title: data.title }, (response: { success: boolean }) => { if (response.success) { setIsEditing(false); setIsRecording(false); diff --git a/apps/client/src/pages/Broadcast/index.tsx b/apps/client/src/pages/Broadcast/index.tsx index ce8703cf..f965e388 100644 --- a/apps/client/src/pages/Broadcast/index.tsx +++ b/apps/client/src/pages/Broadcast/index.tsx @@ -1,10 +1,11 @@ -import BroadcastTitle from './BroadcastTitle'; import ChatContainer from '@components/ChatContainer'; import ErrorCharacter from '@components/ErrorCharacter'; import { useProducer } from '@hooks/useProducer'; import { useRoom } from '@hooks/useRoom'; import { useSocket } from '@hooks/useSocket'; import { useTransport } from '@hooks/useTransport'; +import { Button } from '@components/ui/button'; +import { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { MicrophoneOffIcon, MicrophoneOnIcon, @@ -13,8 +14,7 @@ import { ScreenShareIcon, ScreenShareIconOff, } from '@/components/Icons'; -import { Button } from '@components/ui/button'; -import { useEffect, useLayoutEffect, useRef, useState } from 'react'; +import BroadcastTitle from './BroadcastTitle'; import useScreenShare from '@/hooks/useScreenShare'; import BroadcastPlayer from './BroadcastPlayer'; import { Tracks } from '@/types/mediasoupTypes'; @@ -72,7 +72,7 @@ function Broadcast() { }, []); useEffect(() => { - tracksRef.current['mediaAudio'] = mediaStream?.getAudioTracks()[0]; + tracksRef.current.mediaAudio = mediaStream?.getAudioTracks()[0]; axiosInstance.get('/v1/members/info').then(response => { if (response.data.success) { @@ -204,7 +204,7 @@ function Broadcast() {
- + )} diff --git a/apps/client/src/pages/Home/FieldFilter.tsx b/apps/client/src/pages/Home/FieldFilter.tsx index 0320cd19..3c7aa216 100644 --- a/apps/client/src/pages/Home/FieldFilter.tsx +++ b/apps/client/src/pages/Home/FieldFilter.tsx @@ -1,6 +1,6 @@ +import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Field } from '@/types/liveTypes'; -import { useState } from 'react'; const fields: Field[] = ['WEB', 'AND', 'IOS']; diff --git a/apps/client/src/pages/Home/LiveCard.tsx b/apps/client/src/pages/Home/LiveCard.tsx index 4c2ec430..b410aca8 100644 --- a/apps/client/src/pages/Home/LiveCard.tsx +++ b/apps/client/src/pages/Home/LiveCard.tsx @@ -8,7 +8,7 @@ interface LiveCardProps { thumbnailUrl: string; } -const LiveCard = ({ liveId, title, userId, profileUrl, thumbnailUrl }: LiveCardProps) => { +function LiveCard({ liveId, title, userId, profileUrl, thumbnailUrl }: LiveCardProps) { const navigate = useNavigate(); const handleClick = () => { @@ -44,6 +44,6 @@ const LiveCard = ({ liveId, title, userId, profileUrl, thumbnailUrl }: LiveCardP ); -}; +} export default LiveCard; diff --git a/apps/client/src/pages/Home/LiveList.tsx b/apps/client/src/pages/Home/LiveList.tsx index eeb5425c..b109b837 100644 --- a/apps/client/src/pages/Home/LiveList.tsx +++ b/apps/client/src/pages/Home/LiveList.tsx @@ -1,8 +1,8 @@ +import { useEffect, useState } from 'react'; +import axiosInstance from '@services/axios'; import FieldFilter from './FieldFilter'; import LiveCard from './LiveCard'; import { LivePreviewInfo } from '@/types/homeTypes'; -import { useEffect, useState } from 'react'; -import axiosInstance from '@services/axios'; import Search from './Search'; import { Field } from '@/types/liveTypes'; import { useIntersect } from '@/hooks/useIntersect'; @@ -39,7 +39,7 @@ function LiveList() { const { broadcasts, nextCursor } = response.data.data; setLiveList(broadcasts); setCursor(nextCursor); - setHasNext(nextCursor ? true : false); + setHasNext(!!nextCursor); } }); }; @@ -85,7 +85,7 @@ function LiveList() {
방송 정보가 없습니다.
)} -
+
); diff --git a/apps/client/src/pages/Home/Search.tsx b/apps/client/src/pages/Home/Search.tsx index 50495377..3797b3cc 100644 --- a/apps/client/src/pages/Home/Search.tsx +++ b/apps/client/src/pages/Home/Search.tsx @@ -1,6 +1,6 @@ +import { useForm } from 'react-hook-form'; import IconButton from '@/components/IconButton'; import { SearchIcon } from '@/components/Icons'; -import { useForm } from 'react-hook-form'; interface SearchProps { onSearch: (keyword: string) => void; diff --git a/apps/client/src/pages/Live/LiveCamperInfo.tsx b/apps/client/src/pages/Live/LiveCamperInfo.tsx index 4c4714dc..9a1c3bc7 100644 --- a/apps/client/src/pages/Live/LiveCamperInfo.tsx +++ b/apps/client/src/pages/Live/LiveCamperInfo.tsx @@ -1,11 +1,11 @@ import { Avatar, AvatarFallback, AvatarImage } from '@components/ui/avatar'; import { Badge } from '@components/ui/badge'; import IconButton from '@components/IconButton'; -import { MailIcon, GithubIcon, BlogIcon, LinkedInIcon } from '@/components/Icons'; import { useAPI } from '@hooks/useAPI'; -import { LiveInfo } from '@/types/liveTypes'; import LoadingCharacter from '@components/LoadingCharacter'; import ErrorCharacter from '@components/ErrorCharacter'; +import { LiveInfo } from '@/types/liveTypes'; +import { MailIcon, GithubIcon, BlogIcon, LinkedInIcon } from '@/components/Icons'; function LiveCamperInfo({ liveId }: { liveId: string }) { const { data, isLoading, error } = useAPI({ url: `v1/broadcasts/${liveId}/info` }); diff --git a/apps/client/src/pages/Live/LivePlayer.tsx b/apps/client/src/pages/Live/LivePlayer.tsx index 02173905..8d7e563b 100644 --- a/apps/client/src/pages/Live/LivePlayer.tsx +++ b/apps/client/src/pages/Live/LivePlayer.tsx @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from 'react'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select'; -import { PlayIcon, PauseIcon, VolumeOffIcon, VolumeOnIcon, ExpandIcon } from '@/components/Icons'; import { Socket } from 'socket.io-client'; +import { PlayIcon, PauseIcon, VolumeOffIcon, VolumeOnIcon, ExpandIcon } from '@/components/Icons'; import ErrorCharacter from '@/components/ErrorCharacter'; interface Errors { @@ -73,14 +73,14 @@ function LivePlayer({ mediaStream, socket, transportId, errors }: LivePlayerProp <> {socketError || transportError || consumerError ? (
- +
) : (
); } diff --git a/apps/client/src/pages/Live/index.tsx b/apps/client/src/pages/Live/index.tsx index 572987c2..0fb14a88 100644 --- a/apps/client/src/pages/Live/index.tsx +++ b/apps/client/src/pages/Live/index.tsx @@ -30,29 +30,31 @@ export default function Live() { isConnected, }); - const handleLeaveLive = () => { - if (socket && liveId && transportInfo) { - socket.emit('leaveBroadcast', { transportId: transportInfo.transportId, roomId: liveId }); - } + useEffect(() => { + if (!socket || !liveId || !transportInfo || !transport) return undefined; - socket?.disconnect(); - transport?.close(); - }; + const handleLeaveLive = () => { + if (socket && liveId && transportInfo) { + socket.emit('leaveBroadcast', { transportId: transportInfo.transportId, roomId: liveId }); + } - const preventClose = (e: BeforeUnloadEvent) => { - e.preventDefault(); - handleLeaveLive(); - e.returnValue = ''; - }; + socket?.disconnect(); + transport?.close(); + }; + + const preventClose = (e: BeforeUnloadEvent) => { + e.preventDefault(); + handleLeaveLive(); + e.returnValue = ''; + }; - useEffect(() => { window.addEventListener('beforeunload', preventClose); return () => { handleLeaveLive(); window.removeEventListener('beforeunload', preventClose); }; - }, []); + }, [socket, liveId, transportInfo, transport]); return (
diff --git a/apps/client/src/types/liveTypes.ts b/apps/client/src/types/liveTypes.ts index 4ae44e92..29167c77 100644 --- a/apps/client/src/types/liveTypes.ts +++ b/apps/client/src/types/liveTypes.ts @@ -5,6 +5,8 @@ export interface ContactInfo { blog: string; } +export type Field = 'WEB' | 'AND' | 'IOS' | ''; + export interface LiveInfo { title: string; camperId: string; @@ -13,5 +15,3 @@ export interface LiveInfo { profileImage: string; contacts: ContactInfo; } - -export type Field = 'WEB' | 'AND' | 'IOS' | ''; From ef7d27c2bd444ccf48a828463e7b95702941b4ca Mon Sep 17 00:00:00 2001 From: zero0205 Date: Sat, 11 Jan 2025 03:03:23 +0900 Subject: [PATCH 12/15] =?UTF-8?q?:recycle:=20[Refactor]:=20=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=ED=85=80=20=ED=9B=85=EB=93=A4=20eslint=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/.eslintrc | 3 +- apps/client/src/hooks/useAPI.ts | 2 +- apps/client/src/hooks/useAuth.ts | 2 +- apps/client/src/hooks/useConsumer.ts | 192 +++++++++++------------- apps/client/src/hooks/useIntersect.ts | 2 +- apps/client/src/hooks/useProducer.ts | 173 ++++++++++----------- apps/client/src/hooks/useRoom.ts | 27 ++-- apps/client/src/hooks/useScreenShare.ts | 40 ++--- apps/client/src/hooks/useSocket.ts | 5 +- apps/client/src/hooks/useToast.ts | 1 + apps/client/src/hooks/useTransport.ts | 125 +++++++-------- 11 files changed, 269 insertions(+), 303 deletions(-) diff --git a/apps/client/.eslintrc b/apps/client/.eslintrc index 626700f2..046a9ebd 100644 --- a/apps/client/.eslintrc +++ b/apps/client/.eslintrc @@ -38,6 +38,7 @@ "react/require-default-props": "off", "jsx-a11y/media-has-caption": "off", "react/jsx-props-no-spreading": "off", - "no-param-reassign": ["warn", { "props": false }] + "no-param-reassign": ["warn", { "props": false }], + "import/prefer-default-export": "off" } } diff --git a/apps/client/src/hooks/useAPI.ts b/apps/client/src/hooks/useAPI.ts index 65e9f182..8f8e4093 100644 --- a/apps/client/src/hooks/useAPI.ts +++ b/apps/client/src/hooks/useAPI.ts @@ -26,7 +26,7 @@ export const useAPI = (apiInfo: AxiosRequestConfig): APIQueryState => { }; fetchData(); - }, []); + }, [apiInfo]); return { data, isLoading, error }; }; diff --git a/apps/client/src/hooks/useAuth.ts b/apps/client/src/hooks/useAuth.ts index 3812d212..4ff13a01 100644 --- a/apps/client/src/hooks/useAuth.ts +++ b/apps/client/src/hooks/useAuth.ts @@ -23,7 +23,7 @@ export const useAuth = () => { useEffect(() => { setIsLoggedIn(!!localStorage.getItem('accessToken')); - }, []); + }, [setIsLoggedIn]); return { requestLogIn, setLogIn, logout }; }; diff --git a/apps/client/src/hooks/useConsumer.ts b/apps/client/src/hooks/useConsumer.ts index c3efd24c..b8203221 100644 --- a/apps/client/src/hooks/useConsumer.ts +++ b/apps/client/src/hooks/useConsumer.ts @@ -12,20 +12,6 @@ interface UseConsumerProps { isConnected: boolean; } -interface ConnectTransportParams { - socket: Socket; - transportInfo: TransportInfo; - device: Device; - roomId: string | undefined; -} - -interface CreateConsumerParams { - socket: Socket; - roomId: string; - transportInfo: TransportInfo; - transport: Transport | null; -} - export interface CreateConsumer { consumerId: string; producerId: string; @@ -38,122 +24,112 @@ export interface CreateConsumerResponse { } export const useConsumer = ({ socket, device, roomId, transportInfo, isConnected }: UseConsumerProps) => { - const transport = useRef(null); + const transportRef = useRef(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [mediastream, setMediastream] = useState(null); - const connectTransport = async ({ socket, transportInfo, device, roomId }: ConnectTransportParams) => { - if (!socket || !transportInfo || !device || !roomId) { - const dependencyError = checkDependencies('connectTransport', { socket, transportInfo, device, roomId }); - setError(dependencyError); - return; + useEffect(() => { + if (!socket || !isConnected || !roomId || !transportInfo || !device) { + return undefined; } - setError(null); - - const newTransport = device.createRecvTransport({ - id: transportInfo.transportId, - iceParameters: transportInfo.iceParameters, - iceCandidates: transportInfo.iceCandidates, - dtlsParameters: transportInfo.dtlsParameters, - }); - - transport.current = newTransport; - - transport.current.on('connect', async ({ dtlsParameters }, callback) => { - const response = await new Promise((resolve, reject) => { - socket.emit( - 'connectTransport', - { - roomId, - dtlsParameters, - transportId: transportInfo.transportId, - }, - (response: ConnectTransportResponse) => { - if (response.connected) { - resolve(response); - } else { - reject(new Error('Transport connection failed')); - } - }, - ); + const connectTransport = async () => { + if (!socket || !transportInfo || !device || !roomId) { + const dependencyError = checkDependencies('connectTransport', { socket, transportInfo, device, roomId }); + setError(dependencyError); + return; + } + + setError(null); + + const newTransport = device.createRecvTransport({ + id: transportInfo.transportId, + iceParameters: transportInfo.iceParameters, + iceCandidates: transportInfo.iceCandidates, + dtlsParameters: transportInfo.dtlsParameters, }); - callback(); - return response; - }); - }; - const createConsumer = async ({ socket, roomId, transportInfo, transport }: CreateConsumerParams) => { - if (!transport || !socket) { - const dependencyError = checkDependencies('createConsumer', { socket, transport }); - setError(dependencyError); - return; - } + transportRef.current = newTransport; + + transportRef.current.on('connect', async ({ dtlsParameters }, callback) => { + const connectTransportResponse = await new Promise((resolve, reject) => { + socket.emit( + 'connectTransport', + { + roomId, + dtlsParameters, + transportId: transportInfo.transportId, + }, + (response: ConnectTransportResponse) => { + if (response.connected) { + resolve(response); + } else { + reject(new Error('Transport connection failed')); + } + }, + ); + }); + callback(); + return connectTransportResponse; + }); + }; - setError(null); - - socket.emit( - 'createConsumer', - { - roomId, - transportId: transportInfo.transportId, - }, - async ({ consumers }: CreateConsumerResponse) => { - const newMediastream = new MediaStream(); - for (const consumerData of consumers) { - const consumer = await transport.consume({ - id: consumerData.consumerId, - producerId: consumerData.producerId, - rtpParameters: consumerData.rtpParameters, - kind: consumerData.kind, - }); - - if (consumer.track.kind === 'video') { - consumer.track.enabled = true; - } - newMediastream.addTrack(consumer.track); - consumer.resume(); - } - - setMediastream(newMediastream); - }, - ); - }; + const createConsumer = async () => { + if (!transportRef.current || !socket || !transportInfo) { + const dependencyError = checkDependencies('createConsumer', { socket, transportRef, transportInfo }); + setError(dependencyError); + return; + } - useEffect(() => { - if (!socket || !isConnected || !roomId || !transportInfo || !device) { - return; - } + setError(null); - connectTransport({ - socket, - transportInfo, - device, - roomId, - }) - .then(() => - createConsumer({ - socket, + socket.emit( + 'createConsumer', + { roomId, - transportInfo, - transport: transport.current, - }), - ) + transportId: transportInfo.transportId, + }, + async ({ consumers }: CreateConsumerResponse) => { + const newMediastream = new MediaStream(); + await Promise.all( + consumers.map(async consumerData => { + const consumer = await transportRef.current!.consume({ + id: consumerData.consumerId, + producerId: consumerData.producerId, + rtpParameters: consumerData.rtpParameters, + kind: consumerData.kind, + }); + + if (consumer.track.kind === 'video') { + consumer.track.enabled = true; + } + newMediastream.addTrack(consumer.track); + consumer.resume(); + }), + ); + + setMediastream(newMediastream); + }, + ); + }; + + connectTransport() + .then(() => createConsumer()) .then(() => setIsLoading(false)) .catch(err => setError(err instanceof Error ? err : new Error('Consumer initialization failed'))); return () => { - if (transport.current) { - transport.current.close(); - transport.current = null; + if (transportRef.current) { + transportRef.current.close(); + transportRef.current = null; } setMediastream(null); }; }, [socket, isConnected, transportInfo, device, roomId]); return { - transport: transport.current, + transport: transportRef.current, mediastream, error, isLoading, diff --git a/apps/client/src/hooks/useIntersect.ts b/apps/client/src/hooks/useIntersect.ts index d713ce0f..c58e53da 100644 --- a/apps/client/src/hooks/useIntersect.ts +++ b/apps/client/src/hooks/useIntersect.ts @@ -19,7 +19,7 @@ export const useIntersect = ({ onIntersect, options }: UseIntersectProps) => { ); useEffect(() => { - if (!ref.current) return; + if (!ref.current) return undefined; const observer = new IntersectionObserver(callback, options); observer.observe(ref.current); return () => { diff --git a/apps/client/src/hooks/useProducer.ts b/apps/client/src/hooks/useProducer.ts index d0990fc3..aaaeb27b 100644 --- a/apps/client/src/hooks/useProducer.ts +++ b/apps/client/src/hooks/useProducer.ts @@ -31,113 +31,114 @@ export const useProducer = ({ device, transportInfo, }: UseProducerProps): UseProducerReturn => { - const transport = useRef(null); + const transportRef = useRef(null); const [error, setError] = useState(null); const [producerId, setProducerId] = useState(''); const [producers, setProducers] = useState>(new Map()); - const createTransport = async (socket: Socket, device: Device, roomId: string, transportInfo: TransportInfo) => { - if (!socket || !device || !roomId || !transportInfo) { - const dependencyError = checkDependencies('createTransport', { socket, device, roomId, transportInfo }); - setError(dependencyError); - return; + useEffect(() => { + if (!socket || !device || !roomId || !mediaStream || !isMediaStreamReady || !transportInfo) { + return undefined; } - setError(null); - - const newTransport = device.createSendTransport({ - id: transportInfo.transportId, - iceParameters: transportInfo.iceParameters, - iceCandidates: transportInfo.iceCandidates, - dtlsParameters: transportInfo.dtlsParameters, - }); - - transport.current = newTransport; - - transport.current.on('connect', async (parameters, callback) => { - socket.emit( - 'connectTransport', - { - roomId, - dtlsParameters: parameters.dtlsParameters, - transportId: transportInfo.transportId, - }, - (response: ConnectTransportResponse) => { - if (response.connected) { - callback(); - } - }, - ); - }); - }; + const createTransport = async () => { + if (!socket || !device || !roomId || !transportInfo) { + const dependencyError = checkDependencies('createTransport', { socket, device, roomId, transportInfo }); + setError(dependencyError); + return; + } + + setError(null); - const createProducer = async (socket: Socket, transportInfo: TransportInfo) => { - if (!transport.current || !socket || !mediaStream) { - const dependencyError = checkDependencies('createProducer', { - socket, - mediaStream, - transport: transport.current, + const newTransport = device.createSendTransport({ + id: transportInfo.transportId, + iceParameters: transportInfo.iceParameters, + iceCandidates: transportInfo.iceCandidates, + dtlsParameters: transportInfo.dtlsParameters, }); - setError(dependencyError); - return; - } - setError(null); - - transport.current!.on('produce', (parameters, callback) => { - socket.emit( - 'createProducer', - { - roomId, - transportId: transportInfo.transportId, - kind: parameters.kind, - rtpParameters: parameters.rtpParameters, - }, - (response: { producerId: string }) => { - callback({ id: response.producerId }); - setProducerId(response.producerId); - }, - ); - }); - - mediaStream.getTracks().forEach(track => { - const producerConfig: Record = { - track, - stopTracks: false, - }; - - if (track.kind === 'video') { - producerConfig.encodings = ENCODING_OPTIONS; - producerConfig.codecOptions = { - videoGoogleStartBitrate: 1000, - }; + transportRef.current = newTransport; + + transportRef.current.on('connect', async (parameters, callback) => { + socket.emit( + 'connectTransport', + { + roomId, + dtlsParameters: parameters.dtlsParameters, + transportId: transportInfo.transportId, + }, + (response: ConnectTransportResponse) => { + if (response.connected) { + callback(); + } + }, + ); + }); + }; + + const createProducer = async () => { + if (!transportRef.current || !transportInfo || !socket || !mediaStream) { + const dependencyError = checkDependencies('createProducer', { + socket, + mediaStream, + transport: transportRef.current, + transportInfo, + }); + setError(dependencyError); + return; } - transport.current!.produce(producerConfig).then(producer => { - setProducers(prev => new Map(prev).set(track.kind, producer)); + setError(null); + + transportRef.current!.on('produce', (parameters, callback) => { + socket.emit( + 'createProducer', + { + roomId, + transportId: transportInfo.transportId, + kind: parameters.kind, + rtpParameters: parameters.rtpParameters, + }, + (response: { producerId: string }) => { + callback({ id: response.producerId }); + setProducerId(response.producerId); + }, + ); }); - }); - }; - useEffect(() => { - if (!socket || !device || !roomId || !mediaStream || !isMediaStreamReady || !transportInfo) { - return; - } + mediaStream.getTracks().forEach(track => { + const producerConfig: Record = { + track, + stopTracks: false, + }; + + if (track.kind === 'video') { + producerConfig.encodings = ENCODING_OPTIONS; + producerConfig.codecOptions = { + videoGoogleStartBitrate: 1000, + }; + } + + transportRef.current!.produce(producerConfig).then(producer => { + setProducers(prev => new Map(prev).set(track.kind, producer)); + }); + }); + }; - createTransport(socket, device, roomId, transportInfo) - .then(() => createProducer(socket, transportInfo)) + createTransport() + .then(() => createProducer()) .catch(err => setError(err instanceof Error ? err : new Error('Producer initialization failed'))); return () => { - if (transport.current) { - transport.current.close(); - transport.current = null; + if (transportRef.current) { + transportRef.current.close(); + transportRef.current = null; } }; - }, [socket, device, roomId, transportInfo, isMediaStreamReady]); + }, [socket, device, roomId, transportInfo, isMediaStreamReady, mediaStream]); return { - transport: transport.current, + transport: transportRef.current, error, producerId, producers, diff --git a/apps/client/src/hooks/useRoom.ts b/apps/client/src/hooks/useRoom.ts index 431c386e..524093af 100644 --- a/apps/client/src/hooks/useRoom.ts +++ b/apps/client/src/hooks/useRoom.ts @@ -5,22 +5,23 @@ export const useRoom = (socket: Socket | null, isConnected: boolean, isMediaStre const [roomId, setRoomId] = useState(''); const [roomError, setRoomError] = useState(null); - const getRooomId = async () => { - if (!socket) { - setRoomError(new Error('getRoomId Error: socket이 존재하지 않습니다.')); - return; - } - - setRoomError(null); - socket.emit('createRoom', (response: { roomId: string }) => { - setRoomId(response.roomId); - }); - }; - useEffect(() => { if (!isMediaStreamReady) return; + + const getRooomId = async () => { + if (!socket) { + setRoomError(new Error('getRoomId Error: socket이 존재하지 않습니다.')); + return; + } + + setRoomError(null); + socket.emit('createRoom', (response: { roomId: string }) => { + setRoomId(response.roomId); + }); + }; + getRooomId(); - }, [isConnected, isMediaStreamReady]); + }, [isConnected, isMediaStreamReady, socket]); return { roomId, diff --git a/apps/client/src/hooks/useScreenShare.ts b/apps/client/src/hooks/useScreenShare.ts index ee90d69e..a53fdfcc 100644 --- a/apps/client/src/hooks/useScreenShare.ts +++ b/apps/client/src/hooks/useScreenShare.ts @@ -1,10 +1,18 @@ -import { useEffect, useRef, useState } from 'react'; +import { useRef, useState } from 'react'; const useScreenShare = () => { const screenStreamRef = useRef(null); const [screenShareError, setScreenShareError] = useState(null); const [isScreenSharing, setIsScreenSharing] = useState(false); + const endScreenShare = () => { + if (screenStreamRef.current) { + screenStreamRef.current.getTracks().forEach(track => track.stop()); + } + screenStreamRef.current = null; + setIsScreenSharing(false); + }; + const startScreenShare = async () => { try { const options = { @@ -13,8 +21,9 @@ const useScreenShare = () => { }; const mediaStream = await navigator.mediaDevices.getDisplayMedia(options); - setIsScreenSharing(true); + mediaStream.getVideoTracks()[0].onended = endScreenShare; screenStreamRef.current = mediaStream; + setIsScreenSharing(true); } catch (err) { if (err instanceof Error) { if (err.name !== 'NotAllowedError') { @@ -26,14 +35,6 @@ const useScreenShare = () => { } }; - const endScreenShare = async () => { - if (screenStreamRef.current) { - screenStreamRef.current.getTracks().forEach(track => track.stop()); - } - screenStreamRef.current = null; - setIsScreenSharing(false); - }; - const toggleScreenShare = () => { if (isScreenSharing) { endScreenShare(); @@ -42,25 +43,6 @@ const useScreenShare = () => { } }; - useEffect(() => { - if (isScreenSharing) { - startScreenShare(); - setIsScreenSharing(false); - } - - return () => { - endScreenShare(); - }; - }, []); - - useEffect(() => { - if (screenStreamRef.current) { - screenStreamRef.current.getVideoTracks()[0].onended = () => { - endScreenShare(); - }; - } - }, [screenStreamRef.current]); - return { screenStream: screenStreamRef.current, isScreenSharing, diff --git a/apps/client/src/hooks/useSocket.ts b/apps/client/src/hooks/useSocket.ts index 85745d98..7eb64a8a 100644 --- a/apps/client/src/hooks/useSocket.ts +++ b/apps/client/src/hooks/useSocket.ts @@ -18,7 +18,7 @@ export const useSocket = (url: string) => { useEffect(() => { const accessToken = localStorage.getItem('accessToken'); - if (socketRef.current?.connected) return; + if (socketRef.current?.connected) return undefined; const socket = io(url, { withCredentials: true, transports: ['websocket', 'polling'], @@ -49,7 +49,6 @@ export const useSocket = (url: string) => { }); socket.on('exception', (error: ExceptionResponse) => { - console.error(`socket exception Error: ${error.data.status}`); setSocketError(new Error(error.data.message)); }); @@ -58,7 +57,7 @@ export const useSocket = (url: string) => { socket.disconnect(); } }; - }, []); + }, [url]); return { socket: socketRef.current, diff --git a/apps/client/src/hooks/useToast.ts b/apps/client/src/hooks/useToast.ts index cdab9b6f..f2ed6f0e 100644 --- a/apps/client/src/hooks/useToast.ts +++ b/apps/client/src/hooks/useToast.ts @@ -1,3 +1,4 @@ +/* eslint-disable */ 'use client'; // Inspired by react-hot-toast library diff --git a/apps/client/src/hooks/useTransport.ts b/apps/client/src/hooks/useTransport.ts index 802cae80..836f4186 100644 --- a/apps/client/src/hooks/useTransport.ts +++ b/apps/client/src/hooks/useTransport.ts @@ -1,5 +1,5 @@ import * as mediasoupClient from 'mediasoup-client'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; import { RtpCapabilities } from 'mediasoup-client/lib/RtpParameters'; import { Device } from 'mediasoup-client/lib/types'; import { Socket } from 'socket.io-client'; @@ -15,79 +15,84 @@ interface UseTransportProps { export const useTransport = ({ socket, roomId, isProducer = false }: UseTransportProps) => { const [transportInfo, setTransportInfo] = useState(null); const [transportError, setTransportError] = useState(null); - const [device, setDevice] = useState(null); + const deviceRef = useRef(null); - const getRtpCapabilities = async (roomId: string) => { + useEffect(() => { if (!socket || !roomId) { - const dependencyError = checkDependencies('getRtpCapabilities', { socket, roomId }); - setTransportError(dependencyError); - return; + return undefined; } - const rtpCapabilities: RtpCapabilities = await new Promise((resolve, reject) => { - socket.emit('getRtpCapabilities', { roomId }, (response: { rtpCapabilities: RtpCapabilities }) => { - if (response.rtpCapabilities) { - resolve(response.rtpCapabilities); - } else { - reject(new Error('getRtpCapabilities Error: RTP Capabilities를 받아오지 못했습니다.')); - } + const getRtpCapabilities = async () => { + if (!socket || !roomId) { + const dependencyError = checkDependencies('getRtpCapabilities', { socket, roomId }); + setTransportError(dependencyError); + return undefined; + } + + const rtpCapabilities: RtpCapabilities = await new Promise((resolve, reject) => { + socket.emit('getRtpCapabilities', { roomId }, (response: { rtpCapabilities: RtpCapabilities }) => { + if (response.rtpCapabilities) { + resolve(response.rtpCapabilities); + } else { + reject(new Error('getRtpCapabilities Error: RTP Capabilities를 받아오지 못했습니다.')); + } + }); }); - }); - return rtpCapabilities; - }; - - const createDevice = async (rtpCapabilities: RtpCapabilities) => { - if (!rtpCapabilities) { - setTransportError(new Error('createDevice Error: RTP Capabilities가 없습니다.')); - return; - } - - const newDevice = new mediasoupClient.Device(); - await newDevice.load({ - routerRtpCapabilities: rtpCapabilities, - }); - return newDevice; - }; - - const createTransport = async (device: Device, roomId: string) => { - if (!socket || !device || !roomId) { - const dependencyError = checkDependencies('createTransport', { socket, device, roomId }); - setTransportError(dependencyError); - return; - } - - socket.emit('createTransport', { roomId, isProducer }, (response: TransportInfo) => { - setTransportInfo(response); - }); - }; - - const initializeTransport = async (roomId: string) => { - if (!socket || !roomId) return; + return rtpCapabilities; + }; + + const createDevice = async (rtpCapabilities: RtpCapabilities) => { + if (!rtpCapabilities) { + setTransportError(new Error('createDevice Error: RTP Capabilities가 없습니다.')); + return undefined; + } + + const newDevice = new mediasoupClient.Device(); + await newDevice.load({ + routerRtpCapabilities: rtpCapabilities, + }); + return newDevice; + }; + + const createTransport = async (device: Device) => { + if (!socket || !device || !roomId) { + const dependencyError = checkDependencies('createTransport', { socket, device, roomId }); + setTransportError(dependencyError); + return; + } + + socket.emit('createTransport', { roomId, isProducer }, (response: TransportInfo) => { + setTransportInfo(response); + }); + }; - const rtpCapabilities = await getRtpCapabilities(roomId); - if (!rtpCapabilities) return; + const initializeTransport = async () => { + if (!socket || !roomId) return; - const newDevice = await createDevice(rtpCapabilities); - if (!newDevice) return; - setDevice(newDevice); + const rtpCapabilities = await getRtpCapabilities(); + if (!rtpCapabilities) return; - await createTransport(newDevice, roomId); - if (!transportInfo) return; - }; + const newDevice = await createDevice(rtpCapabilities); + if (!newDevice) return; + deviceRef.current = newDevice; - useEffect(() => { - if (!socket || !roomId) { - return; - } + await createTransport(newDevice); + }; - initializeTransport(roomId); + initializeTransport(); - return () => {}; - }, [socket, roomId]); + return () => { + if (deviceRef.current) { + deviceRef.current = null; + } + setTransportInfo(null); + setTransportError(null); + }; + }, [socket, roomId, isProducer]); return { transportInfo, - device, + device: deviceRef.current, transportError, }; }; From 0e37e8d600bd60809b5186ef887ff3c16dcd1cb4 Mon Sep 17 00:00:00 2001 From: zero0205 Date: Mon, 13 Jan 2025 01:54:50 +0900 Subject: [PATCH 13/15] =?UTF-8?q?:recycle:=20[Refactor]:=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=84=A0=EC=96=B8=20=EB=B0=A9=EC=8B=9D=20type=20al?= =?UTF-8?q?ias=EB=A1=9C=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ChatContainer/ChatEndModal.tsx | 4 ++-- .../src/components/ChatContainer/index.tsx | 4 ++-- .../src/components/ErrorCharacter/index.tsx | 4 ++-- apps/client/src/components/IconButton/index.tsx | 4 ++-- apps/client/src/components/Icons/BlogIcon.tsx | 5 +---- apps/client/src/components/Icons/Character.tsx | 5 +---- apps/client/src/components/Icons/CloseIcon.tsx | 5 +---- apps/client/src/components/Icons/EditIcon.tsx | 5 +---- apps/client/src/components/Icons/GithubIcon.tsx | 5 +---- apps/client/src/components/Icons/GoogleIcon.tsx | 5 +---- .../client/src/components/Icons/LinkedInIcon.tsx | 5 +---- apps/client/src/components/Icons/MailIcon.tsx | 5 +---- .../src/components/Icons/ScreenShareIcon.tsx | 5 +---- .../src/components/Icons/ScreenShareOffIcon.tsx | 5 +---- apps/client/src/components/Icons/SearchIcon.tsx | 5 +---- apps/client/src/components/Icons/ThemeIcon.tsx | 5 +---- apps/client/src/components/Icons/index.ts | 5 +++++ .../src/components/LoadingCharacter/index.tsx | 6 +----- apps/client/src/components/Modal/index.tsx | 4 ++-- .../src/components/WelcomeCharacter/index.tsx | 4 ++-- apps/client/src/contexts/AuthContext.tsx | 4 ++-- apps/client/src/contexts/ThemeContext.tsx | 4 ++-- apps/client/src/env.d.ts | 8 ++++---- apps/client/src/hooks/useAPI.ts | 4 ++-- apps/client/src/hooks/useConsumer.ts | 12 ++++++------ apps/client/src/hooks/useIntersect.ts | 4 ++-- apps/client/src/hooks/useProducer.ts | 8 ++++---- apps/client/src/hooks/useSocket.ts | 8 ++++---- apps/client/src/hooks/useTransport.ts | 4 ++-- .../src/pages/Broadcast/BroadcastPlayer.tsx | 4 ++-- .../src/pages/Broadcast/BroadcastTitle.tsx | 8 ++++---- apps/client/src/pages/Broadcast/RecordButton.tsx | 8 ++++---- apps/client/src/pages/Home/Bookmark.tsx | 4 ++-- apps/client/src/pages/Home/FieldFilter.tsx | 4 ++-- apps/client/src/pages/Home/LiveCard.tsx | 4 ++-- apps/client/src/pages/Home/Search.tsx | 8 ++++---- apps/client/src/pages/Live/LivePlayer.tsx | 8 ++++---- apps/client/src/pages/Profile/Attendance.tsx | 4 ++-- apps/client/src/pages/Profile/EditUserInfo.tsx | 4 ++-- apps/client/src/pages/Profile/UserInfo.tsx | 4 ++-- apps/client/src/pages/Profile/index.tsx | 8 ++++---- apps/client/src/pages/Record/RecordInfo.tsx | 4 ++-- apps/client/src/pages/Record/RecordList.tsx | 4 ++-- apps/client/src/pages/Record/RecordPlayer.tsx | 4 ++-- apps/client/src/pages/Record/index.tsx | 16 ++++++++-------- apps/client/src/types/homeTypes.ts | 8 ++++---- apps/client/src/types/liveTypes.ts | 8 ++++---- apps/client/src/types/mediasoupTypes.ts | 12 ++++++------ 48 files changed, 120 insertions(+), 155 deletions(-) diff --git a/apps/client/src/components/ChatContainer/ChatEndModal.tsx b/apps/client/src/components/ChatContainer/ChatEndModal.tsx index 4f4b72d6..327fda81 100644 --- a/apps/client/src/components/ChatContainer/ChatEndModal.tsx +++ b/apps/client/src/components/ChatContainer/ChatEndModal.tsx @@ -1,9 +1,9 @@ import Modal from '@components/Modal'; import { useNavigate } from 'react-router-dom'; -interface ChatEndModalProps { +type ChatEndModalProps = { setShowModal: (b: boolean) => void; -} +}; function ChatEndModal({ setShowModal }: ChatEndModalProps) { const navigate = useNavigate(); diff --git a/apps/client/src/components/ChatContainer/index.tsx b/apps/client/src/components/ChatContainer/index.tsx index d7b21a7a..39202d90 100644 --- a/apps/client/src/components/ChatContainer/index.tsx +++ b/apps/client/src/components/ChatContainer/index.tsx @@ -8,12 +8,12 @@ import { AuthContext } from '@/contexts/AuthContext'; import { SmileIcon } from '@/components/Icons'; import ChatEndModal from './ChatEndModal'; -interface Chat { +type Chat = { chatId?: string; camperId: string; name: string; message: string; -} +}; const chatServerUrl = import.meta.env.VITE_CHAT_SERVER_URL; diff --git a/apps/client/src/components/ErrorCharacter/index.tsx b/apps/client/src/components/ErrorCharacter/index.tsx index f940671f..95f257af 100644 --- a/apps/client/src/components/ErrorCharacter/index.tsx +++ b/apps/client/src/components/ErrorCharacter/index.tsx @@ -1,7 +1,7 @@ -interface ErrorCharacterProps { +type ErrorCharacterProps = { size?: number; message?: string; -} +}; function ErrorCharacter({ size = 300, message = 'Error' }: ErrorCharacterProps): JSX.Element { return ( diff --git a/apps/client/src/components/IconButton/index.tsx b/apps/client/src/components/IconButton/index.tsx index c004726e..f37a498b 100644 --- a/apps/client/src/components/IconButton/index.tsx +++ b/apps/client/src/components/IconButton/index.tsx @@ -1,11 +1,11 @@ -interface IconButtonProps { +type IconButtonProps = { children: React.ReactNode; title?: string; ariaLabel?: string; onClick?: () => void; disabled?: boolean; className?: string; -} +}; function IconButton({ children, title, ariaLabel, onClick, disabled, className }: IconButtonProps) { return ( diff --git a/apps/client/src/components/Icons/BlogIcon.tsx b/apps/client/src/components/Icons/BlogIcon.tsx index 753fc08c..7286e70d 100644 --- a/apps/client/src/components/Icons/BlogIcon.tsx +++ b/apps/client/src/components/Icons/BlogIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function BlogIcon({ size = 24, className = '' }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/Character.tsx b/apps/client/src/components/Icons/Character.tsx index 6c41c56b..6a40272e 100644 --- a/apps/client/src/components/Icons/Character.tsx +++ b/apps/client/src/components/Icons/Character.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function Character({ size = 24, className = '' }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/CloseIcon.tsx b/apps/client/src/components/Icons/CloseIcon.tsx index 786d8241..e4f00cf9 100644 --- a/apps/client/src/components/Icons/CloseIcon.tsx +++ b/apps/client/src/components/Icons/CloseIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function CloseIcon({ size = 24, className }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/EditIcon.tsx b/apps/client/src/components/Icons/EditIcon.tsx index 4168897e..97b6901d 100644 --- a/apps/client/src/components/Icons/EditIcon.tsx +++ b/apps/client/src/components/Icons/EditIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function EditIcon({ size = 24, className }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/GithubIcon.tsx b/apps/client/src/components/Icons/GithubIcon.tsx index e818d43e..e1ee191d 100644 --- a/apps/client/src/components/Icons/GithubIcon.tsx +++ b/apps/client/src/components/Icons/GithubIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function GithubIcon({ size = 20, className = '' }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/GoogleIcon.tsx b/apps/client/src/components/Icons/GoogleIcon.tsx index d5412c5d..2e2c7996 100644 --- a/apps/client/src/components/Icons/GoogleIcon.tsx +++ b/apps/client/src/components/Icons/GoogleIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function GoogleIcon({ size = 60, className = '' }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/LinkedInIcon.tsx b/apps/client/src/components/Icons/LinkedInIcon.tsx index 49038311..935fc9bc 100644 --- a/apps/client/src/components/Icons/LinkedInIcon.tsx +++ b/apps/client/src/components/Icons/LinkedInIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function LinkedInIcon({ size = 20, className = '' }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/MailIcon.tsx b/apps/client/src/components/Icons/MailIcon.tsx index 5305e5c0..da7f4104 100644 --- a/apps/client/src/components/Icons/MailIcon.tsx +++ b/apps/client/src/components/Icons/MailIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function MailIcon({ size = 24, className = '' }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/ScreenShareIcon.tsx b/apps/client/src/components/Icons/ScreenShareIcon.tsx index 5529a41f..b0a41ca6 100644 --- a/apps/client/src/components/Icons/ScreenShareIcon.tsx +++ b/apps/client/src/components/Icons/ScreenShareIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function ScreenShareIcon({ size = 24, className = '' }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/ScreenShareOffIcon.tsx b/apps/client/src/components/Icons/ScreenShareOffIcon.tsx index ca1278fd..8c93d93e 100644 --- a/apps/client/src/components/Icons/ScreenShareOffIcon.tsx +++ b/apps/client/src/components/Icons/ScreenShareOffIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function ScreenShareIconOff({ size = 24, className = '' }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/SearchIcon.tsx b/apps/client/src/components/Icons/SearchIcon.tsx index ae2b6204..487c0a2a 100644 --- a/apps/client/src/components/Icons/SearchIcon.tsx +++ b/apps/client/src/components/Icons/SearchIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function SearchIcon({ size = 24, className = '' }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/ThemeIcon.tsx b/apps/client/src/components/Icons/ThemeIcon.tsx index 3b7100b8..d6d6926a 100644 --- a/apps/client/src/components/Icons/ThemeIcon.tsx +++ b/apps/client/src/components/Icons/ThemeIcon.tsx @@ -1,7 +1,4 @@ -interface IconProps { - size?: number; - className?: string; -} +import { IconProps } from '.'; function ThemeIcon({ size = 36, className = '' }: IconProps) { return ( diff --git a/apps/client/src/components/Icons/index.ts b/apps/client/src/components/Icons/index.ts index 2d6d74d8..0fde85b4 100644 --- a/apps/client/src/components/Icons/index.ts +++ b/apps/client/src/components/Icons/index.ts @@ -1,3 +1,8 @@ +export type IconProps = { + size?: number; + className?: string; +}; + export { default as BlogIcon } from './BlogIcon'; export { default as Character } from './Character'; export { default as CloseIcon } from './CloseIcon'; diff --git a/apps/client/src/components/LoadingCharacter/index.tsx b/apps/client/src/components/LoadingCharacter/index.tsx index c45fdee8..850b005e 100644 --- a/apps/client/src/components/LoadingCharacter/index.tsx +++ b/apps/client/src/components/LoadingCharacter/index.tsx @@ -1,8 +1,4 @@ -interface LoadingCharacterProps { - size?: number; -} - -function LoadingCharacter({ size = 300 }: LoadingCharacterProps): JSX.Element { +function LoadingCharacter({ size = 300 }: { size?: number }): JSX.Element { return (
diff --git a/apps/client/src/components/Modal/index.tsx b/apps/client/src/components/Modal/index.tsx index 0f491611..bcc6cefb 100644 --- a/apps/client/src/components/Modal/index.tsx +++ b/apps/client/src/components/Modal/index.tsx @@ -1,11 +1,11 @@ import { CloseIcon } from '@components/Icons'; import { useEffect, useRef } from 'react'; -interface ModalProps { +type ModalProps = { children: React.ReactNode; setShowModal: (showModal: boolean) => void; modalClassName?: string; -} +}; function Modal({ children, setShowModal, modalClassName }: ModalProps) { const modalRef = useRef(null); diff --git a/apps/client/src/components/WelcomeCharacter/index.tsx b/apps/client/src/components/WelcomeCharacter/index.tsx index 885e265d..aa5de154 100644 --- a/apps/client/src/components/WelcomeCharacter/index.tsx +++ b/apps/client/src/components/WelcomeCharacter/index.tsx @@ -1,7 +1,7 @@ -interface Props { +type Props = { size?: number; className?: string; -} +}; function WelcomeCharacter({ size, className }: Props) { return ( diff --git a/apps/client/src/contexts/AuthContext.tsx b/apps/client/src/contexts/AuthContext.tsx index 16cefd01..fcb240c4 100644 --- a/apps/client/src/contexts/AuthContext.tsx +++ b/apps/client/src/contexts/AuthContext.tsx @@ -1,9 +1,9 @@ import React, { createContext, useMemo, useState } from 'react'; -interface AuthContextInterface { +type AuthContextInterface = { isLoggedIn: boolean; setIsLoggedIn: React.Dispatch>; -} +}; const initialState = { isLoggedIn: !!localStorage.getItem('accessToken'), diff --git a/apps/client/src/contexts/ThemeContext.tsx b/apps/client/src/contexts/ThemeContext.tsx index 9444b0a1..73b1b9ef 100644 --- a/apps/client/src/contexts/ThemeContext.tsx +++ b/apps/client/src/contexts/ThemeContext.tsx @@ -2,10 +2,10 @@ import { createContext, useMemo, useState } from 'react'; type Theme = 'light' | 'dark' | null; -interface ThemeContextInterface { +type ThemeContextInterface = { theme: Theme; setTheme: React.Dispatch>; -} +}; const currentTheme = localStorage.getItem('theme') ?? null; diff --git a/apps/client/src/env.d.ts b/apps/client/src/env.d.ts index 9be7bd94..f247e5df 100644 --- a/apps/client/src/env.d.ts +++ b/apps/client/src/env.d.ts @@ -1,9 +1,9 @@ -interface ImportMetaEnv { +type ImportMetaEnv = { readonly VITE_MEDIASERVER_URL: string; readonly VITE_API_SERVER_URL: string; readonly VITE_CHAT_SERVER_URL: string; -} +}; -interface ImportMeta { +type ImportMeta = { readonly env: ImportMetaEnv; -} +}; diff --git a/apps/client/src/hooks/useAPI.ts b/apps/client/src/hooks/useAPI.ts index 8f8e4093..da524011 100644 --- a/apps/client/src/hooks/useAPI.ts +++ b/apps/client/src/hooks/useAPI.ts @@ -2,11 +2,11 @@ import axiosInstance from '@services/axios'; import { AxiosRequestConfig } from 'axios'; import { useEffect, useState } from 'react'; -interface APIQueryState { +type APIQueryState = { data: T | null; isLoading: boolean; error: Error | null; -} +}; export const useAPI = (apiInfo: AxiosRequestConfig): APIQueryState => { const [isLoading, setIsLoading] = useState(true); diff --git a/apps/client/src/hooks/useConsumer.ts b/apps/client/src/hooks/useConsumer.ts index b8203221..d1eba123 100644 --- a/apps/client/src/hooks/useConsumer.ts +++ b/apps/client/src/hooks/useConsumer.ts @@ -4,24 +4,24 @@ import { Socket } from 'socket.io-client'; import { checkDependencies } from '@utils/utils'; import { ConnectTransportResponse, TransportInfo } from '@/types/mediasoupTypes'; -interface UseConsumerProps { +type UseConsumerProps = { socket: Socket | null; device: Device | null; roomId: string | undefined; transportInfo: TransportInfo | null; isConnected: boolean; -} +}; -export interface CreateConsumer { +export type CreateConsumer = { consumerId: string; producerId: string; kind: MediaKind; rtpParameters: any; -} +}; -export interface CreateConsumerResponse { +export type CreateConsumerResponse = { consumers: CreateConsumer[]; -} +}; export const useConsumer = ({ socket, device, roomId, transportInfo, isConnected }: UseConsumerProps) => { const transportRef = useRef(null); diff --git a/apps/client/src/hooks/useIntersect.ts b/apps/client/src/hooks/useIntersect.ts index c58e53da..361be516 100644 --- a/apps/client/src/hooks/useIntersect.ts +++ b/apps/client/src/hooks/useIntersect.ts @@ -2,10 +2,10 @@ import { useCallback, useEffect, useRef } from 'react'; type IntersectHandler = (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void; -interface UseIntersectProps { +type UseIntersectProps = { onIntersect: IntersectHandler; options?: IntersectionObserverInit; -} +}; export const useIntersect = ({ onIntersect, options }: UseIntersectProps) => { const ref = useRef(null); diff --git a/apps/client/src/hooks/useProducer.ts b/apps/client/src/hooks/useProducer.ts index aaaeb27b..9dac3f8b 100644 --- a/apps/client/src/hooks/useProducer.ts +++ b/apps/client/src/hooks/useProducer.ts @@ -5,7 +5,7 @@ import { ConnectTransportResponse, TransportInfo } from '@/types/mediasoupTypes' import { checkDependencies } from '@/utils/utils'; import { ENCODING_OPTIONS } from '@/constants/videoOptions'; -interface UseProducerProps { +type UseProducerProps = { socket: Socket | null; // tracks: Tracks; // isStreamReady: boolean; @@ -14,14 +14,14 @@ interface UseProducerProps { roomId: string; device: Device | null; transportInfo: TransportInfo | null; -} +}; -interface UseProducerReturn { +type UseProducerReturn = { transport: Transport | null; error: Error | null; producerId: string; producers: Map; -} +}; export const useProducer = ({ socket, diff --git a/apps/client/src/hooks/useSocket.ts b/apps/client/src/hooks/useSocket.ts index 7eb64a8a..c44cec53 100644 --- a/apps/client/src/hooks/useSocket.ts +++ b/apps/client/src/hooks/useSocket.ts @@ -1,15 +1,15 @@ import { useEffect, useRef, useState } from 'react'; import { io, Socket } from 'socket.io-client'; -interface ExceptionData { +type ExceptionData = { status: number; message: string; -} +}; -interface ExceptionResponse { +type ExceptionResponse = { event: string; data: ExceptionData; -} +}; export const useSocket = (url: string) => { const socketRef = useRef(null); diff --git a/apps/client/src/hooks/useTransport.ts b/apps/client/src/hooks/useTransport.ts index 836f4186..2ee03313 100644 --- a/apps/client/src/hooks/useTransport.ts +++ b/apps/client/src/hooks/useTransport.ts @@ -6,11 +6,11 @@ import { Socket } from 'socket.io-client'; import { checkDependencies } from '@/utils/utils'; import { TransportInfo } from '@/types/mediasoupTypes'; -interface UseTransportProps { +type UseTransportProps = { socket: Socket | null; roomId: string | undefined; isProducer: boolean; -} +}; export const useTransport = ({ socket, roomId, isProducer = false }: UseTransportProps) => { const [transportInfo, setTransportInfo] = useState(null); diff --git a/apps/client/src/pages/Broadcast/BroadcastPlayer.tsx b/apps/client/src/pages/Broadcast/BroadcastPlayer.tsx index 2874ecbd..2d19ae59 100644 --- a/apps/client/src/pages/Broadcast/BroadcastPlayer.tsx +++ b/apps/client/src/pages/Broadcast/BroadcastPlayer.tsx @@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'; import { RESOLUTION_OPTIONS } from '@/constants/videoOptions'; import { Tracks } from '@/types/mediasoupTypes'; -interface BroadcastPlayerProps { +type BroadcastPlayerProps = { mediaStream: MediaStream | null; screenStream: MediaStream | null; isVideoEnabled: boolean; @@ -10,7 +10,7 @@ interface BroadcastPlayerProps { isStreamReady: boolean; setIsStreamReady: (ready: boolean) => void; tracksRef: React.MutableRefObject; -} +}; function BroadcastPlayer({ mediaStream, diff --git a/apps/client/src/pages/Broadcast/BroadcastTitle.tsx b/apps/client/src/pages/Broadcast/BroadcastTitle.tsx index dfaa1ec6..eccadc9a 100644 --- a/apps/client/src/pages/Broadcast/BroadcastTitle.tsx +++ b/apps/client/src/pages/Broadcast/BroadcastTitle.tsx @@ -3,14 +3,14 @@ import { useForm, SubmitHandler } from 'react-hook-form'; import { Button } from '@components/ui/button'; import axiosInstance from '@services/axios'; -interface Inputs { +type Inputs = { title: string; -} +}; -interface BroadcastTitleProps { +type BroadcastTitleProps = { currentTitle: string; onTitleChange: (newTitle: string) => void; -} +}; function BroadcastTitle({ currentTitle, onTitleChange }: BroadcastTitleProps) { const { diff --git a/apps/client/src/pages/Broadcast/RecordButton.tsx b/apps/client/src/pages/Broadcast/RecordButton.tsx index 4b31e28c..12e5a12f 100644 --- a/apps/client/src/pages/Broadcast/RecordButton.tsx +++ b/apps/client/src/pages/Broadcast/RecordButton.tsx @@ -5,14 +5,14 @@ import { Socket } from 'socket.io-client'; import { Button } from '@/components/ui/button'; import Modal from '@/components/Modal'; -interface FormInput { +type FormInput = { title: string; -} +}; -interface RecordButtonProps { +type RecordButtonProps = { socket: Socket | null; roomId: string; -} +}; function RecordButton({ socket, roomId }: RecordButtonProps) { const [isRecording, setIsRecording] = useState(false); diff --git a/apps/client/src/pages/Home/Bookmark.tsx b/apps/client/src/pages/Home/Bookmark.tsx index 472ab723..3e86c7f2 100644 --- a/apps/client/src/pages/Home/Bookmark.tsx +++ b/apps/client/src/pages/Home/Bookmark.tsx @@ -8,11 +8,11 @@ import axiosInstance from '@services/axios'; import { useContext, useEffect, useState } from 'react'; import { CloseIcon } from '@components/Icons'; -interface BookmarkData { +type BookmarkData = { bookmarkId: number; name: string; url: string; -} +}; function Bookmark() { const { isLoggedIn } = useContext(AuthContext); diff --git a/apps/client/src/pages/Home/FieldFilter.tsx b/apps/client/src/pages/Home/FieldFilter.tsx index 3c7aa216..277d8297 100644 --- a/apps/client/src/pages/Home/FieldFilter.tsx +++ b/apps/client/src/pages/Home/FieldFilter.tsx @@ -4,9 +4,9 @@ import { Field } from '@/types/liveTypes'; const fields: Field[] = ['WEB', 'AND', 'IOS']; -interface FieldFilterProps { +type FieldFilterProps = { onClickFilterButton: (field: Field) => void; -} +}; function FieldFilter({ onClickFilterButton }: FieldFilterProps) { const [selected, setSelected] = useState(''); diff --git a/apps/client/src/pages/Home/LiveCard.tsx b/apps/client/src/pages/Home/LiveCard.tsx index aae74967..ba32d2d0 100644 --- a/apps/client/src/pages/Home/LiveCard.tsx +++ b/apps/client/src/pages/Home/LiveCard.tsx @@ -1,12 +1,12 @@ import { useNavigate } from 'react-router-dom'; -interface LiveCardProps { +type LiveCardProps = { liveId: string; title: string; userId: string; profileUrl?: string; thumbnailUrl: string; -} +}; function LiveCard({ liveId, title, userId, profileUrl, thumbnailUrl }: LiveCardProps) { const navigate = useNavigate(); diff --git a/apps/client/src/pages/Home/Search.tsx b/apps/client/src/pages/Home/Search.tsx index 3797b3cc..5b65e95f 100644 --- a/apps/client/src/pages/Home/Search.tsx +++ b/apps/client/src/pages/Home/Search.tsx @@ -2,13 +2,13 @@ import { useForm } from 'react-hook-form'; import IconButton from '@/components/IconButton'; import { SearchIcon } from '@/components/Icons'; -interface SearchProps { +type SearchProps = { onSearch: (keyword: string) => void; -} +}; -interface FormInput { +type FormInput = { keyword: string; -} +}; function Search({ onSearch }: SearchProps) { const { register, handleSubmit } = useForm(); diff --git a/apps/client/src/pages/Live/LivePlayer.tsx b/apps/client/src/pages/Live/LivePlayer.tsx index 20c6d26f..8168136b 100644 --- a/apps/client/src/pages/Live/LivePlayer.tsx +++ b/apps/client/src/pages/Live/LivePlayer.tsx @@ -4,18 +4,18 @@ import { Socket } from 'socket.io-client'; import { PlayIcon, PauseIcon, VolumeOffIcon, VolumeOnIcon, ExpandIcon } from '@/components/Icons'; import ErrorCharacter from '@/components/ErrorCharacter'; -interface Errors { +type Errors = { socketError: Error | null; transportError: Error | null; consumerError: Error | null; -} +}; -interface LivePlayerProps { +type LivePlayerProps = { mediaStream: MediaStream | null; socket: Socket | null; transportId: string | undefined; errors: Errors; -} +}; type VideoQuality = 'auto' | '480p' | '720p' | '1080p'; diff --git a/apps/client/src/pages/Profile/Attendance.tsx b/apps/client/src/pages/Profile/Attendance.tsx index de14d7b1..895066fb 100644 --- a/apps/client/src/pages/Profile/Attendance.tsx +++ b/apps/client/src/pages/Profile/Attendance.tsx @@ -5,13 +5,13 @@ import { PlayIcon } from '@/components/Icons'; import LoadingCharacter from '@/components/LoadingCharacter'; import axiosInstance from '@/services/axios'; -interface AttendanceData { +type AttendanceData = { attendanceId: number; date: string; startTime: string; endTime: string; isAttendance: boolean; -} +}; function Attendance() { const [attendanceList, setAttendanceList] = useState([]); diff --git a/apps/client/src/pages/Profile/EditUserInfo.tsx b/apps/client/src/pages/Profile/EditUserInfo.tsx index e896b07c..d1829389 100644 --- a/apps/client/src/pages/Profile/EditUserInfo.tsx +++ b/apps/client/src/pages/Profile/EditUserInfo.tsx @@ -7,10 +7,10 @@ import { Button } from '@/components/ui/button'; import axiosInstance from '@/services/axios'; import { useToast } from '@/hooks/useToast'; -interface EditUserInfoProps { +type EditUserInfoProps = { userData: UserData | undefined; toggleEditing: () => void; -} +}; export interface FormInput { camperId: string | undefined; diff --git a/apps/client/src/pages/Profile/UserInfo.tsx b/apps/client/src/pages/Profile/UserInfo.tsx index 1b01c397..28151973 100644 --- a/apps/client/src/pages/Profile/UserInfo.tsx +++ b/apps/client/src/pages/Profile/UserInfo.tsx @@ -5,12 +5,12 @@ import LoadingCharacter from '@/components/LoadingCharacter'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { UserData } from '.'; -interface UserInfoProps { +type UserInfoProps = { userData: UserData | undefined; isLoading: boolean; error: Error | null; toggleEditing: () => void; -} +}; function UserInfo({ userData, isLoading, error, toggleEditing }: UserInfoProps) { const [showLoading, setShowLoading] = useState(false); diff --git a/apps/client/src/pages/Profile/index.tsx b/apps/client/src/pages/Profile/index.tsx index 9c0c984e..1649a1de 100644 --- a/apps/client/src/pages/Profile/index.tsx +++ b/apps/client/src/pages/Profile/index.tsx @@ -7,21 +7,21 @@ import { Field } from '@/types/liveTypes'; import ErrorCharacter from '@/components/ErrorCharacter'; import LoadingCharacter from '@/components/LoadingCharacter'; -export interface Contacts { +export type Contacts = { email: string; github: string; blog: string; linkedIn: string; -} +}; -export interface UserData { +export type UserData = { id: number; camperId: string; name: string; field: Field; contacts: Contacts; profileImage: string; -} +}; export default function Profile() { const [userData, setUserData] = useState(null); diff --git a/apps/client/src/pages/Record/RecordInfo.tsx b/apps/client/src/pages/Record/RecordInfo.tsx index 39c490bc..ea12f3dd 100644 --- a/apps/client/src/pages/Record/RecordInfo.tsx +++ b/apps/client/src/pages/Record/RecordInfo.tsx @@ -1,6 +1,6 @@ -interface RecordInfoProps { +type RecordInfoProps = { title: string; -} +}; function RecordInfo(props: RecordInfoProps) { const { title } = props; diff --git a/apps/client/src/pages/Record/RecordList.tsx b/apps/client/src/pages/Record/RecordList.tsx index 13f6972e..4d660be4 100644 --- a/apps/client/src/pages/Record/RecordList.tsx +++ b/apps/client/src/pages/Record/RecordList.tsx @@ -5,9 +5,9 @@ import { RecordData } from '.'; import axiosInstance from '@/services/axios'; import ErrorCharacter from '@/components/ErrorCharacter'; -interface RecordListProps { +type RecordListProps = { onClickList: (data: RecordData) => void; -} +}; function RecordList(props: RecordListProps) { const [recordList, setRecordList] = useState([]); diff --git a/apps/client/src/pages/Record/RecordPlayer.tsx b/apps/client/src/pages/Record/RecordPlayer.tsx index cc7550cd..b3bf3e36 100644 --- a/apps/client/src/pages/Record/RecordPlayer.tsx +++ b/apps/client/src/pages/Record/RecordPlayer.tsx @@ -2,9 +2,9 @@ import { useEffect, useState } from 'react'; import ReactPlayer from 'react-player'; import LoadingCharacter from '@/components/LoadingCharacter'; -interface RecordPlayerProps { +type RecordPlayerProps = { video: string; -} +}; function RecordPlayer(props: RecordPlayerProps) { const [isSelectedVideo, setIsSelectedVideo] = useState(false); diff --git a/apps/client/src/pages/Record/index.tsx b/apps/client/src/pages/Record/index.tsx index 71d384d9..a8c52a6b 100644 --- a/apps/client/src/pages/Record/index.tsx +++ b/apps/client/src/pages/Record/index.tsx @@ -3,12 +3,12 @@ import RecordInfo from './RecordInfo'; import RecordList from './RecordList'; import RecordPlayer from './RecordPlayer'; -export interface RecordData { +export type RecordData = { recordId: number; title: string; video: string; date: string; -} +}; function Record() { const [nowPlaying, setIsNowPlaying] = useState({ recordId: 0, title: '', video: '', date: '' }); @@ -16,12 +16,12 @@ function Record() { return (
- - -
-
- -
+ + +
+
+ +
); } diff --git a/apps/client/src/types/homeTypes.ts b/apps/client/src/types/homeTypes.ts index d8f0a309..4c8875da 100644 --- a/apps/client/src/types/homeTypes.ts +++ b/apps/client/src/types/homeTypes.ts @@ -1,15 +1,15 @@ import { Field } from './liveTypes'; -export interface LivePreviewInfo { +export type LivePreviewInfo = { broadcastId: string; broadcastTitle: string; camperId: string; profileImage: string; thumbnail: string; field: Field; -} +}; -export interface LivePreviewListInfo { +export type LivePreviewListInfo = { broadcasts: LivePreviewInfo[]; nextCursor: string | null; -} +}; diff --git a/apps/client/src/types/liveTypes.ts b/apps/client/src/types/liveTypes.ts index 29167c77..3f448368 100644 --- a/apps/client/src/types/liveTypes.ts +++ b/apps/client/src/types/liveTypes.ts @@ -1,17 +1,17 @@ -export interface ContactInfo { +export type ContactInfo = { github: string; linkedin: string; email: string; blog: string; -} +}; export type Field = 'WEB' | 'AND' | 'IOS' | ''; -export interface LiveInfo { +export type LiveInfo = { title: string; camperId: string; viewers: number; field: Field; profileImage: string; contacts: ContactInfo; -} +}; diff --git a/apps/client/src/types/mediasoupTypes.ts b/apps/client/src/types/mediasoupTypes.ts index 6c6cc9a3..ca946b96 100644 --- a/apps/client/src/types/mediasoupTypes.ts +++ b/apps/client/src/types/mediasoupTypes.ts @@ -1,20 +1,20 @@ import { DtlsParameters, IceCandidate, IceParameters } from 'mediasoup-client/lib/types'; -export interface TransportInfo { +export type TransportInfo = { transportId: string; isProducer: boolean; iceParameters: IceParameters; iceCandidates: IceCandidate[]; dtlsParameters: DtlsParameters; -} +}; -export interface ConnectTransportResponse { +export type ConnectTransportResponse = { connected: boolean; isProducer: boolean; -} +}; -export interface Tracks { +export type Tracks = { video: MediaStreamTrack | undefined; mediaAudio: MediaStreamTrack | undefined; screenAudio: MediaStreamTrack | undefined; -} +}; From fadebd538a2fb12f0dc07c6f30e74bfc2223cae9 Mon Sep 17 00:00:00 2001 From: zero0205 Date: Mon, 13 Jan 2025 01:55:52 +0900 Subject: [PATCH 14/15] =?UTF-8?q?:recycle:=20[Refactor]:=20.eslintrc=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EA=B0=80=EB=8F=85=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/.eslintrc | 35 ++++++++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/apps/client/.eslintrc b/apps/client/.eslintrc index 046a9ebd..d1d35433 100644 --- a/apps/client/.eslintrc +++ b/apps/client/.eslintrc @@ -1,5 +1,6 @@ { "parser": "@typescript-eslint/parser", + "parserOptions": { "project": ["./tsconfig.json"], "ecmaVersion": 12, @@ -8,21 +9,37 @@ "jsx": true } }, + "env": { "browser": true, "es2021": true }, + "extends": ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "prettier"], + "settings": { "react": { "version": "detect" } }, + "plugins": ["prettier"], + "rules": { + // React 관련 규칙 "react/react-in-jsx-scope": "off", "react/no-unescaped-entities": "off", "react/prop-types": "off", + "react/jsx-filename-extension": [ + "warn", + { + "extensions": [".js", ".jsx", ".ts", ".tsx"] + } + ], + "react/require-default-props": "off", + "react/jsx-props-no-spreading": "off", + + // TypeScript 관련 규칙 "@typescript-eslint/no-explicit-any": "warn", "@typescript-eslint/no-unused-vars": [ "error", @@ -32,13 +49,21 @@ "ignoreRestSiblings": true } ], + + // Import/Export 관련 규칙 "import/no-unresolved": "off", "import/extensions": ["off"], - "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx", ".ts", ".tsx"] }], - "react/require-default-props": "off", + "import/prefer-default-export": "off", + + // 접근성 관련 규칙 "jsx-a11y/media-has-caption": "off", - "react/jsx-props-no-spreading": "off", - "no-param-reassign": ["warn", { "props": false }], - "import/prefer-default-export": "off" + + // 기타 규칙 + "no-param-reassign": [ + "warn", + { + "props": false + } + ] } } From 6e8c7d9a782df13621b9ef22d50342ccc5fa9989 Mon Sep 17 00:00:00 2001 From: zero0205 Date: Mon, 13 Jan 2025 15:26:31 +0900 Subject: [PATCH 15/15] =?UTF-8?q?:bug:=20[Fix]:=20env.d.ts=EC=9D=98=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=84=A0=EC=96=B8=EC=9D=84=20interface?= =?UTF-8?q?=EB=A1=9C=20=EB=8B=A4=EC=8B=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/package.json | 2 +- apps/client/src/env.d.ts | 8 ++++---- pnpm-lock.yaml | 18 +++++++++--------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/apps/client/package.json b/apps/client/package.json index 563857a2..8dc66bf8 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -50,7 +50,7 @@ "postcss": "^8.4.47", "prettier": "*", "tailwindcss": "^3.4.14", - "typescript": "workspace:*", + "typescript": "*", "vite": "^5.4.10" } } diff --git a/apps/client/src/env.d.ts b/apps/client/src/env.d.ts index f247e5df..9be7bd94 100644 --- a/apps/client/src/env.d.ts +++ b/apps/client/src/env.d.ts @@ -1,9 +1,9 @@ -type ImportMetaEnv = { +interface ImportMetaEnv { readonly VITE_MEDIASERVER_URL: string; readonly VITE_API_SERVER_URL: string; readonly VITE_CHAT_SERVER_URL: string; -}; +} -type ImportMeta = { +interface ImportMeta { readonly env: ImportMetaEnv; -}; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 44974df7..cf6ea675 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8269,7 +8269,7 @@ snapshots: '@eslint/eslintrc@2.1.4': dependencies: ajv: 6.12.6 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@9.4.0) espree: 9.6.1 globals: 13.24.0 ignore: 5.3.2 @@ -8337,7 +8337,7 @@ snapshots: '@humanwhocodes/config-array@0.13.0': dependencies: '@humanwhocodes/object-schema': 2.0.3 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@9.4.0) minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -9945,7 +9945,7 @@ snapshots: '@typescript-eslint/types': 7.18.0 '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3) '@typescript-eslint/visitor-keys': 7.18.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@9.4.0) eslint: 8.57.1 optionalDependencies: typescript: 5.6.3 @@ -9978,7 +9978,7 @@ snapshots: dependencies: '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3) '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3) - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@9.4.0) eslint: 8.57.1 ts-api-utils: 1.4.0(typescript@5.6.3) optionalDependencies: @@ -10009,7 +10009,7 @@ snapshots: dependencies: '@typescript-eslint/types': 7.18.0 '@typescript-eslint/visitor-keys': 7.18.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@9.4.0) globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.5 @@ -11037,7 +11037,7 @@ snapshots: engine.io-client@6.6.2(bufferutil@4.0.8)(utf-8-validate@5.0.10): dependencies: '@socket.io/component-emitter': 3.1.2 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@9.4.0) engine.io-parser: 5.2.3 ws: 8.17.1(bufferutil@4.0.8)(utf-8-validate@5.0.10) xmlhttprequest-ssl: 2.1.2 @@ -11372,7 +11372,7 @@ snapshots: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@9.4.0) doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 @@ -13751,7 +13751,7 @@ snapshots: socket.io-client@4.8.1(bufferutil@4.0.8)(utf-8-validate@5.0.10): dependencies: '@socket.io/component-emitter': 3.1.2 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@9.4.0) engine.io-client: 6.6.2(bufferutil@4.0.8)(utf-8-validate@5.0.10) socket.io-parser: 4.2.4 transitivePeerDependencies: @@ -13762,7 +13762,7 @@ snapshots: socket.io-parser@4.2.4: dependencies: '@socket.io/component-emitter': 3.1.2 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@9.4.0) transitivePeerDependencies: - supports-color