input을 입력하면 로딩이뜨는 문제가 있습니다.
이미지를 선택해줘도 로딩이뜨구요 이런식으루요
https://www.youtube.com/shorts/21JxruAUBCc
write.js 코드는 이렇게했습니다.
'use client';
import FileUpload from '@/component/FileUpload';
// import { authOptions } from '@/pages/api/auth/[...nextauth]';
// import { getServerSession } from 'next-auth';
import { useState } from 'react';
const Write = async () => {
// let session = await getServerSession(authOptions);
const [imageURL, setImageURL] = useState('');
const [imageFile, setImageFile] = useState('');
const [title, setTitle] = useState('');
const [contents, setContents] = useState('');
const onFileUpload = (e) => {
e.preventDefault();
if (!e.target.files) return;
const file = e.target.files[0];
if (file) {
let image = window.URL.createObjectURL(file);
setImageURL(image);
setImageFile(file);
console.log(imageFile);
}
};
const onSubmit = async (e) => {
e.preventDefault();
if (imageFile) {
}
const fileName = encodeURIComponent(imageFile.name);
await fetch(`/api/post/new?file=${fileName}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title,
contents,
}),
}).then((data) => {
if (data.status === 200) {
}
});
};
return (
<div className='form-container'>
<h4 className='title'>글작성페이지</h4>
<form className='post-form' onSubmit={(e) => onSubmit(e)}>
<input
type='text'
value={title}
placeholder='글제목'
onChange={(e) => setTitle(e.target.value)}
/>
<textarea
type='text'
value={contents}
placeholder='글내용'
onChange={(e) => setContents(e.target.value)}
/>
<input type='file' accept='image/*' onChange={(e) => onFileUpload(e)} />
{imageURL && (
<img
src={imageURL}
alt='미리보기이미지'
style={{ marginBottom: '1rem' }}
/>
)}
<button type='submit'>글작성</button>
</form>
</div>
);
};
export default Write;
loading.js 파일은 app폴더에 전역으로 설정해뒀는데,
문제는 loading.js파일을 삭제하고 테스트해보면 멈춥니다
input이 작동을안해요.. 왜그런걸까요?
