Boostart는 데일리 라이프를 웹 서비스 내에서 관리 공유함으로써 매일의 삶을 더욱 윤택하게 기록할 수 있도록 도와줍니다. 사용자에게 한층 더 기분 좋은, 고퀄리티의 인터페이스를 제공하기 위한 한 끗 을 담고자 노력했습니다.

LOG 탭의 CSS 애니메이션

1. 좌측의 시간 바 애니메이션

• 하나의 일정이 선택 되었을 때 좌측의 시간 바에서 24시간 중 해당 일정이 점유하고 있는 소요 시간을 시각화하였습니다.
• 일정의 시작시간과 종료시간 문자열로부터 시간 정보를 도출하고, 이를 기반으로 시작 시각, 소요 시간을

const calculateTime = (startedAt: string, endedAt: string) => {
    const [startHour, startMin] = startedAt.split(':').map((v) => parseInt(v));
    const [endHour, endMin] = endedAt.split(':').map((v) => parseInt(v));
    const startedTime = startHour + startMin / 60;
    const duration = endHour + endMin / 60 - startedTime;
    setTimeMarkerData([startedTime, duration]);
  };

export const TimeMarker = styled.div<{
  startedAt: number;
  duration: number;
}>`
 //...
  height: ${(props) => props.duration * 1.3}rem;
  position: absolute;
  top: ${(props) => props.startedAt * 1.3}rem;
  transition: all 0.5s;
  background: var(--color-main);
`;

일정의 상세 정보

• LOG 탭에서는 클릭을 통해 각 일정의 상세 정보를 확인할 수 있습니다.
  • 각 일정이 담고 있는 칼럼의 수가 제각각이기 때문에 각 task가 가지고 있는 요소에 따라 컴포넌트의 길이 값을 계산하는 로직의 함수를 설계하고 calc을 이용하여 각 컴포넌트가 원활한 뷰를 가질 수 있도록 하였습니다.
  • 길이에 따라 transition의 시간을 차등화함으로 더욱 자연스러운 애니메이션을 위해 노력했습니다.

const CalcHeight = (task: Task) => {
    let count = 0;
    if (task.location) count++;
    if (task.content && task.content !== '') count += 4.6;
    if (task.labels.length !== 0) count += Math.ceil(task.labels.length / 2) * 1.5 + 0.8;
    if (!currentVisit.isMe) count = count - 2;
    return count;
  };

export const TaskItem = styled.div<{done: number; cols: number;}>`
  //...
  transition: min-height ${(props) => (props.cols < 3.6 ? '0.3s' : '0.4s')} ease-out;
  background: ${(props) => (props.done === 1 ? '#F0F4FB' : 'white')};

  &[data-active='true'] {
    min-height: calc(7.8rem + ${(props) => props.cols}rem);
    flex-direction: column;
  }