μ°μ ,
Taskify νλ‘μ νΈλ₯Ό κ°λ°νλ©΄μ, μλ¬ μ²λ¦¬ λ‘μ§μ΄ μ¬λ¬ μ»΄ν¬λνΈμ λΆμ°λμ΄ μμμ μκ² λμμ΅λλ€. κ° μ»΄ν¬λνΈμμ μ€λ³΅λ λ°©μμΌλ‘ μλ¬λ₯Ό μ²λ¦¬νκ³ , μλ¬ λ©μμ§λ₯Ό νμνλ λ°©λ²μ΄ μΌκ΄λμ§ μμ μ¬μ©μ κ²½νμ΄ μ νλλ λ¬Έμ λ₯Ό κ²ͺμμ΅λλ€. π
μ΄ λ¬Έμ λ₯Ό ν΄κ²°νκΈ° μν΄, useErrorModalμ΄λΌλ 컀μ€ν ν μ λ§λ€μ΄ μ μμ μΌλ‘ μΌκ΄λ μλ¬ μ²λ¦¬ λ°©μμ ꡬννμ΅λλ€.
μ΄λ₯Ό ν΅ν΄ μλ¬ μ²λ¦¬ λ‘μ§μ ν΅ν©νκ³ , μ¬μ©μμκ² μλ²μμ λ°μν μλ¬ λ©μμ§λ₯Ό λͺ ννκ² μ λ¬ν μ μκ² λμμ΅λλ€.
βοΈ λ¬Έμ μν© - μλ¬ μ²λ¦¬ λ‘μ§μ μ€λ³΅κ³Ό μΌκ΄μ± λΆμ‘±
νλ‘μ νΈ μ΄κΈ°μλ κ°κ°μ μ»΄ν¬λνΈμμ μλ¬λ₯Ό κ°λ³μ μΌλ‘ μ²λ¦¬νκ³ μμμ΅λλ€.
μλ₯Ό λ€μ΄, API μμ² μ€ν¨ μ λ°μνλ μλ¬λ μ¬μ©μ μ λ ₯μμ λ°μνλ μλ¬λ₯Ό κ° μ»΄ν¬λνΈμμ μ²λ¦¬νλ©΄μ μ€λ³΅λ μ½λκ° λ°μνκ³ , μλ¬ λ©μμ§ λν μΌκ΄μ± μμ΄ νμλμμ΅λλ€.
- μ€λ³΅λ μλ¬ μ²λ¦¬ μ½λ: μλ¬ μ²λ¦¬κ° κ° μ»΄ν¬λνΈμ λΆμ°λμ΄ μμ΄μ κ°μ λ‘μ§μ μ¬λ¬ λ² μμ±ν΄μΌ νμ΅λλ€.
- μΌκ΄μ± μλ μλ¬ λ©μμ§: κ° μ»΄ν¬λνΈμμ μλ¬ λ©μμ§λ₯Ό λ€λ₯΄κ² μ²λ¦¬νλ€ λ³΄λ, μ¬μ©μμκ² μ λ¬λλ μλ¬ λ©μμ§κ° μΌκ΄λμ§ μμμ΅λλ€.
- μ μ§λ³΄μ μ΄λ €μ: μλ¬ μ²λ¦¬ λ‘μ§μ μμ ν λλ§λ€ κ° μ»΄ν¬λνΈμ λΆμ°λμ΄ μλ μ½λλ₯Ό μμ ν΄μΌ ν΄μ, μ μ§λ³΄μκ° μ΄λ €μ μ΅λλ€.
μ΄ λ¬Έμ λ₯Ό ν΄κ²°νκΈ° μν΄, useErrorModal 컀μ€ν ν μ λμ νμ¬ μλ¬ μ²λ¦¬ λ‘μ§μ ν΅ν©νκ³ , μ¬μ©μμκ² μλ²μμ λ°μν μλ¬ λ©μμ§λ₯Ό μΌκ΄λκ² νμν μ μλλ‘ νμ΅λλ€.
π ν΄κ²° λ°©μ - useErrorModal 컀μ€ν ν μ ν΅ν μλ¬ μ²λ¦¬ ν΅ν©
useErrorModalμ λͺ¨λ μ»΄ν¬λνΈμμ μΌκ΄λ μλ¬ μ²λ¦¬λ₯Ό κ°λ₯νκ² ν΄μ£Όλ 컀μ€ν ν μ λλ€.
μ΄ ν μ μ¬μ©νλ©΄ API μμ²μμ λ°μνλ μλ¬λ μκΈ°μΉ λͺ»ν μλ¬λ₯Ό μ€μμμ μ²λ¦¬νκ³ , λͺ¨λ¬λ‘ μλ¬ λ©μμ§λ₯Ό νμν μ μμ΅λλ€.
π useErrorModal μ€κ³
- μλ²μμ λμ Έμ£Όλ μλ¬ λ©μμ§ μ²λ¦¬: μλ²μμ λ°μν μλ¬ λ©μμ§λ₯Ό μ νν μ²λ¦¬νμ¬, μ¬μ©μμκ² μλ²μμ λμ Έμ€ μλ¬ λ©μμ§λ₯Ό κ·Έλλ‘ μ λ¬ν©λλ€.
- λͺ¨λ¬ κ΄λ¦¬: μλ¬ λ©μμ§λ₯Ό νμν λ μ¬μ©νλ λͺ¨λ¬μ μ μ΄νμ¬, μλ¬ λ°μ μ μ¬μ©μκ° μ¦μ νμΈν μ μλλ‘ ν©λλ€.
import { useState } from "react";
import useModal from "@/hooks/modal/useModal";
import { AxiosError } from "axios";
const useErrorModal = () => {
const { isOpen, openModal, closeModal } = useModal();
const [errorMessage, setErrorMessage] = useState<string>("");
// μλ¬ λ©μμ§ μ€μ κ³Ό λͺ¨λ¬ μ΄κΈ°
// AxiosErrorλ₯Ό 체ν¬νμ¬ μλ²μμ λμ Έμ€ μλ¬ λ©μμ§λ₯Ό κ°μ Έμ΄
const handleError = (error: unknown) => {
if (error instanceof AxiosError) {
// μλ²μμ λμ Έμ£Όλ μλ¬ λ©μμ§λ₯Ό κ·Έλλ‘ μ¬μ©
setErrorMessage(
error.response?.data.message || "μμμΉ λͺ»ν μ€λ₯κ° λ°μνμ΅λλ€."
);
} else if (error instanceof Error) {
setErrorMessage(error.message);
} else {
setErrorMessage("μ μ μλ μ€λ₯κ° λ°μνμ΅λλ€.");
}
openModal();
};
// λͺ¨λ¬μ λ«κ³ μλ¬ λ©μμ§ μ΄κΈ°ν
const handleClose = () => {
closeModal();
setErrorMessage("");
};
return {
isOpen,
errorMessage,
handleError,
handleClose,
};
};
π μ½λ μ€λ³΅ μ κ±°μ ν¨μ¨μ± ν₯μ
- μλ¬ μ²λ¦¬ λ‘μ§ ν΅ν©: λͺ¨λ μ»΄ν¬λνΈμμ λμΌν λ°©μμΌλ‘ μλ¬λ₯Ό μ²λ¦¬νμ¬ μ€λ³΅λ μ½λλ₯Ό μμ κ³ , λ‘μ§μ νκ³³μ μ§μ€
- λͺ¨λ¬λ‘ μΌκ΄λ μλ¬ λ©μμ§ νμ: μ¬μ©μμκ² λ³΄μ΄λ μλ¬ λ©μμ§λ μ΄μ λͺ¨λ¬μ ν΅ν΄ μΌκ΄λκ² νμλκ³ μλ²μμ λ°μν μλ¬ λ©μμ§λ₯Ό κ·Έλλ‘ μ¬μ©μμκ² μ λ¬
- μ μ§λ³΄μ μ©μ΄μ±: μλ¬ μ²λ¦¬ λ‘μ§μ λ³κ²½ν λ, μ΄μ λ useErrorModalλ§ μμ νλ©΄ λλ―λ‘ μ μ§λ³΄μκ° λ§€μ° μ©μ΄. μ¬λ¬ μ»΄ν¬λνΈλ₯Ό μΌμΌμ΄ μμ ν νμκ° μκ³ , ν κ³³μμ μμ λ§ νλ©΄ λ¨.
νμ€ν
useErrorModal λλΆμ μλ²μμ λμ Έμ£Όλ μλ¬ λ©μμ§λ₯Ό μΌκ΄μ± μκ² μ²λ¦¬ν μ μκ² λμκ³ , μ¬μ©μμκ² λ μ νν μ 보λ₯Ό μ 곡ν μ μμμ΅λλ€. μ½λ μ€λ³΅λ μ κ±°νκ³ , μ μ§λ³΄μμ±λ λμμ Έ νλ‘μ νΈκ° νμΈ΅ μμ μ μ΄ λμλ€ ~!! π
'π οΈ νλ‘μ νΈ > [Taskify] - νμ ν΄(μΌμ κ΄λ¦¬ μμ€ν )' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[Taskify] Zustand μνκ΄λ¦¬ νΈλ¬λΈ μν (1) | 2025.01.15 |
---|---|
[νΈλ¬λΈ μν ] μ μ μν κ΄λ¦¬μ μΈμ¦ λ‘μ§ λΆλ¦¬ - Zustandλ₯Ό νμ©ν μΈμ¦ μν κ΄λ¦¬ κ°μ (4) | 2024.11.08 |
[Taskify] - νλ‘μ νΈλ₯Ό λ§μΉλ©° (0) | 2024.11.08 |
[Taskify] - νλ‘μ νΈ μμ± λ° μ΄κΈ° μΈν (0) | 2024.10.19 |