feat: alert zustand상태 분리 및 폴더 구조 변경

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()
 

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) {

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),

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

src/store/alert/index.ts

@@ -0,0 +1,2 @@
+export { default as AlertProvider } from "./AlertProvider"
+export { default as useAlertStore } from "./useAlertStore"

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