chore: dimmed 백그라운드 컴포넌트 분리

apps/web/src/components/app-download-modal.tsx

@@ -11,6 +11,8 @@ import {
 } from "~/libs/store/modal-status";
 import { onAppDownloadClick } from "~/libs/utils";
 import { cn } from "~/libs/utils";
+import { getModalAnimationClassNames } from "~/styles/utils";
+import DimmedBackground from "./ui/dimmed-background";
 
 export const useAppDownloadModalStore =
   create<ModalStatusStore>(getModalStatusStore);
@@ -37,19 +39,13 @@ export default function AppDownloadModal() {
     <>
       {createPortal(
         <RemoveScroll removeScrollBar={false}>
-          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
-          <div
-            className={cn(
-              status === "mounted" && "animate-fade-in",
-              status === "closed" && "animate-fade-out",
-              "z-[1000] fixed inset-0 bg-black bg-opacity-40",
-            )}
-            onClick={() => onClickClose(false)}
+          <DimmedBackground
+            classNames={getModalAnimationClassNames(status)}
+            onClose={() => onClickClose(false)}
           />
           <div
             className={cn(
-              status === "mounted" && "animate-fade-in",
-              status === "closed" && "animate-stage-out",
+              getModalAnimationClassNames(status),
               "z-[1000] bg-white fixed -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 w-[272px] overflow-hidden rounded-[8px] p-4 pt-[21px] text-[16px] leading-[22px]",
             )}
             onAnimationEnd={transferStatus}

apps/web/src/components/ui/dimmed-background.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { cn } from "~/libs/utils";
+
+interface Props extends React.DOMAttributes<HTMLDivElement> {
+  classNames?: Array<string>;
+  onClose?: () => void;
+}
+
+const DimmedBackground = ({ classNames, onClose, ...rest }: Props) => {
+  return (
+    <div
+      {...rest}
+      className={cn(
+        classNames,
+        "z-[1000] fixed inset-0 bg-black bg-opacity-40",
+      )}
+      onClick={onClose}
+    />
+  );
+};
+
+export default DimmedBackground;

apps/web/src/styles/utils.ts

@@ -0,0 +1,6 @@
+import { ModalStatus } from "~/types/modal-status";
+
+export const getModalAnimationClassNames = (status: ModalStatus) => [
+  status === "mounted" ? "animate-fade-in" : "",
+  status === "closed" ? "animate-fade-out" : "",
+];