framer-motion 아래에서 위로 올라오는, 위에서 아래로 내려오는 모달 팝업

       import { motion, AnimatePresence } from "framer-motion";
       
       
       ... 생략 ...
       
            <AnimatePresence>
        {/* 🔽 아래에서 위로 올라오는 팝업 */}
        {isBottomOpen && (
          <motion.div
            initial={{ y: "100%" }}
            animate={{ y: 0 }}
            exit={{ y: "100%" }}
            transition={{ type: "spring", stiffness: 100 }}
            style={popupStyle}
          >
            <h3>아래에서 위로 올라오는 팝업</h3>
            <button onClick={() => setIsBottomOpen(false)}>닫기</button>
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {/* 🔼 위에서 아래로 내려오는 팝업 */}
        {isTopOpen && (
          <motion.div
            initial={{ y: "-100%" }}
            animate={{ y: 0 }}
            exit={{ y: "-100%" }}
            transition={{ type: "spring", stiffness: 100 }}
            style={{ ...popupStyle, top: 0, bottom: "auto" }} // 위에서 내려오게 설정
          >
            <h3>위에서 아래로 내려오는 팝업</h3>
            <button onClick={() => setIsTopOpen(false)}>닫기</button>
          </motion.div>
        )}
      </AnimatePresence>
      
      
      ... 생략...
      
      
// 팝업 스타일 (공통)

    position: "fixed",
    bottom: 0,
    left: 0,
    right: 0,
    height: "250px",
    background: "white",
    boxShadow: "0px 0px 15px rgba(0,0,0,0.1)",
    padding: "20px",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",