diff --git a/frontend/src/pages/ReviewWritingPage/form/components/MultipleChoiceAnswer/index.tsx b/frontend/src/pages/ReviewWritingPage/form/components/MultipleChoiceAnswer/index.tsx index 3087991bf..f2ae888d3 100644 --- a/frontend/src/pages/ReviewWritingPage/form/components/MultipleChoiceAnswer/index.tsx +++ b/frontend/src/pages/ReviewWritingPage/form/components/MultipleChoiceAnswer/index.tsx @@ -1,6 +1,6 @@ import { CheckboxItem } from '@/components'; import { useModals } from '@/hooks'; -import { useMultipleChoice } from '@/pages/ReviewWritingPage/form/hooks'; +import { useMultipleChoice, useFocusMessage } from '@/pages/ReviewWritingPage/form/hooks'; import { StrengthUnCheckModal } from '@/pages/ReviewWritingPage/modals/components'; import { ReviewWritingCardQuestion } from '@/types'; @@ -28,6 +28,8 @@ const MultipleChoiceAnswer = ({ question }: MultipleChoiceAnswerProps) => { }, ); + const { messageRef } = useFocusMessage({ isMessageShown: isOpenLimitGuide }); + const handleModalCancelButtonClick = () => { closeModal(MODAL_KEY.confirm); }; @@ -51,7 +53,9 @@ const MultipleChoiceAnswer = ({ question }: MultipleChoiceAnswerProps) => { ))} {isOpenLimitGuide && ( -

πŸ˜… μ΅œλŒ€ {question.optionGroup?.maxCount}κ°œκΉŒμ§€ 선택가λŠ₯ν•΄μš”

+

+ πŸ˜… μ΅œλŒ€ {question.optionGroup?.maxCount}κ°œκΉŒμ§€ 선택가λŠ₯ν•΄μš” +

)}
{isOpen(MODAL_KEY.confirm) && ( diff --git a/frontend/src/pages/ReviewWritingPage/form/components/TextAnswer/index.tsx b/frontend/src/pages/ReviewWritingPage/form/components/TextAnswer/index.tsx index 9f76b4f13..601d8d110 100644 --- a/frontend/src/pages/ReviewWritingPage/form/components/TextAnswer/index.tsx +++ b/frontend/src/pages/ReviewWritingPage/form/components/TextAnswer/index.tsx @@ -1,4 +1,4 @@ -import { useTextAnswer } from '@/pages/ReviewWritingPage/form/hooks'; +import { useFocusMessage, useTextAnswer } from '@/pages/ReviewWritingPage/form/hooks'; import { ReviewWritingCardQuestion } from '@/types'; import * as S from './styles'; @@ -12,6 +12,8 @@ const TextAnswer = ({ question }: TextAnswerProps) => { question, }); + const { messageRef } = useFocusMessage({ isMessageShown: errorMessage !== '' }); + const textLength = `${text.length} / ${maxLength}`; return ( @@ -24,7 +26,9 @@ const TextAnswer = ({ question }: TextAnswerProps) => { onBlur={handleTextAnswerBlur} /> - {errorMessage} + + {errorMessage} + {textLength} diff --git a/frontend/src/pages/ReviewWritingPage/form/hooks/index.ts b/frontend/src/pages/ReviewWritingPage/form/hooks/index.ts index 84fdf367a..252368e3a 100644 --- a/frontend/src/pages/ReviewWritingPage/form/hooks/index.ts +++ b/frontend/src/pages/ReviewWritingPage/form/hooks/index.ts @@ -4,3 +4,4 @@ export { default as useMutateReview } from './useMutateReview'; export { default as useCurrentCardIndex } from './useCurrentCardIndex'; export { default as useNavigateBlocker } from './useNavigateBlocker'; export { default as useResetFormRecoil } from './useResetFormRecoil'; +export { default as useFocusMessage } from './useFocusMessage'; diff --git a/frontend/src/pages/ReviewWritingPage/form/hooks/useFocusMessage.ts b/frontend/src/pages/ReviewWritingPage/form/hooks/useFocusMessage.ts new file mode 100644 index 000000000..3ab4cf24c --- /dev/null +++ b/frontend/src/pages/ReviewWritingPage/form/hooks/useFocusMessage.ts @@ -0,0 +1,21 @@ +import { useRef, useEffect } from 'react'; + +interface useMessageFocusProps { + isMessageShown: boolean; +} + +const useFocusMessage = ({ isMessageShown }: useMessageFocusProps) => { + const messageRef = useRef(null); + + useEffect(() => { + if (isMessageShown && messageRef.current) { + messageRef.current.focus(); + } + }, [isMessageShown]); + + return { + messageRef, + }; +}; + +export default useFocusMessage; diff --git a/frontend/src/styles/globalStyles.ts b/frontend/src/styles/globalStyles.ts index c316123fc..b54628192 100644 --- a/frontend/src/styles/globalStyles.ts +++ b/frontend/src/styles/globalStyles.ts @@ -49,6 +49,22 @@ const globalStyles = (theme: Theme) => css` background: transparent; } } + + .sr-only { + position: absolute; + + overflow: hidden; + + width: 0.1rem; + height: 0.1rem; + margin: -0.1rem; + padding: 0; + + white-space: nowrap; + + clip: rect(0, 0, 0, 0); + border: 0; + } `; export default globalStyles;