feat: 버전 업데이트 및 리팩토링

.babelrc

@@ -7,14 +7,6 @@
         "libraryName": "antd"
       },
       "antd"
-    ],
-    [
-      "styled-components",
-      {
-        "ssr": true,
-        "displayName": true,
-        "preprocess": false
-      }
     ]
   ]
 }

.eslintrc.js

@@ -1,22 +1,23 @@
 module.exports = {
+  parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint', 'prettier'],
   extends: ['next', 'plugin:@typescript-eslint/recommended', 'prettier'],
   env: {
     node: true,
     browser: true,
   },
   parserOptions: {
-    project: './tsconfig.json',
+    project: ['./tsconfig.json', './tsconfig.server.json'],
   },
   rules: {
     'prettier/prettier': 'error',
-
     'arrow-body-style': 'off',
     'prefer-arrow-callback': 'off',
     'no-multi-assign': 'off',
     'no-param-reassign': 'off',
     'no-continue': 'off',
-    'no-shadow': 'off',
+    'no-console': 'warn',
+    'no-shadow': 'warn',
     'array-callback-return': 'off',
     'no-case-declarations': 'off',
     'no-await-in-loop': 'off',
@@ -29,19 +30,21 @@ module.exports = {
     'prefer-destructuring': 'warn',
     'no-nested-ternary': 'off',
 
+    'prettier/prettier': 'error',
     'react/display-name': 'warn',
     'react/jsx-uses-react': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/prop-types': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/no-array-index-key': 'warn',
     'react/jsx-no-target-blank': 'off',
+    'react/no-unescaped-entities': 'off',
 
     '@next/next/no-html-link-for-pages': 'off',
     '@next/next/no-img-element': 'off',
 
     'import/no-default-export': 'off',
-    'import/prefer-default-export': 'warn',
+    'import/prefer-default-export': 'off',
     'import/no-cycle': 'off',
     'import/export': 'off',
     'import/no-named-as-default': 'warn',
@@ -88,10 +91,11 @@ module.exports = {
       },
     ],
 
+    '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/triple-slash-reference': 'warn',
     '@typescript-eslint/no-var-requires': 'warn',
     '@typescript-eslint/no-shadow': 'warn',
-    '@typescript-eslint/no-empty-interface': 'warn',
+    '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-empty-function': 'warn',
     '@typescript-eslint/no-namespace': 'warn',
     '@typescript-eslint/no-redeclare': 'warn',
@@ -119,12 +123,12 @@ module.exports = {
       },
     ],
     '@typescript-eslint/prefer-optional-chain': 'error',
-    '@typescript-eslint/prefer-nullish-coalescing': 'error',
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
   },
   settings: {
     'import/resolver': {
       typescript: {
-        project: 'packages/*/tsconfig.json',
+        project: './tsconfig.json',
       },
     },
   },
@@ -152,7 +156,7 @@ module.exports = {
           'error',
           {
             devDependencies: true,
-            packageDir: ['./packages/client/', './'],
+            packageDir: ['./'],
           },
         ],
       },

