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 = () => { + ); };