Merge pull request #418 from boostcampwm2023/Fix/FE/#405

Fix/FE/#405: timeout 설정 및 사이트 바로가기
boostcampwm2023 · Dec 12, 2023 · 5827d7c · 5827d7c
2 parents 6805862 + 6732067
commit 5827d7c
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 6 deletions.
diff --git a/frontend/src/apis/fetchThemeTimeTable.ts b/frontend/src/apis/fetchThemeTimeTable.ts
@@ -2,8 +2,13 @@ import userInstance from '@config/userInstance';
 import { Value } from 'react-calendar/dist/cjs/shared/types';
 
 const fetchThemeTimeTable = async (themeId: number, date: Value) => {
-  return (await userInstance({ method: 'get', url: `/themes/${themeId}/timetable?date=${date}` }))
-    .data;
+  return (
+    await userInstance({
+      method: 'get',
+      url: `/themes/${themeId}/timetable?date=${date}`,
+      timeout: 5000,
+    })
+  ).data;
 };
 
 export default fetchThemeTimeTable;
diff --git a/frontend/src/hooks/useTimeTableQuery.tsx b/frontend/src/hooks/useTimeTableQuery.tsx
@@ -7,7 +7,6 @@ const useTimeTableQuery = (themeId: number, date: Value) => {
   const { data, isSuccess, isLoading, isError } = useQuery<TimeTable[]>({
     queryKey: [QUERY_MANAGEMENT['themeTimeTable'].key, themeId, date],
     queryFn: () => QUERY_MANAGEMENT['themeTimeTable'].fn(themeId, date),
-    retryDelay: 5000,
   });
 
   return { data, isSuccess, isLoading, isError };

diff --git a/frontend/src/pages/ChatRoom/components/RoomInfoPanel/RoomInfoPanel.tsx b/frontend/src/pages/ChatRoom/components/RoomInfoPanel/RoomInfoPanel.tsx
@@ -34,6 +34,7 @@ const RoomInfoPanel = memo(function RoomInfoPanel({ settingMode, changeRoom }: P
     recruitmentCompleted,
     appointmentCompleted,
     themeId,
+    website,
   } = roomInfo as RoomInfo;
 
   const handleSettingButton = () => {
@@ -93,7 +94,7 @@ const RoomInfoPanel = memo(function RoomInfoPanel({ settingMode, changeRoom }: P
           </RoomInfoContent>
         </RoomInfoWrapper>
       </RoomInfoTopContainer>
-      <TimeTable themeId={themeId} />
+      <TimeTable themeId={themeId} website={website} />
     </Layout>
   );
 });

diff --git a/frontend/src/pages/ChatRoom/components/RoomInfoPanel/TimeTable/TimeTable.tsx b/frontend/src/pages/ChatRoom/components/RoomInfoPanel/TimeTable/TimeTable.tsx
@@ -8,7 +8,12 @@ import { FaArrowsRotate } from 'react-icons/fa6';
 import { keyframes } from '@emotion/react';
 import { getStringByDate } from '@utils/dateUtil';
 
-const TimeTable = ({ themeId }: { themeId: number }) => {
+interface Props {
+  themeId: number;
+  website: string;
+}
+
+const TimeTable = ({ themeId, website }: Props) => {
   const today = new Date();
   const [date, setDate] = useState<Value>(today);
   const { data, isLoading } = useTimeTableQuery(themeId, date);
@@ -65,6 +70,9 @@ const TimeTable = ({ themeId }: { themeId: number }) => {
               시간표를 불러올 수 없습니다.
             </InfoText>
           )}
+          <WebsiteLink href={website} target="_blank">
+            예약 사이트 바로가기
+          </WebsiteLink>
         </>
       )}
     </Container>
@@ -126,3 +134,11 @@ const InfoText = styled.div([
     line-height: 2.5rem;
   `,
 ]);
+
+const WebsiteLink = styled.a([
+  tw`font-pretendard text-white text-l border border-white border-solid py-3 px-4 rounded-[1rem]`,
+  css`
+    text-decoration: none;
+    cursor: pointer;
+  `,
+]);
diff --git a/frontend/src/pages/ChatRoom/mock/mockRoomInfoData.ts b/frontend/src/pages/ChatRoom/mock/mockRoomInfoData.ts
@@ -13,4 +13,5 @@ export const mockRoomInfo: RoomInfo = {
   currentMembers: 5,
   recruitmentCompleted: false,
   appointmentCompleted: true,
+  website: 'https://www.naver.com',
 };
diff --git a/frontend/src/types/chat.ts b/frontend/src/types/chat.ts
@@ -41,6 +41,7 @@ export interface RoomInfo {
   currentMembers: number;
   recruitmentCompleted: boolean;
   appointmentCompleted: boolean;
+  website: string;
 }
 
 export type ChangeRoomData = {

diff --git a/frontend/src/utils/pickRandomNumber.ts b/frontend/src/utils/pickRandomNumber.ts
@@ -7,7 +7,7 @@ const START_INDEX = 0;
  */
 const pickRandomNumber = (n: number, k: number): Array<number> => {
   if (k > n) {
-    throw new Error('asd');
+    throw new Error('k는 n보다 클 수 없습니다.');
   }
 
   const numbersArray = Array.from({ length: n }, (_, index) => index + 1).sort(