개인 대시보드 QA & 무한 스크롤 오류

src/api/PersonalBlockApi.ts

@@ -27,11 +27,9 @@ export const patchPersonalBlock = async (
   try {
     const response = await axiosInstance.patch(`/blocks/${blockId}`, data);
     console.log(response.data);
-
-    return response.data.data.blockId;
+    return response.data;
   } catch (error) {
     console.error('Error fetching data:', error);
-
     return null;
   }
 };

src/components/Block.tsx

@@ -1,15 +1,11 @@
 import Flex from './Flex';
-import edit from '../img/edit.png';
-import deleteicon from '../img/delete.png';
 import * as S from '../styles/DashboardStyled';
 import { Draggable } from 'react-beautiful-dnd';
 import { useNavigate } from 'react-router-dom';
 import CustomModal from './CustomModal';
-import { dashboardType } from '../contexts/DashboardAtom';
-import { Link } from 'react-router-dom';
 import Profile from './Profile';
 import useModal from '../hooks/useModal';
-import { realDeleteBlock, restoreBlockFunc } from '../api/PersonalBlockApi';
+import { getPersonalBlock, realDeleteBlock, restoreBlockFunc } from '../api/PersonalBlockApi';
 import { useEffect, useState } from 'react';
 import { useAtom } from 'jotai';
 import { fetchTriggerAtom } from '../contexts/atoms';
