[Taskify] 1차 배포 테스트 - Trouble shooting

멘토님과 1차 배포 테스트를 진행했습니다.

버그를 하나씩 찾아내시는데 제가 작업한 페이지도 버그가 많네요😭

테스트하면서 나온 이슈들을 정리해 보면 아래와 같습니다.

버그를 하나씩 살펴보면서 수정해 보겠습니다!

🚫 문제 상황 : Todo 상세 모달의 타이틀이 길어지면 메뉴를 버튼 영역을 침범하고 UI가 깨짐

 

타이틀이 길어지는 경우 버튼 영역을 침범할 뿐 아니라, UI 적으로도 모달 헤더가 너무 길어 보여서 어색해 보입니다.

모달 타이틀이 저렇게 긴 경우가 있을까 싶지만... 모든 상황을 고려해야겠죠🤔

Figma, 기획서에 타이틀이 길어지는 경우에 관련된 정의가 없어 고민해 본 결과 타이틀을 1줄만 노출하고 길어지면 말 줄임(...) 처리하는 게 가장 자연스러운 것 같습니다.

팀원분들도 모두 말 줄임 처리가 좋다고 하셔서 바로 수정해 보겠습니다!

💡 수정 코드 및 결과

.title {
  /*기존 스타일 생략*/
  margin-right: 84px; // 버튼 영역(84px)만큼 margin 적용

  /* 텍스트가 타이틀 너비를 넘어가면 말 줄임(...) 처리 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 

🚫 문제 상황 : 칼럼 타이틀이 길어지면 영역 밖으로 벗어남

 

해당 이슈도 모달 타이틀과 같은 맥락이라 말 줄임(...) 처리하기로 했습니다.

수정하려고 확대해서 자세히 보는데 타이틀 앞에 점(dot)도 위치가 가운데가 아니네요...😅

💡 수정 코드 및 결과

.column-title {
  /*기존 스타일 생략*/
  /* 30px = 컬럼 수정 버튼(24px) + 여백(6px) */
  width: calc(100% - 30px);
}

.column-title .title-text {
  /*기존 스타일 생략*/
  /* 텍스트가 타이틀 너비를 넘어가면 말 줄임(...) 처리 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

🚫 문제 상황 : Chip 공통 컴포넌트 사용하는 영역(할 일 카드, 할 일 수정 모달) UI 깨짐 수정

처음 공통 컴포넌트를 설계할 때 저렇게 컴포넌트의 사이즈는 페이지에서 커스텀하도록 만들었습니다.

컴포넌트를 만들고 사용 방법을 문서화하기보다는 주석을 남기고, 예시 버튼들이 있는 테스트 페이지를 만들었습니다.

 이 방법이 더 효율적일 거라고 생각했는데, 주석을 읽지 않고 복붙 하는 상황이 생겨서 이슈가 발생했네요.. 수정해 보겠습니다😂

💡 수정 코드 및 결과

/* 할 일 카드 모달 Chip 수정 */
.status .status-text {
  /*기존 스타일 생략*/
  max-width: 80px;

  /* 텍스트가 타이틀 너비를 넘어가면 말 줄임(...) 처리 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 할 일 수정 모달 Chip 수정 */
.status {
  overflow: hidden;
}

.status-content {
  /* 30px = 옵션 체크 아이콘(22px) + 여백(8px) */
  width: calc(100% - 30px);
}

.status-select-text { 
  /* 텍스트가 타이틀 너비를 넘어가면 말 줄임(...) 처리 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 

 

 

느낀 점

테스트 후 발견된 버그와 이슈를 수정하면서 개발 단계에서 더욱 꼼꼼하고 세심하게 작업해야 한다는 점을 다시 한번 느꼈습니다.

이슈 대부분이 스타일 관련 내용인 걸 보니, 마크업과 CSS를 특히 더 신경 써서 작업해야 할 것 같습니다..😂

 

 

 

[Taskify] Tag 이슈 수정

 

[Taskify] 이미지 확장자 제한 추가