[10] 개발 - 대시보드, todo Status, 할 일 관리 개발

안냐쎄요

 

 

이거 두 개 할거예요

 

 

저게 시각적으로만 다르지 데이터는 똑같아서 데이터 연동만 잘 해주면 되겠심다.

 

 

 

< 벌써 생긴 문제 >

모델 issue입니다.

 

하... 멍청하게 어느 project인지 fk연결을 안 해 둬서;;;;;;;;;;;;;;;;;;;;;;;;;;;

이번에도 redis 써야 해요

 

✅ 방법 2: Redis Set 사용하기

Set을 활용하면 필드 없이 Todo ID들만 저장할 수 있습니다.

구조 예시     Key: project:{project_id}:todos Value: Set of todo IDs

예시            project:abc123:todos -> {todo1, todo2, todo3} project:def456:todos -> {todo4, todo5}

 

 

이렇게 할 거 예요

뭐랄까

todo 정보자체는 postgreSQL에 맡기는데 

project와 todo 매핑은 redis에 맡기는거죠

 

< 해결 >

1. todo 저장 postgreSQL with 기존 model + redis with 새로운 project매핑

2. Redis 를활용하여 3개의 status 매핑

3. 매핑 이용하여 출력

 

좀복잡하지만 생각보다

...

더 복잡합니다 

 

 

 

1. todoStatus연동

 

여기에 진행중이라면 in_progress상태 todo 개수넣고 완료면 completed 프드백대기중이면 waiting_feedback개수 가져오게할겁니다.

 

 

미안해요 어제 다 해결하고 오늘이 다음 날인데 어케했는지 까먹었어요

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

...;;;

 

대충 쓴 함수만 올려볼게요

        const handleDragEnd = async (event) => {

            const { active, over } = event;

            if (active.id === over?.id) return;

       

            const activeContainer = Object.keys(todos).find((key) =>

                todos[key].some((item) => item.id === active.id)

            );

       

            if (!activeContainer) return;

       

            const overContainer = over?.data?.current?.status || over?.id;

       

            setTodos((prevTodos) => {

                const newTodos = { ...prevTodos };

                const sourceItems = [...newTodos[activeContainer]];

                const activeIndex = sourceItems.findIndex((item) => item.id === active.id);

                const [movedItem] = sourceItems.splice(activeIndex, 1);

       

                if (!overContainer) {

                    newTodos[activeContainer] = [...sourceItems, movedItem];

                    return newTodos;

                }

       

                const destItems = [...newTodos[overContainer]];

                destItems.push(movedItem);

                newTodos[activeContainer] = sourceItems;

                newTodos[overContainer] = destItems;

       

                const newStatusMap = {

                    inProgress: "in_progress",

                    completed: "completed",

                    feedbackPending: "waiting_feedback",

                };

       

                fetch(`http://127.0.0.1:8008/todos/${active.id}/status?status=${newStatusMap[overContainer]}`, {

                    method: "POST",

                })

                    .then((res) => {

                        if (!res.ok) {

                            console.error("ㅉㅉ");

                        } else {

                            fetchTodos();

                            updateTodoCounts();

                        }

                    })

                    .catch((err) => console.error(err));

       

                return newTodos;

            });

        };

 

todo list에서 드래그가 일어나면

현재 todo id랑 status의 상태를 추가로 입력해줘서

db에 업데이트합니다

실패하지않다면 todo status 상태 업데이트 함수 fetchTodos()다시 호출해서 현재 상태 db에 저장하게하고

새로고침 안 해도 리로드 되게 updateTodoCounts()호출해줍니다.

        const updateTodoCounts = () => {

            if (Pg_id) {

                todoCount("in_progress", setInProgressCount);

                todoCount("completed", setCompletedCount);

                todoCount("waiting_feedback", setWaitingFeedbackCount);

                setTotalCount(inProgressCount + completedCount + waitingFeedbackCount);

            }

        };

업뎃 카운트는 걍 db에 있는 inprogress completed waiting feedback 다시 세보는거예요

 

이게 옮기면

 

새로고침 안 해도 일케돼요

 

 

힛

 

 

 

2. 수정 삭제 버튼 db와 연동

 

지금 수정 삭제 줄긋기버튼 문제점

1. 수정 버튼 클릭하면 수정되긴하는데;;;; 한 글자씩 입력돼서 사람 갑갑하게 함

2. db에 연동안돼서 새로고침하면 없어짐

 

 

우선 연동부터할게요

 

 

기존의 삭제 핸들러

        const handleDelete = async (id, status) => {

            if (!todos[status]) return;

       

            try {

                const response = await fetch(`http://127.0.0.1:8008/todos/${id}?project_id=${Pg_id}`, {

                    method: "DELETE",

                });

                setTodos((prevTodos) => ({

                    ...prevTodos,

                    [status]: prevTodos[status].filter((item) => item.id !== id),

                }));

                fetchTodos();

                updateTodoCounts();

       

            } catch (error) {

            }

        };

       

 

삭제 Api만들어서 id랑 프로젝트 아이디 넣어주고 다시 fetch status해줍니다.

 

 

미안해요 이것도 어제 하다가 빡쳐서 컴 껐는데 뭔가 돼 있네요

ㄱㅇㄷ

저기이상한 영어들이 수정인풋한 거예요

 

ㅎㅎ..

아 이제 뭐 해야하지... 

(할 것 들)