diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index fada423c..35d61790 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -20,6 +20,7 @@ import { visitDateState } from '@recoil/socket'; import { useState } from 'react'; import { getItem } from '@utils/localStorageFun'; import PlanSchedule from './PlanSchedule'; +import ScrollTopButton from './ScrollTopButton'; const PlanSectionTop = () => { const navigate = useNavigate(); @@ -101,6 +102,7 @@ const PlanSectionTop = () => { ))} /> + ); }; diff --git a/src/components/Plan/ScrollTopButton.tsx b/src/components/Plan/ScrollTopButton.tsx new file mode 100644 index 00000000..9f16e9b6 --- /dev/null +++ b/src/components/Plan/ScrollTopButton.tsx @@ -0,0 +1,42 @@ +import { TopIcon } from '@components/common/icons/Icons'; +import { useEffect, useState } from 'react'; + +const ScrollTopButton = () => { + const [visible, setVisible] = useState(false); + + const checkScrollTop = () => { + if (!visible && window.scrollY > 300) { + setVisible(true); + } else if (visible && window.scrollY <= 300) { + setVisible(false); + } + }; + + useEffect(() => { + window.addEventListener('scroll', checkScrollTop); + return () => { + window.removeEventListener('scroll', checkScrollTop); + }; + }, [visible]); + + const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + + if (!visible) { + return null; + } + + return ( +
+ +
+ ); +}; + +export default ScrollTopButton; diff --git a/src/components/Review/MyReview.tsx b/src/components/Review/MyReview.tsx index 1db45243..ed33f095 100644 --- a/src/components/Review/MyReview.tsx +++ b/src/components/Review/MyReview.tsx @@ -21,6 +21,7 @@ import EditDelete from '@components/common/modal/children/EditDelete'; import MyAlert from '@components/common/modal/children/MyAlert'; import { alertTypeState } from '@recoil/modal'; import { PenIcon } from '@components/common/icons/Icons'; +import ScrollTopButton from '@components/Plan/ScrollTopButton'; export default function MyReview() { const [reviewDataLength, setReviewDataLength] = useState(0); @@ -163,6 +164,7 @@ export default function MyReview() { )} + ); } diff --git a/src/components/Share/IsEditableModal.tsx b/src/components/Share/IsEditableModal.tsx index eae7a09c..f3f6a832 100644 --- a/src/components/Share/IsEditableModal.tsx +++ b/src/components/Share/IsEditableModal.tsx @@ -22,8 +22,8 @@ const IsEditableModal = ({ isEditable, setIsEditable }: Props) => { return ( - - + + 편집 참여 코드를 입력하시면
diff --git a/src/components/Trip/EditCodeModal.tsx b/src/components/Trip/EditCodeModal.tsx index d486c0ce..8d674d6e 100644 --- a/src/components/Trip/EditCodeModal.tsx +++ b/src/components/Trip/EditCodeModal.tsx @@ -76,8 +76,8 @@ const EditCodeModal = () => { {isEditModal && ( - - + + 나의 여정 diff --git a/src/components/Trip/LikedToursList.tsx b/src/components/Trip/LikedToursList.tsx index 5587077e..c2b4e969 100644 --- a/src/components/Trip/LikedToursList.tsx +++ b/src/components/Trip/LikedToursList.tsx @@ -78,7 +78,7 @@ export const LikedToursList = () => { )} {/* 우리의 관심 여행지 추가 버튼 => 검색 라우터 이동 */} -
+