From 767483c0abc179a393c1f4075abf151a0ca4f1d4 Mon Sep 17 00:00:00 2001
From: sue <dldustn2040@gmail.com>
Date: Wed, 24 Jan 2024 10:25:27 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Design:=20=EC=97=AC=ED=96=89=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20nav=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/routerLayout.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/router/routerLayout.tsx b/src/router/routerLayout.tsx
index 17c05f51..9499a033 100644
--- a/src/router/routerLayout.tsx
+++ b/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),

From a9bb54c7dc2d0aaee8ae1dd0607f0c8f590c3ce7 Mon Sep 17 00:00:00 2001
From: sue <dldustn2040@gmail.com>
Date: Wed, 24 Jan 2024 10:25:44 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20ScrollToTop=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Plan/PlanSectionTop.tsx   |  2 ++
 src/components/Plan/ScrollTopButton.tsx  | 42 ++++++++++++++++++++++++
 src/components/Review/MyReview.tsx       |  2 ++
 src/components/Share/IsEditableModal.tsx |  4 +--
 src/components/Trip/EditCodeModal.tsx    |  4 +--
 src/components/Trip/LikedToursList.tsx   |  2 +-
 src/components/Trip/TripSectionTop.tsx   |  3 ++
 src/components/Wish/Wish.tsx             |  3 ++
 src/components/search/SearchResult.tsx   |  3 ++
 9 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Plan/ScrollTopButton.tsx

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 = () => {
           <PlanItem key={date} date={date} day={DayArr[index]} />
         ))}
       />
+      <ScrollTopButton />
     </div>
   );
 };
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<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;
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<number>(0);
@@ -163,6 +164,7 @@ export default function MyReview() {
           <MyAlert title="리뷰 삭제" content="리뷰를 삭제할까요?" />
         )}
       </Modal>
+      <ScrollTopButton />
     </>
   );
 }
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 (
     <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 />
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 = () => {
             </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>
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 = () => {
       )}
 
       {/* 우리의 관심 여행지 추가 버튼 => 검색 라우터 이동 */}
-      <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">
diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx
index 730f3a65..7679645f 100644
--- a/src/components/Trip/TripSectionTop.tsx
+++ b/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>
   );
 };
diff --git a/src/components/Wish/Wish.tsx b/src/components/Wish/Wish.tsx
index 7858c79c..ffe8c8af 100644
--- a/src/components/Wish/Wish.tsx
+++ b/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>
   );
 };
diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx
index 74fbb61f..952e1e2c 100644
--- a/src/components/search/SearchResult.tsx
+++ b/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" />
     </>
   );
 };