프록시 객체 바로 불러오기

<script>
    import axios from 'axios';
    import '../../../app.css';
    import {
        onMount
    } from 'svelte';
    import {
        page
    } from '$app/stores';
    import {
        stringify
    } from 'postcss';
    import Icon from "@iconify/svelte"


    let promise = Promise.resolve([]);
    let id = $state();
    let commentContent = $state();
    let isModify = $state(false);
    let isCommentModify = $state([{}]);

    let modifyForm = $state({
        title: '',
        content: ''
    });

    let article = $state({
        authorId: 0,
        authorname: '',
        title: '',
        content: '',
        createdTime: '',
        modifiedTime: '',
        image: '',
        comments: [{}]
    });

    function formatDateTime(dateTimeString) {
        const date = new Date(dateTimeString);
        const options = {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        };
        return date.toLocaleDateString('ko-KR', options);
    }

    function loadArticle() {
        return new Promise(async (resolve, reject) => {
            try {
                const res = await axios.get(`http://localhost:8090/article/${id}`);
                console.log(res);
                article.title = res.data.data.article.title;
                article.content = res.data.data.article.content;
                article.authorId = res.data.data.article.author.id;
                article.authorname = res.data.data.article.author.nickname;
                article.createdTime = formatDateTime(res.data.data.article.createdTime);
                article.modifiedTime = formatDateTime(res.data.data.article.modifiedTime);
                article.image = res.data.data.article.image;
                article.comments = await res.data.data.article.commentList;
                resolve(article);

                for (let i = 0; i < article.comments.length; i++) {
                    isCommentModify.push({
                        [article.comments[i].id]: false
                    });
                }

                // resolve(article);
            } catch (err) {
                console.log('err');
                reject(err);
            } finally {
                console.log('done');
            }
        });
    }

    function modifyArticle() {
        return new Promise(async (resolve, reject) => {
            try {
                console.log(modifyForm);
                let res = await axios.put(`http://localhost:8090/article/${id}`, modifyForm, {
                    withCredentials: true
                });
                console.log(res);
            } catch (error) {
                console.log(error);
            } finally {
                console.log('done modifyArticle');
            }
        });
    }

    function login() {
        return new Promise(async (resolve, reject) => {
            try {
                let res = await axios.post(
                    `http://localhost:8090/member/login`, {
                        username: '123',
                        password: '123'
                    }, {
                        withCredentials: true
                    }
                );
                console.log(res);
            } catch (error) {
                reject(error);
            } finally {
                console.log('done');
            }
        });
    }

    function postComment() {
        return new Promise(async (resolve, reject) => {
            try {
                let res = await axios.post(
                    `http://localhost:8090/article/${id}/comment`, {
                        content: commentContent
                    }, {
                        withCredentials: true
                    }
                );
                console.log(res);
                //article.comments.push(commentContent);
                console.log(commentContent);
                commentContent = '';
                window.location.href = `http://localhost:5173/article/${id}`;
            } catch (error) {
                reject(error);
            } finally {
                console.log('done');
            }
        });
    }



    $effect(() => {
        id = $page.params['id'];
        promise = loadArticle();
        login();
    });
    // onMount(async() => {
    //     articleId = $page.params['articleId'];
    //     loadArticle();
    //     //로그인에 성공했다 나오는데 로그인이 안돼는 문제점이 있음 왜지?
    //     login();
    // });
</script>

