날짜 기능이 있는 게시판 만들기

by

날짜를 읽을 때(TZ로)

  • 따라서 서버로 전송된 날짜는 읽을 때 tz 형식으로 제공됩니다.

  • tz는 시간대를 나타냅니다.

    • YYYY-MM-DDTHH:mm:ss.00Z
    • 2023-02-12T16:00:00.000Z
  • 이런 형태입니다.

  • 읽은 데이터
    • 이벤트 목록에서
    • 아마도 수정
  • 두 번 사용됩니다.

  • 이것의 문제는 한국의 시간이 GMT+09:00인데 한국 표준시(GMT+09:00)를 서버에서 데이터베이스에 입력해도 GMT로 입력된다는 점이다.

  • 따라서 해당 국가에 맞는 시간으로 변경하여 리셉션에 시간을 제시할 필요가 있습니다.

    • 즉, 접수는 3시로 보내고 서버도 3시로 보내는데 모멘트로 날짜 객체로 변환하면 서버에서 받은 데이터는 (+9)가 됩니다.

      그리고 12시가 됩니다.

이벤트 목록으로

이벤트 변경의 경우

  • 서버에서 받은 날짜는 이벤트 변경 시 기존 날짜 선택기에 나타나야 하므로 날짜 객체로 변경해야 합니다.

  • 그러므로
  • const (startDate, setStartDate) = useState( new Date(new Date(updateEvent.open).getTime() – 9 * 60 * 60 * 1000), ); const (endDate, setEndDate) = useState( new Date(new Date(updateEvent.close).getTime() – 9 * 60 * 60 * 1000), ); const (startTime, setStartTime) = useState( new Date(new Date(updateEvent.open).getTime() – 9 * 60 * 60 * 1000), ); const (endTime, setEndTime) = useState( new Date(new Date(updateEvent.close).getTime() – 9 * 60 * 60 * 1000), );
  • 그렇게 취급했다
  • 각 상태는 날짜와 시간으로 구분되며, 이 경우 모든 날짜와 시간은 9시간을 빼고 날짜와 시간으로 나누므로 단위는
  • 먼저 날짜 객체로 만들고 getTime을 사용하여 ms 단위의 숫자로 만들고 9시간(9 * 60 * 60 * 1000)을 빼서 다시 날짜 객체로 만듭니다.

  • 이렇게 하면 사용자가 이벤트를 등록하고 이벤트를 편집하기 위해 돌아올 때 날짜 선택기에 날짜가 정상적으로 표시됩니다.

쿠폰 추가 시

  • 이벤트 등록 시 여러 개의 쿠폰을 추가할 수 있습니다.

  • 그러나 현재 이러한 쿠폰에 대해서도 CRUD가 가능합니다.

  • 이벤트 작성 (단, 이때 이벤트 날짜가 주어지면 기본적으로 쿠폰 날짜도 포함됩니다.

    )
    • (선택 사항) 쿠폰을 추가합니다.

    • (선택) 위에서 추가한 쿠폰을 변경합니다.

    • (선택) 위에서 추가하거나 수정한 쿠폰을 삭제합니다.

    • 이벤트 등록 (추가, 추가, 변경된 바우처를 한번에)
  • 지금까지 우리가 한 일은 이벤트를 만들고 등록하는 것뿐이며 이제 (선택)해야 합니다.

  • 이벤트 날짜 지정 시 쿠폰 날짜 기본값 설정
  • 쿠폰 설정을 클릭하면 기존 시가 및 종가 값이 거래로 전송되고 쿠폰 추가 구성 요소에서 확인됩니다.

    	const (startDate, setStartDate) = useState(
    addFormStartExpDate === "" ? false : new Date(addFormStartExpDate),
  );
  const (endDate, setEndDate) = useState(
    addFormStartExpDate === "" ? false : new Date(addFormEndExpDate),
  );
  const (startTime, setStartTime) = useState(
    addFormStartExpDate === "" ? false : new Date(addFormStartExpDate),
  );
  const (endTime, setEndTime) = useState(
    addFormStartExpDate === "" ? false : new Date(addFormEndExpDate),
  );
  • { setCouponState(참); 디스패치(_postAddFormStartExpDate(open)); 디스패치(_postAddFormEndExpDate(닫기)); }} > 쿠폰 설정
  • 쿠폰 추가 시 이벤트 등록과 마찬가지로 datepicker로 날짜를 등록하고 useEffect로 시가를 변경합니다.

  • 단, 여기에 쿠폰을 저장하면 서버로 바로 전송되는 것이 아니라 스토어로 먼저 전송됩니다.

    • 그런 다음 이벤트에 등록하기 전에 상점에서 바우처 목록을 편집 및 삭제할 수 있습니다.

    		_postCoupon: (state, action) => {
      console.log(action.payload);
      state.coupon.unshift(action.payload);
    },
  • 이제 방금 추가한 쿠폰을 변경하는 기능을 구현해야 합니다.

쿠폰 변경의 경우

  • 위에서 추가한 쿠폰을 변경하는 것이기 때문에
    • 기본적으로 YYYY-MM-DD HH:mm 형식으로 쿠폰을 추가할 때 상점에 저장된 데이터를 표시하려면
    	const (startDate, setStartDate) = useState(
    new Date(new Date(couponData.startExpDate).getTime()),
  );
  const (endDate, setEndDate) = useState(
    new Date(new Date(couponData.endExpDate).getTime()),
  );
  const (startTime, setStartTime) = useState(
    new Date(new Date(couponData.startExpDate).getTime()),
  );
  const (endTime, setEndTime) = useState(
    new Date(new Date(couponData.endExpDate).getTime()),
  );
    • .
    • 이후에는 쿠폰을 추가하는 것과 동일합니다.

  • 솔루션이기 때문에
  • _updateCoupon: (state, action) => { for (let i = 0; i < state.coupon.length; i++) { if (i === action.payload.idx) { state.coupon(i) = action. 페이로드 바우처 } } },
  • 관련 쿠폰만 편집하려면 이 옵션을 사용하십시오.
    • 여기서 idx는 쿠폰 목록이 검색될 때의 인덱스입니다(useSelector 사용).
    • 목록을 그릴 때 보통 map 함수를 사용하는데 이때는 index 속성을 사용하고 있습니다.

    • (처음에는 서버의 아이디를 사용했는데 백엔드에서 DB의 아이디를 사용하지 않는 것이 좋다는 말을 듣고 이 방법을 받아서 수정과 삭제 모두 사용했습니다.

      아주 좋아요!
      )
    function Items({ currentItems, updateState, deleteState }) {
  return (
    <Fragment>
      {currentItems &&
        currentItems.map((v, idx) => (
          <CouponCard
            event={v}
            idx={idx}
            updateState={updateState}
            deleteState={deleteState}
          />
        ))}
    </Fragment>
  );
}
  • 삭제는 수정과 비슷하지만
  • _deleteCoupon: (state, action) => { const deleteCoupon_list = state.coupon.filter((v, index) => { return index === action.payload ? false : true; }); state.coupon = deleteCoupon_list; },
  • 나랑 해