Today I Learned

오늘 한일✅

• 달력 수정을 하였다.

구현 방법✅

1. 오전과 오후가 있기 때문에 조건에 맞춰서 코드를 작성해줌

// AntCalendarTimeEdit.tsx
const postingHour =
    // db에 올라간 날짜에서 오전이라면
    state.RsvHour_Posting.slice(0, 2) === '오전'
      ? // 오전을 빼고 7:09값을 보여준다
        state.RsvHour_Posting.slice(3)
      : // db에 올라간 값이 오후 3:15분이면
        // state.RsvHour_Posting.slice(3).split(':')[0] 하면 3이 나온다.
        // Number(12 + 3 ) 15 넘버로 바꾼다.
        `${Number(state.RsvHour_Posting.slice(3).split(':')[0]) + 12}:${
          state.RsvHour_Posting.slice(3).split(':')[1]
        }`;


// postingHour : 기준으로 나누어준다.
  // ex) 15: 15 --> [15,15]
  const Time = postingHour.split(':');
  // console.log(Time);

  // 1~9까지는 앞에 0이 붙는다
  // ex) [5,5] 이면 Time[0].length는 1 > 1 false이기 떄문에 앞에 0이 붙어서 05가된다.
  // ex) [15,15] 이면 2 > 1 이기 때문에 0이 붙지 않는다.
  const hour = Time[0].length > 1 ? Time[0] : `0${Time[0]}`;
  // console.log(hour);

  const min = Time[1];
  // console.log(min);

  const PreviousHour = `${hour}:${min}`;

2. 수정하기 전의 초기값이 빈 문자열을 기존의 값으로 바꿔주는 부분
   달력처럼 만약 초기값인 PreviousHour있으면 그값을 setReserveTime 넣어주고 15:15를 보내준다. postEdit.tsx에서 오전, 오후를 붙이고 15-(빼기)12를 해서 오후 3:15로해서 db에 재업로드 한다.

// postEdit.tsx
//시간
  const [meetTimeEdit, setMeetTimeEdit] = useRecoilState(TimeEdit);
  const meetHour = meetTimeEdit?.slice(0, 2);

  const isPm = Number(meetHour) >= 12;

  const time12 = isPm
    ? Number(meetHour) === 24
      ? 0
      : Number(meetHour) === 12
      ? 12
      : Number(meetHour) - 12
    : Number(meetHour);

  //AM/PM
  let AMPM = isPm ? '오후' : '오전';

// AntCalendarTimeEdit.tsx
  useEffect(() => {
    if (PreviousHour) {
      setReserveTime(PreviousHour);
    }
  }, [PreviousHour]);

만약 날짜를 수정하면 위의 과정과 달력과 똑같이 클릭한 ymd 값이setReserveTime(date)를 넣어주고 const [reserveTime, setReserveTime] = useRecoilState<any>(TimeEdit)
postEdit.tsx에 보내준다. 그래서 가공이 되어서 새로운 날짜가 db에 수정된다.

알게 된점✅

• 코테를 풀자^^;;