[Fix]: Zustand persist 상태 및 migrate 로직 수정 & 목표 추천 로딩 스피너 오버레이 영역 스타일 수정

[mamonde456]

[Fix]: [Fix]: Zustand persist 상태 및 migrate 로직 수정 & 목표 추천 로딩 스피너 오버레이 영역 스타일 수정

추가된 내용 (Description)

새로고침 후 텍스트 입력 시 changedCells.add 오류로 텍스트가 입력되지 않는 문제를 해결하기 위해 mandalart store 코드를 수정했습니다. 로컬 스토리지에 partialize state를 저장하고 있는데, 최신 버전이 아닌 1~3 버전까지는 changedCells의 값이 {} 로 저장되어 발생하는 문제 같습니다. Zustand persist의 기본 저장 방식은 JSON 기반이라서, Set() 형식으로 저장해도 결과적으로 {} 으로 저장됩니다. 앱을 실행하면 hydrate을 통해 Set으로 변환합니다.

그러나

특정 사용자의 로컬 스토리지에 {}로 저장되어 있고 이걸 불러오는 과정에서 에러가 발생하는 것 같습니다.

그 외

목표 추천 시 로딩 스피너가 생기면서 background 영역에 white 오버레이 영역이 cells 영역을 전체 커버하지 못하는 현상이 있었습니다. 부모 요소의 padding 값으로 생긴 스타일 오류이기 때문에 삭제했습니다.

변경 사항

• mandalart store의 버전을 4로 변경하고, 반환 state를 state.data만 하도록 수정.
• 목표 추천 로딩 스피너의 white 오버레이 영역 수정

왜 변경했는지 (배경/문제점):

버전 3에서는 persistedState를 지정하지 않고, migrate 에서는 각 버전에 맞는 persistedState를 반환하도록 되어 있어, 최신 버전의 로직인 Set 메서드를 사용할 수 없어, store에서 목표 텍스트를 처리할 수 없는 문제가 발생.

changedCells 의 값을 완전히 제거하고, 최신 로직에 맞도록 persistedState 역시, 최신 상태만 반환하도록 migrate 로직을 변경.

그 외

부모 요소의 py-[] padding 지정으로 인해 오버레이 영역까지 영향을 미치는 문제 해결.

before

// before

{
      name: "mandalart",
      // partialize: (state): PersistedState => ({
      //   data: state.data,
      // }),
      version: 3,
      // version 1 → 2 마이그레이션: UI 상태 persist 제거
      migrate: (persistedState: any, version: number) => {
        if (version === 1) {
          const {
            modalCellId,
            isModalOpen,
            isReminderOpen,
            isFullOpen,
            ...rest
          } = persistedState;
          return rest;
        }
        if (version === 2) {
          const { data, ...rest } = persistedState;
          return rest;
        }
        return persistedState;
      },
    }

after

// after

{
      name: "mandalart",
      partialize: (state): PersistedState => ({
        data: state.data,
      }),
      version: 4,
      // version 1 → 2 마이그레이션: UI 상태 persist 제거
      // version 3 마이그레이션: 전체 state persist 제거
      // version 4 마이그레이션: 만다라트 목표 data만 저장
      migrate: (persistedState) => {
        const state = persistedState as PersistedState;

        return {
          data: state.data,
        };
      },
    }

사이드 이펙트 / 주의 사항

참고

관련 이슈 번호:

• [Bug] 텍스트 입력 시 changedCells.add 오류로 입력값이 반영되지 않음 #156

참고 문서/디자인 가이드: