refactor: eslint 적용

woowacourse-teams · Jul 29, 2023 · f2d017d · f2d017d
1 parent 31c8a3b
commit f2d017d
Show file tree

Hide file tree

Showing 38 changed files with 158 additions and 123 deletions.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -18,6 +18,7 @@
  "prettier"
  ],
  "rules": {
+ "import/order": "off",
  "class-methods-use-this": "off",
  "no-useless-constructor": "off",
  "no-use-before-define": "off",
@@ -45,10 +46,12 @@
  "react/function-component-definition": [
  "error",
  {
- "namedComponents": "arrow-function"
+ "namedComponents": "arrow-function",
+ "unnamedComponents": "arrow-function"
  }
  ],
- "react/no-unknown-property": ["error", { "ignore": ["css"] }]
+ "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+ "react/state-in-constructor": "off"
  },
  "overrides": [
  {

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router-dom';
 
-import { useCityQuery } from '@hooks/api/useCityQuery';
+// import { useCityQuery } from '@hooks/api/useCityQuery';
 import { useResetError } from '@hooks/common/useResetError';
 
 import Error from '@components/common/Error/Error';
@@ -9,7 +9,7 @@ import Header from '@components/layout/Header/Header';
 
 const App = () => {
  const { handleErrorReset } = useResetError();
- useCityQuery();
+ // useCityQuery();
 
  return (
  <ErrorBoundary Fallback={Error} onReset={handleErrorReset}>

diff --git a/frontend/src/api/trip/postTrip.ts b/frontend/src/api/trip/postTrip.ts
@@ -1,5 +1,5 @@
 import { END_POINTS } from '@constants/api';
-import { NewTripData } from '@type/trips';
+import type { NewTripData } from '@type/trips';
 
 import { axiosInstance } from '@api/axiosInstance';
 

diff --git a/frontend/src/assets/index.d.ts b/frontend/src/assets/index.d.ts
@@ -1,5 +1,6 @@
 declare module '*.svg' {
- import React from 'react';
+ import type React from 'react';
+
  const SVG: React.FC<React.SVGProps<SVGSVGElement>>;
  export default SVG;
 }

diff --git a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx b/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx
@@ -34,7 +34,7 @@ const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: City
 
  useEffect(() => {
  updateCityInfo(cityTags);
- }, [cityTags]);
+ }, [cityTags, updateCityInfo]);
 
  const handleInputChange = (event: FormEvent<HTMLInputElement>) => {
  const word = event.currentTarget.value;

diff --git a/frontend/src/components/common/DateInput/DateInput.tsx b/frontend/src/components/common/DateInput/DateInput.tsx
@@ -28,7 +28,7 @@ const DateInput = ({
 
  useEffect(() => {
  updateDateInfo(selectedDateRange);
- }, [selectedDateRange]);
+ }, [selectedDateRange, updateDateInfo]);
 
  const handleDateClick = (dateRange: DateRangeData) => {
  if (!dateRange.end) return;
@@ -54,7 +54,7 @@ const DateInput = ({
  <DateRangePicker
  onDateSelect={handleDateClick}
  maxDateRange={60}
- hasRangeRestriction={true}
+ hasRangeRestriction
  initialSelectedDateRange={
  selectedDateRange.start !== null ? selectedDateRange : undefined
  }

diff --git a/frontend/src/components/common/DayLogItem/DayLogItem.tsx b/frontend/src/components/common/DayLogItem/DayLogItem.tsx
@@ -24,7 +24,7 @@ const DayLogItem = ({ tripId, openAddModal, ...information }: DayLogItemProps) =
  useEffect(() => {
  // ! 선택된 날짜 탭이 변경되었을 때 선택된 필터 초기화
  handleFilterSelectClick(DAY_LOG_ITEM_FILTERS.ALL);
- }, [information.items]);
+ }, [handleFilterSelectClick, information.items]);
 
  return (
  <Box tag="section" css={containerStyling}>

diff --git a/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx
@@ -23,17 +23,20 @@ const initialState: State = {
 class ErrorBoundary extends Component<PropsWithChildren<ErrorBoundaryProps>, State> {
  state: State = initialState;
 
- resetErrorBoundary = () => {
- this.props.onReset?.(this.state.error!);
- this.setState(initialState);
- };
-
  static getDerivedStateFromError(error: Error): State {
  return { hasError: true, error };
  }
 
+ resetErrorBoundary = () => {
+ const { onReset } = this.props;
+ const { error } = this.state;
+
+ onReset?.(error!);
+ this.setState(initialState);
+ };
+
  render() {
- const { Fallback } = this.props;
+ const { Fallback, children } = this.props;
  const { error } = this.state;
 
  if (error) {
@@ -45,7 +48,7 @@ class ErrorBoundary extends Component<PropsWithChildren<ErrorBoundaryProps>, Sta
  );
  }
 
- return this.props.children;
+ return children;
  }
 }
 

diff --git a/frontend/src/components/common/StarRating/Star/Star.tsx b/frontend/src/components/common/StarRating/Star/Star.tsx
@@ -18,7 +18,7 @@ const Star = ({ isFilled, isHalf }: StarProps) => {
  );
  }
 
- return <>{isFilled ? <FilledStarIcon /> : <EmptyStarIcon />}</>;
+ return isFilled ? <FilledStarIcon /> : <EmptyStarIcon />;
 };
 
 export default Star;
diff --git a/frontend/src/components/common/TripItem/TripItem.tsx b/frontend/src/components/common/TripItem/TripItem.tsx
@@ -51,9 +51,9 @@ const TripItem = ({
  width={250}
  height={167}
  isDraggable={false}
- showNavigationOnHover={true}
- showArrows={true}
- showDots={true}
+ showNavigationOnHover
+ showArrows
+ showDots
  images={information.imageUrls}
  />
  )}

diff --git a/frontend/src/components/common/TripItemList/TripItemList.tsx b/frontend/src/components/common/TripItemList/TripItemList.tsx
@@ -22,10 +22,6 @@ const TripItemList = ({ tripId, dayLogId, tripItems }: TripItemListProps) => {
  const dayLogOrderMutation = useDayLogOrderMutation();
  const { isOpen: isErrorTostOpen, open: openErrorToast, close: closeErrorToast } = useOverlay();
 
- useEffect(() => {
- handleItemsUpdate(tripItems);
- }, [tripItems]);
-
  const handlePositionChange = (newItems: TripItemData[]) => {
  const itemIds = newItems.map((item) => item.id);
 
@@ -43,6 +39,10 @@ const TripItemList = ({ tripId, dayLogId, tripItems }: TripItemListProps) => {
  const { items, handleItemsUpdate, handleDragStart, handleDragEnter, handleDragEnd } =
  useDragAndDrop(tripItems, handlePositionChange);
 
+ useEffect(() => {
+ handleItemsUpdate(tripItems);
+ }, [handleItemsUpdate, tripItems]);
+
  return (
  <>
  <ol css={containerStyling}>

diff --git a/frontend/src/components/layout/Header/Header.style.ts b/frontend/src/components/layout/Header/Header.style.ts
@@ -19,6 +19,8 @@ export const headerStyling = css({
 export const imageStyling = css({
  minWidth: '32px',
  minHeight: '32px',
+ border: 'none',
+ outline: 0,
  borderRadius: '50%',
 
  backgroundColor: Theme.color.gray200,

diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx
@@ -1,6 +1,7 @@
 import LogoHorizontal from '@assets/svg/logo-horizontal.svg';
 import { PATH } from '@constants/path';
 import { Flex, Menu, MenuItem, MenuList, useOverlay } from 'hang-log-design-system';
+import type { KeyboardEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import {
@@ -13,12 +14,24 @@ const Header = () => {
  const navigate = useNavigate();
  const { isOpen, open, close } = useOverlay();
 
+ const handleUserImageEnterKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {
+ if (event.key === 'Enter') {
+ open();
+ }
+ };
+
  return (
  <header css={headerStyling}>
  <Flex styles={{ justify: 'space-between', align: 'center' }}>
- <LogoHorizontal onClick={() => navigate(PATH.ROOT)} />
+ <LogoHorizontal tabIndex={0} onClick={() => navigate(PATH.ROOT)} />
  <Menu closeMenu={close}>
- <div css={imageStyling} onClick={open} />
+ <button
+ type="button"
+ css={imageStyling}
+ aria-label="유저 프로필 이미지"
+ onClick={open}
+ onKeyDown={handleUserImageEnterKeyPress}
+ />
  {isOpen && (
  <MenuList css={menuListStyling}>
  <MenuItem onClick={() => navigate(PATH.ROOT)}>마이페이지</MenuItem>

diff --git a/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx b/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import type { TripItemFormData } from '@type/tripItem';
 import { Select } from 'hang-log-design-system';
 import type { ChangeEvent } from 'react';

diff --git a/frontend/src/components/trips/TripsItem/TripsItem.tsx b/frontend/src/components/trips/TripsItem/TripsItem.tsx
@@ -6,7 +6,6 @@ import {
  badgeBoxStyling,
  boxStyling,
  durationTextStyling,
- imageBoxStyling,
  imageStyling,
  nameStyling,
 } from '@components/trips/TripsItem/TripsItem.style';
@@ -22,7 +21,11 @@ interface TripsItemProps {
 const TripsItem = ({ coverImage, cityTags, itemName, duration, description }: TripsItemProps) => {
  return (
  <Flex tag="li" styles={{ direction: 'column' }} css={boxStyling}>
- <img src={coverImage ?? DefaultThumbnail} css={imageStyling} />
+ <img
+ src={coverImage ?? DefaultThumbnail}
+ css={imageStyling}
+ alt={`${itemName} 대표 이미지`}
+ />
  <Box css={badgeBoxStyling}>
  {cityTags.map((cityTag) => {
  return <Badge key={cityTag.id}>{cityTag.name}</Badge>;

diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.tsx b/frontend/src/components/trips/TutorialModal/TutorialModal.tsx
@@ -12,10 +12,10 @@ const TutorialModal = () => {
 
  useEffect(() => {
  openTutorial();
- }, []);
+ }, [openTutorial]);
 
  return (
- <Modal isOpen={isTutorialOpen} closeModal={closeTutorial} hasCloseButton={true}>
+ <Modal isOpen={isTutorialOpen} closeModal={closeTutorial} hasCloseButton>
  <Flex css={boxStyling}>
  <SVGCarousel
  width={385}

diff --git a/frontend/src/hooks/api/useCityQuery.ts b/frontend/src/hooks/api/useCityQuery.ts
@@ -1,7 +1,7 @@
 import { NETWORK } from '@constants/api';
 import { useQuery } from '@tanstack/react-query';
 import type { CityData } from '@type/city';
-import { AxiosError } from 'axios';
+import type { AxiosError } from 'axios';
 
 import { getCities } from '@api/city/getCities';
 

diff --git a/frontend/src/hooks/api/useCreateTripMutation.ts b/frontend/src/hooks/api/useCreateTripMutation.ts
@@ -1,11 +1,13 @@
-import { postTrip } from '@/api/trip/postTrip';
 import { ERROR_MESSAGE, NETWORK } from '@constants/api';
 import { useMutation } from '@tanstack/react-query';
 
+import { postTrip } from '@api/trip/postTrip';
+
 export const useCreateTripMutation = () => {
  const newTripMutation = useMutation(postTrip(), {
- onError: (err, _, context) => {
- //TODO:toast 띄우기
+ onError: () => {
+ // TODO:toast 띄우기
+ // eslint-disable-next-line no-alert
  alert(ERROR_MESSAGE);
  },
  retry: NETWORK.RETRY_COUNT,

diff --git a/frontend/src/hooks/api/useDeleteTripItemMutation.ts b/frontend/src/hooks/api/useDeleteTripItemMutation.ts
@@ -6,7 +6,7 @@ export const useDeleteTripItemMutation = () => {
  const queryClient = useQueryClient();
 
  const deleteTripItemMutation = useMutation(deleteTripItem(), {
- onMutate: ({ tripId, itemId }) => {
+ onMutate: () => {
  // TODO : 낙관적 업데이트 적용 -> 에러 발생 시 토스트가 안 보이는 문제 때문에 일단 커멘트
  // const tripData = queryClient.getQueryData<TripData>(['trip', tripId]);
  // queryClient.setQueryData<TripData>(['trip', tripId], (prevTripData) => {

diff --git a/frontend/src/hooks/api/useTripEditMutation.ts b/frontend/src/hooks/api/useTripEditMutation.ts
@@ -11,7 +11,8 @@ export const useTripEditMutation = () => {
  queryClient.invalidateQueries({ queryKey: ['trip'] });
  },
  onError: () => {
- //TODO: toast 띄우기
+ // TODO: toast 띄우기
+ // eslint-disable-next-line no-alert
  alert('오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
  },
  });

diff --git a/frontend/src/hooks/api/useTripQuery.ts b/frontend/src/hooks/api/useTripQuery.ts
@@ -1,7 +1,7 @@
 import { NETWORK } from '@constants/api';
 import { useQuery } from '@tanstack/react-query';
 import type { TripData } from '@type/trip';
-import { AxiosError } from 'axios';
+import type { AxiosError } from 'axios';
 
 import { getTrip } from '@api/trip/getTrip';
 

diff --git a/frontend/src/hooks/api/useUpdateTripItemMutation.ts b/frontend/src/hooks/api/useUpdateTripItemMutation.ts
@@ -1,4 +1,3 @@
-import { ERROR_MESSAGE } from '@constants/api';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { putTripItem } from '@api/tripItem/putTripItem';