[FE] 추천 로직 및 UI 개선

[Largopie]

관련 이슈

• resolves: [FE] 추천 로직 및 UI를 개선해요 :) #447

작업 내용

DATETIME, DAYSONLY 타입에 따른 추천로직 카드 스토리북 구현

아래 표로 정리된 각 상황을 시각적으로 잘 파악하기 위해 스토리북을 작성했습니다.

	DATETIME(날짜, 시간)	DAYSONLY(날짜)
주최자 O	RecommendCard(DateTime)	RecommendCard(DaysOnly)
주최자 X	RecommendCheckboxCard(DateTime)	RecommendCheckboxCard(DaysOnly)

🌟 변경될 요구사항 목록에 따른 추상화

• “~명 중 ~명에 참여하는 인원도 함께 보여주도록 만들어주세요”
• “DATETIME 타입일 때, 30분 단위로 추천로직이 보여지도록 만들어주세요”
• “DAYSONLY 타입일 때, 하루를 추천할 때는 ~부터 ~까지 말고 ‘8월 14일 (수)’와 같은 형태로 보이게 변경해주세요”

위와 같이 다양한 요구사항에 대응하기 위해서는 적절하게 사용처에서 컴포넌트 분리가 필요하다고 느꼈습니다. 따라서 이를 시각적으로 보고 빠르게 정리하기 위해 아래와 같이 공통적으로 사용되는 부분을 색으로 구분하여 분리했습니다.

• RecommendDateTime: DATETIME 타입일 때 날짜를 보여줍니다.
• RecommendDaysOnly: DAYSONLY 타입일 때 날짜를 보여줍니다.
• MeetingRecommendCard: 주최자 외에 추천하는 시간을 보고 싶은 사용자를 위해 제공됩니다.(/meeting/:uuid/recommend)
• MeetingRecommendCheckboxCard: 주최자가 보고 원하는 날짜를 선택할 수 있습니다.(/meeting/:uuid/confirm)
• RecommendAttendees: “8명 중 2명”과 관련된 UI 로직이 담겨있습니다. 추후에 인원도 함께 보여주어야 하는 상황에 유연하게 대처할 수 있습니다.

추천로직 30분 단위도 보여주도록 수정하기

export const formatTime = (time: string): string => {
  const hour = parseInt(time, 10);
  const hourPrefix = hour >= 12 ? '오후' : '오전';
  const formattedHour = hour % 12 || 12;

  return `${hourPrefix} ${formattedHour}시`;
};

기존 formatTime 유틸함수는 위와 같은 형태로 구현되어 있었습니다. 따라서 30분 단위는 보여주지 못했습니다.

따라서 30분 단위도 보여줄 수 있도록 수정했으며, 보다 직관적인 네이밍을 위해 formatTimeToKorean로 유틸함수명을 수정했습니다.

// "17:00" -> "오후 5시"
// "17:30" -> "오후 5시 30분"
// "03:00" -> "오전 3시"
export const formatTimeToKorean = (time: string): string => {
  const [hour, minutes] = time.split(':').map(Number);
  const hourPrefix = hour >= 12 ? '오후' : '오전';
  const formattedHour = hour % 12 || 12;

  if (minutes === 30) return `${hourPrefix} ${formattedHour}시 ${minutes}분`;
  return `${hourPrefix} ${formattedHour}시`;
};

특이 사항

추천, 확정 페이지 컴포넌트 추상화

주황색 부분 즉, MeetingRecommendCard/MeetingRecommendCheckboxCard는 역할과 책임이 잘 분리되도록 추상화했습니다. 하지만 보라색 사각형으로 보여지는 부분도 공통으로 사용되는 부분이라 추상화가 가능하지만, useMeetingTimeRecommendFilter 커스텀 훅에 의존적인 형태이기 때문에 이 부분은 추후에 추상화 해야할 것 같습니다.

리뷰 요구사항 (선택)

[github-actions]

Test Results

35 tests   35 ✅  22s ⏱️
 4 suites   0 💤
 1 files     0 ❌

Results for commit 799f591.