[기업협업] admin 페이지 - (3)

이벤트 생성, 수정/삭제 모달의 레이아웃 완료
data를 서버에 전달하면 기능 부분 구현 완료 - 리팩토링 필요

---

레이아웃 끝내고 기능 구현의 대부분을 완료했는데
그 중 기억에 남은 부분들을 기록해 보았다.

const [saveData, setSaveData] = useState()
const detailEventData = (item) => {
    setSaveData(item)
    setVisibleXL(!visibleXL)
  }

<CSmartTable
...
show_details: (item) => {
  //item = {id:1, title: 이벤트제목01 ...}
  //item = {id:2, title: 이벤트제목02 ...} 
  // ....
  //item = {id:6, title: 이벤트제목06 ...}
    return (
      <td className="py-2">
      <CButton
      color="primary"
      variant="outline"
      shape="square"
      size="sm"
      onClick={() => {
      detailEventData(item)
    }}
    >
      {'상세'}
  </CButton>
</CSmartTable>

상세버튼을 클릭하면 item의 id에 따라 정보가 보여지는데
setSaveData(item)에 item을 저장하여
<EventModal visible={visibleXL} detailData={saveData} title="이벤트 상세" /> 이벤트 상세페이지를 보여주는 모달에 전달하여 해당 id의 값만 볼 수 있게 했다.

---

const EventModal = ({ visible, detailData, title }) => {
	return <> .... </>
}

EventModal.propTypes = {
  visible: PropTypes.bool,
  detailData: PropTypes.object,
  title: PropTypes.string,
}

export default EventModal

그리고 coreUI에서 props로 넘겨 구조분해할당을 했을 때 값이 나오지 않았다. 그래서 PropTypes로 타입 검사를 해주니까 제대로 data를 불러올 수 있었다.
참고 : https://ko.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper

---

const [updateData, setUpdateData] = useState({})

useEffect(() => {
  setUpdateData({
    ...updateData,
    id: detailData?.id,
    title: detailData?.title,
    sub_title: detailData?.sub_title,
    img_url: detailData?.img_url,
    link_url: detailData?.link_url,
    event_from: detailData?.event_from,
    event_to: detailData?.event_to,
    bottomsheet_url: detailData?.bottomsheet_url,
  })
 }, [detailData])

props로 받은 detailData는 잘 보이는데 그걸 가져와서 사용하는 updateData는 undefined로 나와서 useEffect안에 주고 의존성 배열에 updateData를 넣어주니까 제대로 잘 적용이 되었다.

---

URL.createObjectURL(e.target.files[0])
URL.revokeObjectURL()

admin 페이지는 다양한 분야의 직원(사용자)들이 사용하고, 컨텐츠들을 추가하고 수정할 수 있다. 그래서 이미지 파일 업로드 전 미리보기 기능을 추가하여 좀 더 편하게 사용할 수 있도록 하였다.