feat: add a /test page

next.config.js

@@ -21,6 +21,6 @@ module.exports = withAntdLess({
 
   // NextFuture
   future: {
-    webpack5: true,
+    // webpack5: true,
   },
 });

package.json

@@ -25,13 +25,13 @@
     "build": "next build"
   },
   "dependencies": {
-    "antd": "^4.15.4",
+    "antd": "^4.15.5",
     "autoprefixer": "^10.2.5",
     "axios": "^0.21.0",
     "classnames": "^2.3.1",
     "css-loader": "^5.2.4",
     "next": "10.2.0",
-    "next-plugin-antd-less": "^1.2.0",
+    "next-plugin-antd-less": "^1.2.1",
     "normalize.css": "^8.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -40,31 +40,31 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^12.1.1",
+    "@commitlint/config-conventional": "^12.1.4",
     "@types/classnames": "^2.3.1",
     "@types/eslint": "^7.2.10",
     "@types/eslint-plugin-prettier": "^3.1.0",
-    "@types/node": "^15.0.2",
+    "@types/node": "^15.3.0",
     "@types/prettier": "^2.2.3",
     "@types/react": "^17.0.5",
-    "@typescript-eslint/eslint-plugin": "^4.22.1",
-    "@typescript-eslint/parser": "^4.22.1",
+    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/parser": "^4.23.0",
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-module-resolver": "^4.0.0",
-    "commitlint": "^12.1.1",
+    "commitlint": "^12.1.4",
     "eslint": "^7.26.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-airbnb-typescript": "^12.0.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.23.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^6.0.0",
     "lint-staged": "^11.0.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.0",
     "pretty-quick": "^3.1.0",
     "typescript": "^4.2.4"
   }

src/page-components/test/Test/Test.tsx

@@ -0,0 +1,21 @@
+import cx from 'classnames';
+import React from 'react';
+
+import { IPageProps } from '@/interfaces';
+import { HtmlMeta, PageContainer } from '@/components';
+
+import styles from './styles.module.less';
+
+interface IProps extends IPageProps {
+  className?: string;
+  style?: React.CSSProperties;
+  alwaysDarkMode?: boolean;
+}
+
+export const Test: React.FC<IProps> = (props) => (
+  <PageContainer className={cx(styles['comp-wrapper'], props.className)}>
+    <HtmlMeta title="Test" />
+
+    <div className={styles['image-bg']}>IMAGE-BG</div>
+  </PageContainer>
+);

src/page-components/test/Test/styles.module.less

@@ -0,0 +1,23 @@
+.comp-wrapper {
+  position: relative;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  place-items: center;
+}
+
+.image-bg {
+  display: table;
+  width: 200px;
+  //width: 100%;
+  height: 200px;
+  margin: 0 auto;
+
+  //background-color: red;
+  background-image: url('./image.jpg');
+}
+
+// DARK-MODE
+.comp-wrapper--always-dark-mode,
+:global(.@{THEME--DARK}) .comp-wrapper {
+}

src/pages/test.tsx

@@ -0,0 +1 @@
+export { Test as default } from '@/page-components/test/Test/Test';