썸네일 기능 추가

썸네일 업로드

사이트 방문자가 게시글을 쉽게 파악할 수 있도록, 이제 게시글에 썸네일을 추가할 수 있는 기능을 제공합니다.

• 사용자가 썸네일을 업로드하면 해당 이미지가 게시글 미리보기 화면에 표시됩니다.
• 만약 사용자가 썸네일을 업로드하지 않으면, 게시글 내용 중 첫 번째 이미지를 자동으로 썸네일로 설정합니다.

---

코드 설명

1. 이미지 업로드

사용자가 이미지를 선택하면 handleImageSelection 함수가 실행되어 이미지를 서버로 업로드하고, 업로드된 이미지 URL을 coverImg 상태에 저장합니다.

const handleImageSelection = async (event: React.ChangeEvent<HTMLInputElement>) => {
  const file = event.target.files?.[0];

  if (file) {
    const imageUrl = await uploadImage(file); // 이미지 업로드
    setCoverImg(imageUrl); // 업로드된 이미지 URL 저장
  }
};

2. 자동 썸네일 설정

사용자가 썸네일을 추가하지 않으면, 게시글 내용에서 첫 번째 이미지를 자동으로 썸네일로 설정합니다.

const getFirstImage = (content: string) => {
  const imgMatch = content.match(/<img[^>]+src="([^">]+)"/);
  return imgMatch ? imgMatch[1] : ''; // 첫 번째 이미지 URL 반환
};

---

주요 기능

• 이미지 업로드: 썸네일을 직접 선택하여 업로드 가능
• 자동 썸네일 설정: 사용자가 썸네일을 업로드하지 않으면, 게시글 내용 중 첫 번째 이미지를 자동으로 썸네일로 설정
• 이미지 삭제: 업로드된 썸네일 이미지는 삭제할 수 있는 버튼을 통해 제거 가능

---

결론

이 기능을 통해 게시글 작성자는 더 매력적인 썸네일을 추가할 수 있으며, 자동 썸네일 설정 기능을 통해 사용자가 썸네일을 업로드하지 않아도 게시글이 제대로 노출되도록 보장할 수 있습니다.