Merge pull request #12 from junekimdev/upgrade-deps

Upgrade deps

Author: junekimdev

README.md

@@ -79,12 +79,12 @@ NEXT_PUBLIC_API_URL=http://api.domain.com
 - Website server-side rendering framework: NextJS
 - Package management: Webpack (included in NextJS)
 - Transpiler: Speedy Web Compiler (included in NextJS)
-- State management (client): Recoil
+- State management (client): Jotai
 - State management (server): TanStack Query
 - HTTP interface: fetch API (part of WHATWG Web Standard)
 - JavaScript Testing Framework: Jest
 - React Testing Library: @testing-library/react
-- Browser style normalization script: Normalize
+- Browser style normalization script: Modern-normalize
 - Stylesheet preprocessor: SCSS
 - Stylesheet postprocessor: Postcss (included in NextJS)
 - Postcss plugin: Autoprefixer (included in NextJS)
@@ -113,6 +113,10 @@ Root
 ├── controllers  
     ├── index.ts  
     ├── apiURLs.ts  
+    ├── data  
+        ├── states.ts  
+        ├── types.ts  
+        └── staticQuery.ts  
     ├── net  
         └── staticQuery.ts  
     └── moreControllers.ts

codegen.js

@@ -55,16 +55,12 @@ const main = async () => {
     const presenterTemplate = path.join(__dirname, 'templates', 'presenter.ejs');
     const scssTemplate = path.join(__dirname, 'templates', 'scss.ejs');
     const viewTemplate = path.join(__dirname, 'templates', 'view.ejs');
-    const typeTemplate = path.join(__dirname, 'templates', 'type.ejs');
-    const statesTemplate = path.join(__dirname, 'templates', 'states.ejs');
 
     // Output
     renderEjs(indexTemplate, name, 'index.ts');
     renderEjs(interactorTemplate, name, `${name}Interactor.ts`);
     renderEjs(presenterTemplate, name, `${name}Presenter.tsx`);
     renderEjs(scssTemplate, name, `${name}.module.scss`);
-    renderEjs(typeTemplate, name, `${name}Type.ts`);
-    renderEjs(statesTemplate, name, `${name}States.ts`);
     if (v && !V) renderEjs(viewTemplate, name, `${name}View.tsx`);
 
     console.log(`Generated the component: ${name}`);

components/errors/errorsStates.ts

@@ -1,13 +1,13 @@
 import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import Link from 'next/link';
+import { stateErrorCode } from '../../controllers/data/states';
 import imageSrc404 from '../../public/assets/images/404_broken_robot.png';
 import imageSrc500 from '../../public/assets/images/500_faulty_dog.png';
 import styles from './errors.module.scss';
-import { code } from './errorsStates';
 
 const View = () => {
-  const errorCode = useAtomValue(code);
+  const errorCode = useAtomValue(stateErrorCode);
 
   return (
     <div className={styles.errorImage}>

components/errors/errorsViewImage.tsx

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const stateErrorCode = atom(500);

controllers/data/states.ts

@@ -0,0 +1 @@
+export type TypeError = { code: number; message: string };

controllers/data/types.ts

@@ -14,22 +14,23 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.64.1",
-    "jotai": "^2.11.0",
-    "next": "^15.1.4",
+    "@tanstack/react-query": "^5.64.2",
+    "jotai": "^2.11.1",
+    "modern-normalize": "^3.0.1",
+    "next": "^15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sass": "^1.83.4",
     "sharp": "^0.33.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
-    "@next/eslint-plugin-next": "^15.1.4",
+    "@next/eslint-plugin-next": "^15.1.6",
     "@stylistic/eslint-plugin": "^2.13.0",
-    "@tanstack/react-query-devtools": "^5.64.1",
-    "@testing-library/react": "^16.1.0",
-    "@types/node": "^22.10.6",
-    "@types/react": "^19.0.7",
+    "@tanstack/react-query-devtools": "^5.64.2",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^22.10.10",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "ejs": "^3.1.9",
     "eslint": "^9.18.0",
@@ -39,7 +40,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.4.2",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.20.0"
+    "typescript-eslint": "^8.21.0"
   },
   "browserslist": {
     "production": [

package.json

@@ -1,12 +1,12 @@
 import { useSetAtom } from 'jotai';
 import { useEffect } from 'react';
 import Errors from '../components/errors';
-import { code } from '../components/errors/errorsStates';
 import Meta from '../components/meta';
+import { stateErrorCode } from '../controllers/data/states';
 
 const Error404 = () => {
   const publicUrl = process.env.PUBLIC_URL || 'localhost:3000';
-  const setErrorCode = useSetAtom(code);
+  const setErrorCode = useSetAtom(stateErrorCode);
 
   useEffect(() => {
     setErrorCode(404);

pages/404.tsx

@@ -2,14 +2,12 @@ import { useSetAtom } from 'jotai';
 import { NextPageContext } from 'next';
 import { useEffect } from 'react';
 import Errors from '../components/errors';
-import { code } from '../components/errors/errorsStates';
 import Meta from '../components/meta';
+import { stateErrorCode } from '../controllers/data/states';
 
-type ErrorCodeType = { statusCode: number };
-
-const Error = ({ statusCode }: ErrorCodeType) => {
+const Error = ({ statusCode }: { statusCode: number }) => {
   const publicUrl = process.env.PUBLIC_URL || 'localhost:3000';
-  const setErrorCode = useSetAtom(code);
+  const setErrorCode = useSetAtom(stateErrorCode);
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -34,7 +32,7 @@ export const config = {
 };
 
 export const getServerSideProps = async ({ res, err }: NextPageContext) => {
-  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  const statusCode = res ? res.statusCode : (err?.statusCode ?? 404);
   return { props: { statusCode } };
 };
 

pages/_error.tsx

@@ -1,5 +1,5 @@
 @use '../components/theme.scss';
-@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
+@import '../node_modules/modern-normalize/modern-normalize.css';
 @import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
 //@import 'https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap';