[FE] 탭 이동 버그, 비교 지도 버그를 해결한다.

frontend/public/index.html

@@ -10,6 +10,11 @@
     <meta property="og:url" content="https://bang-ggood.com" />
     <meta property="og:title" content="방끗 - 방 구하기 끝 그래서 방끗!" />
     <meta property="og:image" content="https://bang-ggood.com/static/images/bang-ggood-thumbnail.png" />
+    <meta http-equiv="cache-control" content="max-age=0" />
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
+    <meta http-equiv="pragma" content="no-cache" />
     <meta
       property="og:description"
       content="자취 초보를 위한 방 보러 다닐 때 꼭 필요한 체크리스트! 내 방 찾기, 이제 걱정 없이 준비하세요."

frontend/src/components/EditChecklist/ChecklistContent/EditChecklistQuestionTemplate.tsx

@@ -16,6 +16,7 @@ const EditChecklistQuestionTemplate = () => {
 
   const { currentTabId } = useTabContext();
   const checklistActions = useChecklistStore(store => store.actions);
+
   const questions = checklistActions.getCategory(currentTabId);
 
   return (

frontend/src/components/NewChecklist/ChecklistContent.tsx

@@ -10,6 +10,7 @@ import OptionTemplate from '@/components/NewChecklist/Option/OptionTemplate';
 
 const ChecklistContent = () => {
   const { currentTabId, useDragForTab } = useTabContext();
+
   useDragForTab();
 
   return (

frontend/src/components/NewChecklist/MoveNextButton.tsx

@@ -2,20 +2,25 @@ import styled from '@emotion/styled';
 import React from 'react';
 
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
-import { DefaultChecklistTabsNames } from '@/constants/tabs';
+import useTabs from '@/hooks/useTabs';
+import useChecklistStore from '@/store/useChecklistStore';
 import { flexRow } from '@/styles/common';
 import theme from '@/styles/theme';
 
-const TAB_COUNT = DefaultChecklistTabsNames.length;
 interface Props {
   marginTop?: string;
   marginBottom?: string;
 }
+
 const MoveNextButton = ({ marginTop = '0', marginBottom = '0' }: Props) => {
-  const { setCurrentTabId } = useTabContext();
+  const { setCurrentTabId, currentTabId } = useTabContext();
+  const categories = useChecklistStore().categories ?? [];
+
+  const { getNextTab, getPrevTab } = useTabs();
+
+  const handleClickPrev = () => setCurrentTabId(getPrevTab({ currentTabId, categories }));
+  const handleClickNext = () => setCurrentTabId(getNextTab({ currentTabId, categories }));
 
-  const handleClickPrev = () => setCurrentTabId(tabId => (tabId % TAB_COUNT) - 1);
-  const handleClickNext = () => setCurrentTabId(tabId => ((tabId + 2) % TAB_COUNT) - 1);
   return (
     <S.ContentBox marginTop={marginTop} marginBottom={marginBottom}>
       <S.Button onClick={handleClickPrev}>

frontend/src/hooks/useTabs.ts

@@ -15,6 +15,7 @@ const useTabs = () => {
   };
 
   const actions = useChecklistStore(state => state.actions);
+
   const isCategoryQuestionAllCompleted = useCallback(
     (targetId: number) => {
       const targetCategory = actions.getCategory(targetId);
@@ -23,6 +24,20 @@ const useTabs = () => {
     [actions],
   );
 
+  const getNextTab = ({ currentTabId, categories }: { currentTabId: number; categories: Category[] }) => {
+    const currentTabs = [-1, 0, ...categories.map(category => category.categoryId)];
+    const currentTabIndex = currentTabs.findIndex(tab => tab === currentTabId);
+    const nextTabIndex = currentTabIndex === currentTabs.length - 1 ? 0 : currentTabIndex + 1;
+    return currentTabs[nextTabIndex];
+  };
+
+  const getPrevTab = ({ currentTabId, categories }: { currentTabId: number; categories: Category[] }) => {
+    const currentTabs = [-1, 0, ...categories.map(category => category.categoryId)];
+    const currentTabIndex = currentTabs.findIndex(tab => tab === currentTabId);
+    const prevTabIndex = currentTabIndex === 0 ? currentTabs.length - 1 : currentTabIndex - 1;
+    return currentTabs[prevTabIndex];
+  };
+
   const getTabsWithIsCompleted = (categories: Category[]) => {
     return categories.map(category => ({
       id: category.categoryId,
@@ -46,6 +61,8 @@ const useTabs = () => {
   return {
     getTabs,
     getTabsForChecklist,
+    getNextTab,
+    getPrevTab,
   };
 };
 

frontend/src/pages/RoomComparePage.tsx

@@ -8,13 +8,13 @@ import { default as Marker } from '@/components/_common/Marker/Marker';
 import CategoryDetailModal from '@/components/RoomCompare/CategoryDetailModal';
 import CompareCard from '@/components/RoomCompare/CompareCard';
 import OptionDetailModal from '@/components/RoomCompare/OptionDetailModal';
+import { DEFAULT_POSITION } from '@/constants/map';
 import { OPTIONS } from '@/constants/options';
 import { ROUTE_PATH } from '@/constants/routePath';
 import useGetCompareRoomsQuery from '@/hooks/query/useGetCompareRoomsQuery';
 import useModal from '@/hooks/useModal';
 import { flexCenter, flexRow } from '@/styles/common';
 import theme from '@/styles/theme';
-import { Position } from '@/types/address';
 
 export interface OptionDetail {
   optionId: number;
@@ -69,13 +69,20 @@ const RoomComparePage = () => {
   const handleClickBackward = () => {
     navigate(ROUTE_PATH.checklistList);
   };
-  const positions: Position[] = [
-    { latitude: 37.5061912, longitude: 127.0019228 },
-    { latitude: 37.5061912, longitude: 127.1266228 },
-  ];
 
   if (!rooms.length) return <div>loading</div>;
 
+  const positions = [
+    {
+      latitude: rooms[0].latitude ?? DEFAULT_POSITION.latitude,
+      longitude: rooms[0].longitude ?? DEFAULT_POSITION.longitude,
+    },
+    {
+      latitude: rooms[1].latitude ?? DEFAULT_POSITION.latitude,
+      longitude: rooms[1].longitude ?? DEFAULT_POSITION.longitude,
+    },
+  ];
+
   return (
     <>
       <Header