버는을 아무리 눌러도 아무런 반응이 없습니다.

Question

+ Add another card 버튼을 아무리 눌러도

onEditMode로 안넘어 갑니다.

onEditMode 부분에 콘솔로그 찍어보면 isEditMode는

true로 다 잘 나옵니다.

화면에 변화만 없습니다. 다음 진도 나가고 싶은데

나갈 수가 없네요...

크롬 개발자 모드에서 + 클릭할때 보면

.list 에서만 반짝 합니다.

도와주십시요~~~!!

import { tick } from "svelte";

import { autoFocusout } from "~/actions/autoFocusout.js";

let isEditMode = false;

let title = "";

let textareaEl;

function addCard() {}

async function onEditMode() {

title = "";

isEditMode = true;

await tick();

textareaEl && textareaEl.focus();

}

function offEditMode() {

isEditMode = false;

}

</script>

{#if isEditMode}

<textarea

bind:value={title}

bind:this={textareaEl}

placeholder="Enter a title for this card..."

on:keydown={(event) => {

event.key === "Enter" && addCard();

event.key === "Esc" && offEditMode();

event.key === "Escape" && offEditMode();

}}

/>

<div class="btn" on:click={offEditMode}>Cancel</div>

</div>

{:else}

<div class="add-another-card" on:click={onEditMode}>+ Add another card</div>

{/if}

HEROPY · Answer

박형욱 님 안녕하세요.😊 질문으로 남겨주신 코드를 복사해서 테스트를 해보니, + Add another card 버튼을 클릭했을 때 '수정 모드'로 잘 넘어갑니다. 아무래도 import { autoFocusout } from "~/actions/autoFocusout.js";의 autoFocusout.js 파일의 코드에 문제가 있는 것은 아닐까 추측을 해봅니다. 가장 정확하게 문제를 파악할 수 있는 것은, 현재 문제가 발생하는 프로젝트를 깃헙에 업로드한 후에 저장소 링크를 공유해 주시는 방법입니다. 혹은 좀 더 자세하게 파악할 수 있는 내용을 공유해 주시면 확인하고 바로 답변드리겠습니다.

HEROPY · Answer

깃헙 저장소를 공유해 주셔서 감사합니다.😊 로컬에서 바로 문제를 찾았습니다. src/components/ListContainer.svelte 파일을 열어보면, 선언된 변수의 이름과 사용하는 변수의 이름이 다르네요. 뒤에 s가 있거나 없으니 확인해 보세요~ 해당 부분을 수정하니 잘 동작하는 듯합니다~👍