📝 오늘 한 것

1. 파일 input CSS 스타일링

2. 키보드 접근성 - focus-visible

3. input의 change 이벤트 선택한 파일 이름 보여주기

4. 버그 수정

📚 배운 것

1. webassembly video transcode

1) input[type="file"] CSS 스타일링

input[type="file"]을 보이지 않게 숨겼다.
파일 이름을 보여줄 input을 readOnly로 만들었다.
label에 fontawesome icon을 넣어주었다.

Styling an input type="file" button 참고

//- edit-profile.pug

form(method="POST", enctype="multipart/form-data")
  div.file-upload
    input(value="Avatar", readOnly)#avatar__fileName.file-upload__fileName
    label(for="avatar")
      i.fas.fa-file-import
      input(name="avatar", type="file", accept="image/*", id="avatar")

// form.scss

.file-upload {
  display: flex;
  justify-content: space-between;
  font-size: $font-small;
  border: 1px solid $light-grey;
  border-radius: 4px;
  margin: 2px 0;
  input[type="file"] {
    position: absolute;
    left: -99999rem;
    overflow: hidden;
  }
  .file-upload__fileName {
    width: 80%;
    border-style: none;
    background-color: transparent;
    color: $grey;
  }
  .fas.fa-file-import {
    color: white;
    padding: 0 10px;
    line-height: 44px;
    cursor: pointer;
  }
}

2) focus-visible

button과 input을 마우스로 클릭했을 때 나타나는 outline을 없애고자 한다.
그런데 이를 무턱대고 없애면 해당 요소에 키보드로는 접근할 수 없게 된다.
따라서, 마우스로 클릭했을 때만 outline을 없애고, 키보드로 접근 시에는 focus 되도록 즉 outline이 나타나도록 해야 한다.

button의 경우 focus-visible로 해결이 가능하다.

// styles.css

button {
  cursor: pointer;
  border-style: none;
}

// 키보드로 접근 시
button:focus-visible {
  outline: $blue solid 1px;
}

// 마우스로 접근 시
button:focus:not(:focus-visible) {
  outline: none;
}

그러나, input은 focus-visible로 해결이 안된다.
키보드 입력을 지원하는 요소는 마우스로 클릭해도 :focus-visible이 적용되어 위처럼 작성하면 키보드와 마우스로 클릭할 때 모두 여전히 outline이 나타난다.

다만, video player의 볼륨 바와 타임라인은 키보드 입력을 지원하지 않는 input[type="range"]이기 때문에 :not(:focus-visible)을 사용할 수 있다.

3) button / input 텍스트 수직 중앙 정렬

Vertical text alignment in buttons and inputs

텍스트를 담고 있는 button 혹은 input의 위, 아래 padding을 제거하고, line-height를 button 혹은 input의 height 값과 동일하게 설정한다.

4) 선택한 파일 이름 보여주기

(1) fileName.js 파일 만들고 연결하기

client 폴더에 fileName.js 파일을 만든 후 webpack.config.json 파일을 수정했다.
upload.pug와 edit-profile.pug 파일에서 script를 추가했다.
webpack을 다시 시작하면 assets 폴더에 fileName.js 파일이 추가된다.

(2) input의 change 이벤트

MDN - 웹 어플리케이션에서 파일 사용하기 🔥
MDN - HTMLElement: change event
Display file name in page after selecting file in file input 참고

event.srcElement는 더 이상 사용되지 않기 때문에 대신 event.target을 사용했다.
event.target.files는 파일들에 대한 정보를 담고 있는 배열이다.
배열의 요소인 각각의 파일은 객체로서 name, size, type 속성을 가진다.
따라서, event.target.files[0].name을 통해 파일 이름을 얻어온 후 이를 파일 이름을 보여줄 input의 value 값에 할당한다.

그런데 처음에 cannot read property 'addeventlistener' of null 에러가 떴다.
프로필 수정 페이지로 가면 videoInput을 찾을 수 없다고 뜨고, 비디오 업로드 페이지로 가면 avatarInput을 찾을 수 없다고 떴다.
script 태그에 defer 옵션을 추가하고 이를 head 안으로 옮겨도 해결되지 않았다.
아예 해당 엘리먼트를 받아온 것이 확실히 확인되면 해당 이벤트를 감지할 수 있도록 if 구문을 사용했다.

// fileName.js
const avatarInput = document.getElementById("avatar");
const videoInput = document.getElementById("video");
const thumbInput = document.getElementById("thumb");
const avatarFileName = document.getElementById("avatar__fileName");
const videoFileName = document.getElementById("video__fileName");
const thumbFileName = document.getElementById("thumb__fileName");

if (avatarInput) {
  const showAvatarFileName = (event) => {
    avatarFileName.value = event.target.files[0].name;
  };
  avatarInput.addEventListener("change", showAvatarFileName);
}

if (videoInput) {
  const showVideoFileName = (event) => {
    videoFileName.value = event.target.files[0].name;
  };
  videoInput.addEventListener("change", showVideoFileName);
}

if (thumbInput) {
  const showThumbFileName = (event) => {
    thumbFileName.value = event.target.files[0].name;
  };
  thumbInput.addEventListener("change", showThumbFileName);
}

2. 그 밖의 버그 수정

의도한 대로 보이지 않는 부분들을 발견해서 다시 수정을 했다.

1) 볼륨 바 조절에 따른 볼륨 아이콘 변경

볼륨 바를 움직여 음소거 상태에서(video.muted) 볼륨 업 상태로 만들면, 음소거 아이콘이 볼륨 업 아이콘으로 바뀌도록 했다.
볼륨 바를 움직여 볼륨 업 상태에서 음소거 상태로 만들면(value === "0"), 볼륨 업 아이콘이 음소거 아이콘으로 바뀌도록 했다.

// videoPlayer.js
const handleVolumeChange = (event) => {
  const {
    target: { value },
  } = event;
  if (video.muted) {
    video.muted = false;
    muteBtn.innerHTML = "<i class='fas fa-volume-up'></i>";
  }
  if (value === "0") {
    video.muted = true;
    muteBtn.innerHTML = "<i class='fas fa-volume-mute'></i>";
  }
  volumeValue = value;
  video.volume = volumeValue;
};

2) :hover와 :active에 :not([disabled]) 추가

다운로드를 시작해서 완료하기 전까지 다운로드 버튼을 비활성화(disabled) 했다.
이로 인해 다운로드 버튼이 눌리지는 않지만 :hover와 :active에 설정한 transition 값들로 인해 버튼 위에 마우스를 가져갔을 때 효과가 생긴다.
이를 막기 위해 :not([disabled])를 사용했다.

// upload.scss

&:hover:not([disabled]) {
  background-color: $red;
  color: white;
}
&:active:not([disabled]) {
  opacity: 0.8;
}

3) 비디오 플레이어 CSS 수정

흰색 아이콘에 투명 배경을 사용하니까 흰색 영상에서 비디오 플레이어가 안 보여서 배경 색을 바꿨다.

✨ 내일 할 것

1. flash message