diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx
index 1052e34f6..3483e1f2a 100644
--- 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 = () => {
);
})}
+
+
);
};
@@ -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
new file mode 100644
index 000000000..880e14766
--- /dev/null
+++ 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 (
+
+ 다음 탭으로
+
+ );
+};
+
+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
index 16353aa4b..7eec4866d 100644
--- 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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/frontend/src/components/NewChecklist/Option/OptionTemplate.tsx b/frontend/src/components/NewChecklist/Option/OptionTemplate.tsx
index e06ae2f63..392cdc710 100644
--- 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 = () => {
+
);
};