refactor: linted multiple files

.eslintrc → .eslintrc.json

@@ -6,6 +6,7 @@
     "plugin:prettier/recommended"
   ],
   "rules": {
+    "import/extensions": "off",
     "prettier/prettier": [
       "error",
       {

package.json

@@ -72,7 +72,7 @@
     "cssnano": "^6.0.3",
     "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "6.0.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-next": "^14.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",

src/app/portfolio/page.tsx

@@ -23,24 +23,22 @@ export const metadata: Metadata = {
 
 export default function PortfolioPage() {
   return (
-    <>
-      <DefaultLayout>
-        <h2 className="text-gray-900 dark:text-gray-100">Portfolios</h2>
-        <ul>
-          {menus.map((menu) => {
-            return (
-              <li
-                key={menu.key}
-                className="text-xl text-gray-900 dark:text-gray-100"
-              >
-                <Link href={menu.href} scroll={false}>
-                  {menu.title}
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
-      </DefaultLayout>
-    </>
+    <DefaultLayout>
+      <h2 className="text-gray-900 dark:text-gray-100">Portfolios</h2>
+      <ul>
+        {menus.map((menu) => {
+          return (
+            <li
+              key={menu.key}
+              className="text-xl text-gray-900 dark:text-gray-100"
+            >
+              <Link href={menu.href} scroll={false}>
+                {menu.title}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </DefaultLayout>
   );
 }

src/app/techrecord/(pages)/cannon-raycast-vehicle/page.tsx

@@ -47,25 +47,22 @@ const Pillar = (props: CylinderProps) => {
 };
 
 export default function CannonRaycastVehicle() {
-  const { ambient_intensity, spot_intensity } = useControls(
-    'Light Intensities',
-    {
-      ambient_intensity: { value: 0.1, min: 0, max: 2, step: 0.1 },
-      spot_intensity: { value: 1, min: 0, max: 3, step: 0.1 },
-    },
-  );
+  const { ambientIntensity, spotIntensity } = useControls('Light Intensities', {
+    ambientIntensity: { value: 0.1, min: 0, max: 2, step: 0.1 },
+    spotIntensity: { value: 1, min: 0, max: 3, step: 0.1 },
+  });
 
   return (
     <>
       <ThreeCanvas>
         <Canvas shadows camera={{ fov: 50, position: [0, 5, 15] }}>
           <fog attach="fog" args={['#171720', 10, 50]} />
           <color attach="background" args={['#171720']} />
-          <ambientLight intensity={ambient_intensity} />
+          <ambientLight intensity={ambientIntensity} />
           <spotLight
             position={[10, 10, 10]}
             angle={Math.PI / 3}
-            intensity={spot_intensity}
+            intensity={spotIntensity}
             castShadow
             penumbra={1}
           />

src/app/techrecord/(pages)/three-example/page.tsx

@@ -7,26 +7,20 @@ import { ThreeCanvas } from '@/layouts';
 
 export default function ThreeExample() {
   return (
-    <>
-      <ThreeCanvas>
-        <Canvas>
-          <ambientLight intensity={Math.PI / 2} />
-          <spotLight
-            position={[10, 10, 10]}
-            angle={0.15}
-            penumbra={1}
-            decay={0}
-            intensity={Math.PI}
-          />
-          <pointLight
-            position={[-10, -10, -10]}
-            decay={0}
-            intensity={Math.PI}
-          />
-          <ThreeSimpleBox position={[-1.2, 0, 0]} />
-          <ThreeSimpleBox position={[1.2, 0, 0]} />
-        </Canvas>
-      </ThreeCanvas>
-    </>
+    <ThreeCanvas>
+      <Canvas>
+        <ambientLight intensity={Math.PI / 2} />
+        <spotLight
+          position={[10, 10, 10]}
+          angle={0.15}
+          penumbra={1}
+          decay={0}
+          intensity={Math.PI}
+        />
+        <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+        <ThreeSimpleBox position={[-1.2, 0, 0]} />
+        <ThreeSimpleBox position={[1.2, 0, 0]} />
+      </Canvas>
+    </ThreeCanvas>
   );
 }

src/app/techrecord/(pages)/water-example/page.tsx

@@ -27,21 +27,17 @@ const Box = () => {
 
 export default function WaterExample() {
   return (
-    <>
-      <ThreeCanvas>
-        <Canvas
-          camera={{ position: [0, 5, 100], fov: 55, near: 1, far: 20000 }}
-        >
-          <pointLight position={[100, 100, 100]} />
-          <pointLight position={[-100, -100, -100]} />
-          <Suspense fallback={null}>
-            <Ocean />
-            <Sky sunPosition={[500, 150, -1000]} turbidity={0.1} />
-          </Suspense>
-          <Box />
-          <OrbitControls />
-        </Canvas>
-      </ThreeCanvas>
-    </>
+    <ThreeCanvas>
+      <Canvas camera={{ position: [0, 5, 100], fov: 55, near: 1, far: 20000 }}>
+        <pointLight position={[100, 100, 100]} />
+        <pointLight position={[-100, -100, -100]} />
+        <Suspense fallback={null}>
+          <Ocean />
+          <Sky sunPosition={[500, 150, -1000]} turbidity={0.1} />
+        </Suspense>
+        <Box />
+        <OrbitControls />
+      </Canvas>
+    </ThreeCanvas>
   );
 }

src/app/techrecord/page.tsx

@@ -43,31 +43,29 @@ export const metadata: Metadata = {
 
 export default function TechrecordPage() {
   return (
-    <>
-      <DefaultLayout>
-        <h2 className="text-gray-900 dark:text-gray-100">Tech Record</h2>
-        <table>
-          <tbody>
-            {menus.map((menu) => {
-              return (
-                <tr
-                  key={menu.key}
-                  className="align-baseline text-gray-900 dark:text-gray-100"
-                >
-                  <td className="w-1/5 text-nowrap text-right">
-                    <span className="mr-2 text-sm">{menu.ctgry}</span>
-                  </td>
-                  <td className="w-4/5 text-left">
-                    <Link prefetch className="text-xl" href={menu.href}>
-                      {menu.title}
-                    </Link>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </DefaultLayout>
-    </>
+    <DefaultLayout>
+      <h2 className="text-gray-900 dark:text-gray-100">Tech Record</h2>
+      <table>
+        <tbody>
+          {menus.map((menu) => {
+            return (
+              <tr
+                key={menu.key}
+                className="align-baseline text-gray-900 dark:text-gray-100"
+              >
+                <td className="w-1/5 text-nowrap text-right">
+                  <span className="mr-2 text-sm">{menu.ctgry}</span>
+                </td>
+                <td className="w-4/5 text-left">
+                  <Link prefetch className="text-xl" href={menu.href}>
+                    {menu.title}
+                  </Link>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </DefaultLayout>
   );
 }

src/components/cannon/Beetle/Vehicle.tsx

@@ -8,7 +8,7 @@ import { useFrame } from '@react-three/fiber';
 import { type Ref, useRef } from 'react';
 import type { Group, Object3D } from 'three';
 
-import { useControls } from '@/utils/use-controls';
+import { useControls } from '@/utils/useControls';
 
 import { Chassis } from './Chassis';
 import { Wheel } from './Wheel';

src/libs/AsyncReducers.ts

@@ -36,7 +36,7 @@ export default class AsyncReducers {
    * })
    * ```
    */
-  static create = <State extends AsyncState>(
+  static create = <D = any, State = AsyncState<D[]>>(
     builder: ActionReducerMapBuilder<State>,
   ) => {
     return (

src/libs/features/catFacts/catFactsSlice.ts

@@ -22,4 +22,4 @@ const catFactsSlice = createSlice({
   extraReducers: (builder) => AsyncReducers.create(builder)(getCatFacts),
 });
 
-export default catFactsSlice.reducer;
+export const catFactsReducer = catFactsSlice.reducer;

src/libs/features/counter/counterSlice.ts

@@ -1,7 +1,10 @@
 import { createSlice } from '@reduxjs/toolkit';
 
-const initialState = {
-  value: 0,
+import type { AsyncState } from '@/libs/types';
+
+const initialState: AsyncState<any> = {
+  data: 0,
+  status: 'fulfilled',
 };
 
 const counterSlice = createSlice({
@@ -10,14 +13,14 @@ const counterSlice = createSlice({
   reducers: {
     increment: (state) => {
       // eslint-disable-next-line no-param-reassign
-      state.value += 1;
+      state.data += 1;
     },
     decrement: (state) => {
       // eslint-disable-next-line no-param-reassign
-      state.value -= 1;
+      state.data -= 1;
     },
   },
 });
 
 export const { increment, decrement } = counterSlice.actions;
-export default counterSlice.reducer;
+export const counterReducer = counterSlice.reducer;

src/libs/features/index.ts

@@ -0,0 +1,2 @@
+export * from './catFacts/catFactsSlice';
+export * from './counter/counterSlice';

src/libs/store.ts

@@ -1,7 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
 
-import catFactsReducer from '@/libs/features/catFacts/catFactsSlice';
-import counterReducer from '@/libs/features/counter/counterSlice';
+import { catFactsReducer, counterReducer } from '@/libs/features';
 
 export const makeStore = () => {
   return configureStore({

src/libs/types.d.ts

@@ -1,4 +1,4 @@
-export type AsyncState = {
-  data: any;
+export type AsyncState<D> = {
+  data: D;
   status: 'fulfilled' | 'pending' | 'rejected';
 };

src/types/user.ts

@@ -1,8 +1,8 @@
-export type TOGGLE_LOGIN = 'TOGGLE_LOGIN';
-export type SET_NAME = 'SET_NAME';
-export type SET_ID = 'SET_ID';
-export type SET_INFO = 'SET_INFO';
-export type SET_AUTH = 'SET_AUTH';
+export type ToggleLogin = 'TOGGLE_LOGIN';
+export type SetName = 'SET_NAME';
+export type SetId = 'SET_ID';
+export type SetInfo = 'SET_INFO';
+export type SetAuth = 'SET_AUTH';
 
 export type UserState = {
   isLoggedIn: boolean;
@@ -13,8 +13,8 @@ export type UserState = {
 };
 
 export type UserAction =
-  | { type: TOGGLE_LOGIN; isLoggedIn: boolean }
-  | { type: SET_NAME; userName: string }
-  | { type: SET_ID; userId: string }
-  | { type: SET_INFO; userInfo: string }
-  | { type: SET_AUTH; authorization: string };
+  | { type: ToggleLogin; isLoggedIn: boolean }
+  | { type: SetName; userName: string }
+  | { type: SetId; userId: string }
+  | { type: SetInfo; userInfo: string }
+  | { type: SetAuth; authorization: string };