📝 오늘 한 것

1. SCSS 작성 마무리

2. populate 중첩 사용 / form에 font-awesome 아이콘 넣기 / shared.scss 작성 / 이미지 비율에 맞춰 원형으로 자르기 / 프로필 이미지가 없는 경우 / 텍스트 수직 중앙 정렬

📚 배운 것

1. styles

전체 코드는 깃허브에 올림
여기에는 어려웠던 부분들만 따로 정리

1) populate 중첩 사용

User object의 videos 필드의 _id 값을 실제 Video object들로 바꾸면서 그 Video object의 owner 필드의 _id 값도 실제 User object로 바꾼다.

// videoController.js
export const see = async (req, res) => {
  const { id } = req.params;
  const videos = await User.find(id).populate({
    path: "videos",
    populate: {
      path: "owner",
      model: "User",
    },
  });
};

2) form에 font-awesome 아이콘 넣기

input(value="search now", type="submit")을 삭제하고 대신에 button을 추가했다.
그 후 position relative와 absolute를 이용해 위치를 잡았다.

//- search.pug

form(method="GET").search-form
  input(name="keyword", placeholder="Search by keywords", required, autofocus)
  button
    i.fas.fa-search

// search.scss
.search-form {
  position: relative;
  button {
    position: absolute;
    right: 5px;
    top: 7px;
    font-size: $font-regular;
    background-color: transparent;
    color: $bg;
    border-style: none;
  }
}

3) 텍스트 수직 중앙 정렬

[CSS] 텍스트 세로 중앙 정렬 4가지 참고

li {
  margin-left: 44px;
  text-transform: uppercase;
  font-weight: bold;
  display: table;
  a {
    display: table-cell;
    vertical-align: middle;
  }
}

4) shared.scss 작성

• container
• video mixin container
• empty message
• join과 login 페이지를 오가는 auth switch
• 프로필 이미지

.container {
  display: flex;
  flex-direction: column;
  margin: 40px auto;
  padding: 40px;
  max-width: 400px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  hr {
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
}

.video-mixin__container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 80px 0;
}

.empty-message {
  font-size: $font-regular;
}

.auth-switch {
  margin: 20px 0;
  font-size: $font-small;
  text-align: center;
  a {
    text-decoration: underline;
    transition: all 300ms;
  }
  a:hover {
    color: $red;
  }
}

.profile-outer-box {
  width: 60px;
  .profile-inner-box {
    padding-top: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    .profile-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

5) 이미지 비율 맞춰 원형으로 자르기

[TIL] 210925 中 비율 유지하는 반응형 이미지 만들기를 참고해서 수정했다.

그런데 위에서 정리했던 대로 작성하니까 이미지의 크기가 어떻든 상관없이 중앙에서 무조건 (80x80)px을 잘라내서 이미지의 일부분만 보여주는 문제가 있었다.

내가 원하는 건 이미지의 중앙에서 먼저 짧은 변을 기준으로 정사각형으로 자른 후에 (80x80)px의 원형에 맞춰서 보여주는 것이었다.

width와 height를 모두 100%로 지정한 후 object-fit: cover을 이용해 이미지의 한 변이 다른 변에 비해 심하게 길어도 원에 딱 맞게 위치하도록 했다.

다만 이 방법은 쓸 때마다 더 좋은 방법이 있을까 고민된다. div를 이렇게 중복해서 쓰는 게 최선은 아닐 텐데.

.profile-outer-box {
  width: 60px;
  .profile-inner-box {
    padding-top: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    .profile-img {
      width: 100%; // 추가 ❗
      height: 100%; // 추가 ❗
      object-fit: cover; // 추가 ❗
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

6) 프로필 이미지가 없는 경우

처음 패스워드를 이용해 가입하면 프로필 이미지가 없다.
이 경우에 header의 프로필 이미지를 이모지로 대체한다.
프로필 확인 페이지도 같은 방법으로 수정했다.
a 태그를 한 번만 쓰도록 수정하고 싶었으나 5) 때문에 그렇게 할 수가 없다.

if loggedInUser.avatarUrl === undefined
  a(href=`/users/${loggedInUser._id}`)
    span 😁
else
  div.profile-outer-box
    div.profile-inner-box
      a(href=`/users/${loggedInUser._id}`)
        img(src="/" + loggedInUser.avatarUrl).profile-img

✨ 내일 할 것

1. video player 만들기