Merge pull request #1536 from woowacourse/advenced-develop

refactor: js ts 마이그레이션 main에 반영

.github/workflows/front-dev.yml

@@ -20,7 +20,7 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: '**/node_modules'
+          path: "**/node_modules"
           key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node-modules-
@@ -36,7 +36,6 @@ jobs:
           cd frontend
           yarn build:dev
         env:
-          TSC_COMPILE_ON_ERROR: true # fixme: 타입 검사를 건너뛰고 빌드를 우선 통과시킵니다. 반드시 지워주세요.
           CI: false
 
       - name: Deploy to S3

.github/workflows/front-prod.yml

@@ -36,7 +36,6 @@ jobs:
           cd frontend
           yarn build:prd
         env:
-          TSC_COMPILE_ON_ERROR: true # fixme: 타입 검사를 건너뛰고 빌드를 우선 통과시킵니다. 반드시 지워주세요.
           CI: false
 
       - name: Deploy to S3

frontend/src/components/Article/Article.tsx

@@ -1,8 +1,7 @@
 import * as Styled from './Article.style';
 import type { ArticleType } from '../../models/Article';
 
-const Article = ({ id, title, userName, url, createdAt, imageUrl }: ArticleType) => {
-  console.log(imageUrl);
+const Article = ({ title, userName, url, createdAt, imageUrl }: ArticleType) => {
   return (
     <Styled.Container>
       <Styled.Anchor href={url} target="_blank" rel="noopener noreferrer">

frontend/src/components/Button/PageButton.tsx

@@ -1,13 +1,15 @@
 import Button from './Button';
 import { css } from '@emotion/react';
 import COLOR from '../../constants/color';
+import { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
 
-interface PageButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-  children: number;
+interface PageButtonProps extends ComponentPropsWithoutRef<'button'> {
+  size: string;
+  css: ReturnType<typeof css>;
   selected?: boolean;
 }
 
-const PageButton = ({ children, ...props }: PageButtonProps) => {
+const PageButton = ({ children, ...props }: PropsWithChildren<PageButtonProps>) => {
   return (
     <Button {...props} css={props.selected ? selectedStyle : unselectedStyle}>
       {children}

frontend/src/components/CreatableSelectBox/CreatableSelectBox.js → frontend/src/components/CreatableSelectBox/CreatableSelectBox.tsx

@@ -1,6 +1,7 @@
 import CreatableSelect from 'react-select/creatable';
 
 import COLOR from '../../constants/color';
+import { Tag } from '../../models/Studylogs';
 
 const selectStyles = {
   container: (styles) => ({
@@ -34,7 +35,33 @@ const selectStyles = {
   menu: (styles) => ({ ...styles, fontSize: '1.4rem', fontColor: COLOR.DARK_GRAY_900 }),
 };
 
-const CreatableSelectBox = ({ isMulti = true, options, placeholder, onChange, ...props }) => (
+type Options = {
+  value: string,
+  label: string,
+}[];
+
+interface CreatableSelectBoxProps {
+  isMulti?: boolean;
+  placeholder: string;
+  options: Options;
+  onChange: (
+    tags: Tag[],
+    actionMeta: {
+      option: {
+        label: string,
+      },
+    }
+  ) => void;
+  value: Options;
+}
+
+const CreatableSelectBox = ({
+  isMulti = true,
+  options,
+  placeholder,
+  onChange,
+  ...props
+}: CreatableSelectBoxProps) => (
   <CreatableSelect
     {...props}
     isMulti={isMulti}

frontend/src/components/FilterList/FilterList.styles.js → frontend/src/components/FilterList/FilterList.styles.ts

@@ -18,7 +18,10 @@ const DropdownToggledStyle = css`
   }
 `;
 
-const Container = styled.div`
+const Container = styled.div<{
+  isDropdownToggled: string;
+  css: ReturnType<typeof css> | null;
+}>`
   background-color: ${COLOR.LIGHT_GRAY_50};
 
   border: 1px solid ${COLOR.DARK_GRAY_400};
@@ -145,7 +148,9 @@ const ResetFilter = styled.div`
   flex-shrink: 0;
 `;
 
-const CheckIcon = styled.img`
+const CheckIcon = styled.img<{
+  checked: boolean;
+}>`
   ${({ checked }) => !checked && 'visibility: hidden;'}
 `;
 

frontend/src/components/NotFound/NotFound.js → frontend/src/components/NotFound/NotFound.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Lottie from 'react-lottie';
 import { NotFoundAnimation } from '../../assets/lotties';
 import { Container } from './NotFound.styles';

frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.js → frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.ts

@@ -79,7 +79,7 @@ const MenuList = styled.ul`
   }
 `;
 
-const MenuItem = styled.li`
+const MenuItem = styled.li<{ isSelectedMenu: boolean }>`
   height: 4rem;
   display: flex;
   align-items: center;

frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.js → frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.tsx

@@ -22,9 +22,13 @@ import {
   NicknameInput,
 } from './ProfilePageSideBar.styles';
 
-const ProfilePageSideBar = ({ menu }) => {
+interface ProfilePageSideBarProps {
+  menu: string;
+}
+
+const ProfilePageSideBar = ({ menu }: ProfilePageSideBarProps) => {
   const history = useHistory();
-  const { username } = useParams();
+  const { username } = useParams<{ username: string }>();
 
   const { user: loginUser } = useContext(UserContext);
   const { accessToken, username: loginUsername } = loginUser;
@@ -105,7 +109,7 @@ const ProfilePageSideBar = ({ menu }) => {
       {isLoading ? <></> : <BadgeList badgeList={badgeList} />}
       <MenuList>
         {getMenuList({ username, isOwner }).map((menuItem) => (
-          <MenuItem key={menuItem.key} isSelectedMenu={selectedMenu === menuItem.key}>
+          <MenuItem key={menuItem.key} isSelectedMenu={selectedMenu === menuItem?.key}>
             <MenuButton
               type="button"
               onClick={onSelectMenu({ key: menuItem.key, path: menuItem.path })}

frontend/src/components/SearchBar/SearchBar.styles.js → frontend/src/components/SearchBar/SearchBar.styles.tsx

@@ -1,7 +1,10 @@
 import styled from '@emotion/styled';
 import COLOR from '../../constants/color';
+import { css } from '@emotion/react';
 
-const Container = styled.div`
+const Container = styled.div<{
+  css: ReturnType<typeof css>;
+}>`
   background-color: ${COLOR.LIGHT_GRAY_100};
   height: 4.8rem;
   width: 36rem;

frontend/src/components/SearchBar/SearchBar.js → frontend/src/components/SearchBar/SearchBar.tsx

@@ -1,8 +1,17 @@
 import Button from '../Button/Button';
 import SearchIcon from '../../assets/images/search_icon.svg';
 import { Container } from './SearchBar.styles';
+import { css } from '@emotion/react';
+import { ChangeEventHandler, FormEventHandler } from 'react';
 
-const SearchBar = ({ css, onSubmit, onChange, value }) => {
+interface SearchBarProps {
+  onSubmit?: FormEventHandler;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  css: ReturnType<typeof css>;
+  value: string;
+}
+
+const SearchBar = ({ css, onSubmit, onChange, value }: SearchBarProps) => {
   return (
     <form onSubmit={onSubmit}>
       <Container css={css}>

frontend/src/components/SelectBox/SelectBox.styles.js → frontend/src/components/SelectBox/SelectBox.styles.ts

@@ -12,7 +12,7 @@ const fontSizeStyle = {
   },
 };
 
-const Label = styled.label`
+const Label = styled.label<{ width: string }>`
   position: relative;
   display: inline-block;
   width: ${({ width }) => width ?? `${width}`};
@@ -31,7 +31,7 @@ const Label = styled.label`
   }
 `;
 
-const Select = styled.select`
+const Select = styled.select<{ fontSize: string }>`
   padding: 1rem 2rem;
   width: 100%;
 
@@ -47,7 +47,7 @@ const Select = styled.select`
   appearance: none;
 `;
 
-const SelectItemList = styled.ul`
+const SelectItemList = styled.ul<{ maxHeight: string }>`
   position: absolute;
   top: 0;
   width: 100%;
@@ -79,7 +79,7 @@ const SelectItemList = styled.ul`
   }
 `;
 
-const SelectItem = styled.li`
+const SelectItem = styled.li<{ fontSize: string; isSelected: boolean }>`
   display: flex;
   align-items: center;
   padding: 1rem 2rem;

frontend/src/components/SelectBox/SelectBox.js → frontend/src/components/SelectBox/SelectBox.tsx

@@ -18,7 +18,7 @@ const SelectBox = ({
   const $label = useRef(null);
   const $selectorContainer = useRef(null);
 
-  const [isSelectBoxOpened, setIsSelectBoxOpened] = useCustomSelectBox({ targetRef: $label });
+  const { isSelectBoxOpened, setIsSelectBoxOpened } = useCustomSelectBox({ targetRef: $label });
 
   useScrollToSelected({
     container: $selectorContainer,
@@ -33,7 +33,7 @@ const SelectBox = ({
     }
   }, [options]);
 
-  const onSelectItem = (event, option) => {
+  const onSelectItem = (event, option = null) => {
     event.stopPropagation();
 
     option ? setSelectedOption(option) : setSelectedOption(event.target.value);

frontend/src/components/Tag/Tag.styles.js → frontend/src/components/Tag/Tag.styles.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import COLOR from '../../constants/color';
 
-const Container = styled.div`
+const Container = styled.div<{ isSelected: boolean }>`
   border: 0.1rem solid ${COLOR.LIGHT_GRAY_200};
   width: fit-content;
   padding: 0.6rem 0.8rem;
@@ -21,7 +21,7 @@ const Container = styled.div`
     `}
 `;
 
-const PostCount = styled.span`
+const PostCount = styled.span<{ isSelected: boolean }>`
   color: ${COLOR.LIGHT_GRAY_500};
   margin-left: 0.4rem;
 

frontend/src/components/Tag/Tag.tsx

@@ -0,0 +1,17 @@
+import { Container, PostCount } from './Tag.styles';
+
+interface Props {
+  id: number;
+  name: string;
+  postCount: number;
+  selectedTagId: number;
+  onClick: () => void;
+}
+
+const Tag = ({ id, name, postCount, selectedTagId, onClick }: Props) => (
+  <Container isSelected={id === selectedTagId} onClick={onClick}>
+    #{name} <PostCount isSelected={id === selectedTagId}>{postCount}</PostCount>
+  </Container>
+);
+
+export default Tag;

frontend/src/hooks/useCustomSelectBox.js → frontend/src/hooks/useCustomSelectBox.ts

@@ -1,7 +1,11 @@
 import { useEffect, useState } from 'react';
 
-const useCustomSelectBox = ({ targetRef }) => {
-  const [isSelectBoxOpened, setIsSelectBoxOpened] = useState(false);
+interface Params {
+  targetRef: React.MutableRefObject<any>;
+}
+
+const useCustomSelectBox = ({ targetRef }: Params) => {
+  const [isSelectBoxOpened, setIsSelectBoxOpened] = useState<boolean>(false);
 
   useEffect(() => {
     const onCloseOptionList = (event) => {
@@ -21,7 +25,7 @@ const useCustomSelectBox = ({ targetRef }) => {
     };
   }, [isSelectBoxOpened, targetRef]);
 
-  return [isSelectBoxOpened, setIsSelectBoxOpened];
+  return { isSelectBoxOpened, setIsSelectBoxOpened };
 };
 
 export default useCustomSelectBox;

frontend/src/hooks/useFilterWithParams.js → frontend/src/hooks/useFilterWithParams.ts

@@ -28,6 +28,7 @@ const useFilterWithParams = () => {
 
   const onFilterChange = (value) => {
     setPostQueryParams({ ...postQueryParams, page: 1 });
+
     setSelectedFilterDetails(value);
   };
 
@@ -41,6 +42,7 @@ const useFilterWithParams = () => {
     );
 
     setPostQueryParams({ ...postQueryParams, page: 1 });
+
     setSelectedFilterDetails(newFilters);
   };
 
@@ -78,10 +80,12 @@ const makeFilters = (filters, filterType) => {
   if (!filters || !filterType) return [];
 
   if (typeof filters === 'string') {
-    return [{ filterType, filterDetailId: Number(filters) }];
+    return [{ filterType, filterDetailId: Number(filters), name: '' }];
   }
 
-  return [...filters].map((id) => ({ filterType, filterDetailId: Number(id) }));
+  const value = [...filters].map((id) => ({ filterType, filterDetailId: Number(id) }));
+
+  return [...filters].map((id) => ({ filterType, filterDetailId: Number(id), name: '' }));
 };
 
 export default useFilterWithParams;

frontend/src/hooks/useSnackBar.js → frontend/src/hooks/useSnackBar.tsx

@@ -3,10 +3,11 @@ import ReactDOM from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { default as SnackBarComponent } from '../components/@shared/SnackBar/SnackBar';
 import { CLOSE_SNACKBAR, OPEN_SNACKBAR } from '../redux/actions/snackBarAction';
+import type { SnackBar } from '../redux/reducers/snackBarReducer';
 
 const useSnackBar = () => {
   const dispatch = useDispatch();
-  const { isSnackBarOpen, message } = useSelector((state) => state.snackBar);
+  const { isSnackBarOpen, message } = useSelector((state: SnackBar) => state);
 
   const SnackbarPortal = ({ children }) =>
     ReactDOM.createPortal(children, document.getElementById('snackbar'));

frontend/src/hooks/useValidParams.ts

@@ -0,0 +1,17 @@
+import { useParams } from 'react-router-dom';
+
+type Params<Key extends string = string> = {
+  [key in Key]: string;
+};
+
+export const useValidParams = <T extends string>(paramKeys: T[]): Readonly<Params<T>> => {
+  const params = useParams<Readonly<Params<string>>>();
+  const validParams = paramKeys.reduce((acc, key) => {
+    if (!(key in params)) throw new Error(`Param '${key}' not found`);
+    if (!params[key]) throw new Error('Invalid Params');
+
+    return { ...acc, [key]: params[key] };
+  }, {} as Readonly<Params<T>>);
+
+  return validParams;
+};