유튜브 클론코딩(카테고리편)

영상 카테고리 만들기 ( 2022 / 08 / 30 )

클론코딩 할 부분

오늘은 위에 보이는 카테고리를 만들어 볼것이다. 유튜브에서 카테고리는 영상을 분류하는 매우 중요한 기능을 포함하고 있으므로 꼭 한번 해봐야겠다고 생각했다.

---

기능 확인

먼저 카테고리 버튼들의 기능을 확실이 알고나서 코딩을 하기 시작했다. 버튼을 클릭하면 그 버튼의 색이 검정색으로 바뀌면서 글의 색은 하얀색으로 바뀐다. 그리고 만약 앞에 먼저 선택한 버튼이 이미 검정색이라면 이전에 선택했던 버튼은 다시 원래 색으로 돌아온다. 이러한 기능들을 먼저 확인하고 시작해보았다.

NextJS 코드

<div className={styles.Video_cate_box}>
	<div 
		onClick={()=>{setCateColor(1)}} 
        className={
        	`Video_cate ${cateColor === 1 ? "active" : ""} `} >
		<a>모두</a>
	</div>
	<div 
		onClick={()=>{setCateColor(2)}} 
		className={
			`Video_cate ${cateColor === 2 ? "active" : ""} `}>
		<a>관련 콘텐츠</a>
	</div>
	<div 
		onClick={()=>{setCateColor(3)}} 
		className={
			`Video_cate 
            ${cateColor === 3 ? "active" : ""} `}>
		<a>실시간</a>
	</div>
	<div 
		onClick={()=>{setCateColor(4)}} 
		className={
			`Video_cate 
        	${cateColor === 4 ? "active" : ""} `}>
		<a>최근에 업로드된</a>
	</div>
</div>

만든 방식

버튼은 각각 div로 만들었고 useState를 사용해서 각 버튼마나의 인덱스를 임의로 설정해주었다. 그리고 버튼이 클릭될 때마다 앞서 정해둔 자신의 인덱스로 바뀐다. 만약 state와 자신의 인덱스가 같다면 css를 추가해주는 방식으로 만들었다.

---

결과 화면

이것이 내가 만든 카테고리이다. 버튼 테두리를 유튜브와 같은 회색으로 하였고 border-radius를 최대로 줘서 양변이 둥근 형태로 만들었다. 그리고 display 속성을 inline-block로 해주면서 글자의 크기에 맞게 넓이가 변하는 버튼으로 만들었다.

---

마무리

이렇게 Header에 이어서 카테고리까지 만들어보았다. 지금까지의 결과는 아직 거의 나온게 없지만 계속 꾸준이 하다보면 언젠가 유튜브가 되어있을 것이라고 생각한다. 다음 포스팅에서는 영상 시청중 옆에 뜨는 추천 영상 컴포넌트를 만들어보겠다.