From b7cb075b3e6e2bca7b139c7bce30c96ef6152f74 Mon Sep 17 00:00:00 2001
From: minsu-zip <alstn4814@gmail.com>
Date: Sun, 11 Aug 2024 17:43:40 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20alert=20zustand=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/album/create/hooks/useAlbum.ts   |  4 +--
 src/app/profile/_components/ListItem.tsx |  4 +--
 src/app/scanner/hooks/usePhoto.ts        |  4 +--
 src/store/AlertContext.tsx               | 37 ------------------------
 src/store/alert/AlertProvider.tsx        | 14 +++++++++
 src/store/alert/index.ts                 |  2 ++
 src/store/alert/useAlertStore.ts         | 20 +++++++++++++
 7 files changed, 42 insertions(+), 43 deletions(-)
 delete mode 100644 src/store/AlertContext.tsx
 create mode 100644 src/store/alert/AlertProvider.tsx
 create mode 100644 src/store/alert/index.ts
 create mode 100644 src/store/alert/useAlertStore.ts

diff --git a/src/app/album/create/hooks/useAlbum.ts b/src/app/album/create/hooks/useAlbum.ts
index a2fec44..ff6155b 100644
--- a/src/app/album/create/hooks/useAlbum.ts
+++ b/src/app/album/create/hooks/useAlbum.ts
@@ -3,13 +3,13 @@ import { useRouter } from "next/navigation"
 
 import { postAlbum } from "@/app/api/photo"
 import { getQueryClient } from "@/common/QueryProviders"
-import { useAlert } from "@/store/AlertContext"
+import { useAlertStore } from "@/store/alert"
 
 import { usePatchPhotoAlbum } from "../../../scanner/hooks/usePhoto"
 import type { AlbumType } from "../../types"
 
 export const usePostAlbum = () => {
-  const { showAlert } = useAlert()
+  const { showAlert } = useAlertStore()
   const router = useRouter()
   const { patchPhotoAlbum } = usePatchPhotoAlbum()
 
diff --git a/src/app/profile/_components/ListItem.tsx b/src/app/profile/_components/ListItem.tsx
index 0629b70..fcecc2b 100644
--- a/src/app/profile/_components/ListItem.tsx
+++ b/src/app/profile/_components/ListItem.tsx
@@ -6,7 +6,7 @@ import Button from "@/common/Button"
 import Icon from "@/common/Icon"
 import { LIST_ITEM_INFO } from "@/constants"
 import { isExternalLink, isInternalLink } from "@/libs"
-import { useAlert } from "@/store/AlertContext"
+import { useAlertStore } from "@/store/alert"
 
 interface ItemButtonType {
   label: string
@@ -21,7 +21,7 @@ export interface ListItemProps {
 
 const ListItem = () => {
   const router = useRouter()
-  const { showAlert } = useAlert()
+  const { showAlert } = useAlertStore()
 
   const handleClick = async (item: ItemButtonType) => {
     if (item.action) {
diff --git a/src/app/scanner/hooks/usePhoto.ts b/src/app/scanner/hooks/usePhoto.ts
index c1c2316..4beb6a4 100644
--- a/src/app/scanner/hooks/usePhoto.ts
+++ b/src/app/scanner/hooks/usePhoto.ts
@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from "@tanstack/react-query"
 
 import { getAlbums, patchPhotoAlbum, postQrCode } from "@/app/api/photo"
-import { useAlert } from "@/store/AlertContext"
+import { useAlertStore } from "@/store/alert"
 
 export const usePostQrCode = () => {
-  const { showAlert } = useAlert()
+  const { showAlert } = useAlertStore()
 
   const { data, mutate, isPending } = useMutation({
     mutationFn: (code: string) => postQrCode(code),
diff --git a/src/store/AlertContext.tsx b/src/store/AlertContext.tsx
deleted file mode 100644
index 3230f01..0000000
--- a/src/store/AlertContext.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client"
-
-import { create } from "zustand"
-
-import Alert from "../common/Alert"
-
-interface AlertState {
-  title: string
-  description: string
-  visible: boolean
-  showAlert: (title: string, description: string) => void
-  hideAlert: () => void
-}
-
-const useAlertStore = create<AlertState>((set) => ({
-  title: "",
-  description: "",
-  visible: false,
-  showAlert: (title: string, description: string) =>
-    set({ title, description, visible: true }),
-  hideAlert: () => set({ visible: false }),
-}))
-
-export const useAlert = () => {
-  const { showAlert, hideAlert, title, description, visible } = useAlertStore()
-  return { showAlert, hideAlert, title, description, visible }
-}
-
-const AlertContainer = () => {
-  const { title, description, visible, hideAlert } = useAlert()
-
-  if (!visible) return null
-
-  return <Alert title={title} description={description} onClose={hideAlert} />
-}
-
-export default AlertContainer
diff --git a/src/store/alert/AlertProvider.tsx b/src/store/alert/AlertProvider.tsx
new file mode 100644
index 0000000..32dcd92
--- /dev/null
+++ b/src/store/alert/AlertProvider.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import Alert from "../../common/Alert"
+import useAlertStore from "./useAlertStore"
+
+const AlertProvider = () => {
+  const { title, description, visible, hideAlert } = useAlertStore()
+
+  if (!visible) return null
+
+  return <Alert title={title} description={description} onClose={hideAlert} />
+}
+
+export default AlertProvider
diff --git a/src/store/alert/index.ts b/src/store/alert/index.ts
new file mode 100644
index 0000000..b01f7c5
--- /dev/null
+++ b/src/store/alert/index.ts
@@ -0,0 +1,2 @@
+export { default as AlertProvider } from "./AlertProvider"
+export { default as useAlertStore } from "./useAlertStore"
diff --git a/src/store/alert/useAlertStore.ts b/src/store/alert/useAlertStore.ts
new file mode 100644
index 0000000..d992f5e
--- /dev/null
+++ b/src/store/alert/useAlertStore.ts
@@ -0,0 +1,20 @@
+import { create } from "zustand"
+
+interface AlertState {
+  title: string
+  description: string
+  visible: boolean
+  showAlert: (title: string, description: string) => void
+  hideAlert: () => void
+}
+
+const useAlertStore = create<AlertState>((set) => ({
+  title: "",
+  description: "",
+  visible: false,
+  showAlert: (title: string, description: string) =>
+    set({ title, description, visible: true }),
+  hideAlert: () => set({ visible: false }),
+}))
+
+export default useAlertStore