[11] 개발 - gpt막쓰지말자

아 사실은 todo 다 해결 안 됐는데 저번 10번에서 다 됐다고 구라쳤어요

다했다(희망)이었던 것이였어요

 

 

수정할 때 수정이 되긴하는데 한 글자 씩 입력되고 자꾸 포커싱 풀리고

또 고치니까 수정ㅇ이 안된대요어ㅑㅐ래ㅑㅈㄷ러ㅓ재러ㅐㅓㅁ래저럼쟈ㅐ럼ㄷ재러대럼ㅈㄹ

개빡쳐

 

왜 이렇게됐는가

 

사실 투두는 너무 복잡해서 지피티한테 뇌를 맡겼어요

그래서 똑똑하지만 멍청한 지피티가

똑똑하지만 멍청한 결과물을 내놨어요

 

그래서 

코드하나하나 다시 뜯어보려고요;;

뭐가문젠데 ㅠ

 

[todo 상태]

        const [todos, setTodos] = useState({

            inProgress: [],

            completed: [],

            feedbackPending: [],

        });

 

우선 이거는 todo 상태관리 변수예요.

inProgress가 진행 중 completed가 완료 feedbackPending이 피드백 대기중

솔직히 지피티새기 피드백 대기중을 걍 feedbackWaiting으로 짓지 pending같은 말 써서 킹받아요

근데이제 고칠 수없는 강을 건너버렸기 때문에 패스

 

[todo 수정 변수]

        const handleEdit = (id, content, dueDate) => {

            setEditingId(id);

            setLocalEditContent(content);

            setLocalEditDueDate(dueDate);

        };

 

사용자가 수정 버튼 누르면 editingId에 수정 할 todo id가 저장돼요

localEdit이랑 localEditDue는 사용자가 수정한 내용들이에요

 

[todo 가져오기]

    // 투두 데이터 가져오기

        const fetchTodos = async () => {

            try{

                const response = await fetch(`http://127.0.0.1:8008/projects/${Pg_id}/todos`);

                const data = await response.json();

                const inProgress = [];

                const completed = [];  

                const feedbackPending = [];

                for ( const todo of data){

                    const statusResponse = await fetch(`http://127.0.0.1:8008/todos/${todo.id}/status`);

                    const statusData = await statusResponse.json();

                    switch (statusData.status) {

                        case 'in_progress':

                            inProgress.push({id:todo.id, content: todo.text, dueDate: todo.deadline, completed: false});

                            break;

                        case 'completed':

                            completed.push({id:todo.id, content: todo.text, dueDate: todo.deadline, completed: true});

                            break;

                        case 'waiting_feedback':

                            feedbackPending.push({id:todo.id, content: todo.text, dueDate: todo.deadline, completed: false});

                            break;

                } }

                setTodos({ inProgress, completed, feedbackPending });

                updateTodoCounts();

            }catch(error){

                console.error(error.message);

        };};

api에 Pg아이디 넘겨줘서 pg_id를 가지고 있는 todo를 모두 가져온 뒤

todo library를 쓰기위해 적어줍니다

 

setTodos에 분별한 내용들 넣어주고요

위에 todo Status 개수 리로딩을 위해 update합니다.

 

 

 

[마감일 넘기면 옮기기]

        useEffect(() => {

            const today = new Date();

            const updatedTodos = { ...todos };

            Object.keys(updatedTodos).forEach((status) => {

                updatedTodos[status].forEach((item) => {

                    const due = new Date(item.dueDate);

                    if (due < today && status !== 'completed') {

                        const itemToMove = updatedTodos[status].splice(

                            updatedTodos[status].findIndex((i) => i.id === item.id),

                            1

                        )[0];

                        updatedTodos.completed.push({ ...itemToMove, completed: true });

                    }

                });

            });

            setTodos(updatedTodos);

        }, []);

       

 

이건 마감일이 지나면 자동으로 complete로 옮겨주는 코드입니다.

페이지 로드시에만 되고 현재 todos중에서 completed이 아니며 마감일이 오늘보다 이전인 것들을 

completed로 옮깁니다.

 

[이제진짜 수정관련]

        const saveEdit = async (id, status, userId, start_day) => {

            if (!todos[status]) return;

            const existingTodo = todos[status].find((item) => item.id === id);

            if (!existingTodo) {

                console.error("해당 Todo를 찾을 수 없습니다.");

                return;

            }

            const updatedData = {

                text: editContent,

                user_id: username,

                deadline: editDueDate,

                start_day: existingTodo.start_day,  

                project_id: Pg_id,

            };

            try {

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

                    method: "PUT",

                    headers: {

                        "Content-Type": "application/json",

                    },

                    body: JSON.stringify({

                        text: editContent,

                        user_id: username,

                        deadline: editDueDate,

                        start_day: "2025-02-02",

                        project_id: Pg_id,

                    }),

                });

       

                if (!response.ok) {

                    return;

                }

       

                // 정상 응답 시 상태 업데이트

                setTodos((prevTodos) => ({

                    ...prevTodos,

                    [status]: prevTodos[status].map((item) =>

                        item.id === id ? { ...item, content: editContent, dueDate: editDueDate } : item

                    ),

                }));

                setEditingId(null);

       

            } catch (error) {

            }

        };

 

            try {

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

                    method: "PUT",

                    headers: {

                        "Content-Type": "application/json",

                    },

                    body: JSON.stringify({

                        text: localEditContent,

                        user_id: username,

                        deadline: localEditDueDate.includes('.')

                            ? localEditDueDate.replaceAll('.', '-')

                            : localEditDueDate,                    

                        start_day: '2025-04-01',

                        project_id: Pg_id,

                    }),

                });

       

                if (!response.ok) {

                    return;

                }

       

                // 정상 응답 시 상태 업데이트

                setTodos((prevTodos) => ({

                    ...prevTodos,

                    [status]: prevTodos[status].map((item) =>

                        item.id === id ? { ...item, content: localEditContent, dueDate: updatedData.deadline } : item

                    ),

                }));

                setEditingId(null);

       

            } catch (error) {

            }

        };

       

 

 

아 이제진짜됐다

start_day수정하는칸만 deadline처럼 수정하면 될 듯

인풋문제는

            useEffect(() => {

                if (editingId === id && inputRef.current) {

                    inputRef.current.focus();

                }

            }, [editingId]);

 

이걸로 에딧중일때는 focus강제로 유지하게해줫고

날짜문제는 날짜 그 기본 그걸로 클릭하면 2025.01.05처럼 포맷돼서 안되는거였음 

내가 모델짤때 2025-05-08로 해뒀거든....

 

강제포맷변경으로 됨 ^^