// 전역변수 목록
var priceInput, imgURL, file, imgURLUpdated;
var queryStr = new URLSearchParams(window.location.search);
var productID = queryStr.get('id');
var enableSubmit = false;
getProductData();
// 페이지 최초 진입 시 바인딩
function getProductData() {
db.collection('product')
.doc(productID)
.get()
.then((result) => {
console.log(result.data().title);
priceInput = result.data().price;
imgURL = result.data().image;
// db서 가져온 내용 바인딩하기
$('#img-trigger').attr('src', imgURL);
$('#title').val(result.data().title);
$('#content').val(result.data().content);
$('#price').val(priceInput);
});
}
$('#upload').click(function (e) {
e.stopPropagation();
// 이미지 변경 o > db올리기, 아니면 기존 url
if (file) {
saveImgData();
// saveDataInStore(imgURLUpdated);
return;
}
saveDataInStore(imgURL);
});
function saveImgData() {
file = document.querySelector('#image').files[0];
storageRef = storage.ref();
//파일 올려야 name이 definde됨
loc = storageRef.child('image/' + file.name);
uploading = loc.put(file);
uploading.on(
'state_changed',
null,
(error) => {
console.error('실패사유는', error);
},
// 업로드 성공 시, 게시글 데이터를 product에 저장
() => {
uploading.snapshot.ref.getDownloadURL().then((url) => {
console.log('[이미지 업로드 완료] 경로 : ', url);
// 수정 후 이미지로 imageURL변경
imgURLUpdated = url;
console.log('업데이트후 url : ', imgURLUpdated);
saveDataInStore(url);
});
}
);
}
function saveDataInStore(imgURLparams) {
var data = {
image: imgURLparams,
title: $('#title').val(),
content: $('#content').val(),
price: Number($('#price').val()),
};
console.log(data);
db.collection('product')
.doc(productID)
.update(data)
.then((result) => {
// 성공 후 저장된 결과가 담겨옴
console.log('해당 게시글 DB 업로드 완료');
// console.log(result.id);
AnimateAlert();
})
.catch((err) => {
// 실패 후 실행할 코드
console.log(err);
console.log('게시물 업로드 실패');
});
}
이미지 수정 안 할 경우 / 수정할 경우로 나누어 처리함
1. 수정 안 할 경우
업로드 버튼 클릭 시 product 컬렉션에 업데이트할 img URL 데이터는
처음 DOM 바인딩할 때 사용한 데이터로 대체
2. 수정할 경우
이미지를 Firestore의 storage에 업로드 후,
결과로 받는 이미지 URL을 imgURL 변수에 재할당하려 함
string 데이터는 변경이 잘 반영되는데
imgURL은 재할당이 안된다.. (함수 scope 문제? 아님 덮어 썼으나 다시 기존 데이터로 덮어 씌워지거나? 아직 모르겠다...)
업데이트 후 이미지URL(imgURLupdated) 변수 따로 생성 후, string 데이터 변경하는 함수를 1,2 경우가 공유하지 않고, 따로 작성해줌. 해당 함수에 파라미터로 이미지URL을 받는데 이것도 따로 설정해줌. 해결됨
디버깅 중 storage에 접근권한 없다고 뜸. 일반 사용자였으면 페이지 멈춘 줄 알았을 듯 함...
수정 페이지에서도 유저 로그인 여부 체크하여 로그인 안 했으면 페이지 진입 차단할 것
storage에서 기존 이미지 데이터 삭제