[✍️ Dev Log] 이숙영 / 2021-09-17

### 오늘은 어떻게 프로젝트에 기여했나요?

- adminpost form 작성

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- 메뉴 이미지 / 이름 / 가격 / 설명 이 들어가는 메뉴 컴포넌트를 추가하는 작업을 했다.
- 메뉴 추가 시 네가지 요소를 한 배열에 담아 클릭이벤트 발생 시 배열을 추가하는 방식으로 작성.
- 사진과 작성글이 콘솔에는 같이 찍히지만 사진업로드가 역순으로 발생하여 이해가 되지않고 힘들었다.
- 도움을 요청하여 코드를 변경해서 해결한 듯 보였지만 추가 테스트를 했을 때 input text 에 글자를 작성하면 다른 input text 에도 영향을 미쳤다. 하지만 이 에러가 일정하게 나타나는 것이 아니라 원인을 파악하는것이 매우 힘들었다.

```js
function AdminUploadMenu({addMenuHandler,menuArr,setMenuArr
}:any):any {
const [menuImg , setMenuImg]:any = useState('');
const [menuName , setMenuName] = useState('');
const [price , setPrice] = useState(0);
const [menuDescription , setMenuDescription] = useState('');

const priceHandler = (e:any) => {
setPrice(e.target.value)
const lastIdx = menuArr.length-1;
const copyArr = menuArr.slice()
copyArr[lastIdx].price = e.target.value;
setMenuArr(copyArr);
}
const changeMenuName = (e:any) => {
setMenuName(e.target.value)
const lastIdx = menuArr.length-1;
const copyArr = menuArr.slice()
copyArr[lastIdx].menuName = e.target.value
setMenuArr(copyArr);

}
const dropHandler = (file:any) => {
const formData = new FormData();
const config = {
headers: { 'content-type' : 'multipart/form-data'}
}
formData.append('file',file[0]);
//dispatch action axios 관리된거 와야함.
axios.post(`${END_POINTS}/image`,formData,config)
.then((res)=>{
if(res.data.success){
const copyArr = menuArr.slice()
const lastIdx = copyArr.length-1;
copyArr[lastIdx].menuImg = res.data.filePath
console.log("copyImg만들어가는 배열",copyArr)
setMenuImg(res.data.filePath)

}else{
alert('파일저장실패')
}
})
.catch((err)=>{
return console.log('==file 가져오기 실패===',err)
})
}

const changeMenuDesc = (e:any) => {

setMenuDescription(e.target.value)
const lastIdx = menuArr.length-1;
const copyArr = menuArr.slice()
copyArr[lastIdx].menuDescription = e.target.value;
setMenuArr(copyArr);
}

const addMenuItemHandler = () => {
if(menuImg && menuName && price && menuDescription){
const menus = {
menuImg : menuImg,
menuName : menuName,
price : price,
menuDescription : menuDescription
}
addMenuHandler(menus);
setMenuImg('');
setPrice(0);
setMenuName('');
setMenuDescription('');
}else{
alert("항목을 다 입력해 주세요")
}
}

//변경, 완료 코드 -> 에러핸들링 추가예정
function AdminUploadMenu({
addMenuHandler,menuArr,
setMenuArr,removeMenuHandler
}:any):any {
const [menuImg , setMenuImg]:any = useState('');
const [menuName , setMenuName] = useState('');
const [price , setPrice] = useState(0);
const [menuDescription , setMenuDescription] = useState('');

const priceHandler = (e:any) => {
setPrice(e.target.value)
const copyArr = JSON.parse(JSON.stringify(menuArr));
copyArr[e.target.id].price = e.target.value
setMenuArr(copyArr)
}
const changeMenuName = (e:any) => {
setMenuName(e.target.value)
const copyArr = JSON.parse(JSON.stringify(menuArr));
copyArr[e.target.id].menuName = e.target.value
setMenuArr(copyArr)
}
const dropHandler = (e:any) => {
const file = e.target.files
const formData = new FormData();
const config = {
headers: { 'content-type' : 'multipart/form-data'}
}
formData.append('file',file[0]);
//dispatch action axios 관리된거 와야함.
axios.post(`${END_POINTS}/image`,formData,config)
.then((res)=>{
if(res.data.success){
//깊은복사
const copyArr = JSON.parse(JSON.stringify(menuArr));
// console.log('copyArr===',copyArr)
// console.log('copyArr target===',copyArr[e.target.id])
copyArr[e.target.id].menuImg = res.data.filePath
setMenuArr(copyArr)
setMenuImg(res.data.filePath)
}else{
alert('파일저장실패')
}
})
.catch((err)=>{
return console.log('==file 가져오기 실패===',err)
})
}
const changeMenuDesc = (e:any) => {
setMenuDescription(e.target.value)
console.log('menuDescription',menuDescription)
const copyArr = JSON.parse(JSON.stringify(menuArr));
copyArr[e.target.id].menuDescription = e.target.value
setMenuArr(copyArr)
}
const addMenuItemHandler = () => {
if(menuImg && menuName && price && menuDescription){
const menus = {
menuImg : menuImg,
menuName : menuName,
price : price,
menuDescription : menuDescription
}
addMenuHandler(menus);
setMenuImg('');
setPrice(0);
setMenuName('');
setMenuDescription('');
}else{
alert("항목을 다 입력해 주세요")
}
}

const uploadHandler = (e:any) => {
e.target.previousSibling.click();
}
const checkHandler = (e:any) => {
dropHandler(e)
}
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] 랜딩페이지 첫번째 / 세번째 섹션 디자인 작업