2025-SSF-Frontend/src/components/features/guestbook/DeleteModal.tsx

import { $, component$, Signal } from "@builder.io/qwik";
import axios from "axios";
import { getCookie } from "~/utils/cookie";
export default component$(( { messages, showDeleteModal, selectedMessage }: { messages: Signal<any>, showDeleteModal: Signal<boolean>, selectedMessage: Signal<any> }) => {
    const deleteMessage = $((id: number) => {
        axios.delete(`http://localhost:8000/api/guestbook/${id}`, {
            headers: {
                Authorization: `Bearer ${getCookie("access_token")}`,
            },
        });
        messages.value = messages.value.filter((message: any) => message.id !== id);
    });
    
    return (
        <div class="bg-opacity-45 z-[1000] fixed inset-0 w-full h-full py-6 px-6 bg-black flex items-center justify-center" onClick$={() => {showDeleteModal.value = false; selectedMessage.value = null}}>
            <div class="bg-white p-4 rounded-lg flex gap-2 flex-col items-center justify-center" onClick$={(e) => e.stopPropagation()}>
                <p>삭제하시겠습니까?</p>
                <div class="flex gap-2">
                <button class="bg-button-color-1 text-black px-4 py-2 rounded-lg" onclick$={() => {
                    showDeleteModal.value = false; 
                    deleteMessage(selectedMessage.value.id)}}>삭제</button>
                <button class="bg-button-color-3 text-black px-4 py-2 rounded-lg" onclick$={() => {
                    showDeleteModal.value = false; 
                    selectedMessage.value = null}}>취소</button>
            </div>
            </div>
        </div>
    );
});