[FE] 탭 버튼 에러 핸들링을 추가한다. (#1059)

Author: ooherin

frontend/src/components/NewChecklist/MoveNextButton.tsx

@@ -5,7 +5,6 @@ import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import useTabs from '@/hooks/useTabs';
 import useChecklistStore from '@/store/useChecklistStore';
 import { flexRow } from '@/styles/common';
-import theme from '@/styles/theme';
 
 interface Props {
   marginTop?: string;
@@ -23,11 +22,11 @@ const MoveNextButton = ({ marginTop = '0', marginBottom = '0' }: Props) => {
 
   return (
     <S.ContentBox marginTop={marginTop} marginBottom={marginBottom}>
-      <S.Button onClick={handleClickPrev}>
-        <S.Text color={theme.palette.yellow600}>{'< 이전으로 이동'}</S.Text>
+      <S.Button onClick={handleClickPrev} disabled={currentTabId === -1}>
+        {`< 이전으로 이동`}
       </S.Button>
-      <S.Button onClick={handleClickNext}>
-        <S.Text color={theme.palette.yellow600}>{'다음으로 이동 >'}</S.Text>
+      <S.Button onClick={handleClickNext} disabled={currentTabId === categories.length}>
+        {'다음으로 이동 >'}
       </S.Button>
     </S.ContentBox>
   );
@@ -36,21 +35,24 @@ const MoveNextButton = ({ marginTop = '0', marginBottom = '0' }: Props) => {
 export default React.memo(MoveNextButton);
 
 const S = {
-  Text: styled.span<{ color: string }>`
-    color: ${({ color }) => color};
-    font-weight: ${({ theme }) => theme.text.weight.bold};
-  `,
   Button: styled.button`
     margin: 10px 0;
     padding: 0 15px;
     border: 0.25rem solid ${({ theme }) => theme.palette.yellow400};
 
     background-color: ${({ theme }) => theme.palette.white};
 
-    font-weight: ${({ theme }) => theme.text.weight.medium};
+    color: ${({ theme }) => theme.palette.yellow600};
+    font-weight: ${({ theme }) => theme.text.weight.bold};
     font-size: ${({ theme }) => theme.text.size.small};
     line-height: 2.5;
     border-radius: 3rem;
+
+    &:disabled {
+      border: 0.25rem solid ${({ theme }) => theme.palette.grey300};
+
+      color: ${({ theme }) => theme.palette.grey500};
+    }
   `,
   ContentBox: styled.div<{ marginTop: string; marginBottom: string }>`
     ${flexRow}