Merge pull request #139 from codeit-sprint-part3-6team/#135_할-일-수정-Redu로-업데이트

#135 할 일 수정 redu로 업데이트

Author: twtwkim

src/components/dashboard/column/Column.tsx

@@ -12,6 +12,9 @@ import deleteColumns from '@/lib/dashboard/deleteColumns';
 import { Column as ColumnType } from '@/type/column';
 import DeleteCardsModal from '@/components/common/modal/delete-cards/DeleteCardsModal';
 import CreateCard from '@/components/product/dashboard/create-card/CreateCard';
+import { useDispatch, useSelector } from 'react-redux';
+import { toggleState } from '@/redux/renderSlice';
+import { RootState } from '@/redux/store';
 
 interface ColumnProp {
   columnId: number;
@@ -29,6 +32,13 @@ function Column({
   const [editedTitle, setEditedTitle] = useState(columnTitle);
   const [modal, setModal] = useState(false); // 카드 생성 모달 띄우기 위한 state
 
+  const dispatch = useDispatch();
+  const toggle = useSelector((state: RootState) => state.render.toggle); // Redux 상태 구독
+
+  const handleUpdate = () => {
+    dispatch(toggleState()); // Redux 상태 변경
+  };
+
   const handleClick = () => {
     // 카드 생성 모달 띄우기 위한 함수
     setModal(true);
@@ -93,8 +103,8 @@ function Column({
   const endPoint = useIntersectionObserver(handleObserver);
 
   useEffect(() => {
-    fetchCards();
-  }, [fetchCards]);
+    fetchCards({ reset: true });
+  }, [fetchCards, toggle]);
 
   return (
     <div className={styles.column}>
@@ -134,9 +144,7 @@ function Column({
               columnTitle={columnTitle}
               columnId={columnId}
               setColumnData={setColumnData}
-              onUpdate={() =>
-                fetchCards({ size: columnData.totalCount + 1, reset: true })
-              }
+              onUpdate={handleUpdate}
             />
           ),
         )}

src/components/product/dashboard/modify-card/ModifyCard.tsx

@@ -12,7 +12,6 @@ import clsx from 'clsx';
 import getColumns from '@/lib/dashboard/getColumns';
 import useColumnData from '@/hooks/useColumnData';
 import useButtonState from '@/hooks/useModifyButtonState';
-import { setCardList } from '@/redux/cardListSlice';
 import { GetColumnsResponse } from '@/type/column';
 import TagManager from '../create-card/TagManager';
 import DescriptionInput from '../create-card/DescriptionInput';
@@ -77,7 +76,7 @@ export default function ModifyCard({
     handleToggle,
     handleOptionClick,
   } = useAssigneeSelector(cardInfo?.assignee || null);
-  const { columnData, fetchCards } = useColumnData(columnId);
+  const { fetchCards } = useColumnData(columnId);
 
   // 컬럼 정보 가져오기
   useEffect(() => {
@@ -155,10 +154,6 @@ export default function ModifyCard({
     }
   }, [selectedColumnId]);
 
-  useEffect(() => {
-    dispatch(setCardList(columnData));
-  }, [columnData]);
-
   const handleSubmit = () => {
     putCardSubmit({
       image,
@@ -174,7 +169,6 @@ export default function ModifyCard({
       dashboardId,
       onUpdate,
       closeModal,
-      columnData,
       dispatch,
       initialData,
       setInitialData,

src/components/product/mypage/Main.module.css

@@ -1,5 +1,5 @@
 .container {
-  width: 672px;
+  width: 712px;
   @media screen and (max-width: 1199px) {
     width: 100%;
   }

src/lib/dashboard/putCardSubmit.ts

@@ -1,8 +1,6 @@
 import cardImageUpload from '@/lib/dashboard/cardImageUpload';
 import putCard from '@/lib/dashboard/putCard';
 import { setCardInfo } from '@/redux/cardSlice';
-import axios from '@/lib/instance';
-import { setCardList } from '@/redux/cardListSlice';
 
 const putCardSubmit = async ({
   image,
@@ -18,7 +16,6 @@ const putCardSubmit = async ({
   dashboardId,
   onUpdate,
   closeModal,
-  columnData,
   dispatch,
   initialData,
   setInitialData,
@@ -49,31 +46,10 @@ const putCardSubmit = async ({
     };
     const result = await putCard(putData, cardInfo.id);
     dispatch(setCardInfo(result)); // 수정한 카드의 데이터 리덕스에 담아
-
-    // 수정 전 컬럼의 카드 리스트 가져와
-    const prevResponse = await axios.get(`/11-6/cards/`, {
-      params: {
-        size: 4,
-        cursorId: null,
-        columnId: cardInfo.columnId,
-      },
-    });
-    console.log('prevResponse:', prevResponse.data);
-    // 수정 후 컬럼의 카드 리스트 가져와
-    const response = await axios.get(`/11-6/cards/`, {
-      params: {
-        size: columnData.totalCount + 1,
-        cursorId: null,
-        columnId: selectedColumn.id,
-      },
-    });
-
-    dispatch(setCardList(response.data)); // 수정 후 컬럼의 카드 리스트 리덕스에 담아
     setInitialData(initialData);
-    // await onUpdate(); // fetchCards({ size: columnData.totalCount + 1, reset: true }); 로 카드 리스트 초기화인데 새로고침 하면 필요없어
+    await onUpdate();
     await closeModal();
     alert('카드가 수정되었습니다.');
-    window.location.reload(); // 일단 새로고침
   } catch (error) {
     console.error('handleSubmit Error:', error);
   }

src/redux/cardListSlice.ts

@@ -0,0 +1,22 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+type RenderState = {
+  toggle: boolean;
+};
+
+const initialState: RenderState = {
+  toggle: false,
+};
+
+const renderSlice = createSlice({
+  name: 'render',
+  initialState,
+  reducers: {
+    toggleState: (state) => {
+      state.toggle = !state.toggle;
+    },
+  },
+});
+
+export const { toggleState } = renderSlice.actions;
+export default renderSlice.reducer;

src/redux/renderSlice.ts

@@ -2,11 +2,10 @@ import { configureStore } from '@reduxjs/toolkit';
 import { UserInfoState } from '@/type/userInfo';
 import { DashboardState } from '@/type/dashboard';
 import { CardInfoState } from '@/type/card';
-import { ColumnState } from '@/type/card';
 import userInfoReducer from './settingSlice';
 import dashboardReducer from './dashboardSlice';
 import cardInfoReducer from './cardSlice';
-import cardListReducer from './cardListSlice';
+import renderReducer from './renderSlice';
 
 // 스토리지 선택 함수 (localStorage 또는 sessionStorage)
 const getStorage = () => {
@@ -40,17 +39,17 @@ const store = configureStore({
     userInfo: userInfoReducer,
     dashboard: dashboardReducer,
     cardInfo: cardInfoReducer,
-    cardList: cardListReducer,
+    render: renderReducer,
   } as any,
   preloadedState: loadState() as { userInfo: UserInfoState }, // 새로 고침 되어도 이전 상태 유지
 });
 
 // 상태와 디스패치 타입 정의
 export type RootState = {
+  render: any;
   userInfo: UserInfoState;
   dashboard: DashboardState;
   cardInfo: CardInfoState;
-  cardList: ColumnState;
 };
 export type AppDispatch = typeof store.dispatch;