Merge remote-tracking branch 'origin/develop' into develop

# Conflicts:
#	src/app/board/[boardId]/_components/Header/SelectModeHeader.tsx

src/app/board/[boardId]/_contexts/SelectModeContext.tsx

@@ -8,6 +8,7 @@ interface SelectContextProps {
   selectedIds: number[]
   setIsSelectMode: (isSelectMode: boolean) => void
   toggleSelectedId: (id: number) => void
+  resetSelectedIds: () => void
   MAX_SELECT_COUNT: number
 }
 
@@ -16,6 +17,7 @@ const SelectContext = createContext<SelectContextProps>({
   selectedIds: [],
   setIsSelectMode: () => {},
   toggleSelectedId: () => {},
+  resetSelectedIds: () => {},
   MAX_SELECT_COUNT: 0,
 })
 
@@ -58,13 +60,18 @@ export const SelectContextProvider = ({
     }
   }
 
+  const resetSelectedIds = () => {
+    setSelectedIds([])
+  }
+
   const value = useMemo(
     () => ({
       isSelectMode,
       setIsSelectMode,
       selectedIds,
       toggleSelectedId,
       MAX_SELECT_COUNT: 9,
+      resetSelectedIds,
     }),
     [isSelectMode, selectedIds],
   )

src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx

@@ -18,6 +18,7 @@ import DownloadIcon from 'public/icons/download.svg'
 import ScreenshotLoading from 'public/images/screenshot_loading.gif'
 import { useEffect, useState } from 'react'
 import { sendGTMEvent } from '@next/third-parties/google'
+import Toast from '@/components/Toast'
 import GoBackModal from './GoBackModal'
 
 const DecorateScreenshot = () => {
@@ -31,6 +32,8 @@ const DecorateScreenshot = () => {
   const [isDownloaded, setIsDownloaded] = useState(false)
   const { isDecorating, setIsDecorating } = useSticker()
   const [isGoBackModalOpen, setIsGoBackModalOpen] = useState(false)
+  const [showDownloadCompleteToast, setShowDownloadCompleteToast] =
+    useState(false)
   const router = useRouter()
 
   useEffect(() => {
@@ -76,7 +79,9 @@ const DecorateScreenshot = () => {
       .then((res) => res.blob())
       .then((blob) => {
         const screenshotUrl = URL.createObjectURL(blob)
-        downloadImage(screenshotUrl, boardName)
+        downloadImage(screenshotUrl, boardName).then(() => {
+          setShowDownloadCompleteToast(true)
+        })
         setIsLoadingDownload(false)
         setIsDownloaded(true)
       })
@@ -168,6 +173,15 @@ const DecorateScreenshot = () => {
             </span>
           </SubmitBtn>
         )}
+        <Toast
+          className="bottom-1/2"
+          isOpen={showDownloadCompleteToast}
+          setClose={() => {
+            setShowDownloadCompleteToast(false)
+          }}
+        >
+          파일에 저장되었습니다!
+        </Toast>
       </div>
     </div>
   )

src/app/board/[boardId]/decorate/_components/SelectStickerModal/index.tsx

@@ -25,7 +25,8 @@ const StickerIcon = ({ num }: StickerIconProps) => {
 
 const SelectSticker = () => {
   const { status } = useSession()
-  const stickerMenus = status ? STICKER_MENU : GUEST_STICKER_MENU
+  const stickerMenus =
+    status === 'authenticated' ? STICKER_MENU : GUEST_STICKER_MENU
 
   return (
     <div className="w-md mx-auto flex h-dvh max-w-md flex-1 flex-col bg-gray-1000/70 py-10 backdrop-blur-md">

src/components/Toast/index.tsx

@@ -1,14 +1,22 @@
 import { ReactNode, useEffect, useState } from 'react'
 import ReactDOM from 'react-dom'
+import { twMerge } from 'tailwind-merge'
 
 interface ToastProps {
   isOpen: boolean
   setClose: () => void
   children: ReactNode
   duration?: number
+  className?: string
 }
 
-const Toast = ({ isOpen, setClose, children, duration = 3000 }: ToastProps) => {
+const Toast = ({
+  isOpen,
+  setClose,
+  children,
+  duration = 3000,
+  className = '',
+}: ToastProps) => {
   const [isVisible, setIsVisible] = useState(false)
 
   useEffect(() => {
@@ -39,7 +47,10 @@ const Toast = ({ isOpen, setClose, children, duration = 3000 }: ToastProps) => {
   return isOpen
     ? ReactDOM.createPortal(
         <div
-          className={`fixed bottom-10 left-1/2 -translate-x-1/2 transform rounded-3xl bg-gray-1000 bg-opacity-60 px-4 py-1 backdrop-blur-[2px] ${isVisible ? 'opacity-100' : 'opacity-0'} transition-opacity duration-300`}
+          className={twMerge(
+            `fixed bottom-10 left-1/2 -translate-x-1/2 transform rounded-3xl bg-gray-1000 bg-opacity-60 px-4 py-1 backdrop-blur-[2px] ${isVisible ? 'opacity-100' : 'opacity-0'} transition-opacity duration-300`,
+            className,
+          )}
           onTransitionEnd={handleTransitionEnd}
         >
           <div className="whitespace-nowrap font-jooree text-gray-0">

src/lib/utils/image.ts

@@ -18,11 +18,24 @@ export const getImageWidthHeight = (
 }
 
 export const downloadImage = (imageUrl: string, imageName = 'file') => {
-  const a = document.createElement('a')
-  a.href = imageUrl
-  a.download = `${imageName}.png`
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-  URL.revokeObjectURL(imageUrl)
+  return new Promise<void>((resolve, reject) => {
+    try {
+      const a = document.createElement('a')
+      a.href = imageUrl
+      a.download = `${imageName}.png`
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(imageUrl)
+      window.addEventListener(
+        'focus',
+        () => {
+          resolve()
+        },
+        { once: true },
+      )
+    } catch (e) {
+      reject(e)
+    }
+  })
 }