220526

sjy·2022년 5월 29일

TeamProject회고

목록 보기

14/18

한일

쪽지(메세지)관련 기능 작업

먼저 작업한 쪽지 보내기 기능을 제외한 나머지 모든 기능들(보낸 쪽지 목록, 보낸 쪽지 조회, 받은 쪽지 목록, 받은 쪽지 조회, 쪽지삭제)을 작업했다.
목록에서 쪽지 내용이 긴 경우 생략하고 ...으로 보여주는 방식을 적용하기 위해 CSS에서 아래의 기능을 적용했다.

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

또 읽은 쪽지와 아직 읽지 않은 쪽지를 구분하기 위해 백앤드에서 넘겨준 isRead정보를 가지고
color: ${(props=>props.isRead?"#bbbbbb":"#2c2c2c"};
색깔을 나누어 보여주도록 했다.

보낸 시간을 표기하는 양식이 다른 페이지에서 쓰던 것과 달라 표현 방식도 새로 만들었다.

export const messageDate = (date: Date)=>{
    const newdate = new Date(date);
    const yyyy = newdate.getFullYear();
    const mm = String(newdate.getMonth() + 1).padStart(2,'0');
    const dd = String(newdate.getDate()).padStart(2,'0');
    const hh = String(newdate.getHours()).padStart(2,'0');
    const min = String(newdate.getMinutes()).padStart(2,'0');
    const ss = String(newdate.getSeconds()).padStart(2,'0');
    return `${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`
}