Refactor: 타입스크립트 마이그레이션-2 #8

my-diary/.eslintrc

@@ -0,0 +1,16 @@
+{
+    "extends": [
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "overrides": [
+        {
+        "files": ["*.js", "*.jsx"],
+        "rules": {
+            "@typescript-eslint/explicit-function-return-type": "off"
+        }
+        }
+    ]
+}

my-diary/package.json

@@ -8,7 +8,6 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^29.4.0",
-    "@types/node": "^18.14.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "firebase": "^9.14.0",
@@ -52,6 +51,9 @@
     ]
   },
   "devDependencies": {
-    "@types/styled-components": "^5.1.26"
+    "@types/node": "^18.14.0",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/parser": "^5.53.0",
+    "babel-eslint": "^10.1.0"
   }
 }

my-diary/src/App.tsx

@@ -9,7 +9,7 @@ import Router from './routes/Router';
 function App() {
 
   const { isAuthReady, user } = useAuthContext();
-  console.log(isAuthReady)
+  // console.log(isAuthReady) => true/false
 
   return (
     <div className="App">

my-diary/src/components/DesktopIcon/DesktopIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import DesktopIconView from './DesktopIconView';
+
+interface Props {
+    func: () => void;
+    src: string;
+    txt: string;
+}
+
+export interface PropsType extends Props{
+    handleDbClick: (func: () => void, e: React.MouseEvent<Element, MouseEvent>) => void;
+}
+
+export default function DesktopIcon({func, src, txt} : Props) {
+    const handleDbClick = (func: () => void, e: React.MouseEvent<Element, MouseEvent>) => {
+        // 더블클릭 했다면
+        if (e.detail === 2) func();
+    };
+
+    const props: PropsType= {
+        func,
+        src,
+        txt,
+        handleDbClick
+    }
+
+    return (
+        <DesktopIconView {...props}/>
+    )
+}

my-diary/src/components/DesktopIcon/DesktopIconView.jsx → my-diary/src/components/DesktopIcon/DesktopIconView.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import DragCont from '../DragContainer/DragCont'
 import * as S from "./desktopIcon.style"
+import { PropsType } from './DesktopIcon'
 
-    export default function DesktopIconView({ func, src, txt, handleDbClick }) {
+    export default function DesktopIconView({ func, src, txt, handleDbClick } : PropsType) {
     return (
         <DragCont>
             {/* 실행할 함수 func까지 전달 받았다면 실행할 부분 */}

my-diary/src/components/DiaryList/DiaryList.jsx → my-diary/src/components/DiaryList/DiaryList.tsx

@@ -1,8 +1,17 @@
+import React from 'react';
 import { useFirestore } from '../../hooks/useFirestore'
 import { useState } from 'react';
 import DiaryListView from './DiaryListView';
+import { DiaryType } from '../../types/diary.type';
 
-export default function DiaryList({ diaries }) {
+export interface PropsType {
+    deleteDocument: (id: string) => void; 
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    diaries: DiaryType[];
+}
+
+export default function DiaryList({ diaries } : { diaries: DiaryType[] }) {
     const { deleteDocument } = useFirestore("myDiary");
     const [isOpen, setIsOpen] = useState(false);
 

my-diary/src/components/DiaryList/DiaryListView.jsx → my-diary/src/components/DiaryList/DiaryListView.tsx

@@ -2,12 +2,13 @@ import React from 'react'
 import DragCont from '../DragContainer/DragCont';
 import Modal from '../Modal/Modal';
 import * as S from "./diaryList.style";
+import { PropsType } from './DiaryList';
 
 export default function DiaryListView({
     deleteDocument,
     isOpen,
     setIsOpen,
-    diaries }) {
+    diaries }: PropsType) {
     return (
         <>
             {/* jsx를 바로 반영하기 위해 map을 사용하겠습니다. map은 새로운 배열을 반환하는 순환문입니다.