Error components

• 현재 에러는 alert형식으로 나타남(answer에 아무것도 입력하지 않고 저장 눌렀을때, 없는 질문번호 url로 이동하려 할때)
• 이걸 페이지화 하기 위해서는 frontend/src/components/Error.svelte파일을 만들어 컴포넌트로 관리

 

[Error component]

• error를 전달받아 오류를 표시하는 컴포넌트
• <Error error={{detail: "오류입니다."}} /> 이런 형식으로 전달되야 함
• 파일 내에서는 export let error 로 에러를 전달받을 수 있음

// Errors.svelte
<script>

export let error

</script>


{#if typeof error.detail === "string"}
<div class="alert alert-danger">
	<div>{error.detail}</div>
</div>
{:else if typeof error.detail === "object" && error.detail.length >= 1 }
<div class="alert alert-danger">
	{#each error.detail as err}
    <div>
    	<strong>{err.loc[1]}</strong>: {err.msg}
    </div>
    {/each}
</div>
{/if}

 

 

[Detail.svelte 수정]

• 해당 파일에서 Errors 컴포넌트로 에러를 보낼 수 있게 세팅

// Detail.svelte

<script>
import Errors from '../components/Errors.svelte' // 추가

let error = {detail: []} // 추가

function post_answer(event) {
	fastapi('post', url, params, (json) => {
    	content = ""
        error = {detail:[]} //추가: failure_callback 실시되었을 경우 초기화 필요
        get_question()        
    },
    // 추가: failure_callback
    (error_json) => {
    	error = error_json
    }
}

</script>


.....<생략>.....

<Errors error={error} /> //추가: Error컴포넌트에 error전달

<form>
	<textarea> ...
    <input> ...
</form>