#80 refactor: 사이드 페이지에서 상태 태그 뜨도록 수정

AJD-Archive · Sep 24, 2024 · 6238c57 · 6238c57
1 parent 57c9ea4
commit 6238c57
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/src/components/Block.tsx b/src/components/Block.tsx
@@ -23,6 +23,8 @@ type Props = {
   dType: string | undefined;
   name: string | undefined;
   picture?: string;
+  progress?: string;
+  highlightColor?: string;
 };
 
 const Block = ({
@@ -37,6 +39,8 @@ const Block = ({
   dType,
   name,
   picture,
+  progress,
+  highlightColor,
 }: Props) => {
   const [isRemove, setIsRemove] = useState(true);
   const { isModalOpen, openModal, handleYesClick, handleNoClick } = useModal();
@@ -45,7 +49,10 @@ const Block = ({
   const navigate = useNavigate();
 
   const clickHandler = () => {
-    navigate(`personalBlock/${blockId}`);
+    // navigate(`personalBlock/${blockId}`);
+    navigate(`personalBlock/${blockId}`, {
+      state: { highlightColor, progress },
+    });
   };
   const removeFunc = async () => {
     if (blockId) {

diff --git a/src/components/CompletedDashboard.tsx b/src/components/CompletedDashboard.tsx
@@ -77,7 +77,6 @@ const CompletedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
             className="container"
             {...provided.droppableProps}
           >
-
             {/* {list?.map((block, index) => (
               <Block
                 dashboardId={dashboardId}
@@ -106,6 +105,8 @@ const CompletedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
                     dType={block.dType ?? 'TeamDashboard'}
                     name={block.nickname ?? '이름 없음'}
                     picture={block.picture ?? ''}
+                    progress={settings.progress ?? ''}
+                    highlightColor={settings.highlightColor ?? ''}
                   />
                 </div>
               );

diff --git a/src/components/InProgressDashboard.tsx b/src/components/InProgressDashboard.tsx
@@ -10,7 +10,6 @@ import { BlockListResDto } from '../types/PersonalBlock';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
-
 type Props = {
   list: BlockListResDto[];
   id: string;
@@ -50,7 +49,9 @@ const InProgressDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
     // console.log(blockId);
 
     const { highlightColor, progress } = settings;
-    navigate(`personalBlock/${blockId}`, { state: { highlightColor, progress, blockId } });
+    navigate(`personalBlock/${blockId}`, {
+      state: { highlightColor, progress, blockId },
+    });
   };
 
   // 세로 무한 스크롤
@@ -81,7 +82,6 @@ const InProgressDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
             className="container"
             {...provided.droppableProps}
           >
-
             {/* {list?.map((block, index) => (
               <Block
                 dashboardId={dashboardId}
@@ -110,6 +110,8 @@ const InProgressDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
                     dType={block.dType ?? 'TeamDashboard'}
                     name={block.nickname ?? '이름 없음'}
                     picture={block.picture ?? ''}
+                    progress={settings.progress ?? ''}
+                    highlightColor={settings.highlightColor ?? ''}
                   />
                 </div>
               );

diff --git a/src/components/NotStartedDashboard.tsx b/src/components/NotStartedDashboard.tsx
@@ -8,6 +8,7 @@ import main3 from '../img/main3.png';
 import { BlockListResDto } from '../types/PersonalBlock';
 import { useInView } from 'react-intersection-observer';
 import { useEffect } from 'react';
+import { progress } from 'framer-motion';
 
 type Props = {
   list: BlockListResDto[];
@@ -83,7 +84,7 @@ const NotStartedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
             {list?.map((block, index) => {
               const isLastBlock = index === list.length - 1;
               return (
-                <div key={block.blockId}>
+                <div key={block.blockId} ref={isLastBlock ? lastBlockRef : null}>
                   <Block
                     dashboardId={dashboardId}
                     index={index}
@@ -94,6 +95,8 @@ const NotStartedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
                     dType={block.dType ?? 'TeamDashboard'}
                     name={block.nickname ?? '이름 없음'}
                     picture={block.picture ?? ''}
+                    progress={settings.progress ?? ''}
+                    highlightColor={settings.highlightColor ?? ''}
                   />
                 </div>
               );