[쉘위헬스] 채팅날짜에 따른 출력 형식 변경

Shall we health에서는 운동친구를 구할 수 있는데 구할 수 있는 기간이 최대 2주였다.
너무 길지도 짧지도 않은 일정기간으로 선택하였고,
최대 2주동안 채팅을 할 수 있는 상황이였다.
당일 대화는 아래와 같이 시간만 표기하도록 되어있는 상태여서 당일 이전대화 날짜표기를 변경해주어야 했다

---

날짜변경 함수생성

toLocaleString 이라는 메서드를 사용하여
pastDate에는 지난 날짜일 경우에 표시 될 형식으로 만들었고
nowDate 대화일자가 당일일 경우에 표시 될 형식으로 지정하였다
2주라는 기간동안 달이 넘어 갈 수 있으니,
if문으로 날짜의 month를 먼저 비교해주고 month가 같을 경우에는 날짜를 가져와서 비교하여 형식에 맞추어 출력해주었다

  const dateTime = (date) => {
    const pastDate = new Date(date).toLocaleString('en-Us', {
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      hour12: true,
    });


    const nowDate = new Date(date).toLocaleTimeString('en-Us', {
      hour: '2-digit',
      minute: '2-digit',
      hour12: true,
    });

    const getDate = new Date(date)
    const now = new Date()

    if (getDate.getMonth() < now.getMonth()) { // 이전데이터의 월이 현재의 월보다 작으면 11<12
      return pastDate
    } else { // 월 안작을때 월이 같다
      if (getDate.getDate() < now.getDate()) { // 받아온 데이터가 오늘의 날짜보다 작다면
        return pastDate// 받아온 날짜 15일 < now가 더 클때
      }
      else {
        return nowDate
      }
    }
  }

---

변경 후 출력되는 모습

아래와 같이 이전대화는 날짜와 함께 출력되도록 설정하였다.

---

참고 한 사이트

MDN : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString