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/Review/ReviewButton.tsx b/src/components/Review/ReviewButton.tsx index ca1209a5..11885da3 100644 --- a/src/components/Review/ReviewButton.tsx +++ b/src/components/Review/ReviewButton.tsx @@ -1,7 +1,7 @@ import { ButtonPrimary } from '@components/common/button/Button'; -import { useState, useEffect } from 'react'; -import { contentState, keywordsState, ratingState } from '@recoil/review'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { ratingState } from '@recoil/review'; +import { useEffect, useState } from 'react'; +import { useRecoilValue } from 'recoil'; interface ButtonProps { onClick: () => void; @@ -9,29 +9,9 @@ interface ButtonProps { const ReviewButton = (props: ButtonProps) => { const { onClick } = props; - const [content] = useRecoilState(contentState); - const keywords = useRecoilValue(keywordsState); const rating = useRecoilValue(ratingState); - const [isContentValid, setIsContentValid] = useState(false); - const [isKeywordsValid, setIsKeywordsValid] = useState(false); const [isRatingValid, setIsRatingValid] = useState(false); - useEffect(() => { - if (content.length >= 10) { - setIsContentValid(true); - } else if (content.length < 10) { - setIsContentValid(false); - } - }, [content]); - - useEffect(() => { - if (keywords.length > 0) { - setIsKeywordsValid(true); - } else if (keywords.length <= 0) { - setIsKeywordsValid(false); - } - }, [keywords]); - useEffect(() => { if (rating > 0) { setIsRatingValid(true); @@ -41,28 +21,19 @@ const ReviewButton = (props: ButtonProps) => { }, [rating]); return ( -
- {isRatingValid === false && ( -
- 별점을 입력해주세요 -
- )} - - {isRatingValid === true && +
+ {/* {isRatingValid === true && isContentValid === false && isKeywordsValid === false && (
키워드를 선택하거나 텍스트를 10자 이상 입력해주세요
- )} + )} */} + disabled={isRatingValid === false}> 완료
diff --git a/src/components/Review/ReviewPosting.tsx b/src/components/Review/ReviewPosting.tsx index e266e39d..215e164a 100644 --- a/src/components/Review/ReviewPosting.tsx +++ b/src/components/Review/ReviewPosting.tsx @@ -17,7 +17,7 @@ export default function ReviewPosting() {
리뷰를 작성해주세요