components/Footer.tsx → components/common/Layout/Footer.tsx

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 function Footer(): ReactElement {
   return (
     <div className="w-full flex flex-col">
-      <div className="self-center m-4">
+      <div className="self-center m-4 text-base">
         <FontAwesomeIcon icon={faBolt} style={{ marginRight: '0.5rem' }} />
         Powered by Quakka
       </div>

config.ts

@@ -10,49 +10,3 @@ export const AUTHOR = 'Geon Lee'
 export const KEYWORDS: string[] = ['Next.js', 'web']
 
 export const FAVICON_URL = '/favicon.ico'
-
-/**
- * 트위터 카드 형식
- * * https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started
- */
-export enum TwitterCard {
-  SUMMARY = 'summary',
-  SUMMARY_LARGE_IMAGE = 'summary_large_image',
-  APP = 'app',
-  PLAYER = 'player',
-}
-
-export enum OgType {
-  WEBSITE = 'website',
-}
-
-export interface Config {
-  url: string
-  title: string
-  author: string
-  applicationName: string
-  description: string
-  keywords: string[]
-  image: {
-    main: {
-      url: string
-      alt: string
-      width: number
-      height: number
-    }
-  }
-  favicon: {
-    url: string
-    alt: string
-  }
-  twitter: {
-    /** @username for the website used in the card footer.	 */
-    site: string
-    /** @username for the content creator / author.	 */
-    creator: string
-    card: TwitterCard
-  }
-  og: {
-    type: OgType
-  }
-}

next.config.js

@@ -1,8 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  images: {
-    domains: ['img1.daumcdn.net'],
-  },
   webpack(config, {}) {
     config.resolve.fallback = {
       ...config.resolve.fallback,

package.json

@@ -10,54 +10,54 @@
     "start": "next start",
     "clean": "rm -rf node_modules package-lock.json yarn.lock .cache .next **/node_modules **/package-lock.json **/yarn.lock **/.cache **/.next"
   },
-  "devDependencies": {
+  "dependencies": {
     "@babel/eslint-parser": "^7.17.0",
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
-    "@fortawesome/fontawesome-svg-core": "6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "6.1.1",
-    "@fortawesome/react-fontawesome": "0.1.18",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.21",
-    "@types/react": "^17.0.40",
-    "@types/styled-components": "^5.1.24",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "antd": "^4.23.1",
-    "autoprefixer": "^10.4.12",
-    "axios": "^0.26.1",
-    "babel-plugin-import": "^1.13.3",
-    "babel-plugin-styled-components": "^2.0.6",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "antd": "^5.6.3",
+    "autoprefixer": "^10.4.14",
+    "axios": "^1.4.0",
     "concurrently": "^7.0.0",
     "cross-env": "^7.0.2",
-    "eslint": "^8.11.0",
-    "eslint-config-next": "^12.1.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.3.7",
-    "next": "12.1.0",
+    "next": "^13.4.9",
     "next-sitemap": "^2.5.10",
-    "postcss": "^8.4.18",
-    "prettier": "^2.6.0",
-    "qs": "^6.10.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "styled-components": "^5.3.3",
-    "styled-reset": "^4.3.3",
-    "stylelint": "^14.6.0",
-    "stylelint-config-standard": "^25.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
-    "tailwindcss": "^3.2.1",
+    "postcss": "^8.4.25",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "^3.3.2",
     "ts-node": "^10.7.0",
     "turbo": "latest",
-    "typescript": "^4.6.2"
+    "typescript": "^5.1.6",
+    "usehooks-ts": "^2.9.1"
+  },
+  "devDependencies": {
+    "prettier": "^2.7.1",
+    "@types/node": "^18.0.0",
+    "@types/react": "^17.0.40",
+    "eslint": "^8.18.0",
+    "eslint-config-next": "^12.1.6",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.1.0",
+    "stylelint": "^14.6.0",
+    "stylelint-config-standard": "^25.0.0",
+    "babel-plugin-import": "^1.13.3",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
+    "styled-reset": "4.4.1",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": "eslint --cache --fix -c .eslintrc.githook.js",
+    "*.{js,jsx,ts,tsx}": "eslint --cache --fix -c .eslintrc.js",
     "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write",
     "*.{scss,css}": "stylelint --fix"
-  },
-  "dependencies": {}
+  }
 }

pages/_app.tsx

@@ -1,14 +1,14 @@
+import { config } from '@fortawesome/fontawesome-svg-core'
 import { ConfigProvider } from 'antd'
 import koKR from 'antd/lib/locale/ko_KR'
 import { AppProps } from 'next/app'
 import Head from 'next/head'
-import { ThemeProvider } from 'styled-components'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+config.autoAddCss = false
 
 import { APPLICATION_NAME } from '@/config'
-import { theme } from '@/styles/theme'
 
 import '@/styles/globals.css'
-import 'antd/dist/antd.css'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function App({ Component, pageProps }: AppProps) {
@@ -18,9 +18,7 @@ function App({ Component, pageProps }: AppProps) {
         <title>{APPLICATION_NAME}</title>
       </Head>
       <ConfigProvider locale={koKR}>
-        <ThemeProvider theme={theme}>
-          <Component {...pageProps} />
-        </ThemeProvider>
+        <Component {...pageProps} />
       </ConfigProvider>
     </>
   )