Merge pull request #313 from prgrms-web-devcourse-final-project/feat/modal-scroll-lock

[feat] scrollLock state 전달하여 스크롤 이동 제어

Author: kangsuyeong

src/components/ScrollToTop.tsx

@@ -2,9 +2,11 @@ import { useEffect } from 'react';
 import { useLocation } from 'react-router';
 
 function ScrollToTop() {
-  const { pathname } = useLocation();
+  const { pathname, state } = useLocation();
 
   useEffect(() => {
+    if (state?.scrollLock) return; // scrollLock이 true면 스크롤 안 함
+
     window.scrollTo({
       top: 0,
     });

src/components/modalSheet/BackLink.tsx

@@ -7,7 +7,11 @@ const BackLink = () => {
   pathSegments.pop(); // 마지막 세그먼트 제거
   const newPath = '/' + pathSegments.join('/');
   return (
-    <Link to={newPath} className="flex items-center justify-center w-6 h-6 cursor-pointer">
+    <Link
+      to={newPath}
+      state={{ scrollLock: true }}
+      className="flex items-center justify-center w-6 h-6 cursor-pointer"
+    >
       <img src={closeIcon} alt="닫기" />
     </Link>
   );

src/components/user/EmotionRecordCardList.tsx

@@ -21,7 +21,11 @@ function EmotionRecordCardList({ records, basePath }: EmotionRecordCardListProps
         <EmotionRecordCard
           key={record.recordId}
           record={record}
-          onClick={() => navigate(`${basePath}/${record.recordId}`)}
+          onClick={() =>
+            navigate(`${basePath}/${record.recordId}`, {
+              state: { scrollLock: true },
+            })
+          }
         />
       ))}
     </div>

src/layouts/bottomNav/BottomNav.tsx

@@ -43,7 +43,7 @@ export default function BottomNav() {
     //메인 페이지
     location.pathname === '/home' ||
     //마이 페이지
-    location.pathname === '/mypage' ||
+    location.pathname.startsWith('/mypage') ||
     //유저 페이지
     location.pathname.startsWith('/user') ||
     //지난 대화 기록 페이지