반응형
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 타입 기반, 필드 누락 방지
728x90
반응형
'typescript' 카테고리의 다른 글
| Record type (0) | 2025.06.04 |
|---|---|
| 여러 이미지를 호버하여 이미지를 변경할때 type 정의 (0) | 2025.05.20 |
| 타입스크립트_2(feat.노마드코더) (0) | 2023.03.17 |
| 타입스크립트_1(feat.노마드코더) (0) | 2023.02.22 |
| typescript (0) | 2023.01.11 |