@@ -94,7 +90,7 @@ const Block = ({
             >
               <Flex justifyContent="space-between">
                 <h3>{title}</h3>
-                <span>D-{dDay}</span>
+                <span>D-{dDay === -1 ? 0 : dDay}</span>
               </Flex>
               {dType === 'PersonalDashboard' ? (
                 <p>{contents}</p>

src/components/CompletedDashboard.tsx

@@ -2,23 +2,22 @@ import { useNavigate, Outlet } from 'react-router-dom';
 import Block from './Block';
 import * as S from '../styles/DashboardStyled';
 import { createPersonalBlock } from '../api/PersonalBlockApi';
-import SidePage from '../pages/SidePage';
 import { Droppable } from 'react-beautiful-dnd';
 import theme from '../styles/Theme/Theme';
 import main2 from '../img/main2.png';
 import { BlockListResDto } from '../types/PersonalBlock';
+import { useInView } from 'react-intersection-observer';
+import { useEffect } from 'react';
 
 type Props = {
-  // list: StatusPersonalBlock | undefined;
   list: BlockListResDto[];
   id: string;
   dashboardId: string;
+  onLoadMore: () => void;
 };
 
-const CompletedDashboard = ({ list, id, dashboardId }: Props) => {
+const CompletedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
   const navigate = useNavigate();
-  // const blocks = list.flatMap((item: StatusPersonalBlock) => item.blockListResDto);
-  // const blocks = list?.blockListResDto;
 
   const settings = {
     backGroundColor: '#F7F1FF',
@@ -50,6 +49,17 @@ const CompletedDashboard = ({ list, id, dashboardId }: Props) => {
     navigate(`personalBlock/${blockId}`, { state: { highlightColor, progress, blockId } });
   };
 
+  // 세로 무한 스크롤
+  const { ref: lastBlockRef, inView } = useInView({
+    threshold: 0, // 마지막 블록이 0% 보였을 때를 감지
+  });
+
+  useEffect(() => {
+    if (inView) {
+      onLoadMore(); // 부모 컴포넌트에 새로운 데이터 요청
+    }
+  }, [inView]);
+
   return (
     <S.CardContainer backGroundColor={settings.backGroundColor}>
       <header>
@@ -67,20 +77,24 @@ const CompletedDashboard = ({ list, id, dashboardId }: Props) => {
             className="container"
             {...provided.droppableProps}
           >
-            {list?.map((block, index) => (
-              <Block
-                dashboardId={dashboardId}
-                key={block.blockId}
-                index={index}
-                title={block.title ?? ''}
-                dDay={block.dDay ?? 0}
-                contents={block.contents ?? ''}
-                blockId={block.blockId ?? '0'}
-                dType={block.dType ?? 'TeamDashboard'}
-                name={block.nickname ?? '이름 없음'}
-                picture={block.picture ?? ''}
-              />
-            ))}
+            {list?.map((block, index) => {
+              const isLastBlock = index === list.length - 1;
+              return (
+                <div key={block.blockId}>
+                  <Block
+                    dashboardId={dashboardId}
+                    index={index}
+                    title={block.title ?? ''}
+                    dDay={block.dDay ?? 0}
+                    contents={block.contents ?? ''}
+                    blockId={block.blockId ?? '0'}
+                    dType={block.dType ?? 'TeamDashboard'}
+                    name={block.nickname ?? '이름 없음'}
+                    picture={block.picture ?? ''}
+                  />
+                </div>
+              );
+            })}
             {provided.placeholder}
           </S.BoxContainer>
         )}
@@ -90,3 +104,6 @@ const CompletedDashboard = ({ list, id, dashboardId }: Props) => {
   );
 };
 export default CompletedDashboard;
+function onLoadMore() {
+  throw new Error('Function not implemented.');
+}

src/components/DeleteButton.tsx

@@ -4,8 +4,6 @@ import * as S from '../styles/MainPageStyled';
 import { Droppable } from 'react-beautiful-dnd';
 import Block from './Block';
 import { BlockListResDto } from '../types/PersonalBlock';
-import CustomModal from './CustomModal';
-import useModal from '../hooks/useModal';
 
 interface Props {
   id: string;
@@ -23,6 +21,7 @@ const DeleteButton = ({ id, list, removeValue }: Props) => {
   const onBlockIdHandler = (num: string | null | undefined) => {
     if (num) setBlockId(num);
   };
+
   return (
     <S.DeleteContainer>
       {value && (
@@ -64,13 +63,6 @@ const DeleteButton = ({ id, list, removeValue }: Props) => {
       <S.DeleteIconWrapper onClick={onValueFunction}>
         <img src={deleteicon} alt="휴지통아이콘" />
       </S.DeleteIconWrapper>
-      {/* {isModalOpen && (
-        <CustomModal
-          title={info.title}
-          subTitle={info.subTitle}
-          onClose={onModalHandler}
-        />
-      )} */}
     </S.DeleteContainer>
   );
 };

src/components/Graph.tsx

@@ -1,4 +1,6 @@
+import { useState } from 'react';
 import * as S from '../styles/DashboardStyled';
+import Flex from './Flex';
 
 type GraphProps = {
   blockProgress: number;
@@ -7,9 +9,12 @@ type GraphProps = {
 const Graph = ({ blockProgress }: GraphProps) => {
   return (
     <S.GraphContainer>
-      <S.GraphProgress blockProgress={blockProgress}>
-        <p>{blockProgress}%</p>
-      </S.GraphProgress>
+      <Flex>
+        <S.GraphWrapper>
+          <S.GraphProgress blockProgress={blockProgress}></S.GraphProgress>
+        </S.GraphWrapper>
+        <span>{blockProgress}%</span>
+      </Flex>
     </S.GraphContainer>
   );
 };

src/components/Header.tsx

@@ -2,9 +2,7 @@ import Graph from '../components/Graph';
 import Flex from './Flex';
 import setting from '../img/setting.png';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import leftarrow from '../img/leftarrow.png';
 import * as S from '../styles/HeaderStyled';
-import { dashboardType } from '../contexts/DashboardAtom';
 
 type Props = {
   mainTitle: string;
@@ -18,10 +16,6 @@ const Header = ({ mainTitle, subTitle, blockProgress, dashboardType }: Props) =>
   const location = useLocation();
   const dashboardId = location.pathname.split('/')[1];
 
-  const handleBackClick = () => {
-    navigate(-1);
-  };
-
   // URL에 "teamdocument"가 포함되어 있는지 확인하는 함수
   // => 전역 변수로 개인 대시보드인지 팀 대시보드인지 확인할 예정이라 주석 처리
   // const teamLocationUrl = location.pathname.includes('teamdocument') ?? true;
@@ -56,6 +50,7 @@ const Header = ({ mainTitle, subTitle, blockProgress, dashboardType }: Props) =>
         </S.HeaderContentContainer>
         <Flex>
           <Graph blockProgress={blockProgress} />
+
           {!dashboardType && (
             <Link to={`/${dashboardId}/teamdocument`}>
               <S.TeamDocButton>팀문서</S.TeamDocButton>

src/components/InProgressDashboard.tsx

@@ -7,15 +7,17 @@ import { Droppable } from 'react-beautiful-dnd';
 import theme from '../styles/Theme/Theme';
 import main from '../img/main.png';
 import { BlockListResDto } from '../types/PersonalBlock';
+import { useInView } from 'react-intersection-observer';
+import { useEffect } from 'react';
 
 type Props = {
-  // list: StatusPersonalBlock | undefined;
   list: BlockListResDto[];
   id: string;
   dashboardId: string;
+  onLoadMore: () => void;
 };
 
-const InProgressDashboard = ({ list, id, dashboardId }: Props) => {
+const InProgressDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
   const navigate = useNavigate();
   // const blocks = list.flatMap((item: StatusPersonalBlock) => item.blockListResDto);
   // const blocks = list?.blockListResDto;
@@ -50,6 +52,16 @@ const InProgressDashboard = ({ list, id, dashboardId }: Props) => {
     navigate(`personalBlock/${blockId}`, { state: { highlightColor, progress, blockId } });
   };
 
+  // 세로 무한 스크롤
+  const { ref: lastBlockRef, inView } = useInView({
+    threshold: 0, // 마지막 블록이 0% 보였을 때를 감지
+  });
+
+  useEffect(() => {
+    if (inView) {
+      onLoadMore(); // 부모 컴포넌트에 새로운 데이터 요청
+    }
+  }, [inView]);
   return (
     <S.CardContainer backGroundColor={settings.backGroundColor}>
       <header>
@@ -67,20 +79,24 @@ const InProgressDashboard = ({ list, id, dashboardId }: Props) => {
             className="container"
             {...provided.droppableProps}
           >
-            {list?.map((block, index) => (
-              <Block
-                dashboardId={dashboardId}
-                key={block.blockId}
-                index={index}
-                title={block.title ?? ''}
-                dDay={block.dDay ?? 0}
-                contents={block.contents ?? ''}
-                blockId={block.blockId ?? '0'}
-                dType={block.dType ?? 'TeamDashboard'}
-                name={block.nickname ?? '이름 없음'}
-                picture={block.picture ?? ''}
-              />
-            ))}
+            {list?.map((block, index) => {
+              const isLastBlock = index === list.length - 1;
+              return (
+                <div key={block.blockId}>
+                  <Block
+                    dashboardId={dashboardId}
+                    index={index}
+                    title={block.title ?? ''}
+                    dDay={block.dDay ?? 0}
+                    contents={block.contents ?? ''}
+                    blockId={block.blockId ?? '0'}
+                    dType={block.dType ?? 'TeamDashboard'}
+                    name={block.nickname ?? '이름 없음'}
+                    picture={block.picture ?? ''}
+                  />
+                </div>
+              );
+            })}
             {provided.placeholder}
           </S.BoxContainer>
         )}

src/components/NotStartedDashboard.tsx

@@ -2,18 +2,14 @@ import { useNavigate, Outlet } from 'react-router-dom';
 import Block from './Block';
 import * as S from '../styles/DashboardStyled';
 import { createPersonalBlock } from '../api/PersonalBlockApi';
-import { useAtom } from 'jotai';
-import { visibleAtom } from '../contexts/sideScreenAtom';
-import SidePage from '../pages/SidePage';
 import { Droppable } from 'react-beautiful-dnd';
 import theme from '../styles/Theme/Theme';
 import main3 from '../img/main3.png';
-import { BlockListResDto, StatusPersonalBlock } from '../types/PersonalBlock';
+import { BlockListResDto } from '../types/PersonalBlock';
 import { useInView } from 'react-intersection-observer';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 type Props = {
-  // list: StatusPersonalBlock | undefined;
   list: BlockListResDto[];
   id: string;
   dashboardId: string;
@@ -60,6 +56,7 @@ const NotStartedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
 
   useEffect(() => {
     if (inView) {
+      console.log('되긴함?');
       onLoadMore(); // 부모 컴포넌트에 새로운 데이터 요청
     }
   }, [inView]);
@@ -83,21 +80,10 @@ const NotStartedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
             className="container"
             {...provided.droppableProps}
           >
-            {/* {list?.map((block, index) => (
-              <Block
-                dashboardId={dashboardId}
-                key={block.blockId}
-                index={index}
-                title={block.title ?? ''}
-                dDay={block.dDay ?? 0}
-                contents={block.contents ?? ''}
-                blockId={block.blockId ?? '0'}
-              />
-            ))} */}
             {list?.map((block, index) => {
               const isLastBlock = index === list.length - 1;
               return (
-                <div key={block.blockId} ref={isLastBlock ? lastBlockRef : null}>
+                <div key={block.blockId}>
                   <Block
                     dashboardId={dashboardId}
                     index={index}

src/hooks/useSSE.ts

@@ -4,6 +4,7 @@ import { EventSourcePolyfill } from 'event-source-polyfill';
 import { unreadCount } from '../contexts/sseAtom';
 import { customErrToast } from '../utils/customErrorToast';
 import { NotificationResponse } from '../types/MyPage';
+import { apiBaseUrl } from '../utils/apiConfig';
 
 const sseConnectedAtom = atom(false); // SSE 연결 상태
 const sseMessagesAtom = atom<string[]>([]); // SSE 메시지 상태
@@ -26,18 +27,15 @@ export const useSSE = (
     }
 
     // SSE 연결 설정
-    eventSource.current = new EventSourcePolyfill(
-      'https://dev.kkeujeok.store/api/notifications/stream',
-      {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
-          Connection: '',
-          Accept: 'text/event-stream',
-        },
-        heartbeatTimeout: 259200,
-        withCredentials: true,
-      }
-    );
+    eventSource.current = new EventSourcePolyfill(`${apiBaseUrl}/notifications/stream`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+        Connection: '',
+        Accept: 'text/event-stream',
+      },
+      heartbeatTimeout: 86400000,
+      withCredentials: true,
+    });
 
     // 메시지 수신 처리
     eventSource.current.onmessage = event => {