Skeleton directory 내 typescript 전환

src/components/Skeleton/AlertProvider.jsx → src/components/Skeleton/AlertProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, ReactNode } from "react";
 import Modal from "components/common/modal/Modal";
 import { useRecoilState } from "recoil";
 import alertAtom from "recoil/alert";
@@ -9,7 +9,7 @@ import DottedLine from "components/common/DottedLine";
 import WbIncandescentRoundedIcon from "@material-ui/icons/WbIncandescentRounded";
 
 const AlertProvider = () => {
-  const messageCache = useRef("");
+  const messageCache = useRef<ReactNode>("");
   const [message, setMessage] = useRecoilState(alertAtom);
 
   const onClickClose = () => setMessage(null);
@@ -51,7 +51,7 @@ const AlertProvider = () => {
       <Button
         type="purple_inset"
         padding="9px 10px"
-        radius="8px"
+        radius={8}
         font={theme.font14_bold}
         onClick={onClickClose}
       >

src/components/Skeleton/Footer.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Footer = () => (
+  <div style={{ height: "calc(88px + env(safe-area-inset-bottom))" }} />
+);
+
+export default Footer;

src/components/Skeleton/Skeleton.jsx → src/components/Skeleton/Skeleton.tsx

@@ -1,25 +1,38 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  ReactNode,
+} from "react";
 import { useLocation, Redirect } from "react-router-dom";
 // import { useCookies } from "react-cookie";
 import reactGA from "react-ga4";
-import PropTypes from "prop-types";
 import axios from "tools/axios";
 import { gaTrackingId, nodeEnv } from "serverconf";
 
 import { useRecoilState, useSetRecoilState } from "recoil";
 import taxiLocationAtom from "recoil/taxiLocation";
 import loginInfoDetailAtom from "recoil/loginInfoDetail";
 import myRoomAtom from "recoil/myRoom";
-import alertAtom from "recoil/alert";
+// import alertAtom from "recoil/alert";
 
 import HeaderBar from "components/common/HeaderBar";
 import Navigation from "components/Skeleton/Navigation";
 import Footer from "components/Skeleton/Footer";
 import PopupPolicy from "components/Mypage/PopupPolicy";
 import useWindowInnerHeight from "hooks/useWindowInnerHeight";
-import betaNotice from "static/betaNotice";
+// import betaNotice from "static/betaNotice";
 
-const Container = (props) => {
+type ContainerProps = {
+  children: ReactNode;
+};
+
+type SkeletonProps = {
+  children: ReactNode;
+};
+
+const Container = (props: ContainerProps) => {
   return (
     <div
       id="skeleton-container" // For useDisableScroll
@@ -35,18 +48,15 @@ const Container = (props) => {
     </div>
   );
 };
-Container.propTypes = {
-  children: PropTypes.node,
-};
 
-const Skeleton = (props) => {
+const Skeleton = (props: SkeletonProps) => {
   const [userId, setUserId] = useState(undefined);
   const [showAgree, setShowAgree] = useState(false);
   const [taxiLocation, setTaxiLocation] = useRecoilState(taxiLocationAtom);
   const [loginInfoDetail, setLoginInfoDetail] =
     useRecoilState(loginInfoDetailAtom);
   const setMyRoom = useSetRecoilState(myRoomAtom);
-  const setAlert = useSetRecoilState(alertAtom);
+  // const setAlert = useSetRecoilState(alertAtom);
   const location = useLocation();
   const pathname = location.pathname;
   const currentPath = location.pathname + location.search;
@@ -164,8 +174,4 @@ const Skeleton = (props) => {
   );
 };
 
-Skeleton.propTypes = {
-  children: PropTypes.node,
-};
-
 export default Skeleton;