alt속성이 안보여지는 이유

안나오는 사진과 대신에 alt 속성의 내용이 표시되는 이유는 URL.createObjectURL() 함수에 잘못된 인자가 전달되고 있기 때문입니다.

URL.createObjectURL() 함수는 Blob 객체를 인자로 받으며, 해당 Blob은 이미지 파일이어야 합니다. 하지만 여기서는 contractUri라는 문자열을 전달하고 있습니다. 따라서 잘못된 결과가 발생하고 사진 대신 alt 속성의 내용이 보여지는 것입니다.

이런 상황에서는 contractUri를 직접 사용하여 이미지를 표시하면 됩니다. contractUri는 이미지의 URL이기 때문에 다음과 같이 src 속성에 바로 할당해주면 됩니다:

src={URL.createObjectURL(new Blob([contractUri], { type: "application/octet-stream" }))

 

 

 

달력에 이벤트가 중복으로 추가되는 문제를 해결하기 위해 몇 가지 수정이 필요합니다.

1. addEvent 함수와 fetchWorkRecord 함수를 호출할 때, 적절한 위치에서 호출되도록 변경해야 합니다. 현재 코드에서는 handleSubmit 함수와 handleEdit 함수에서 addEvent 함수를 호출하고 있습니다. 이로 인해 버튼을 여러 번 누르면 이벤트가 중복으로 추가됩니다. 대신, 이벤트를 추가할 때와 수정할 때 호출되는 부분을 수정해야 합니다.
2. handleSubmit 함수와 handleEdit 함수에서 이벤트를 추가 및 수정한 후에 fetchWorkRecord 함수를 호출하도록 변경합니다. 이렇게 함으로써 이벤트를 추가하거나 수정한 후에 최신 데이터를 가져와서 화면에 반영할 수 있습니다.

updateEvents 함수는 setEvents를 호출하여 events 상태를 업데이트하는 역할을 합니다. 이 함수는 updatedEvents 배열을 인자로 받아서 해당 배열로 events 상태를 갱신합니다.

updateEvent 함수는 수정된 이벤트(updatedEvent)를 받아서 기존의 events 배열을 순회하면서 수정된 이벤트와 일치하는 이벤트를 찾고, 해당 이벤트의 title을 업데이트한 후 새로운 배열을 생성합니다. 이때, updatedEvent와 일치하는 이벤트를 찾기 위해 start와 end 속성을 비교합니다. 일치하는 이벤트를 찾으면 해당 이벤트를 복제하고, title을 수정된 updatedEvent.title로 설정하여 반환합니다. 그렇지 않은 경우에는 기존 이벤트를 그대로 반환합니다.

최종적으로 생성된 새로운 배열을 updateEvents 함수를 호출하여 events 상태를 업데이트합니다. 이로써 수정된 이벤트가 반영된 events 상태를 가지게 됩니다