refactor: prop types를 타입스크립트로 이전 (#388)

src/LimitedRoute.jsx → src/LimitedRoute.tsx

@@ -1,8 +1,17 @@
 import { Navigate, Outlet } from "react-router-dom";
-import PropTypes from "prop-types";
 import NotFound from "./component/utils/NotFound";
 
-const LimitedRoute = ({ isLoginOnly, isAdminOnly, isLogoutOnly }) => {
+type LimitedRouteProps = {
+  isLoginOnly?: boolean;
+  isAdminOnly?: boolean;
+  isLogoutOnly?: boolean;
+};
+
+const LimitedRoute = ({
+  isLoginOnly,
+  isAdminOnly,
+  isLogoutOnly,
+}: LimitedRouteProps) => {
   // 로그인 정보를 확인
   // recoil 전역상태는 새로고침시 초기화되기 때문에 로컬스토리지 참고
   const user = JSON.parse(window.localStorage.getItem("user"));
@@ -21,12 +30,6 @@ const LimitedRoute = ({ isLoginOnly, isAdminOnly, isLogoutOnly }) => {
 
 export default LimitedRoute;
 
-LimitedRoute.propTypes = {
-  isLoginOnly: PropTypes.bool,
-  isAdminOnly: PropTypes.bool,
-  isLogoutOnly: PropTypes.bool,
-};
-
 LimitedRoute.defaultProps = {
   isLoginOnly: false,
   isAdminOnly: false,

src/component/addbook/AddBookDisplayBasicBookInfo.jsx → src/component/addbook/AddBookDisplayBasicBookInfo.tsx

@@ -1,13 +1,27 @@
 import { useState } from "react";
-import PropTypes from "prop-types";
 
 const labelText = {
   author: "저 자",
   publisher: "출판사",
   pubdate: "출판일",
 };
 
-const DisplayBasicBookInfo = ({ bookInfo, setBookInfo }) => {
+type DisplayBasicBookInfoProps = {
+  bookInfo: {
+    isbn: string;
+    title: string;
+    author: string;
+    publisher: string;
+    image: string;
+    pubdate: string;
+  };
+  setBookInfo(...args: unknown[]): unknown;
+};
+
+const DisplayBasicBookInfo = ({
+  bookInfo,
+  setBookInfo,
+}: DisplayBasicBookInfoProps) => {
   const [message, setMessage] = useState("");
 
   const onChangeInput = e => {
@@ -61,15 +75,3 @@ const DisplayBasicBookInfo = ({ bookInfo, setBookInfo }) => {
 };
 
 export default DisplayBasicBookInfo;
-
-DisplayBasicBookInfo.propTypes = {
-  bookInfo: PropTypes.shape({
-    isbn: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    author: PropTypes.string.isRequired,
-    publisher: PropTypes.string.isRequired,
-    image: PropTypes.string.isRequired,
-    pubdate: PropTypes.string.isRequired,
-  }).isRequired,
-  setBookInfo: PropTypes.func.isRequired,
-};

src/component/addbook/AddBookRegisterBookWithUsersExtraInput.jsx → src/component/addbook/AddBookRegisterBookWithUsersExtraInput.tsx

@@ -1,9 +1,22 @@
 import { useRef, useState, useEffect } from "react";
-import PropTypes from "prop-types";
 import { category, koreanDemicalClassification } from "../../data/category";
 import usePostBooksCreate from "../../api/books/usePostBooksCreate";
 
-const RegisterBookWithUsersExtraInput = ({ bookInfo }) => {
+type RegisterBookWithUsersExtraInputProps = {
+  bookInfo: {
+    title: string;
+    isbn: string;
+    author: string;
+    publisher: string;
+    image: string;
+    pubdate: string;
+    koreanDemicalClassification: string;
+  };
+};
+
+const RegisterBookWithUsersExtraInput = ({
+  bookInfo,
+}: RegisterBookWithUsersExtraInputProps) => {
   const [isDevBook, setIsDevBook] = useState("");
   const [categoryId, setCategoryId] = useState("");
   const donator = useRef(null);
@@ -89,15 +102,3 @@ const RegisterBookWithUsersExtraInput = ({ bookInfo }) => {
 };
 
 export default RegisterBookWithUsersExtraInput;
-
-RegisterBookWithUsersExtraInput.propTypes = {
-  bookInfo: PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    isbn: PropTypes.string.isRequired,
-    author: PropTypes.string.isRequired,
-    publisher: PropTypes.string.isRequired,
-    image: PropTypes.string.isRequired,
-    pubdate: PropTypes.string.isRequired,
-    koreanDemicalClassification: PropTypes.string.isRequired,
-  }).isRequired,
-};

src/component/book/BookStatus.jsx → src/component/book/BookStatus.tsx

@@ -1,7 +1,19 @@
-import PropTypes from "prop-types";
 import "../../css/BookStatus.css";
 
-const BookStatus = ({ book, index }) => {
+type BookStatusProps = {
+  book: {
+    id?: number;
+    callSign?: string;
+    donator?: string;
+    dueDate?: string;
+    isLendable?: boolean;
+    isReserved?: boolean;
+    status?: number;
+  };
+  index: number;
+};
+
+const BookStatus = ({ book, index }: BookStatusProps) => {
   const doubleDigit = number => {
     return number < 10 ? `0${number}` : `${number}`;
   };
@@ -39,16 +51,3 @@ const BookStatus = ({ book, index }) => {
 };
 
 export default BookStatus;
-
-BookStatus.propTypes = {
-  book: PropTypes.shape({
-    id: PropTypes.number,
-    callSign: PropTypes.string,
-    donator: PropTypes.string,
-    dueDate: PropTypes.string,
-    isLendable: PropTypes.bool,
-    isReserved: PropTypes.bool,
-    status: PropTypes.number,
-  }).isRequired,
-  index: PropTypes.number.isRequired,
-};

src/component/book/like/Like.jsx → src/component/book/like/Like.tsx

@@ -1,13 +1,16 @@
 import { useState } from "react";
-import PropTypes from "prop-types";
 import usePostLike from "../../../api/like/usePostLike";
 import useDeleteLike from "../../../api/like/useDeleteLike";
 import useGetLike from "../../../api/like/useGetLike";
 import useDialog from "../../../hook/useDialog";
 import ShowLike from "./ShowLike";
 import "../../../css/BookDetail.css";
 
-const Like = ({ initBookInfoId }) => {
+type LikeProps = {
+  initBookInfoId: string;
+};
+
+const Like = ({ initBookInfoId }: LikeProps) => {
   const { setOpenTitleAndMessage } = useDialog();
   const [currentLike, setCurrentLike] = useState();
   const [currentLikeNum, setCurrentLikeNum] = useState(0);
@@ -48,7 +51,3 @@ const Like = ({ initBookInfoId }) => {
 };
 
 export default Like;
-
-Like.propTypes = {
-  initBookInfoId: PropTypes.string.isRequired,
-};

src/component/book/like/ShowLike.jsx → src/component/book/like/ShowLike.tsx

@@ -1,10 +1,21 @@
-import PropTypes from "prop-types";
 import Image from "../../utils/Image";
 import FilledLike from "../../../img/like_filled.svg";
 import EmptyLike from "../../../img/like_empty.svg";
 import "../../../css/BookDetail.css";
 
-const ShowLike = ({ deleteLike, postLike, currentLike, currentLikeNum }) => {
+type ShowLikeProps = {
+  deleteLike(...args: unknown[]): unknown;
+  postLike(...args: unknown[]): unknown;
+  currentLike: boolean;
+  currentLikeNum: number;
+};
+
+const ShowLike = ({
+  deleteLike,
+  postLike,
+  currentLike,
+  currentLikeNum,
+}: ShowLikeProps) => {
   const permission = JSON.parse(window.localStorage.getItem("user"));
   const clickLikeHandler = () => {
     if (currentLike) {
@@ -37,10 +48,3 @@ const ShowLike = ({ deleteLike, postLike, currentLike, currentLikeNum }) => {
 };
 
 export default ShowLike;
-
-ShowLike.propTypes = {
-  deleteLike: PropTypes.func.isRequired,
-  postLike: PropTypes.func.isRequired,
-  currentLike: PropTypes.bool.isRequired,
-  currentLikeNum: PropTypes.number.isRequired,
-};

src/component/book/review/HandleReview.jsx → src/component/book/review/HandleReview.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import PropTypes from "prop-types";
 import axiosPromise from "../../../util/axios";
 import { splitDate } from "../../../util/date";
 import Image from "../../utils/Image";
@@ -8,14 +7,35 @@ import DeleteButton from "../../../img/x_button.svg";
 import useDialog from "../../../hook/useDialog";
 import "../../../css/Review.css";
 
+type HandleReviewProps = {
+  data?: {
+    bookInfoId?: number;
+    content?: string;
+    reviewsId?: number;
+    title?: string;
+  };
+  nickname?: string;
+  createdAt: string;
+  checkLogin?: {
+    email?: string;
+    expire?: string;
+    id?: number;
+    isAdmin?: boolean;
+    isLogin?: boolean;
+    userName?: string;
+  };
+  type: string;
+  onClickDel(...args: unknown[]): unknown;
+};
+
 const HandleReview = ({
   data,
   nickname,
   createdAt,
   checkLogin,
   type,
   onClickDel,
-}) => {
+}: HandleReviewProps) => {
   const {
     Dialog,
     config,
@@ -173,27 +193,6 @@ const HandleReview = ({
 
 export default HandleReview;
 
-HandleReview.propTypes = {
-  data: PropTypes.shape({
-    bookInfoId: PropTypes.number,
-    content: PropTypes.string,
-    reviewsId: PropTypes.number,
-    title: PropTypes.string,
-  }),
-  nickname: PropTypes.string,
-  createdAt: PropTypes.string.isRequired,
-  checkLogin: PropTypes.shape({
-    email: PropTypes.string,
-    expire: PropTypes.string,
-    id: PropTypes.number,
-    isAdmin: PropTypes.bool,
-    isLogin: PropTypes.bool,
-    userName: PropTypes.string,
-  }),
-  type: PropTypes.string.isRequired,
-  onClickDel: PropTypes.func.isRequired,
-};
-
 HandleReview.defaultProps = {
   data: {
     bookInfoId: null,

src/component/book/review/PostReview.jsx → src/component/book/review/PostReview.tsx

@@ -1,8 +1,17 @@
 import { useState } from "react";
-import PropTypes from "prop-types";
 import "../../../css/Review.css";
 import Button from "../../utils/Button";
 
+type PostReviewProps = {
+  onClickPost(...args: unknown[]): unknown;
+  setDialogConfig(...args: unknown[]): unknown;
+  Dialog: React.ReactElement;
+  openDialog(...args: unknown[]): unknown;
+  closeDialog(...args: unknown[]): unknown;
+  config: Record<string, unknown>;
+  setOpenTitleAndMessage(...args: unknown[]): unknown;
+};
+
 const PostReview = ({
   onClickPost,
   Dialog,
@@ -11,7 +20,7 @@ const PostReview = ({
   closeDialog,
   setDialogConfig,
   setOpenTitleAndMessage,
-}) => {
+}: PostReviewProps) => {
   const [content, setContent] = useState(null);
   const checkLogin = JSON.parse(window.localStorage.getItem("user"));
   const checkValidUser = () => {
@@ -90,13 +99,3 @@ const PostReview = ({
 };
 
 export default PostReview;
-
-PostReview.propTypes = {
-  onClickPost: PropTypes.func.isRequired,
-  setDialogConfig: PropTypes.func.isRequired,
-  Dialog: PropTypes.element.isRequired,
-  openDialog: PropTypes.func.isRequired,
-  closeDialog: PropTypes.func.isRequired,
-  config: PropTypes.objectOf.isRequired,
-  setOpenTitleAndMessage: PropTypes.func.isRequired,
-};

src/component/book/review/Review.jsx → src/component/book/review/Review.tsx

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import { reviewTabList } from "../../../data/tablist";
 import PostReview from "./PostReview";
 import ShowReviews from "./ShowReviews";
@@ -8,7 +7,11 @@ import useDialog from "../../../hook/useDialog";
 import "../../../css/Tabs.css";
 import "../../../css/Review.css";
 
-const Review = ({ bookInfoId }) => {
+type ReviewProps = {
+  bookInfoId: string;
+};
+
+const Review = ({ bookInfoId }: ReviewProps) => {
   const { currentTab, changeTab } = useTabFocus(0, reviewTabList);
   const {
     Dialog,
@@ -65,7 +68,3 @@ const Review = ({ bookInfoId }) => {
 };
 
 export default Review;
-
-Review.propTypes = {
-  bookInfoId: PropTypes.string.isRequired,
-};

src/component/book/review/ShowReviews.jsx → src/component/book/review/ShowReviews.tsx

@@ -1,11 +1,15 @@
 import { useCallback, useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
 import HandleReview from "./HandleReview";
 import axiosPromise from "../../../util/axios";
 import "../../../css/Tabs.css";
 import "../../../css/Review.css";
 
-const ShowReviews = ({ bookInfoId, type }) => {
+type ShowReviewsProps = {
+  bookInfoId: number;
+  type: string;
+};
+
+const ShowReviews = ({ bookInfoId, type }: ShowReviewsProps) => {
   const [postReviews, setPostReviews] = useState([]);
   const observeReviewList = useRef(null);
   const totalLeftPages = useRef();
@@ -70,8 +74,3 @@ const ShowReviews = ({ bookInfoId, type }) => {
 };
 
 export default ShowReviews;
-
-ShowReviews.propTypes = {
-  bookInfoId: PropTypes.number.isRequired,
-  type: PropTypes.string.isRequired,
-};