deps: upgrade @types/react & @types/react-dom

frontend/.eslintrc.json

@@ -35,6 +35,7 @@
     "no-case-declarations": "off",
     "no-plusplus": "off",
     "react/prop-types": 0,
+    "react/no-unused-prop-types": "off",
     "no-continue": "off",
     "react/jsx-props-no-spreading": "off",
     "no-param-reassign": "off",

frontend/package.json

@@ -13,10 +13,10 @@
     "@types/jest": "^26.0.23",
     "@types/lodash": "^4.14.168",
     "@types/node": "^15.0.1",
-    "@types/react": "^17.0.4",
+    "@types/react": "^17.0.20",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-datepicker": "^3.1.8",
-    "@types/react-dom": "^17.0.3",
+    "@types/react-dom": "^17.0.9",
     "@types/react-router": "^5.1.13",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-select": "^4.0.15",

frontend/src/shared/components/ProfileIcon/index.tsx

@@ -2,15 +2,15 @@ import React, { useRef } from 'react';
 import styled from 'styled-components';
 
 export const Container = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`
-  width: ${props => props.size}px;
+  width: ${(props) => props.size}px;
-  height: ${props => props.size}px;
+  height: ${(props) => props.size}px;
   border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 700;
-  background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
+  background: ${(props) => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
   background-position: center;
   background-size: contain;
 `;
@@ -22,6 +22,10 @@ type ProfileIconProps = {
 };
 
 const ProfileIcon: React.FC<ProfileIconProps> = ({ user, onProfileClick, size }) => {
+  let realSize = size;
+  if (size === null) {
+    realSize = 28;
+  }
   const $profileRef = useRef<HTMLDivElement>(null);
   return (
     <Container
@@ -29,7 +33,7 @@ const ProfileIcon: React.FC<ProfileIconProps> = ({ user, onProfileClick, size })
       onClick={() => {
         onProfileClick($profileRef, user);
       }}
-      size={size}
+      size={realSize}
       backgroundURL={user.profileIcon.url ?? null}
       bgColor={user.profileIcon.bgColor ?? null}
     >
@@ -38,8 +42,4 @@ const ProfileIcon: React.FC<ProfileIconProps> = ({ user, onProfileClick, size })
   );
 };
 
-ProfileIcon.defaultProps = {
-  size: 28,
-};
-
 export default ProfileIcon;