리포지토리가 존재하는지 여부를 체크하는 쿼리훅을 추하고 이를 로직에 적용한다

src/components/modals/SideGithubModal/index.tsx

@@ -10,7 +10,10 @@ import Input, { ParentRef } from '@src/components/common/Input';
 import { GuideText } from '@src/constant/enums';
 import { useHistory } from 'react-router-dom';
 import { setInitSide, useAppDispatch } from '@src/store';
-import { useReadGithubInfo } from '@src/hooks/useGithubQuery';
+import {
+  useIsExistRepository,
+  useReadGithubInfo,
+} from '@src/hooks/useGithubQuery';
 
 export interface SideGithubModalProps {
   hideModal: () => void;
@@ -29,16 +32,19 @@ const Template = ({
   const urlRef = useRef({} as ParentRef);
 
   const { isError, data } = useReadGithubInfo(url);
+  const { data: isExist, isLoading } = useIsExistRepository(data?.id || 0);
 
   useEffect(() => {
-    if (data) {
+    if (data && !isLoading) {
+      if (isExist?.duplicated) return showAlert(GuideText.DUPLICATE_SIDE);
+
       dispatch(setInitSide());
       history.push({
         pathname: '/side-create',
         state: data,
       });
     }
-  }, [data]);
+  }, [data, isExist]);
 
   useEffect(() => {
     if (isError) {

src/constant/enums.ts

@@ -15,6 +15,7 @@ export enum GuideText {
   ERROR = '에러가 발생했습니다',
   DELETE_SUCCESS = '삭제를 성공했습니다',
   DUPLICATE = '중복된 값 입니다',
+  DUPLICATE_SIDE = '입력하신 리포지토리로는 SIDE가 이미 생성되어있습니다.',
 }
 
 export enum ConfirmText {

src/hooks/useGithubQuery.ts

@@ -1,9 +1,9 @@
-import { useQueries, useQuery } from 'react-query';
+import { useQueries, useQuery, useQueryClient } from 'react-query';
 import axios from 'axios';
 import { getGithubApiInstance } from '@src/utils/githubContext';
 
 export type GithubInfoType = {
-  id: string;
+  id: number;
   homepage: string;
   html_url: string;
   owner: {
@@ -18,12 +18,15 @@ export type GithubInfoType = {
 };
 
 export type ContributorsType = {
-  id: string;
+  id: number;
   html_url: string;
   avatar_url: string;
   login: string;
 };
 
+export const useIsExistRepository = (id: number) =>
+  useQuery<{ duplicated: boolean }>(`/sides/exists/${id}`, { enabled: !!id });
+
 export const useReadGithubInfo = (url: string) =>
   useQuery<GithubInfoType>(
     `https://api.github.com/repos/${url}`,

src/pages/SideCreatePage/index.tsx

@@ -30,6 +30,7 @@ import {
 } from '@src/hooks/useGithubQuery';
 
 import { setInitSide, setSide, useAppDispatch, useSideState } from '@src/store';
+import { GuideText } from '@src/constant/enums';
 
 interface SideCreatePageProps {
   handleToTop?: () => void;
@@ -141,10 +142,9 @@ const SideCreatePage = ({ handleToTop }: SideCreatePageProps) => {
 
         history.push('/side');
       },
-      // TODO: 추후 타입 정의
       onError: (e: any) => {
         if (e.response.status === 400) {
-          showAlert('입력하신 리포지토리로는 toy가 이미 생성되어있습니다');
+          showAlert(GuideText.ERROR);
         }
       },
     });

src/pages/SideEditPage/index.tsx

@@ -29,6 +29,7 @@ import {
 } from '@src/hooks/useGithubQuery';
 
 import { setInitSide, setSide, useAppDispatch, useSideState } from '@src/store';
+import { GuideText } from '@src/constant/enums';
 
 interface SideEditPageProps {
   handleToTop?: () => void;
@@ -149,7 +150,7 @@ const SideEditPage = ({ handleToTop }: SideEditPageProps) => {
       // TODO: 추후 타입 정의
       onError: (e: any) => {
         if (e.response.status === 400) {
-          showAlert('입력하신 리포지토리로는 toy가 이미 생성되어있습니다');
+          showAlert(GuideText.ERROR);
         }
       },
     });