유튜브 클론코딩(유저 페이지편)

유저 페이지 만들기 - ( 2022 / 10 / 23 )

오늘은 유튜브의 유저 페이지를 만들어 보았다. 유튜브에서는 많은 사람들의 프로필을 누를 수 있다. 유저의 프로필을 눌렀을 때 이 페이지가 나오는 구조이다.

---

NextJS 코드 (User.js)

import React, { useState } from 'react'
import styles from "../styles/User.module.css"
import Header from "../components//Header.js"
import "../styles/User.module.css"
import { useRecoilState } from 'recoil'
import OpenedSideBar from '../components/OpenedSideBar'
import SideBar from '../components/SideBar'
import { openState } from '../components/states'
import { AiOutlineBell } from 'react-icons/ai'
import UserVideo from '../components/UserVideo'

const user = () => {
  const [isOpened, setIsOpened] = useRecoilState(openState);
  const [isSub, setIsSub] = useState(false);
  return (
    <>
    {isOpened ? <>
    <OpenedSideBar />
    </> : <><SideBar /></>}
    <div className={styles.container}>
      <div id={styles.Profile} className={isOpened ? styles.user_info_part_show : styles.user_info_part}>
        <div className={styles.Top_profile}>
          <div className={styles.profile_fl_box}>
            <div className={styles.profile_box}>
              <img src='https://yt3.ggpht.com/ytc/AMLnZu8rQyE9zHBy5XB7Y3vmnHXHHHBFdisJb_FWhg6J=s176-c-k-c0x00ffffff-no-rj' alt='' />
              <div className={styles.name_fl_box}>
                <p>코딩애플</p>
                <span>구독자 10.4명</span>
              </div>
            </div>
            <div className={styles.sub_button_box}>
              {
                isSub ? <>
                  <div className={styles.sub_button_isSub} onClick={() => setIsSub(false)}>구독중</div>
                  <AiOutlineBell size={25} />
                </>
                : <div className={styles.sub_button} onClick={() => setIsSub(true)}>구독</div>
              }
            </div>
          </div>
        </div>
        <div className={styles.profile_taps}>
            <div className={styles.profile_taps_box}>홈</div>
            <div className={styles.profile_taps_box}>동영상</div>
            <div className={styles.profile_taps_box}>재생목록</div>
            <div className={styles.profile_taps_box}>커뮤니티</div>
            <div className={styles.profile_taps_box}>채널</div>
            <div className={styles.profile_taps_box}>정보</div>
        </div>
      </div>
      <div className={isOpened ? styles.video_show : styles.video}>
        <UserVideo />
        <UserVideo />
        <UserVideo />
        <UserVideo />
        <UserVideo />
        <UserVideo />
      </div>
    </div>
    </>
  )
}

export default user

---

CSS 코드 (User.module.css)

.user_info_part {
  margin-top: 55px;
  float: right;
  width: calc(100% - 72px);
  height: 180px;
  background-color: rgb(250, 250, 250);
}
.user_info_part_show {
  margin-top: 55px;
  float: right;
  width: calc(100% - 240px);
  height: 180px;
  background-color: rgb(250, 250, 250);
}
.Top_profile {
  width: 100%;
  height: 70%;
}
.profile_box {
  width: 20%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#Profile img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 10%;
}
.profile_fl_box {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.name_fl_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.name_fl_box span {
  color: grey;
}
.name_fl_box p {
  font-size: 25px;
  margin: 0;
}
.sub_button_box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 35px;
  margin-right: 5%;
  font-size: 14px;
}
.sub_button {
  width: 70px;
  height: 35px;
  background-color: rgb(199, 8, 8);
  color: white;
  border-radius: 3px;
}
.sub_button_isSub {
  margin-right: 15%;
  width: 70px;
  height: 35px;
  background-color: rgb(230, 230, 230);
  color: rgb(151, 151, 151);
  border-radius: 3px;
}
.profile_taps {
  margin-left: 2%;
  width: 50%;
  height: 30%;
  /* background-color: blue; */
  display: flex;
  flex-direction: row;
  align-items: center;
}
.profile_taps_box {
  width: 100px;
  text-align: center;
  font-size: 14px;
  color: grey;
}
.profile_taps_box:hover {
  color: black;
}
.video {
  float: right;
  width: calc(100% - 72px);
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
}
.video_show {
  float: right;
  width: calc(100% - 240px);
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

---

마무리

아직 끝나지 않은 페이지이다. 계속 코딩하면서 완성할 예정이다.