feat: remove emtion and install styled-component

- emotion-js/emotion#2928
- the version of next.js over 13 was not supported emotion

.vscode/settings.json

@@ -0,0 +1 @@
+{}

next.config.js

@@ -1,4 +1,47 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  swcMinify: true,
+  compiler: {
+    styledComponents: true,
+  },
+  trailingSlash: false,
+  reactStrictMode: true,
+  output: "standalone",
 
-module.exports = nextConfig
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+
+  webpack: (config) => {
+    // SVGR: https://react-svgr.com/docs/next/
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.(".svg")
+    );
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ["@svgr/webpack"],
+      }
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -13,9 +13,6 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.15.12",
     "@reduxjs/toolkit": "^1.9.7",
     "@storybook/addon-themes": "^7.6.8",
     "@types/node": "20.11.24",
@@ -30,6 +27,7 @@
     "react-icons": "^4.11.0",
     "react-redux": "^8.1.3",
     "sharp": "^0.32.6",
+    "styled-components": "^6.1.8",
     "swr": "^2.2.0",
     "typescript": "5.3.3"
   },
@@ -50,9 +48,9 @@
     "@types/node": "^20.11.0",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
-    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",

src/app/layout.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from "next";
+
 export default function RootLayout({
   children,
 }: {

src/app/page.tsx

@@ -1,3 +1,4 @@
+"use client";
 export default function Home() {
   return (
     <main>