diff --git a/src/components/ToastMovePage/index.jsx b/src/components/ToastMovePage/index.jsx new file mode 100644 index 0000000..3b18833 --- /dev/null +++ b/src/components/ToastMovePage/index.jsx @@ -0,0 +1,14 @@ +import PropTypes from 'prop-types'; + +const ToastMovePage = ({ toastMessage }) => + toastMessage ? ( +
+ {toastMessage} +
+ ) : null; + +ToastMovePage.propTypes = { + toastMessage: PropTypes.string.isRequired, +}; + +export default ToastMovePage; diff --git a/src/pages/QuestionList/index.jsx b/src/pages/QuestionList/index.jsx index 0f25638..df2f37e 100644 --- a/src/pages/QuestionList/index.jsx +++ b/src/pages/QuestionList/index.jsx @@ -6,6 +6,8 @@ import SortDropDown from 'components/SortDropDown'; import { getSubject } from 'api/subjects'; import Logo from 'assets/images/img_Logo.svg'; import useViewport from 'hooks/useViewport'; +import ToastMovePage from 'components/ToastMovePage'; +import { ReactComponent as IcArrowDashRight } from 'assets/images/icons/ic_Arrow-dash-right.svg'; const QuestionList = () => { const navigate = useNavigate(); @@ -16,6 +18,7 @@ const QuestionList = () => { const [count, setCount] = useState(); const [cards, setCards] = useState([]); const [loading, setLoading] = useState(false); + const [toastMessage, setToastMessage] = useState(''); const readSubject = useCallback(async () => { setLoading(true); @@ -38,10 +41,16 @@ const QuestionList = () => { const onClickPageMove = () => { const storedId = localStorage.getItem('id'); - if (storedId) { - navigate(`/post/${storedId}/answer`); + if (!storedId) { + setToastMessage('로그인 후 이용 가능한 페이지입니다.'); + setTimeout(() => { + navigate('/'); + }, 2000); } else { - navigate('/'); + setToastMessage('답변페이지로 이동합니다.'); + setTimeout(() => { + navigate(`/post/${storedId}/answer`); + }, 2000); } }; @@ -54,12 +63,12 @@ const QuestionList = () => { @@ -70,7 +79,7 @@ const QuestionList = () => {
-
+
{loading && (
@@ -81,6 +90,7 @@ const QuestionList = () => {
+ {ToastMovePage && } ); };