오늘부터 사용자 피드백을 받기로했습니다. 하루만에 다양한 분들의 피드백을 받을 수 있었고 제가 맡은 역할 쪽에 왔던 피드백을 받고 수정했습니다.

1. 비로그인시 게시글이 온전하지 않다.

본래 저희 프로젝트에서는 로그인 상태가 아니더라도 게시글을 모두 볼 수 있게 계획했는데 이번 피드백에서 해당 부분에 지적이 나왔습니다. 그동안에는 문제가 없던 기능이였는데 최근 코드를 수정하고 푸시하는 행위를 반복하며 게시글의 특정 정보가 비로그인시 누락되는 것을 확인하고 수정했습니다.

const userInfo = JSON.parse(localStorage.getItem('payload'));

async function viewRouteDetail(): {
  
  // ...
  
	const route_user_id = route.user.id;

    if (userInfo.user_id === route_user_id) {
            update_box.style.display = 'block';
            update_href.setAttribute("href", `/routes/detail/update/index.html?id=${route_id}`)
    } else {
        update_box.style.display = 'none';
    }
  
  //...
  
}

window.onload = async function () {
    await viewRouteDetail();
    getComments(route_id);
}

문제가 되었던 코드를 가지고 왔습니다. 여기서 문제는 비로그인시 userInfo가 null이 된다는 것인데, 코드를 작성할 때 안일하게 생각해 if조건에 맞지 않으니 당연히 else로 빠지겠다 라고 생각해버렸습니다.

userInfo를 선언하는 곳에서 payload가 존재하지 않을경우 null을 갖게 되고 null을 비교하려고 하니 에러가 발생하게 된 것입니다.

if (userInfo !== null) {
        if (userInfo.user_id !== null && userInfo.user_id === route_user_id) {
            update_box.style.display = 'block';
            update_href.setAttribute("href", `/routes/detail/update/index.html?id=${route_id}`)
        }
    }

그래서 해당 코드에서 조건에 null을 추가해 해당 조건을 통과하고 user_id가 null이 아니라는 조건도 추가해 같은 문제가 또 발생할 것을 대비했습니다.

2. 평점을 주는 모달창에 스크롤을 없애주세요

게시글에 평점을 입력하는 버튼을 클릭하면 평점을 입력하는 모달창이 나오게 되는데 처음 생각으로는 해상도마다 모달창의 위치가 달라져 사용자 편의를 고려해 추가한 기능인데 이게 오히려 사용자에게 불편을 주는 요소가 되었던 것 같습니다.

/* 변경 전 */
overflow: auto;

/* 변경 후 */
overflow: hidden;

overflow를 hidden으로 설정해 기존에 있었던 스크롤바를 삭제기켰습니다.

3. 로그인 필요서비스에 알림이 있었으면 좋겠다.

콘솔에 에러를 띄우는 것만 만들어놓고 정작 사용자가 왜 기능하지 않는지 안내를 해주지 못했습니다.

 if (response.status == 401) {
    alert("로그인이 필요한 서비스입니다.")
 }

로그인이 필요한 모든 서비스에 status가 401로 나올경우 로그인이 필요하다는 알림이 뜨도록 수정했습니다.

소감

오늘 처음으로 사용자 피드백을 받으며 느꼈던 것은 정말 기본적인것을 챙기지 못한 부분이 이렇게 많았구나 라는 것과, 제가 만들고 제가 테스트하는것보다 다른 사람이 체크해주는게 훨씬 빠르고 좋은 피드백이 오고 생각지도 못한 부분에서 캐치를 많이 해준다는 것을 알게 되었습니다.