유튜브 클론코딩(헤더편)

Header 만들기 ( 2022 / 08 / 29 )

클론코딩 할 부분

먼저 화면의 가장 윗부분인 Header부터 만들어줄 것이다. 나는 코딩을 하기전에 Header의 박스 구조부터 확인했다. 박스 구조를 확인한 결과 Header의 메뉴버튼과 로고가 하나의 박스로 묶여 있었고 검색부터 마이크 아이콘까지 하나의 박스로 묶여있었다. 그리고 영상 업로드 아이콘과 알림 아이콘, 프로필 사진까지가 하나의 박스로 묶여 있었으며 이 박스들은 하나의 전체 Header로 묶여있었다.

이렇게 박스 구조를 파악한 후에 화면 만들기를 시작했다.

---

프레임워크는 NextJS를 사용했으며, 코드는 다음과 같이 나왔다.

NextJS 코드

import React, { useState } from 'react'
import { IoIosSearch } from "react-icons/io"
import { BsFillMicFill, BsKeyboardFill, BsBell } from "react-icons/bs"
import { AiOutlineVideoCameraAdd } from "react-icons/ai"
import { VscMenu } from "react-icons/vsc"
import  styles from '../styles/Header.module.css'
const Header = () => {
  const [kColor, setkColor] = useState('gray');
  return (
    <div className={styles.Header_container}>
      <div className={styles.Header_logo_box}>
        <VscMenu className={styles.Header_menu} color='black' size='20'/>
        <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlarhI6h34FuayM6pl2zHnEySeUy-uR5GCbQ&usqp=CAU' />
      </div>
      <div className={styles.Header_search_box}>
        <div className={styles.Keyboard_in_search}>
          <BsKeyboardFill 
          onMouseOver={() => {setkColor('black')}}
          onMouseLeave={() => {setkColor('gray')}}
          className={styles.Keyboard_icon} color={kColor} size='18' />
        </div>
        <input className={styles.Header_input} type='text' placeholder='검색'/>
        <div className={styles.Header_submit}>
            <IoIosSearch color='gray' size='25'/>
        </div>
        <div className={styles.Header_mic_box}>
          <BsFillMicFill color='black' size='18'/>
        </div>
      </div>
      <div className={styles.Header_right_part}>
        <AiOutlineVideoCameraAdd className={styles.Header_icons} color='black' size='22'/>
        <BsBell className={styles.Header_icons} color='black' size='20'/>
        <img src='https://yt3.ggpht.com/ytc/AMLnZu9Jzp859A5IesAX3WqVFY0ocYhG3_oFkYuLlNlH1KPJhA=s88-c-k-c0x00ffffff-no-rj-mo'/>
      </div>
    </div>
  )
}

export default Header

중간중간에 아이콘이 필요한 경우가 많아서 React-Icons를 사용했다.

---

CSS는 파일을 모듈화해서 import로 불러오는 방법으로 연결시켰고 CSS 코드는 다음과 같다.

CSS 코드

.Header_container {
    position: fixed;
    top: 0;
    width: 100%;
    height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
.Header_menu {
    width: 30px;
}
.Header_menu:hover {
    cursor: pointer;
}
.Header_logo_box {
    width: 220px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.Header_logo_box img {
    height: 100%;
}
.Header_logo_box img:hover {
    cursor: pointer;
}
.Header_search_box {
    height: 100%;
    width: 45%;
    display: flex;
    align-items: center;
    margin-left: 13%;
}
.Keyboard_in_search {
    position:relative;
    left: 76%;
}
.Header_input {
    background-color: white;
    width: 90%;
    height: 70%;
    border: none;
    border: 1px solid #ccc;
    border-right: none;
    font-size: 15px;
}
.Header_submit {
    background-color: rgb(247, 247, 247);
    width: 65px;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
}
.Header_submit:hover {
    cursor: pointer;
}
.Header_mic_box {
    margin-left: 10px;
    width: 40px;
    height: 40px;
    background-color: rgb(246, 246, 246);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Header_mic_box:hover {
    cursor: pointer;
}
.Header_right_part {
    position: fixed;
    right: 40px;
    width: 150px;
    display: flex;
    align-items: center;
}
.Header_icons {
    margin: 15px;
}
.Header_icons:hover {
    cursor: pointer;
}
.Header_right_part img {
    margin-left: 15px;
    border-radius: 50%;
    width: 33px;
}
.Header_right_part img:hover {
    cursor: pointer;
}

---

이렇게 코드를 작성한 결과는 이렇게 나왔다.

결과 화면

마무리

아이콘의 형태가 안 맞고 박스의 넓이가 조금 안 맞아서 정확히 나오지는 않았지만 거의 비슷하게 나온듯하다. 다음 포스팅에서는 Contents 부분의 영상 카테고리를 만들어 봐야겠다.