feat: 주문 페이지 모달 및 아이템 삭제 애니메이션 적용

apps/nowait-user/package.json

@@ -14,6 +14,7 @@
     "@tanstack/react-query": "^5.80.10",
     "@tanstack/react-virtual": "^3.13.11",
     "axios": "^1.10.0",
+    "framer-motion": "^12.20.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.2",

apps/nowait-user/src/components/order/ConfirmModal.tsx

@@ -1,40 +1,67 @@
-import React from "react";
+import React, { useState } from "react";
 import { Button } from "@repo/ui";
 import Portal from "../common/modal/Portal";
+import { AnimatePresence, motion } from "framer-motion";
 
 interface PropsType {
   open: () => void;
   close: () => void;
 }
 
 const ConfirmModal = ({ open, close }: PropsType) => {
+  // const [isVisible, setIsVisible] = useState(true);
+
+  // const handleClose = () => {
+  //   setIsVisible(false);
+  // };
+
+
+  // const handleExitComplete = () => {
+  //   if (!isVisible) close();
+  // };
+
   return (
     <Portal>
-      <div
-        onClick={close}
-        className="fixed inset-0 z-50 bg-black/30"
-      >
-        <div className="absolute left-1/2 bottom-8 -translate-x-1/2 w-[calc(100%-20px)] max-w-[430px] bg-white rounded-[20px] px-5 pt-9">
-          <h1 className="text-headline-22-bold mb-2">이체 완료 하셨나요?</h1>
-          <h2 className="text-16-regular text-black-70 mb-12">
-            아직 이체하지 않으셨다면 주문이
-            <br /> 정상적으로 접수되지 않을 수 있어요.
-            <br />
-            계좌로 송금을 마치셨다면 버튼을 눌러주세요.
-          </h2>
-          <Button fullWidth={true} textColor="#ffffff" onClick={open}>
-            이체했어요
-          </Button>
-          <Button
-            fullWidth={true}
-            backgroundColor="transparent"
-            textColor="#888888"
+      <AnimatePresence onExitComplete={close}>
+        {/* {isVisible && ( */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
             onClick={close}
+            className="fixed inset-0 z-50 bg-black/30"
           >
-            아직 안했어요
-          </Button>
-        </div>
-      </div>
+            <motion.div
+              initial={{ y: "100%" }}
+              animate={{ y: 0 }}
+              exit={{ y: "100%" }}
+              transition={{ duration: 0.3, ease: "easeInOut" }}
+              className="absolute left-1/2 bottom-8 -translate-x-1/2 w-[calc(100%-20px)] max-w-[430px] bg-white rounded-[20px] px-5 pt-9"
+            >
+              <h1 className="text-headline-22-bold mb-2">
+                이체 완료 하셨나요?
+              </h1>
+              <h2 className="text-16-regular text-black-70 mb-12">
+                아직 이체하지 않으셨다면 주문이
+                <br /> 정상적으로 접수되지 않을 수 있어요.
+                <br />
+                계좌로 송금을 마치셨다면 버튼을 눌러주세요.
+              </h2>
+              <Button fullWidth={true} textColor="#ffffff" onClick={open}>
+                이체했어요
+              </Button>
+              <Button
+                fullWidth={true}
+                backgroundColor="transparent"
+                textColor="#888888"
+                onClick={close}
+              >
+                아직 안했어요
+              </Button>
+            </motion.div>
+          </motion.div>
+        {/* )} */}
+      </AnimatePresence>
     </Portal>
   );
 };

apps/nowait-user/src/components/order/MenuItem.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
 import QuantitySelector from "../common/QuantitySelector";
 import close from "../../assets/icon/close.svg";
 import { useCartStore } from "../../stores/cartStore";
+import { motion } from "framer-motion";
+import { useState } from "react";
 
 interface PropsType {
   id: string;
@@ -12,8 +13,16 @@ interface PropsType {
 
 const MenuItem = ({ id, name, price, quantity }: PropsType) => {
   const { removeFromCart, increaseQuantity, decreaseQuantity } = useCartStore();
+  const [isRemoving, setIsRemoving] = useState(false);
   return (
-    <li className="-mx-5 border-b border-[#ececec]">
+    <motion.li
+      layout
+      initial={{ opacity: 1, x: 0 }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: -100 }}
+      transition={{ duration: 0.3 }}
+      className="-mx-5 border-b border-[#ececec]"
+    >
       <div className="w-full p-5">
         <div className="flex justify-between items-start">
           <div className="max-w-[12.5rem]">
@@ -22,7 +31,12 @@ const MenuItem = ({ id, name, price, quantity }: PropsType) => {
             </h1>
             <h2 className="text-title-18-bold">{price.toLocaleString()}원</h2>
           </div>
-          <button onClick={() => removeFromCart(id)}>
+          <button
+            onClick={() => {
+              setIsRemoving(true);
+              setTimeout(() => removeFromCart(id), 300);
+            }}
+          >
             <img className="text-black-50" src={close} alt="메뉴 삭제 아이콘" />
           </button>
         </div>
@@ -34,7 +48,7 @@ const MenuItem = ({ id, name, price, quantity }: PropsType) => {
           decreaseQuantity={decreaseQuantity}
         />
       </div>
-    </li>
+    </motion.li>
   );
 };
 

apps/nowait-user/src/components/order/Toast.tsx

@@ -1,14 +1,20 @@
 import React from "react";
+import { motion } from "framer-motion";
 
 interface PropsType {
   message: string;
 }
 
 const Toast = ({ message }: PropsType) => {
   return (
-    <div className="flex justify-center items-center px-4 py-2.5 rounded-[999px] bg-[#F2F6F9] fade-in">
+    <motion.div
+      initial={{ y: "100%" }}
+      animate={{ y: 0 }}
+      transition={{ duration: 0.4, ease: "easeInOut" }}
+      className="flex justify-center items-center px-4 py-2.5 rounded-[999px] bg-[#F2F6F9]"
+    >
       <p className="text-14-medium text-navy-70">{message}</p>
-    </div>
+    </motion.div>
   );
 };
 

apps/nowait-user/src/pages/order/OrderListPage.tsx

@@ -4,6 +4,7 @@ import { Button } from "@repo/ui";
 import { useNavigate } from "react-router-dom";
 import TotalButton from "../../components/order/TotalButton";
 import { useCartStore } from "../../stores/cartStore";
+import { AnimatePresence } from "framer-motion";
 
 const OrderListPage = () => {
   const navigate = useNavigate();
@@ -15,17 +16,19 @@ const OrderListPage = () => {
       <div className="pt-8 pb-24 px-5">
         <h1 className="text-headline-24-bold mb-5">총 주문 3건</h1>
         <ul>
-          {cart.map((item) => {
-            return (
-              <MenuItem
-                key={item.id}
-                id={item.id}
-                name={item.name}
-                price={item.price}
-                quantity={item.quantity}
-              />
-            );
-          })}
+          <AnimatePresence mode="sync">
+            {cart.map((item) => {
+              return (
+                <MenuItem
+                  key={item.id}
+                  id={item.id}
+                  name={item.name}
+                  price={item.price}
+                  quantity={item.quantity}
+                />
+              );
+            })}
+          </AnimatePresence>
         </ul>
       </div>
       <PageFooterButton>