내일배움캠프 최종 프로젝트 - 프로필 페이지(7) 과 PPT

나의 Surv 페이지에서, 사용자가 작성한 게시글 및 좋아요한 게시글의종료일이 오늘 날짜를 기준으로 지났는지 확인하고, 이에 따라 사용자에게 적절한 메시지를 표시하는 기능을 구현했다.

1. 날짜 비교 함수 구현

• 게시글의 'deadlineDate'가 현재 날짜보다 이전인지를 판단하는 'isDeadlinePast' 함수를 구현했습니다. 이 함수는 게시글의 종료일을 현재 날짜와 비교하여, 종료일이 지났는지 여부를 반환함

const isDeadlinePast = (deadline) => {
  if (!deadline || deadline === 'No deadline') return false;
  const today = new Date();
  today.setHours(0, 0, 0, 0); // 시간을 00:00:00으로 설정
  const deadlineDate = new Date(deadline);
  return deadlineDate < today;
};

2. 조건부 렌더링을 이용한 UI 업데이트

• React 컴포넌트에서 조건부 렌더링을 사용하여, 게시글의 'deadlineDate'가 현재 날짜를 기준으로 지났는지에 따라 다른 메시지를 표시함.
• 종료일이 지났다면 "종료되었습니다"를, 그렇지 않다면 "종료일: [날짜]" 형식으로 사용자에게 보여지도록 함

{
  posts.map((post) => (
    <li key={post.id}>
      <p className="text-sm">
        {isDeadlinePast(post.deadlineDate) ? (
          <span>종료되었습니다</span>
        ) : (
          `종료일: ${post.deadlineDate || 'No deadline'}`
        )}
      </p>
    </li>
  ))
}

3. 스타일링

Tailwind CSS를 활용하여, 종료일이 지난 게시글에 대한 메시지("종료되었습니다")를 빨간색으로 강조하는 스타일 적용해서 사용자가 게시글의 상태를 더 쉽게 식별할 수 있도록 했다.

   <span className="text-red-500">종료되었습니다</span>

그리고 PPT

• 오랜만에 또 만들었다.
• 진짜 이건 따로 어딘가 배운적은 없고.. 그냥 하다보니 느는거같다.

오늘의 한줄평 : 너무 고단하다...