찍찍이 #할 일 생성 및 수정 (공통 데이터 관리 및 상태 관리 통합)

내가 느끼기에는 생성, 수정, 삭제 중에 가장 까다롭다고 생각하는 부분이 수정이라고 생각함.
왜냐하면 생성과 삭제는 post delete 요청으로 body에 data 혹은 파라미터로 id를 전달해주면 간단한 부분인데
수정에서는 직접 데이터를 가져와서 따로 저장해두고 다시 보내야하는 부분이라 효율적인 관리가 필요했다.

하지만 api swagger에서 요구했던 할 일 생성, 수정 관련 데이터가 달라서 약간 당황했다.

export interface CreateTodosRequest { //할일 생성 요구 데이터
  title: string;
  startDate: string;
  endDate: string;
  todoLink?: string;
  imageName?: string;
  imageEncodedBase64?: string;
  goalId: number;
}

export interface ModifyTodosRequest {
  title: string;
  startDate: string;
  endDate: string;
  todoStatus: string;
  todoLink?: string;
  imageName?: string;
  imageEncodedBase64?: string;
}

언뜻 비슷해보이지만 약간 다르다.

따라서 기존의 할 일 생성을 위해 작성한 zustand 코드의 리팩토링이 필요했다.
나는 할 일 생성, 수정 따로 store를 만들어서 저장하고 싶지 않았다. 왜냐하면 한 파일에서 구현이 가능할꺼라고 생각했다.

가장 중요한 부분은 초기화 처리만 잘 해주면 될꺼라고 생각.

//CommonTodoData.ts
export const COMMON_TODO_DATA = {
  title: '',
  startDate: '',
  endDate: '',
  todoLink: '',
  todoStatus: '',
  todoId: 0,
  imageName: '',
  imageEncodedBase64: '',
  goalId: 0,
  goalTitle: '',
};


//useTodoDataStore.ts
import { create } from 'zustand';
import { CreateTodosRequest } from '@/types/Todos/CreateTodos/CreateTodosRequest';
import { COMMON_TODO_DATA } from '@/constants/Todos/CommonTodoData';
import { ModifyTodosRequest } from '@/types/Todos/ModifyTodos/ModifyTodosRequest';
import { getCreateTodoData, getModifyTodoData } from '@/utils/todoDataMappers';

interface TodoDataStore {
  todoData: typeof COMMON_TODO_DATA;
  setTodoData: (newData: Partial<typeof COMMON_TODO_DATA>) => void;
  resetFile: () => void;
  resetLink: () => void;
  resetAll: () => void;
  getCreateTodoData: () => CreateTodosRequest;
  getModifyTodoData: () => ModifyTodosRequest;
}

export const useTodoDataStore = create<TodoDataStore>((set, get) => ({
  todoData: { ...COMMON_TODO_DATA },
  setTodoData: (newData: Partial<typeof COMMON_TODO_DATA>) =>
    set((state) => ({
      todoData: { ...state.todoData, ...newData },
    })),
  resetFile: () =>
    set((state) => ({
      todoData: { ...state.todoData, imageEncodedBase64: '', imageName: '' },
    })),
  resetLink: () =>
    set((state) => ({
      todoData: { ...state.todoData, todoLink: '' },
    })),
  resetAll: () => set({ todoData: { ...COMMON_TODO_DATA } }),

  getCreateTodoData: () => getCreateTodoData(get().todoData),

  getModifyTodoData: () => getModifyTodoData(get().todoData),
}));

COMMON_TODO_DATA라는 할 일 생성, 수정을 모두 포함한 상수를 만들고 할 일 생성(CreateTodosRequest) 및 수정(ModifyTodosRequest) 요청 데이터의 변환 로직을 작성하여 공통 데이터를 활용해 데이터 정의 및 관리의 일관성을 확보할 수 있었음.

해당 작업이 코드 중복 감소, 가독성 향상, 유지보수성의 효과를 가져왔다.