Merge pull request #252 from FinalDoubleTen/TripsQA/Design

ScrollTopButton / 여행페이지 Nav 추가

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 = () => {
           <PlanItem key={date} date={date} day={DayArr[index]} />
         ))}
       />
+      <ScrollTopButton />
     </div>
   );
 };

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<boolean>(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 (
+    <div
+      className="sticky bottom-[20px]
+      mt-[-50px] flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-white shadow-md"
+      style={{ left: 'calc(100%)' }}>
+      <button onClick={scrollToTop}>
+        <TopIcon />
+      </button>
+    </div>
+  );
+};
+
+export default ScrollTopButton;

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<number>(0);
@@ -163,6 +164,7 @@ export default function MyReview() {
           <MyAlert title="리뷰 삭제" content="리뷰를 삭제할까요?" />
         )}
       </Modal>
+      <ScrollTopButton />
     </>
   );
 }

src/components/Share/IsEditableModal.tsx

@@ -22,8 +22,8 @@ const IsEditableModal = ({ isEditable, setIsEditable }: Props) => {
   return (
     <Dialog.Root open={isEditable} onOpenChange={setIsEditable} modal>
       <Dialog.Portal>
-        <Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0 z-10 bg-black opacity-70" />
-        <Dialog.Content className="data-[state=open]:animate-contentShow fixed bottom-0 left-[50%] z-10 flex w-full max-w-[412px] translate-x-[-50%] flex-col items-center rounded-t-2xl bg-white px-5 pb-8 pt-9">
+        <Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0 z-[101] bg-black opacity-70" />
+        <Dialog.Content className="data-[state=open]:animate-contentShow fixed bottom-0 left-[50%] z-[101] flex w-full max-w-[412px] translate-x-[-50%] flex-col items-center rounded-t-2xl bg-white px-5 pb-8 pt-9">
           <Dialog.Title className="title3 pb-2.5 text-center text-gray7">
             편집 참여 코드를 입력하시면
             <br />

src/components/Trip/EditCodeModal.tsx

@@ -76,8 +76,8 @@ const EditCodeModal = () => {
             </Dialog.Trigger>
             {isEditModal && (
               <Dialog.Portal>
-                <Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0 z-10 bg-black opacity-70" />
-                <Dialog.Content className="data-[state=open]:animate-contentShow fixed bottom-0 left-[50%] z-10 flex w-full max-w-[412px] translate-x-[-50%] flex-col items-center rounded-t-2xl bg-white px-5 pb-8 pt-9">
+                <Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0 z-[100] bg-black opacity-70" />
+                <Dialog.Content className="data-[state=open]:animate-contentShow fixed bottom-0 left-[50%] z-[100] flex w-full max-w-[412px] translate-x-[-50%] flex-col items-center rounded-t-2xl bg-white px-5 pb-8 pt-9">
                   <Dialog.Title className="headline2 mr-auto pb-2.5 text-gray7">
                     나의 여정
                   </Dialog.Title>

src/components/Trip/LikedToursList.tsx

@@ -78,7 +78,7 @@ export const LikedToursList = () => {
       )}
 
       {/* 우리의 관심 여행지 추가 버튼 => 검색 라우터 이동 */}
-      <div className="sticky bottom-5 left-1/2 z-[100] inline-flex h-10 w-[168px] -translate-x-1/2 transform items-center justify-center gap-1.5 rounded-3xl border border-solid border-cyan-400 bg-white px-3.5">
+      <div className="sticky bottom-[65px] left-1/2 z-[100] inline-flex h-10 w-[168px] -translate-x-1/2 transform items-center justify-center gap-1.5 rounded-3xl border border-solid border-cyan-400 bg-white px-3.5">
         <button
           onClick={() => navigate('add')}
           className="flex items-center justify-between">

src/components/Trip/TripSectionTop.tsx

@@ -8,6 +8,7 @@ import { LikedToursList } from './LikedToursList';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 import { useEffect, useState } from 'react';
 import IsEditableModal from '@components/Share/IsEditableModal';
+import ScrollTopButton from '@components/Plan/ScrollTopButton';
 
 const TripSectionTop = () => {
   const navigate = useNavigate();
@@ -43,6 +44,8 @@ const TripSectionTop = () => {
         lists={['우리의 여행취향', '우리의 관심목록']}
         contents={[<TripPreference />, <LikedToursList />]}
       />
+      <ScrollTopButton />
+      <div className="sticky bottom-[40px] mb-5" />
     </div>
   );
 };

src/components/Wish/Wish.tsx

@@ -5,6 +5,7 @@ import WishList from './WishList';
 import NoDataMessage from '@components/common/noData/NoDataMessage';
 import { getMemberTours } from '@api/member';
 import { HeartIcon } from '@components/common/icons/Icons';
+import ScrollTopButton from '@components/Plan/ScrollTopButton';
 
 const Wish = () => {
   const [selectedContentTypeId, setSelectedContentTypeId] = useState<
@@ -64,6 +65,8 @@ const Wish = () => {
           icon={<HeartIcon size={44} fill="#EDEDED" color="#EDEDED" />}
         />
       )}
+      <ScrollTopButton />
+      <div className="mb-5" />
     </div>
   );
 };

src/components/search/SearchResult.tsx

@@ -4,6 +4,7 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 import ToursCategoryItem from '@components/Tours/ToursCategoryItem';
 import { useEffect, useState } from 'react';
 import { Spinner } from '@components/common/spinner/Spinner';
+import ScrollTopButton from '@components/Plan/ScrollTopButton';
 
 interface SearchResultProps {
   selectedRegion: string | null;
@@ -97,6 +98,8 @@ export const SearchResult = ({
           isFetchingNextPage={isFetchingNextPage}
         />
       )}
+      <ScrollTopButton />
+      <div className="mb-5" />
     </>
   );
 };

src/router/routerLayout.tsx

@@ -17,8 +17,9 @@ const MainLayout = () => {
     '/myPageReview',
     '/info',
     '/survey',
-    '/trip',
+    '/plan',
     '/create',
+    '/add',
   ];
   const showNav = !hideNavPaths.some((path) =>
     location.pathname.includes(path),