partial

1️⃣ Coord 타입 정의

 

export interface Coord {
  latitude: number;   // 위도
  longitude: number;  // 경도
  radius: number;     // 반경 (기본값 가능)
  date: string;       // 선택 시각 ISO 문자열
  address: string;    // 주소 문자열
}

• 모든 좌표 데이터는 위 타입 기반
• radius, date, address 등은 선택 시점에 자동 채움

---

2️⃣ Zustand Store 설계 (Partial + localStorage + 리셋)

 

import { create } from "zustand";
import secureLocalStorage from "react-secure-storage";
import { Coord } from "@/types";

interface LocationState {
  selectedCoord: Coord | null;
  searchCoord: Coord | null;

  setSelectedCoord: (partial: Partial<Coord>) => void;
  setSearchCoord: (partial: Partial<Coord>) => void;

  loadStoredCoords: () => void;

  resetSelectedCoord: () => void;
  resetSearchCoord: () => void;
}

export const useLocationStore = create<LocationState>((set) => ({
  selectedCoord: null,
  searchCoord: null,

  // Partial<Coord> 기반 업데이트 + localStorage 동기화
  setSelectedCoord: (partial) =>
    set((state) => {
      const updated = { ...state.selectedCoord, ...partial } as Coord;
      secureLocalStorage.setItem("selectedCoords", JSON.stringify(updated));
      return { selectedCoord: updated };
    }),

  setSearchCoord: (partial) =>
    set((state) => {
      const updated = { ...state.searchCoord, ...partial } as Coord;
      secureLocalStorage.setItem("searchCoords", JSON.stringify(updated));
      return { searchCoord: updated };
    }),

  // 새로고침 시 로컬스토리지에서 복원
  loadStoredCoords: () => {
    const stored = secureLocalStorage.getItem("selectedCoords");
    const searchStored = secureLocalStorage.getItem("searchCoords");

    const selectedParsed =
      stored && typeof stored === "string"
        ? (JSON.parse(stored) as Coord)
        : null;

    const searchParsed =
      searchStored && typeof searchStored === "string"
        ? (JSON.parse(searchStored) as Coord)
        : null;

    set({
      selectedCoord: selectedParsed,
      searchCoord: searchParsed,
    });
  },

  // 로그아웃 시 상태 초기화
  resetSelectedCoord: () => {
    set({ selectedCoord: null });
    secureLocalStorage.removeItem("selectedCoords");
  },

  resetSearchCoord: () => {
    set({ searchCoord: null });
    secureLocalStorage.removeItem("searchCoords");
  },
}));

---

3️⃣ 사용 예시

 

const {
  selectedCoord,
  searchCoord,
  setSelectedCoord,
  setSearchCoord,
  resetSelectedCoord,
  resetSearchCoord,
  loadStoredCoords,
} = useLocationStore();

// 좌표 선택 시 일부 필드만 업데이트
setSelectedCoord({ latitude: 35.1086, longitude: 128.9459 });

// 검색 좌표 일부 업데이트
setSearchCoord({ radius: 20 });

// 로그아웃 시 상태 초기화
resetSelectedCoord();
resetSearchCoord();

// 새로고침 시 localStorage에서 자동 복원
useEffect(() => {
  loadStoredCoords();
}, []);

---

4️⃣ 특징 & 장점

• Partial<Coord> 사용
  • 일부 필드만 업데이트 가능👍
  • 기존 값 유지
• 자동 localStorage 동기화
  • 상태 변경 시 저장
  • 새로고침 후 값 복원 가능
• 단일 좌표 관리
  • selectedCoord / searchCoord 각각 하나의 객체만 저장
  • 배열 불필요
• 로그아웃 처리
  • resetSelectedCoord / resetSearchCoord 호출 시 상태 초기화 + localStorage 삭제
• 타입 안전성 확보
  • Coord 타입 기반, 필드 누락 방지