refactor: Theme 타입 적용 및 리팩터링 (#314)

* chore: 필요 없는 코드 제거 * chore: 앱 이름 피움으로 변경, standalone 적용 * chore: path 대신 index 적용 * refactor: styled-components Default Theme 타입 추론 * chore: 타입 추론을 위해 as const 추가 * refactor: 옵저버를 위한 useRef + useEffect 대신 useMemo 사용 - useEffect는 딱 1번 실행되는 시점에 꼭 instance가 있으리란 보장이 없음 * fix: 테마 타입 style.d.ts로 분리 및 eslint 룰 비활성화 * chore: styled-components로 네이밍 변경 * chore: 페이지 컴포넌트 Dictionary, Pet 네이밍 DictionaryPlant, PetPlant 추가 * fix: 오타 수정 * chore: API, query 네이밍 dictionary, pet 에서 dictionaryPlant, petPlant로 변경 * chore: URL PATH 상수 및 커스텀 훅 네이밍 변경내용 적용 * chore: 사용하지 않는 import 삭제 * fix: PetPlantRegisterForm 페이지에서 useCheckSessionId사용 * chore: 네이밍 변경내용 적용 * chore: theme 자동 import를 위한 상수 정의 * chore: 변경된 네이밍 적용 * chore: 변경된 네이밍 적용 * chore: type import 추가
woowacourse-teams · Sep 1, 2023 · 6228f27 · 6228f27
1 parent 67e8de7
commit 6228f27
Show file tree

Hide file tree

Showing 51 changed files with 250 additions and 291 deletions.
diff --git a/frontend/public/assets/manifest.json b/frontend/public/assets/manifest.json
@@ -1,41 +1,42 @@
 {
- "name": "App",
- "icons": [
-  {
-   "src": "\/android-icon-36x36.png",
-   "sizes": "36x36",
-   "type": "image\/png",
-   "density": "0.75"
-  },
-  {
-   "src": "\/android-icon-48x48.png",
-   "sizes": "48x48",
-   "type": "image\/png",
-   "density": "1.0"
-  },
-  {
-   "src": "\/android-icon-72x72.png",
-   "sizes": "72x72",
-   "type": "image\/png",
-   "density": "1.5"
-  },
-  {
-   "src": "\/android-icon-96x96.png",
-   "sizes": "96x96",
-   "type": "image\/png",
-   "density": "2.0"
-  },
-  {
-   "src": "\/android-icon-144x144.png",
-   "sizes": "144x144",
-   "type": "image\/png",
-   "density": "3.0"
-  },
-  {
-   "src": "\/android-icon-192x192.png",
-   "sizes": "192x192",
-   "type": "image\/png",
-   "density": "4.0"
-  }
- ]
-}
+  "name": "피움",
+  "icons": [
+    {
+      "src": "/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ],
+  "display": "standalone"
+}
diff --git a/frontend/src/apis/dictionary.ts b/frontend/src/apis/dictionary.ts
diff --git a/frontend/src/apis/dictionaryPlant.ts b/frontend/src/apis/dictionaryPlant.ts
@@ -0,0 +1,18 @@
+import { BASE_URL } from 'constants/index';
+
+export const DICTIONARY_PLANT_URL = `${BASE_URL}/dictionary-plants`;
+
+const getDetail = (id: number) => {
+  return fetch(`${DICTIONARY_PLANT_URL}/${id}`, { method: 'GET' });
+};
+
+const getSearch = (name: string) => {
+  return fetch(`${DICTIONARY_PLANT_URL}?name=${name}`, { method: 'GET' });
+};
+
+const DictionaryPlantAPI = {
+  getDetail,
+  getSearch,
+};
+
+export default DictionaryPlantAPI;
diff --git a/frontend/src/apis/history.ts b/frontend/src/apis/history.ts
@@ -2,15 +2,15 @@ import type { HistoryType } from 'types/history';
 import type { PetPlantDetails } from 'types/petPlant';
 import { BASE_URL } from 'constants/index';
 
-export const HISTORY = `${BASE_URL}/history`;
+export const HISTORY_URL = `${BASE_URL}/history`;
 
 const getPetPlant = (
   petPlantId: PetPlantDetails['id'],
   page: number,
   size: number,
   filter: HistoryType[] = []
 ) => {
-  let url = `${HISTORY}?petPlantId=${petPlantId}&page=${page}&size=${size}`;
+  let url = `${HISTORY_URL}?petPlantId=${petPlantId}&page=${page}&size=${size}`;
   if (filter.length) url += `&filter=${filter.join(',')}`;
 
   return fetch(url, {

diff --git a/frontend/src/apis/pet.ts → frontend/src/apis/petPlant.ts b/frontend/src/apis/pet.ts → frontend/src/apis/petPlant.ts
@@ -1,22 +1,22 @@
 import type { EditPetPlantRequest, NewPetPlantRequest, PetPlantDetails } from 'types/petPlant';
 import { BASE_URL } from 'constants/index';
 
-export const PET = `${BASE_URL}/pet-plants`;
+export const PET_PLANT_URL = `${BASE_URL}/pet-plants`;
 
 const headers = {
   'Content-Type': 'application/json',
 };
 
 const getList = () => {
-  return fetch(PET, {
+  return fetch(PET_PLANT_URL, {
     method: 'GET',
     headers,
     credentials: 'include',
   });
 };
 
 const register = (form: NewPetPlantRequest) => {
-  return fetch(PET, {
+  return fetch(PET_PLANT_URL, {
     method: 'POST',
     headers,
     credentials: 'include',
@@ -25,15 +25,15 @@ const register = (form: NewPetPlantRequest) => {
 };
 
 const getDetails = (petPlantId: PetPlantDetails['id']) => {
-  return fetch(`${PET}/${petPlantId}`, {
+  return fetch(`${PET_PLANT_URL}/${petPlantId}`, {
     method: 'GET',
     headers,
     credentials: 'include',
   });
 };
 
 const edit = (petPlantId: PetPlantDetails['id'], form: EditPetPlantRequest) => {
-  return fetch(`${PET}/${petPlantId}`, {
+  return fetch(`${PET_PLANT_URL}/${petPlantId}`, {
     method: 'PATCH',
     headers,
     credentials: 'include',
@@ -42,19 +42,19 @@ const edit = (petPlantId: PetPlantDetails['id'], form: EditPetPlantRequest) => {
 };
 
 const remove = (petPlantId: PetPlantDetails['id']) => {
-  return fetch(`${PET}/${petPlantId}`, {
+  return fetch(`${PET_PLANT_URL}/${petPlantId}`, {
     method: 'DELETE',
     credentials: 'include',
     headers,
   });
 };
 
-const PetAPI = {
+const PetPlantAPI = {
   getList,
   register,
   getDetails,
   edit,
   remove,
 };
 
-export default PetAPI;
+export default PetPlantAPI;
diff --git a/frontend/src/apis/reminder.ts b/frontend/src/apis/reminder.ts
@@ -1,22 +1,22 @@
 import { ChangeDateParams, WaterPlantParams } from 'types/reminder';
 import { BASE_URL } from 'constants/index';
 
-export const REMINDER = `${BASE_URL}/reminders`;
+export const REMINDER_URL = `${BASE_URL}/reminders`;
 
 const headers = {
   'Content-Type': 'application/json',
 };
 
 const getReminder = () => {
-  return fetch(REMINDER, {
+  return fetch(REMINDER_URL, {
     method: 'GET',
     credentials: 'include',
     headers,
   });
 };
 
 const waterPlant = ({ id, body }: WaterPlantParams) => {
-  return fetch(`${REMINDER}/${id}`, {
+  return fetch(`${REMINDER_URL}/${id}`, {
     method: 'POST',
     credentials: 'include',
     headers,
@@ -25,7 +25,7 @@ const waterPlant = ({ id, body }: WaterPlantParams) => {
 };
 
 const changeDate = ({ id, body }: ChangeDateParams) => {
-  return fetch(`${REMINDER}/${id}`, {
+  return fetch(`${REMINDER_URL}/${id}`, {
     method: 'PATCH',
     credentials: 'include',
     headers,

diff --git a/frontend/src/components/dictionaryPlant/DictionaryPlantContent/index.tsx b/frontend/src/components/dictionaryPlant/DictionaryPlantContent/index.tsx
@@ -17,11 +17,11 @@ import {
   PropBox,
   PropsBox,
 } from './DictionaryPlantContent.style';
-import type { DictPlantExtendCycles } from 'hooks/queries/dictionary/useDictDetail';
+import type { DictionaryPlantExtendCycles } from 'hooks/queries/dictionaryPlant/useDictionaryPlantDetail';
 import parseTemperature from 'utils/parseTemperature';
 import { NO_INFORMATION } from 'constants/index';
 
-const DictionaryPlantContent = (props: DictPlantExtendCycles) => {
+const DictionaryPlantContent = (props: DictionaryPlantExtendCycles) => {
   const {
     postingPlace,
     familyName,

diff --git a/frontend/src/components/petPlant/PetPlantDetail/index.tsx b/frontend/src/components/petPlant/PetPlantDetail/index.tsx
@@ -28,8 +28,8 @@ import {
   EditLink,
   DeleteButton,
 } from './PetPlantDetail.style';
-import useDeletePetPlant from 'hooks/queries/pet/useDeletePetPlant';
-import usePetPlantDetails from 'hooks/queries/pet/usePetPlantDetails';
+import useDeletePetPlant from 'hooks/queries/petPlant/useDeletePetPlant';
+import usePetPlantDetails from 'hooks/queries/petPlant/usePetPlantDetails';
 import useConfirm from 'hooks/useConfirm';
 import { convertDateKorYear, getDaysBetween } from 'utils/date';
 import { URL_PATH } from 'constants/index';

diff --git a/frontend/src/components/petPlant/PetPlantEditForm/index.tsx b/frontend/src/components/petPlant/PetPlantEditForm/index.tsx
@@ -30,7 +30,7 @@ import {
   SecondaryButton,
   ButtonArea,
 } from './PetPlantEditForm.style';
-import useEditPetPlant from 'hooks/queries/pet/useEditPetPlant';
+import useEditPetPlant from 'hooks/queries/petPlant/useEditPetPlant';
 import useAddToast from 'hooks/useAddToast';
 import { PetPlantForm, usePetPlantForm } from 'hooks/usePetPlantForm';
 import {

diff --git a/frontend/src/components/petPlant/PetPlantRegisterForm/index.tsx b/frontend/src/components/petPlant/PetPlantRegisterForm/index.tsx
@@ -6,7 +6,7 @@ import Select from 'components/@common/Select';
 import Stack from 'components/@common/Stack';
 import useStack from 'components/@common/Stack/hooks/useStack';
 import { Button, Center, Wrapper } from './PetPlantRegisterForm.style';
-import useRegisterPetPlant from 'hooks/queries/pet/useRegisterPetPlant';
+import useRegisterPetPlant from 'hooks/queries/petPlant/useRegisterPetPlant';
 import useAddToast from 'hooks/useAddToast';
 import { initialPetPlantForm, usePetPlantForm } from 'hooks/usePetPlantForm';
 import { getDateToString, isDateFormat } from 'utils/date';

diff --git a/frontend/src/components/petPlant/Timeline/index.tsx b/frontend/src/components/petPlant/Timeline/index.tsx
@@ -37,7 +37,7 @@ const Timeline = ({ petPlantId, filter }: TimelineProps) => {
     isFetchingNextPage,
     fetchNextPage,
   } = useYearList(Number(petPlantId), filter);
-  const intersectionRef = useIntersectionRef<HTMLDivElement>(fetchNextPage);
+  const intersectionRef = useIntersectionRef(fetchNextPage);
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -89,7 +89,7 @@ const Timeline = ({ petPlantId, filter }: TimelineProps) => {
         </>
       )}
       {!hasNextPage && <Earth />}
-      <Sensor ref={intersectionRef} />
+      {!isFetchingNextPage && <Sensor ref={intersectionRef} />}
     </Wrapper>
   );
 };

diff --git a/frontend/src/components/search/SearchBox/index.tsx b/frontend/src/components/search/SearchBox/index.tsx
@@ -1,4 +1,4 @@
-import type { DictNameSearchResult } from 'types/dictionaryPlant';
+import type { DictionaryPlantNameSearchResult } from 'types/dictionaryPlant';
 import { useState } from 'react';
 import ArrowRight from 'components/@common/Icons/ArrowRightAlt';
 import Search from 'components/@common/Icons/Search';
@@ -13,14 +13,14 @@ import {
   Input,
   ResultMessage,
 } from './SearchBox.style';
-import useDictSearch from 'hooks/queries/dictionary/useDictSearch';
+import useDictionaryPlantSearch from 'hooks/queries/dictionaryPlant/useDictionaryPlantSearch';
 import useDebounce from 'hooks/useDebounce';
 import { MESSAGE } from 'constants/index';
 
 interface SearchBoxProps {
   onResultClick?: (id: number) => void;
-  onEnter?: (name: string, searchResults?: DictNameSearchResult[]) => void;
-  onNextClick?: (name: string, searchResults?: DictNameSearchResult[]) => void;
+  onEnter?: (name: string, searchResults?: DictionaryPlantNameSearchResult[]) => void;
+  onNextClick?: (name: string, searchResults?: DictionaryPlantNameSearchResult[]) => void;
 }
 
 const SearchBox = (props: SearchBoxProps) => {
@@ -29,7 +29,7 @@ const SearchBox = (props: SearchBoxProps) => {
   const [searchName, setSearchName] = useState('');
   const queryName = useDebounce<string>(searchName, 200);
 
-  const { data: searchResults } = useDictSearch(queryName);
+  const { data: searchResults } = useDictionaryPlantSearch(queryName);
 
   const handleSearchNameChange: React.ChangeEventHandler<HTMLInputElement> = ({
     target: { value },

diff --git a/frontend/src/components/search/SearchResults/index.tsx b/frontend/src/components/search/SearchResults/index.tsx
@@ -1,14 +1,14 @@
 import SearchResultItem from 'components/search/SearchResultItem';
 import { Title, ResultList, Wrapper } from './SearchResults.style';
-import useDictSearch from 'hooks/queries/dictionary/useDictSearch';
+import useDictionaryPlantSearch from 'hooks/queries/dictionaryPlant/useDictionaryPlantSearch';
 
 interface SearchResultsProps {
   plantName: string;
 }
 
 const SearchResults = (props: SearchResultsProps) => {
   const { plantName } = props;
-  const { data: searchResults } = useDictSearch(plantName);
+  const { data: searchResults } = useDictionaryPlantSearch(plantName);
 
   const samePlant = searchResults?.find(({ name }) => name === plantName);
   const similarPlants = searchResults?.filter(({ name }) => name !== plantName);

diff --git a/frontend/src/hooks/queries/dictionary/useDictSearch.ts b/frontend/src/hooks/queries/dictionary/useDictSearch.ts