{#if isModify}
    <div>
        title:
        <textarea class="textarea textarea-primary" placeholder="제목을 입력해주세요." bind:value={modifyForm.title} />
    </div>
    <div>
        content:
        <textarea class="textarea textarea-primary" placeholder="내용을 입력해주세요." bind:value={modifyForm.content} />
    </div>

    <button
        on:click={() => {
            if (!modifyForm.title.trim() || !modifyForm.content.trim()) {
                return;
            }

            modifyArticle();
            isModify = !isModify;
            window.location.href = `http://localhost:5173/article/${articleId}`;
        }}
    >
        수정 완료</button
    >

    <button on:click={() => (isModify = !isModify)}>수정 취소</button>
{:else}
    {#await promise}
        <span class="loading loading-bars loading-lg"></span>
    {:then ard}
        <!-- <div class="article">
            <div class="article-header">
                <h1>{article.title}</h1>
                <p>{article.authorname} - {article.createdTime} - {article.modifiedTime}</p>
            </div>

            <div class="article-body">
                <p>{article.content}</p>
            </div>
            <div class="article-footer">
                <span>Comments: {article.comments.length}</span>
            </div>

            <button on:click={() => (isModify = !isModify)}>게시글 수정</button>
            <button
                style="color: red;"
                on:click={() => {
                    axios.delete(`http://localhost:8090/article/${articleId}`, { withCredentials: true });
                    window.location.href = `http://localhost:5173/article`;
                }}>게시글 삭제</button
            > -->

            <style>
                .width-40{
                    width:40%;
                }
            </style>

            <div class="width-40 mr-auto ml-auto " >
                <h1 class="text-4xl font-bold">{article.title}</h1>
                <div class="flex items-center space-x-2 mt-6">
                  <div>
                    <p class="text-sm font-semibold">{article.authorname}</p>
                    <p class="text-sm text-gray-500">발행 : {article.createdTime}</p>
                    <p class="text-sm text-gray-500 mt-2">수정 : {article.modifiedTime}</p>
                  </div>
                </div>
                <div class="divider divider-Neutral mb-1" />

                <Icon class="ml-4" icon="ant-design:comment-outlined" color="white" width="20" />
                  <!-- <img
                    src="/placeholder.svg"
                    alt="Eat Sleep Code Repeat"
                    class="w-full h-auto"
                    width="800"
                    height="400"
                    style="aspect-ratio: 800 / 400; object-fit: cover;"
                  /> -->
                <div class="divider divider-Neutral mt-1"/>
                <div class="mt-8">
                  <p class="mt-4">
                    {article.content}
                  </p>
                </div>
            </div>



              <div class="grid place-items-center">
                {#each article.comments as comment}
                        <div class="width-40">

                            <p>{console.log(comment)}</p>
                            {#if article.authorId === 1}
                                <div class="chat chat-end">
                                    <div class="chat-bubble chat-bubble-primary">{comment.content}</div>

                                {#if isCommentModify[comment.id]}
                                    <textarea class="textarea textarea-primary" placeholder="댓글을 입력해주세요." bind:value={commentContent}></textarea>
                                    <button
                                        on:click={() => {
                                            if (!commentContent.trim()) {
                                                return;
                                            }
                                            axios.put(
                                                `http://localhost:8090/article/${id}/comment/${comment.id}`,
                                                { content: commentContent },
                                                { withCredentials: true }
                                            );
                                            commentContent = '';
                                            isCommentModify[comment.id] = !isCommentModify[comment.id];
                                            window.location.href = `http://localhost:5173/article/${id}`;
                                        }}>수정 완료</button>
                                    <button on:click={() => (isCommentModify[comment.id] = !isCommentModify[comment.id])}>취소</button>
                                {:else}
                                    <button on:click={() => (isCommentModify[comment.id] = !isCommentModify[comment.id])}>수정</button>
                                    <button
                                        on:click={() => {
                                            axios.delete(`http://localhost:8090/article/${id}/comment/${comment.id}`, {
                                                withCredentials: true
                                            });
                                            window.location.href = `http://localhost:5173/article/${id}`;
                                        }}
                                        style="color: red;">댓글 삭제</button>
                                {/if}
                                </div>
                            {:else}
                                <div class="chat chat-end">
                                    <div class="chat-bubble chat-bubble-primary">{comment.content}</div>

                                {#if isCommentModify[comment.id]}
                                    <textarea class="textarea textarea-primary" placeholder="댓글을 입력해주세요." bind:value={commentContent}></textarea>
                                    <button
                                        on:click={() => {
                                            if (!commentContent.trim()) {
                                                return;
                                            }
                                            axios.put(
                                                `http://localhost:8090/article/${id}/comment/${comment.id}`,
                                                { content: commentContent },
                                                { withCredentials: true }
                                            );
                                            commentContent = '';
                                            isCommentModify[comment.id] = !isCommentModify[comment.id];
                                            window.location.href = `http://localhost:5173/article/${id}`;
                                        }}>수정 완료</button>
                                    <button on:click={() => (isCommentModify[comment.id] = !isCommentModify[comment.id])}>취소</button>
                                {:else}
                                    <button on:click={() => (isCommentModify[comment.id] = !isCommentModify[comment.id])}>수정</button>
                                    <button
                                        on:click={() => {
                                            axios.delete(`http://localhost:8090/article/${id}/comment/${comment.id}`, {
                                                withCredentials: true
                                            });
                                            window.location.href = `http://localhost:5173/article/${id}`;
                                        }}
                                        style="color: red;">댓글 삭제</button>
                                {/if}
                                </div>
                            {/if}

                        </div>
                {/each}


                댓글 입력 :
                <textarea class="textarea textarea-primary" placeholder="댓글을 입력해주세요."
                    bind:value={commentContent}
                    on:keydown={(e) => {
                        e.key === 'Enter' ? postComment() : undefined;
                    }}
                />

                <button on:click={postComment}>등록</button>
            </div>

    {/await}
{/if}

 

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id') at +page.svelte:244:38 at chunk-AWMK5COL.js?v=2f8358b9:1313:33 at execute_signal_fn (chunk-YJE7Y3S2.js?v=2f8358b9:349:7) at execute_effect (chunk-YJE7Y3S2.js?v=2f8358b9:465:31) at schedule_effect (chunk-YJE7Y3S2.js?v=2f8358b9:531:5) at internal_create_effect (chunk-YJE7Y3S2.js?v=2f8358b9:934:5) at render_effect (chunk-YJE7Y3S2.js?v=2f8358b9:1013:10) at Module.text_effect (chunk-AWMK5COL.js?v=2f8358b9:1313:3) at +page.svelte:241:51 at chunk-AWMK5COL.js?v=2f8358b9:3679:7

 

이런 에러가 나온다

proxy객체에 접근하면서

comment.author가 아직 로딩이 안된상태에서 comment.author.id를 가져오려고 해서 일어난 것같다

그렇다면 이것을 해결할 방법은 무엇일까?