refactor: js -> ts로 마이그레이션 3

package.json

@@ -60,6 +60,9 @@
     "@types/facepaint": "1.2.5",
     "@types/jest": "^26.0.20",
     "@types/lodash": "4.14.202",
+    "@types/react-dom": "18.2.18",
+    "@types/react-responsive": "8.0.8",
+    "@types/react-toggle": "4.0.5",
     "@typescript-eslint/eslint-plugin": "5.51.0",
     "@typescript-eslint/parser": "5.51.0",
     "babel-jest": "^26.6.3",

src/components/todo/EditShowTool.jsx → src/components/todo/EditShowTool.tsx

@@ -7,13 +7,13 @@ import ReactTooltip from 'react-tooltip';
 
 import PencilSvg from '../../assets/icons/pencil.svg';
 
-const PencilIcon = styled(PencilSvg)`
+const PencilIcon = styled(PencilSvg)<{ isMobile?: boolean; }>`
   width: 20px;
   height: 20px;
   margin-right: 5px;
   margin-bottom: 3px;
 
-  ${({ ismobile }) => ismobile && css`
+  ${({ isMobile }) => isMobile && css`
     top: 0;
     right: 45px;
     position: absolute;
@@ -46,14 +46,20 @@ const EditTooltipWrapper = styled.div`
   align-items: center;
 `;
 
-function EditShowTool({ isMobile, onShowEdit, id }) {
+type Props = {
+  isMobile: boolean;
+  onShowEdit: () => void;
+  id: string;
+};
+
+function EditShowTool({ isMobile, onShowEdit, id }: Props) {
   if (isMobile) {
     return (
       <div>
         <PencilIcon
           data-testid="todo-edit-icon"
           onClick={onShowEdit}
-          ismobile={isMobile && 1}
+          isMobile={isMobile && !!1}
         />
       </div>
     );

src/components/todo/TodoItem.jsx → src/components/todo/TodoItem.tsx

@@ -1,9 +1,12 @@
-import React, { useState, createRef, useEffect } from 'react';
+import React, {
+  useState, createRef, useEffect, FocusEvent, KeyboardEvent,
+} from 'react';
 
 import _ from 'lodash';
 
 import styled from '@emotion/styled';
 
+import { Todo } from 'src/recoil/todos/atom';
 import mq from '../../styles/responsive';
 import palette from '../../styles/palette';
 
@@ -43,24 +46,28 @@ const EditItemWrapper = styled.input`
   background: ${({ theme }) => theme.edit};
 `;
 
-function TodoItem({ item }) {
-  const { _id, task, isComplete } = item;
+type Props = {
+  item: Todo;
+};
+
+function TodoItem({ item }: Props) {
+  const { task, isComplete } = item;
 
   const onRemoveTodo = useRemoveCallback();
   const onUpdateTodo = useUpdateCallback();
 
-  const editInput = createRef();
+  const editInput = createRef<HTMLInputElement>();
   const [editToggleState, setEditToggleState] = useState(false);
 
-  const checkKeyPress = (key) => (key === 'Enter' || key === 'Escape');
+  const checkKeyPress = (key: string) => (key === 'Enter' || key === 'Escape');
 
-  const handleToggle = (id, toggle) => onUpdateTodo(id, {
+  const handleToggle = (id: string, toggle: boolean) => onUpdateTodo(id, {
     isComplete: !toggle,
   });
 
   const handleShowEdit = () => setEditToggleState(true);
 
-  const handleBlurEdit = (e, id) => {
+  const handleBlurEdit = (e: FocusEvent<HTMLInputElement>, id: string) => {
     const { value } = e.currentTarget;
 
     if (isCheckInputTrim(value)) {
@@ -71,7 +78,7 @@ function TodoItem({ item }) {
     onRemoveTodo(id);
   };
 
-  const handleSubmitEdit = (e, id) => {
+  const handleSubmitEdit = (e: KeyboardEvent<HTMLInputElement>, id: string) => {
     const { key, currentTarget: { value } } = e;
 
     if (checkKeyPress(key) && isCheckInputTrim(value)) {
@@ -96,8 +103,8 @@ function TodoItem({ item }) {
       <TodoItemView
         item={item}
         onShowEdit={handleShowEdit}
-        onRemove={() => onRemoveTodo(_id)}
-        onToggle={() => handleToggle(_id, isComplete)}
+        onRemove={() => onRemoveTodo(item._id)}
+        onToggle={() => handleToggle(item._id, isComplete)}
       />
     );
   }
@@ -109,8 +116,8 @@ function TodoItem({ item }) {
         ref={editInput}
         defaultValue={task}
         data-testid="todo-edit-input"
-        onBlur={(e) => handleBlurEdit(e, _id)}
-        onKeyPress={(e) => handleSubmitEdit(e, _id)}
+        onBlur={(e) => handleBlurEdit(e, item._id)}
+        onKeyPress={(e) => handleSubmitEdit(e, item._id)}
       />
     </EditWrapper>
   );

src/components/todo/TodoItemView.jsx → src/components/todo/TodoItemView.tsx

@@ -5,6 +5,7 @@ import { useMediaQuery } from 'react-responsive';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
+import { Todo } from 'src/recoil/todos/atom';
 import DeleteSvg from '../../assets/icons/delete.svg';
 
 import mq from '../../styles/responsive';
@@ -31,7 +32,7 @@ const TodoItemViewWrapper = styled.div`
   }
 `;
 
-const TodoItemTextWrapper = styled.div`
+const TodoItemTextWrapper = styled.div<{ isComplete: boolean; }>`
   ${mq({
     width: ['73%', '87%', '90%'],
     fontSize: ['1rem', '1.3rem'],
@@ -69,12 +70,19 @@ const DeleteIcon = styled(DeleteSvg)`
   cursor: pointer;
 `;
 
+type Props = {
+  item: Todo;
+  onShowEdit: () => void;
+  onRemove: () => void;
+  onToggle: () => void;
+};
+
 function TodoItemView({
   item, onShowEdit, onRemove, onToggle,
-}) {
+}: Props) {
   const isMobileScreen = useMediaQuery({ query: '(max-width: 450px)' });
 
-  const { task, isComplete, _id } = item;
+  const { task, isComplete } = item;
 
   return (
     <TodoItemViewWrapper>
@@ -87,14 +95,14 @@ function TodoItemView({
       <TodoItemTextWrapper
         isComplete={isComplete}
         data-tip
-        data-for={_id}
+        data-for={item._id}
         data-testid="todo-text"
         onDoubleClick={isMobileScreen ? undefined : onShowEdit}
       >
         {task}
       </TodoItemTextWrapper>
       <EditShowTool
-        id={_id}
+        id={item._id}
         isMobile={isMobileScreen}
         onShowEdit={onShowEdit}
       />

src/components/user-info/AuthButton.jsx → src/components/user-info/AuthButton.tsx

@@ -22,7 +22,12 @@ const Button = styled.button`
   }
 `;
 
-function AuthButton({ type, onClick }) {
+type Props = {
+  type: string;
+  onClick: () => void;
+};
+
+function AuthButton({ type, onClick }: Props) {
   return (
     <Button
       type="button"

src/components/user-info/LoggedInUserInfo.jsx → src/components/user-info/LoggedInUserInfo.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import styled from '@emotion/styled';
 
+import { User } from 'src/recoil/user/atom';
 import mq from '../../styles/responsive';
 
 import { FORM_TYPE } from '../../utils/constants/constants';
@@ -43,7 +44,12 @@ const UserIcon = styled(UserSvg)`
   margin-right: 0.5rem;
 `;
 
-function LoggedInUserInfo({ user, onLogout }) {
+type Props = {
+  user: User;
+  onLogout: () => void;
+};
+
+function LoggedInUserInfo({ user, onLogout }: Props) {
   return (
     <LoggedInUserInfoWrapper>
       <UserProfile>

src/components/user-info/UserStatus.jsx → src/components/user-info/UserStatus.tsx

@@ -39,13 +39,13 @@ function UserStatus() {
 
   const { enqueueSnackbar } = useSnackbar();
 
-  const onClickOpenModal = (formType) => setAuthStatus({
+  const onClickOpenModal = (formType: 'login' | 'register') => setAuthStatus({
     type: formType,
     visible: true,
   });
 
   const onLogout = () => {
-    setLogout();
+    setLogout(undefined);
     enqueueSnackbar('Successful Sign out!', {
       variant: 'success',
     });

src/recoil/todos/withFilter.js → src/recoil/todos/withFilter.ts

@@ -1,6 +1,6 @@
 import { selector } from 'recoil';
 
-import todosResultAtom, { filterAtom } from './atom';
+import todosResultAtom, { Todo, filterAtom } from './atom';
 
 import { filteredTodos } from '../../utils/utils';
 
@@ -10,7 +10,7 @@ const todosWithFilter = selector({
     const filter = get(filterAtom);
     const { todos } = get(todosResultAtom);
 
-    return filteredTodos[filter](todos);
+    return filteredTodos[filter](todos) as Todo[];
   },
 });
 

src/recoil/user/atom.js → src/recoil/user/atom.ts

@@ -2,7 +2,17 @@ import { atom } from 'recoil';
 
 import { USER_ATOM_KEY } from '../../utils/constants/atomKey';
 
-const userAtom = atom({
+export type User = {
+  id: string;
+  password: string;
+};
+
+type UserAtom = {
+  user: User | null;
+  checkError: any;
+};
+
+const userAtom = atom<UserAtom>({
   key: USER_ATOM_KEY,
   default: {
     user: null,

src/styles/AppBlock.jsx → src/styles/AppBlock.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import styled from '@emotion/styled';
 
@@ -18,7 +18,7 @@ const AppWrapper = styled.div`
   flex-direction: column;
 `;
 
-function AppBlock({ children, ...rest }) {
+function AppBlock({ children, ...rest }: PropsWithChildren) {
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <AppWrapper {...rest}>

src/styles/Checkbox.jsx → src/styles/Checkbox.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 
@@ -9,13 +10,13 @@ import mq from './responsive';
 import CheckedIcon from '../assets/icons/checked.svg';
 import UnCheckedIcon from '../assets/icons/un-checked.svg';
 
-const CheckboxWrapper = ({ click }) => css`
+const CheckboxWrapper = ({ click }: { click?: boolean; }) => css`
   ${mq({
     width: ['20px', '25px'],
     height: ['20px', '25px'],
   })};
 
-  ${click && css`
+  ${!!click && css`
     cursor: pointer;
   `}
 `;
@@ -28,15 +29,21 @@ const UnCheckedIconWrapper = styled(UnCheckedIcon)`
   ${CheckboxWrapper}
 `;
 
-function Checkbox(props) {
-  const { checked, click } = props;
+type Props = {
+  checked?: boolean;
+  click?: boolean;
+  onClick?: () => void;
+};
 
+function Checkbox({
+  checked, click, onClick, ...rest
+}: Props) {
   if (checked) {
-    return <CheckedIConWrapper {...props} click={click && 1} />;
+    return <CheckedIConWrapper {...rest} onClick={onClick} click={click && !!1} />;
   }
 
   return (
-    <UnCheckedIconWrapper {...props} click={click && 1} />
+    <UnCheckedIconWrapper {...rest} onClick={onClick} click={click && !!1} />
   );
 }
 

src/styles/EmptyMessage.jsx → src/styles/EmptyMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import styled from '@emotion/styled';
 
@@ -15,7 +15,7 @@ const EmptyMessageWrapper = styled.div`
   color: ${({ theme }) => theme.emptyText};
 `;
 
-function EmptyMessage({ children }) {
+function EmptyMessage({ children }: PropsWithChildren) {
   return (
     <EmptyMessageWrapper>
       {children}

src/styles/GlobalStyles.jsx → src/styles/GlobalStyles.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 
 import emotionReset from 'emotion-reset';
 
-import { Global, useTheme, css } from '@emotion/react';
+import {
+  Global, useTheme, css, Theme,
+} from '@emotion/react';
 
-const setGlobalStyles = (theme) => css`
+const setGlobalStyles = (theme: Theme) => css`
   ${emotionReset}
 
   * {

src/styles/SvgIcon.jsx → src/styles/SvgIcon.tsx

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
+import { Theme, css } from '@emotion/react';
 
 import BlogSvg from '../assets/icons/blog.svg';
 import GithubSvg from '../assets/icons/github.svg';
 import FacebookSvg from '../assets/icons/facebook.svg';
 
 import mq from './responsive';
 
-const SvgIconWrapper = ({ theme }) => css`
+const SvgIconWrapper = ({ theme }: { theme: Theme }) => css`
   ${mq({
     width: ['18px', '20px'],
     height: ['18px', '20px'],

src/styles/ThemeToggle.jsx → src/styles/ThemeToggle.tsx

@@ -79,7 +79,12 @@ const ToggleWrapper = styled(Toggle)`
   }
 `;
 
-function ThemeToggle({ onChange, theme }) {
+type Props = {
+  onChange: () => void;
+  theme: boolean;
+};
+
+function ThemeToggle({ onChange, theme }: Props) {
   return (
     <ToggleWrapper
       defaultChecked={theme}