Fix: 리스트상세 URL 변경에 따른 알림 클릭시 이동 경로 변경 (#63)

8-Sprinters · Feb 23, 2024 · eaffd8e · eaffd8e
1 parent 406700b
commit eaffd8e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
@@ -199,6 +199,23 @@ function Comments() {
     };
   }, [queryClient]);
 
+  useEffect(() => {
+    // 페이지가 로드될 때마다 실행됩니다.
+    const handleRouteChange = () => {
+      // URL에서 해시를 가져옵니다.
+      const hash = window.location.hash;
+      if (hash) {
+        // 해시가 있다면 해당 요소를 찾아 스크롤을 이동합니다.
+        const targetElement = document.getElementById('commentRef');
+        if (targetElement) {
+          targetElement.scrollIntoView({ behavior: 'smooth' });
+        }
+      }
+    };
+
+    handleRouteChange();
+  }, []);
+
   return (
     <>
       {isOn && (
@@ -217,7 +234,7 @@ function Comments() {
           isEditing={isEditing}
           handleCancel={handleCancelEdit}
         />
-        <div className={styles.totalCount}>{`${comments?.totalCount}개의 댓글`}</div>
+        <div id="commentRef" className={styles.totalCount}>{`${comments?.totalCount}개의 댓글`}</div>
         {comments?.commentsList?.map((item: CommentType) => {
           return (
             <div key={item.id} className={styles.commentWrapper}>

diff --git a/src/app/notification/_components/NotificationList.tsx b/src/app/notification/_components/NotificationList.tsx
@@ -39,18 +39,17 @@ const dataToMessage = (data: NotificationType, language: 'ko' | 'en') => {
 /**
  * 알림 데이터의 type에 따라 경로를 설정해주는 함수입니다.
  * @param data 알림 하나의 데이터
- * @param userId userId는 임시로 넣어두었습니다. TODO: 추후 삭제되어야 합니다.
  */
-const dataToPath = (data: NotificationType, userId: number) => {
+const dataToPath = (data: NotificationType) => {
   switch (data.type) {
     case 'FOLLOW':
       return `/user/${data.sendUserId}/mylist`;
     case 'COLLECT':
-      return `/user/${userId}/list/${data.listId}`;
+      return `list/${data.listId}`;
     case 'COMMENT':
-      return `/user/${userId}/list/${data.listId}#comment`;
+      return `list/${data.listId}#comment`;
     case 'REPLY':
-      return `/user/${userId}/list/${data.listId}#comment`;
+      return `list/${data.listId}#comment`;
   }
 };
 
@@ -72,7 +71,7 @@ export default function NotificationList() {
 
   const handleOnClick = (notification: NotificationType) => {
     checkNotificationMutate(notification.id);
-    router.push(dataToPath(notification, 2));
+    router.push(dataToPath(notification));
   };
 
   //첫 7일 전 알림 index 구하기
@@ -93,7 +92,6 @@ export default function NotificationList() {
   return (
     <main className={styles.main}>
       {data?.alarmList?.length === 0 ? (
-        /**TODO: NO DATA 공용 컴포넌트 사용하기 */
         <div className={styles.noData}>
           <NoDataComponent message="최근 30일 내 새로운 알림이 없어요." />
         </div>