📝 오늘 한 것

1. SCSS - video mixin / home / search / edit profile

📚 배운 것

1. styles

1) video mixin / home

(1) video.pug

mixin video(video)
  div.video-mixin__item
    div.video-mixin__thumb
    div.video-mixin__data
      a(href=`/videos/${video.id}`).video-mixin__title=video.title
      div.video-mixin__meta
        a(href=`/users/${video.owner._id}`) #{video.owner.name}
        p 조회수 #{video.meta.views} 회 ㆍ #{video.createdAt.getFullYear()}/#{video.createdAt.getMonth()+1}/#{video.createdAt.getDay()}
    hr

(2) home.pug

extends base
include mixins/video

block content
  div.video-mixin__container
    each video in videos 
      +video(video)
    else
      span.empty-message sorry nothing found

(3) video.scss

.video-mixin__item {
  .video-mixin__thumb {
    height: 150px;
    background-color: rgb(248, 246, 213);
  }
  .video-mixin__data {
    padding: 15px 0 10px 0;
  }
  .video-mixin__title {
    font-size: 18px;
  }
  .video-mixin__meta {
    padding-top: 10px;
    font-size: 14px;
    p {
      margin-top: 5px;
    }
  }
}

(4) shared.scss

grid 사용

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

.empty-message {
  font-size: 18px;
}

2) search

(1) search.pug

extends base
include mixins/video

block content
  form(method="GET").search-form
    input(name="keyword", placeholder="Search by keywords", autofocus)
    input(value="search now", type="submit")
  div.video-mixin__container
    each video in videos 
      +video(video)
    else
      span.empty-message sorry nothing found

(2) search.scss

.search-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 80px auto;
  max-width: 600px;
}

3) edit profile

(1) edit-profile.pug

extends base

block content
  div.edit-profile
    if errorMessage
      span=errorMessage
    img(src="/" + loggedInUser.avatarUrl, weigth="100", height="100").profile-img
    form(method="POST", enctype="multipart/form-data").edit-profile-form
      label(for="avatar") Avatar
      input(name="avatar", type="file", accept="image/*", id="avatar")
      input(name="name", type="text", placeholder="Name", value=loggedInUser.name, required, autofocus)
      input(name="email", type="email", placeholder="Email", value=loggedInUser.email, required)
      input(name="username", type="text", placeholder="Username", value=loggedInUser.username, required)
      input(name="location", type="text", placeholder="Location", value=loggedInUser.location)
      input(value="Update Profile", type="submit")
      if !loggedInUser.socialOnly
        div.goto-change-pw
          hr
          a(href="change-password") Change Password →

(2) edit-profile.scss

.edit-profile {
  display: flex;
  flex-direction: column;
  margin: 80px auto;
  max-width: 800px;
  border-radius: 8px;
  border: 1px solid white;
  .profile-img {
    align-self: center;
    margin-top: 80px;
    border-radius: 8px;
  }
}

.edit-profile-form {
  display: flex;
  flex-direction: column;
  margin: 40px auto;
  label {
    font-size: 18px;
  }
  input[name="avatar"] {
    font-size: 16px;
    padding-bottom: 25px;
  }
}

.goto-change-pw {
  margin: 40px 0;
  font-size: 18px;
  text-align: center;
  hr {
    margin-bottom: 30px;
  }
  a:hover {
    color: $red;
    transition: all 300ms;
  }
}

4) styles.scss

input 기본 스타일링 추가

// Config
@import "./config/_variables.scss";
@import "./config/_reset.scss";

// Conponents
@import "./components/header.scss";
@import "./components/footer.scss";
@import "./components/video.scss";
@import "./components/shared.scss";

// Screens
@import "./screens/search.scss";
@import "./screens/edit-profile.scss";

// Defaults
a {
  color: inherit;
  text-decoration: none;
}

input {
  outline: none;
  border: 2px solid $bg;
  font-size: 18px;
  padding: 5px 10px;
  &[type="submit"] {
    cursor: pointer;
    color: $red;
    &:hover {
      background-color: $red;
      color: white;
      transition: all 300ms;
    }
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: $bg;
  color: white;
  padding: 20px;
}

main {
  max-width: 1200px;
  width: 100%;
  margin: 50px auto;
}

✨ 내일 할 것

1. SCSS 작성