feat: 다음탭이동 버튼 구현

woowacourse-teams · Nov 6, 2024 · 58e9393 · 58e9393
1 parent 2e2f130
commit 58e9393
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 22 deletions.
diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx
@@ -4,9 +4,10 @@ import Divider from '@/components/_common/Divider/Divider';
 import Layout from '@/components/_common/layout/Layout';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import ChecklistQuestionItem from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestion';
+import MoveNextButton from '@/components/NewChecklist/MoveNextButton';
 import useInitialChecklist from '@/hooks/useInitialChecklist';
 import useChecklistStore from '@/store/useChecklistStore';
-import { flexColumn } from '@/styles/common';
+import { flexCenter, flexColumn } from '@/styles/common';
 import theme from '@/styles/theme';
 import { ChecklistQuestion } from '@/types/checklist';
 
@@ -38,6 +39,8 @@ const ChecklistQuestionTemplate = () => {
           );
         })}
       </S.ContentBox>
+
+      <MoveNextButton marginTop="2rem" marginBottom="4rem" />
     </Layout>
   );
 };
@@ -47,7 +50,7 @@ export default ChecklistQuestionTemplate;
 const S = {
   ContentBox: styled.div`
     ${flexColumn}
-    margin-bottom: 2rem;
+    ${flexCenter}
     border-radius: 0.8rem;
 
     background-color: ${({ theme }) => theme.palette.white};

diff --git a/frontend/src/components/NewChecklist/MoveNextButton.tsx b/frontend/src/components/NewChecklist/MoveNextButton.tsx
@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+
+import { useTabContext } from '@/components/_common/Tabs/TabContext';
+import { DefaultChecklistTabsNames } from '@/constants/tabs';
+import { flexCenter, flexColumn } from '@/styles/common';
+
+const TAB_COUNT = DefaultChecklistTabsNames.length;
+interface Props {
+  marginTop?: string;
+  marginBottom?: string;
+}
+const MoveNextButton = ({ marginTop = '0', marginBottom = '0' }: Props) => {
+  const { setCurrentTabId } = useTabContext();
+
+  const handleClick = () => setCurrentTabId(tabId => ((tabId + 2) % TAB_COUNT) - 1);
+  return (
+    <S.ContentBox marginTop={marginTop} marginBottom={marginBottom}>
+      <S.Button onClick={handleClick}>다음 탭으로</S.Button>
+    </S.ContentBox>
+  );
+};
+
+export default MoveNextButton;
+
+const S = {
+  Button: styled.button`
+    width: 200px;
+    margin: 10px 0;
+    padding: 10px;
+
+    background-color: ${({ theme }) => theme.palette.grey200};
+    border-radius: 10px;
+
+    font-weight: ${({ theme }) => theme.text.weight.semiBold};
+  `,
+  ContentBox: styled.div<{ marginTop: string; marginBottom: string }>`
+    ${flexColumn}
+    ${flexCenter}
+    margin-top: ${({ marginTop }) => marginTop};
+    margin-bottom: ${({ marginBottom }) => marginBottom};
+    border-radius: 0.8rem;
+
+    background-color: ${({ theme }) => theme.palette.white};
+    gap: 0.2rem;
+  `,
+};
diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomInfoTemplate.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomInfoTemplate.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import Layout from '@/components/_common/layout/Layout';
-import FocusTrap from '@/components/_common/Modal/FocusTrap/FocusTrap';
+import MoveNextButton from '@/components/NewChecklist/MoveNextButton';
 import Address from '@/components/NewChecklist/NewRoomInfoForm/Address';
 import DepositAndRent from '@/components/NewChecklist/NewRoomInfoForm/DepositAndRent';
 import IncludedMaintenances from '@/components/NewChecklist/NewRoomInfoForm/IncludedMaintenances';
@@ -25,25 +25,24 @@ const RoomInfoTemplate = () => {
   };
 
   return (
-    <Layout withHeader withTab>
-      <FocusTrap>
-        <S.Container onBlur={handleTrackInput}>
-          <ErrorBoundary FallbackComponent={RoomNameNoDefault}>
-            <RoomName />
-          </ErrorBoundary>
-          <Address />
-          <NearSubwayStations />
-          <DepositAndRent />
-          <MaintenanceFee />
-          <IncludedMaintenances />
-          <RoomFloor />
-          <RoomStructure />
-          <RoomSize />
-          <RoomContractTerm />
-          <OccupancyMonth />
-          <RealEstate />
-        </S.Container>
-      </FocusTrap>
+    <Layout withHeader withTab withFooter>
+      <S.Container onBlur={handleTrackInput}>
+        <ErrorBoundary FallbackComponent={RoomNameNoDefault}>
+          <RoomName />
+        </ErrorBoundary>
+        <Address />
+        <NearSubwayStations />
+        <DepositAndRent />
+        <MaintenanceFee />
+        <IncludedMaintenances />
+        <RoomFloor />
+        <RoomStructure />
+        <RoomSize />
+        <RoomContractTerm />
+        <OccupancyMonth />
+        <RealEstate />
+        <MoveNextButton marginBottom="1rem" />
+      </S.Container>
     </Layout>
   );
 };

diff --git a/frontend/src/components/NewChecklist/Option/OptionTemplate.tsx b/frontend/src/components/NewChecklist/Option/OptionTemplate.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 
 import Layout from '@/components/_common/layout/Layout';
 import TipBox from '@/components/_common/TipBox/TipBox';
+import MoveNextButton from '@/components/NewChecklist/MoveNextButton';
 import OptionAllSelectBox from '@/components/NewChecklist/Option/OptionAllSelectBox';
 import { OptionList } from '@/components/NewChecklist/Option/OptionList';
 import { flexCenter, flexColumn, flexRow, flexSpaceBetween, title4 } from '@/styles/common';
@@ -17,6 +18,7 @@ const OptionTemplate = () => {
           <OptionList />
         </S.OptionBox>
       </S.InnerBox>
+      <MoveNextButton marginTop="2rem" marginBottom="4rem" />
     </Layout>
   );
 };