Merge pull request #11 from junekimdev/replace-state-management

Replace state management

Author: junekimdev

.eslintignore

@@ -16,7 +16,7 @@ const snakeCaseCap = (string) => {
 /********************
  * User Input Inquirer
  ********************/
-const readline = require('readline');
+const readline = require('node:readline');
 /**
  * @param {string} query
  * @returns {Promise<string>}

.eslintrc.js

@@ -1,5 +1,5 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
 const ejs = require('ejs');
 const { getArgs, askQuestion } = require('./codegen-util');
 

codegen-util.js

@@ -1,31 +1,43 @@
-$screen-1: 320px;
-$screen-2: 800px; //SVGA
-$screen-3: 1280px; //HD +FHD/QHD
-$screen-4: 2048px; //2K +4K
+$screen-1: 320px; // mobile-portrait
+$screen-2: 480px; // mobile-landscape
+$screen-3: 768px; // tablet-portrait
+$screen-4: 1024px; // pc & tablet-landscape
+$screen-5: 2048px; // pc-wide
 
 // Media queries
+// Wearable devices
 @mixin mobile-xs {
-  @media only screen and (max-width: #{$screen-1}) {
+  @media only screen and (width < $screen-1) {
     @content;
   }
 }
 
-// "Mobile screen" is the base of css stylesheet
+// "Mobile portrait" is default
+// $screen-1 <= width < $screen-2
 
+// Mobile-landscape
+@mixin mobile-wide {
+  @media only screen and ($screen-2 <= width) {
+    @content;
+  }
+}
+
+// Tablet-portrait
 @mixin tablet {
-  @media only screen and (min-width: #{$screen-2}) {
+  @media only screen and ($screen-3 <= width) {
     @content;
   }
 }
 
+// PC & Tablet-landscape
 @mixin pc {
-  @media only screen and (min-width: #{$screen-3}) {
+  @media only screen and ($screen-4 <= width) {
     @content;
   }
 }
 
-@mixin pc-xl {
-  @media only screen and (min-width: #{$screen-4}) {
+@mixin pc-wide {
+  @media only screen and ($screen-5 <= width) {
     @content;
   }
 }

codegen.js

@@ -1,3 +1,3 @@
-import { atom } from 'recoil';
+import { atom } from 'jotai';
 
-export const code = atom({ key: 'error-code', default: 500 });
+export const code = atom(500);

components/_theme.scss

@@ -1,13 +1,13 @@
+import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useRecoilValue } from 'recoil';
 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 = useRecoilValue(code);
+  const errorCode = useAtomValue(code);
 
   return (
     <div className={styles.errorImage}>

components/errors/errorsStates.ts

@@ -1,11 +1,11 @@
 import { placeholderUrl } from '../../controllers/apiURLs';
-import { staticQuery } from '../../controllers/net/staticQuery';
+import { useStaticQuery } from '../../controllers/net/staticQuery';
 import styles from './example.module.scss';
 import { ExamplePost } from './exampleType';
 import Posts from './exampleViewPosts';
 
 const Presenter = () => {
-  const query = staticQuery<ExamplePost[]>(placeholderUrl);
+  const query = useStaticQuery<ExamplePost[]>(placeholderUrl);
 
   let contents;
   switch (query.status) {

components/errors/errorsViewImage.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 import { useEffect } from 'react';
 

components/example/examplePresenter.tsx

@@ -1,6 +1,6 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
-export const staticQuery = <T = unknown>(url: string) => {
+export const useStaticQuery = <T = unknown>(url: string) => {
   return useQuery<T, Error, T, string[]>({
     queryKey: ['static', url],
     queryFn: async ({ queryKey }) => {