refactor: add typescript definition and fix some type error

src/common/component/ImagePreviewModal.tsx

@@ -1,16 +1,16 @@
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, FC } from "react";
 import styled, { keyframes } from "styled-components";
 import { useOutsideClick, useKey } from "rooks";
 import { Ring } from "@uiball/loaders";
 import Modal from "./Modal";
 
 const AniFadeIn = keyframes`
-from{
-background: transparent;
-}
-to{
-  background: rgba(1, 1, 1, 0.9);
-}
+  from {
+    background: transparent;
+  }
+  to {
+    background: rgba(1, 1, 1, 0.9);
+  }
 `;
 
 const StyledWrapper = styled.div`
@@ -23,6 +23,7 @@ const StyledWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+
   .box {
     position: relative;
     transition: all 0.2s ease;
@@ -30,14 +31,17 @@ const StyledWrapper = styled.div`
     flex-direction: column;
     justify-content: flex-start;
     gap: 10px;
+
     > .loading {
       position: absolute;
       top: 40%;
       left: 50%;
       transform: translateX(-50%);
     }
+
     > .image {
       overflow: auto;
+
       img {
         max-width: 70vw;
         max-height: 80vh;
@@ -46,13 +50,16 @@ const StyledWrapper = styled.div`
         object-fit: contain; */
       }
     }
+
     &.loading .image img {
       filter: blur(2px);
     }
+
     .origin {
       font-weight: bold;
       font-size: 14px;
       color: #aaa;
+
       &:hover {
         text-decoration: underline;
         color: #fff;
@@ -61,11 +68,26 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export default function ImagePreviewModal({ download = true, data, closeModal }) {
+export interface PreviewImageData {
+  originUrl: string;
+  thumbnail: string;
+  downloadLink: string;
+  name: string;
+  type: string;
+}
+
+interface Props {
+  download?: boolean;
+  data?: PreviewImageData;
+  closeModal: () => void;
+}
+
+const ImagePreviewModal: FC<Props> = ({ download = true, data, closeModal }) => {
   const [url, setUrl] = useState(data?.thumbnail);
   const [loading, setLoading] = useState(true);
-  const wrapperRef = useRef();
+  const wrapperRef = useRef<HTMLDivElement>(null);
   useOutsideClick(wrapperRef, closeModal);
+
   useKey(
     "Escape",
     () => {
@@ -74,6 +96,7 @@ export default function ImagePreviewModal({ download = true, data, closeModal })
     },
     { eventTypes: ["keyup"] }
   );
+
   useEffect(() => {
     if (data) {
       const { originUrl } = data;
@@ -126,4 +149,6 @@ export default function ImagePreviewModal({ download = true, data, closeModal })
       </StyledWrapper>
     </Modal>
   );
-}
+};
+
+export default ImagePreviewModal;