Youtube 검색 기능 UI 구현

진행중인 폴더안에서 작업한다. public폴더 안에 images폴더를 만들어 주고 png파일들을 넣어준다.

받아놓았던 logo.png를 ico로 변환한 다음 public폴더 안에 넣는다.

 

컴포넌트 폴더안에 header파일들을 넣고 header.jsx안에 아래와 같이 코드를 작성한다.

// rsi를 이용하고

import styles from './search_header.module.css';
import React from 'react';

const SearchHeader = props => <h1>Header</h1>;

export default SearchHeader;

app.jsx파일에 와서 return부분의 코드를 아래와 같이 작성하고, app.css를 app.module.css로 이름을 바꾸고 새로운 코드를 작성한다.

import styles from './app.module.css';

return (
    <div className={styles.app}>
      <SearchHeader/>
      <VideoList videos={videos} />
    </div>
);

.app {
  max-width: 80rem;
}

index.css에서도 코드를 추가해준다.

#root {
  display: flex;
  justify-content: center;
}

헤더를 작성해보면 스타일링은 styles를 이용해서 작성을 했으니까 search_header.jsx파일을 아래와 같이 코드를 작성한다. 또 search_header.module.css을 스타일링을 해주어서 헤더부분을 만들어본다.

const SearchHeader = props => {
    return (
        <header className={styles.header}>
            <div className={styles.logo}>
            <img className={styles.img} src="/images/logo.png" alt="logo"/>
            <h1 className={styles.title}>Youtube</h1>
            </div>
            <input className={styles.input} type="search" placeholder="Search..." />
            <button className={styles.button} type="submit">
                <img 
                className={styles.buttonImg} 
                src="/images/search.png" 
                alt="search"
                />
            </button>
        </header>
    );
};

.header {
  display: flex;
  height: 4rem;
  padding: 0.5em 1em;
  background: black;
  color: white;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 1em;
}

.input {
  flex-basis: 100%;
  font-size: 1.2rem;
  outline: 0;
}

.button {
  background-color: darkgrey;
  outline: 0;
}

.buttonImg {
  cursor: pointer;
  height: 100%;
  padding: 0.5em 0.2em;
  transition: transform 250ms ease-in;
}

.buttonImg:hover {
  transform: scale(1.3);
}

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)