WelKo_채팅 UI 개선

line-clamp-1 만 사용 시 이미지처럼 어색하게 적용되는 문제 확인

                  <div className="ml-[8px] flex w-full max-w-[280px] flex-col gap-[5px]">
                    <div className="flex items-center justify-between">
                      <p className="line-clamp-1 text-[13px] font-medium">{postDetails.title}</p>
                      <p className="flex-shrink-0 text-[10px] text-grayscale-500">
                        {new Date(firstMessage?.created_at).toLocaleString()}
                      </p>
                    </div>

영향 받는 코드에 flex-shrink-0을 추가하여 해결

flex-shrink 속성 값

flex-shrink 속성은 숫자 값으로 설정할 수 있으며, 이 숫자 값은 다른 요소들과의 상대적인 축소 비율을 나타냅니다.

• 기본값: 1
  • 기본적으로 요소는 축소될 수 있으며, 필요한 경우 다른 요소와 함께 비율에 따라 공간을 줄입니다.
• 0:
  • 요소가 축소되지 않도록 설정합니다. 공간이 부족한 경우에도 이 요소는 줄어들지 않고 원래 크기를 유지하려고 합니다.
• 양수 값 (예: 2, 3, ...):
  • 이 값이 클수록 요소는 더 많이 축소될 수 있습니다. 예를 들어, 두 요소가 각각 flex-shrink: 1과 flex-shrink: 2로 설정되어 있다면, 두 번째 요소는 첫 번째 요소보다 두 배 더 축소됩니다.

flex-shrink-0의 의미

flex-shrink-0은 해당 요소가 Flexbox 컨테이너에서 절대로 축소되지 않도록 설정하는 클래스입니다. 이는 요소가 컨테이너 내에서 다른 요소들에 의해 압축되거나 크기가 줄어들지 않도록 강제합니다.

 

 

기존 created_at 값으로는 년,월,일,시,분,초 불필요한 정보가 모두 나오는 부분 개선

  const formatDate = (created_at: string) => {
    const messageDate = new Date(created_at);
    const today = new Date();

    const isToday =
      messageDate.getDate() === today.getDate() &&
      messageDate.getMonth() === today.getMonth() &&
      messageDate.getFullYear() === today.getFullYear();

    if (isToday) {
      return messageDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
    } else {
      return `${messageDate.getMonth() + 1}.${messageDate.getDate()}`;
    }
  };

위 로직을 활용하여 개선

 

• messageDate: created_at 문자열을 Date 객체로 변환합니다. 이 객체를 사용하여 날짜와 시간에 접근할 수 있습니다.

 

• 오늘인 경우: messageDate 객체의 시간을 "시:분" 형식으로 반환합니다.
  • toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false }): 시간을 24시간 형식으로 시와 분을 2자리로 포맷팅합니다. 예: "14:05".
  • hour12 : false를 생략 할 시 오전,오후 0~12시 사이로 나옵니다.
• 오늘이 아닌 경우: "월.일" 형식으로 날짜를 반환합니다.
  • ${messageDate.getMonth() + 1}.${messageDate.getDate()}: getMonth()는 0부터 시작하므로 1을 더해 사용자가 익숙한 형식으로 반환합니다. 예: "8.9".