Merge pull request #68 from Bibumhada/feat/67-수정된-API로-변경

수정된 API 연결
Bibumhada · Dec 25, 2023 · 6d673de · 6d673de
2 parents 728d959 + 48dd393
commit 6d673de
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 39 deletions.
diff --git a/src/apis/api/getPoll.tsx b/src/apis/api/getPoll.tsx
@@ -1,7 +1,11 @@
 import { axiosInstance } from 'apis/base/instance';
 
-const getPoll = async (roomId: string | undefined) => {
-  const response = await axiosInstance.get(`/${roomId}`);
+interface PollParams {
+  roomId: string | undefined;
+}
+
+const getPoll = async ({ roomId }: PollParams) => {
+  const response = await axiosInstance.get(`/api/v1/${roomId}`);
   return response;
 };
 

diff --git a/src/apis/api/getResult.tsx b/src/apis/api/getResult.tsx
@@ -1,8 +1,12 @@
 import { axiosInstance } from 'apis/base/instance';
 
-const getResult = async (roomId: string | any) => {
-  const response = await axiosInstance.get(`/${roomId}/result`);
+interface ResultParams {
+  roomId: string | undefined;
+}
+
+const getResult = async ({ roomId }: ResultParams) => {
+  const response = await axiosInstance.get(`/api/v1/${roomId}/result`);
   return response;
 };
 
-export { getResult };
+export default getResult;
diff --git a/src/apis/api/postRandomListApi.tsx b/src/apis/api/postRandomListApi.tsx
@@ -6,7 +6,7 @@ interface RandomListApiParams {
 }
 
 const postRandomListApi = async ({ longitude, latitude }: RandomListApiParams) => {
-  const response = await axiosInstance.post('/create', {
+  const response = await axiosInstance.post('/api/v1/create', {
     longitude,
     latitude,
   });

diff --git a/src/apis/api/postResuggestOneApi.tsx b/src/apis/api/postResuggestOneApi.tsx
@@ -1,12 +1,12 @@
 import { axiosInstance } from 'apis/base/instance';
 
-interface ResuggestProps {
-  roomId: number;
-  restaurantId: number;
+interface ResuggestParams {
+  roomId: string;
+  restaurantId: string;
 }
 
-const postResuggestOneApi = async ({ roomId, restaurantId }: ResuggestProps) => {
-  const response = await axiosInstance.post(`/${roomId}/resuggest/${restaurantId}`);
+const postResuggestOneApi = async ({ roomId, restaurantId }: ResuggestParams) => {
+  const response = await axiosInstance.post(`/api/v1/${roomId}/resuggest/${restaurantId}`);
   return response.data;
 };
 

diff --git a/src/apis/api/postRetryApi.tsx b/src/apis/api/postRetryApi.tsx
@@ -1,7 +1,11 @@
 import { axiosInstance } from 'apis/base/instance';
 
-const postRetryApi = async (roomId: number) => {
-  const response = await axiosInstance.post(`/retry/${roomId}`);
+interface RetryApiParams {
+  roomId: string;
+}
+
+const postRetryApi = async ({ roomId }: RetryApiParams) => {
+  const response = await axiosInstance.post(`/api/v1/resuggest/${roomId}`);
   return response.data;
 };
 

diff --git a/src/apis/api/postVoteApi.tsx b/src/apis/api/postVoteApi.tsx
@@ -6,7 +6,7 @@ interface VoteApiParams {
 }
 
 const postVoteApi = async ({ roomId, voteList }: VoteApiParams) => {
-  const response = await axiosInstance.post(`${roomId}/vote`, { restaurantIdList: voteList });
+  const response = await axiosInstance.post(`/api/v1/${roomId}/vote`, { restaurantIdList: voteList });
   return response.data;
 };
 

diff --git a/src/apis/query/useGetResult.tsx b/src/apis/query/useGetResult.tsx
@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { getResult } from 'apis/api/getResult';
+import getResult from 'apis/api/getResult';
 
 const useGetResult = (roomId: string | undefined) => {
   const isFirstRun = useRef(true);
@@ -10,7 +10,7 @@ const useGetResult = (roomId: string | undefined) => {
       await new Promise((resolve) => setTimeout(resolve, 3000));
       isFirstRun.current = false;
     }
-    return getResult(roomId);
+    return getResult({ roomId });
   };
 
   const { data: voteOverallResultData, refetch } = useQuery({

diff --git a/src/apis/query/useGetRoom.tsx b/src/apis/query/useGetRoom.tsx
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import getPoll from 'apis/api/getPoll';
 
 export const useGetRoom = (roomId: string | undefined) => {
-  const { data, isLoading, isError } = useQuery({ queryKey: ['room', roomId], queryFn: () => getPoll(roomId) });
+  const { data, isLoading, isError } = useQuery({ queryKey: ['room', roomId], queryFn: () => getPoll({ roomId }) });
 
   return {
     data,

diff --git a/src/components/common/MenuCard/MenuCard.styled.ts b/src/components/common/MenuCard/MenuCard.styled.ts
@@ -21,7 +21,7 @@ export const RestaurantName = styled.strong`
   font-size: var(--md);
 `;
 
-export const RestaurantLink = styled.img`
+export const RestaurantLinkImg = styled.img`
   display: inline-block;
 `;
 

diff --git a/src/components/common/MenuCard/MenuCard.tsx b/src/components/common/MenuCard/MenuCard.tsx
@@ -59,7 +59,7 @@ const MenuCard = (props: MenuCardProps) => {
       <section>
         <S.TitleLayout onClick={handleLinkClick}>
           <S.RestaurantName>{title}</S.RestaurantName>
-          <S.RestaurantLink src={icon_link} />
+          <S.RestaurantLinkImg src={icon_link} />
         </S.TitleLayout>
         <S.RestaurantTagsUl>
           {categories.map((category, i) => (

diff --git a/src/pages/OverallRanking/OverallRanking.styled.ts b/src/pages/OverallRanking/OverallRanking.styled.ts
@@ -10,8 +10,9 @@ export const OverallRankingWrapper = styled.div`
   padding: 45px 19px 43px;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  justify-content: space-between;
   gap: 25px;
+  height: 100vh;
 
   .page-title {
     margin-bottom: 3px;
@@ -97,7 +98,6 @@ export const Distance = styled.p`
 export const ButtonLayout = styled.div`
   display: flex;
   flex-direction: column;
-  height: 100%;
   flex-grow: 1;
 `;
 
@@ -115,7 +115,3 @@ export const ButtonShare = styled.button`
     vertical-align: bottom;
   }
 `;
-
-export const RetryButtonLayout = styled.div`
-  margin-top: 12px;
-`;
diff --git a/src/pages/OverallRanking/OverallRanking.tsx b/src/pages/OverallRanking/OverallRanking.tsx
@@ -103,16 +103,14 @@ function OverallRanking() {
                 </button>
               </S.RestaurantItem>
             ))}
-            <S.ButtonLayout>
-              <S.ButtonShare onClick={handleModalClick}>
-                <img src={shareResult} alt="share result icon" />
-                공유하기
-              </S.ButtonShare>
-              <S.RetryButtonLayout>
-                <Button onClick={handleRetry}>처음부터 다시하기</Button>
-              </S.RetryButtonLayout>
-            </S.ButtonLayout>
+            <S.ButtonShare onClick={handleModalClick}>
+              <img src={shareResult} alt="share result icon" />
+              공유하기
+            </S.ButtonShare>
           </S.RestaurantList>
+          <S.ButtonLayout>
+            <Button onClick={handleRetry}>처음부터 다시하기</Button>
+          </S.ButtonLayout>
         </S.OverallRankingWrapper>
       </S.Wrapper>
       {/* 모달은 포탈 써서 전역으로 나중에 바꿀게요!! */}

diff --git a/src/pages/RandomList/RandomList.tsx b/src/pages/RandomList/RandomList.tsx
@@ -46,7 +46,7 @@ const RandomList = () => {
         category: 'click',
         action: '투표공유하기_버튼',
         label: '음식점 추천 화면',
-        value: roomId,
+        value: Number(roomId),
       });
     }
     navigate(`/random-menu/${roomId}`);
@@ -58,7 +58,7 @@ const RandomList = () => {
     setIsAlertModalOn(false);
   };
 
-  const handleClick = (restaurantId: number, index: number) => {
+  const handleClick = (restaurantId: string, index: number) => {
     ReactGA.event({
       category: 'click',
       action: '마이너스_버튼',
@@ -69,7 +69,7 @@ const RandomList = () => {
         if (prev) {
           const updatedList = [...prev];
           updatedList.splice(index, 1);
-          updatedList.push(data);
+          updatedList.push(data.restaurantResList[4]);
           return updatedList;
         }
         return prev;
@@ -91,7 +91,7 @@ const RandomList = () => {
       label: '음식점 추천 화면',
     });
     if (roomId) {
-      retryMutate(roomId, { onSuccess: retryOnSuccess });
+      retryMutate({ roomId }, { onSuccess: retryOnSuccess });
     }
   };
 

diff --git a/src/recoil/roomIdData.ts b/src/recoil/roomIdData.ts
@@ -6,7 +6,7 @@ const { persistAtom } = recoilPersist({
   storage: sessionStorage,
 });
 
-export const roomIdData = atom<number | null>({
+export const roomIdData = atom<string | null>({
   key: 'roomIdData',
   default: null,
   effects_UNSTABLE: [persistAtom],