[PWA] (9) 공지사항 URL 등록 / 이벤트 기간별로 status 표시하기

☑️ 이벤트 상태표시

이벤트 우측상단에 이벤트 기간중인지 확인 할 수있는 상태표시가 되어있는데, 방법은 두가지였고 각각의 장단점 및 특징을 알아보고 더 효율적인 방법을 택하였다.

1.EventModal에서 status를 계산하여 저장:

이벤트가 생성된 이후 상태가 변경되지 않아도 되는 경우.
예: 이벤트가 생성된 시점의 상태만 중요하고, 이후 상태 변경이 필요하지 않은 경우.
/events 페이지에서 status를 다시 계산:

2. 이벤트의 상태가 날짜에 따라 동적으로 변경되어야 하는 경우.
   예: 오늘 날짜를 기준으로 "진행중", "예정", "종료" 상태가 자동으로 업데이트되어야 하는 경우.

/events 페이지에서 데이터를 로드할 때 status를 다시 계산하여야 하므로, 두번째 방법으로 문제해결.

공지사항 URL -> 파일첨부 방식 변경

공지사항은 admin/announcement 에서 URL 대신 파일첨부 방식으로 수정했다.

useState 설정

  const [newNotice, setNewNotice] = useState({
    title: "",
    content: "",
    isImportant: false,
    attachedFile: null, // 첨부 파일
    previewUrl: "", // 파일 미리보기 URL
  });

원래는 title, content, isImportant 3개만 있었던 것에, 파일 미리보기도 추가하고, 첨부파일 기능을 추가하였다.

const handleSubmit = (e) => {
   e.preventDefault();
   const notice = {
     id: Date.now(),
     ...newNotice,
     imageUrl: newNotice.previewUrl || "/images/default-notice.jpg", // 기본 이미지 설정
     createdAt: new Date().toISOString(),
   };
   
imageUrl: newNotice.imageUrl로 되어있었던 것을, newNotice.previewUrl 으로 수정하였다. 

imageUrl: newNotice.previewUrl || "/images/default-notice.jpg", //
기본 이미지 설정 -> 삭제함

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => {
        setNewNotice((prev) => ({
          ...prev,
          attachedFile: file,
          previewUrl: reader.result, // base64로 변환된 파일
        }));
      };
      reader.readAsDataURL(file);
    }
  };

base64로 파일 변환하는 함수 추가

태그 추가하기

<div>
              <label className="block text-sm font-medium text-gray-700">
                파일 첨부
              </label>
              <input
                type="file"
                accept="image/*"
                onChange={handleFileChange}
                className="w-full p-2 border rounded"
              />
              {newNotice.previewUrl && (
                <div className="mt-2">
                  <img
                    src={newNotice.previewUrl}
                    alt="첨부 파일 미리보기"
                    className="h-40 w-full object-cover rounded"
                  />
                </div>
              )}
            </div>