6회차 과제 - 허기영

[hky035]

1. 내가 개발한 기능

우선 저는 컴포넌트를 크게 Header, Category, Main으로 나누었습니다.

Header에는 로고, 검색창, 프로필 등을 배치하였습니다.
Category에는 콘텐츠 타입에 대한 카테고리들을 배치하였습니다.
Main에는 동영상 및 쇼츠를 배치하였습니다.

1) Header

우선 Header는 Logo, SearchBox, Profile 3가지 컴포넌트로 나누어 구성하였습니다.

return(
        <Wrapper>
            <Logo/>
            <SearchBox/>
            <Profile/>
        </Wrapper>
    )

2) Category

Category는 각 카테고리를 구성하는 CategoryComponent로 구성되어있습니다.
map() 메서드를 사용하여 각 카테고리 종류를 CategoryComponent의 props으로 전달하였습니다.

const Category = () => { 
    const categories = ["전체", "음악", "게임", "라이브", "탭", "액션 어드벤쳐 게임", "만화 영화", "최근에 업로드된 동영상", "새로운 맞춤 동영상"];

    return (
        <Wrapper>
            {categories.map((cate) => {
                return <CategoryComponent cate={cate}/>
            })}
        </Wrapper>
    )
 }

3) Main

Main은 Video와 Shorts 컴포넌트로 구성되어있습니다.

const Main = () => {

    const Wrapper = styled.div`
        margin : 0px 30px;
    `;
    return (
        <Wrapper>
            <Videos/>
            <Shorts/>
        </Wrapper>
    )
}

Video와 Shorts는 VideoComponent, ShortsComponent로 구성되어있습니다.
해당 컴포넌트들에서도 map() 메서드를 사용해 하위 컴포넌트들을 구성하였습니다.

const Shorts = () => {

    const shorts = [
        {title : "한 명씩 꼭 있는 금수저 유학생", views:217},
        {title : "에스파 윈터 난제", views:222},
        {title : "터키에 있단는 수직 수영장?", views:761},
        {title : "실제 원어민 영어 속도 체감", views:359},
        {title : "전직 아이돌의 충격적인 노래 실력", views:356},
        {title : "수컷 사자에게 등을 공격받았던 표범의 놀라운 행동", views:66},
        {title : "대단한 춤이 아니어도 이렇게 무대를 찢을 수 있네 ㅋㅋㅋㅋ", views:159},
        {title : "[엔믹스] 오해원이 추는 나루토춤", views:316}
    ];


  return (
    <>
        <Separator>
            <img alt="shorts-logo" src="https://i.namu.wiki/i/U9askcSIO15NPAQcXXMbIa-K4SpjZlkfgzSzHn9_8bUXlbtzLVlOacFUSELbwoNeJguuUtpgHCE9hvO8iIfHOQ.svg" width="30px"></img>
            Shorts
        </Separator>
        <Wrapper>
            {shorts.map(item => {
                return <ShortsComponent shorts={item}/>
            })}
        </Wrapper>
    </>
  )
}

const Videos = () => {
    const videos = [
        {title :"IT 산업기능 요원 인터뷰 / 급여, 자격, 구직 사이트, 조언 등", author : "온양", views : 30, date : "1년 전"}, // views : k 단위
        {title :"위 수식이 틀린 이유는? (개발자 면접 타입)", author : "코딩애플", views : 16000, date : "1년 전"},
        {title :"playlist 나는 너의 꿈에 살고 | 검정치마", author : "오아 OA", views : 340, date : "1개월 전"},
        {title :"투명물약은 신이다", author : "랄로", views : 34, date : "22분전"},
        {title :"다비치 누나들과 섬 마을에서 생긴일 - 홍콩(하)", author : "곽튜브", views : 12100, date : "1일 전"},
    ];
  return (
    <Wrapper>
    {videos.map( item => { 
        return <VideoComponent video={item}></VideoComponent>
    })}
    </Wrapper>
  )
}

---

2. 내가 유의깊게 개발한 부분

우선 앞선 개발 기능에 언급되었던 것과 같이 map() 메서드와 하위 컴포넌트들을 만들어 카테고리, 동영상, 쇼츠에 해당하는 레이아웃을 만들었습니다.

추가로 실제 유튜브 웹 페이지에 접속하여 확인해보니 Header의 경우 스크롤을 내리더라도 상단에 고정되도록 하기 위하여 <Header>컴포넌트에 css 속성을 추가하였습니다.

const Header = () => {

    const Wrapper = styled.div`
        ...
        position : fixed;
        top : 0;
    `;
    ...
}

실제로는 동영상이나 쇼츠의 썸네일에 마우스를 올려놓았을 시 자동 재생되지만 이를 대신하기 위하여 썸네일의 크기를 커지도록 하였습니다.

const Thumnail = styled.div`
       ...
        transition : 0.3s;

        &:hover {
            scale : 1.02 1.02;
        }
    `;

---

3. 개발하면서 들었던 의문 사항

카테고리들을 클릭할 경우 선택된 카테고리의 background-color와 color 속성을 변하게 하고 싶었으나 이를 제대로 구현하지 못하였습니다.
현재는 hover 속성을 사용하여 카테고리에 마우스를 올릴 시 변경이 되도록 하였으나 이 부분에 대해선 다른 분들과 함께 코드 리뷰를 통해 방법을 생각해보았으면 좋겠습니다.

추가적으로 styledComponent를 각 컴포넌트마다 사용하는 것과 Css 파일을 생성한 뒤 import하여 여러 파일의 컴포넌트에 적용시키는 방법 중 어떤 것을 사용하는 것이 더 나은 방법인지에 대한 의문이 들었습니다.

[JO-MINSEO]

구현하고 싶었던 기능이었는데 기영님이 잘 구현하신 것 같습니다. 참고하겠습니다!

[hky035]

감사합니다!

[JO-MINSEO]

배열을 만들고 map 메서드를 사용하니 코드가 더 깔끔해보여서 좋은 것 같습니다!

[hky035]

감사합니다!

[JO-MINSEO]

detail을 신경 쓰신 것이 느껴집니다...!

[hky035]

감사합니다!
Header 고정을 위해 position : fixed 속성을 사용하는 것이 좋았던 방법 같습니다.

[JO-MINSEO]

클릭된 카테고리의 색이 변하도록 하는 것은 저도 공부해보고 다시 comment 달겠습니다!

[hky035]

.active 선택자를 활용하는 방법을 찾아보았는데 실행이 제대로 안 되어서 계속 찾아보겠습니다.
저도 이 부분 해결 완료 시 추가 코멘트 달겠습니다!