유튜버 광고 분석 서비스
-
프로젝트 명 : UTrend
-
프로젝트 기간 : 2024.02.23(금) ~ 02.28(수) (4일간)
-
프로젝트 소개 : 유튜버에게 광고를 주고 싶은 광고주가 유튜버 채널을 분석 할 수 있는 서비스 플랫폼입니다.
| 곽인해 | 김현진 | 서혜련 | 윤미주 | 전종열 |
|---|---|---|---|---|
| @innes-k | @hyun0zin | @Hyeryeon-Seo | @anywhereim | @illuy |
| 팀장 | 팀원 | 팀원 | 팀원 | 팀원 |
| - 메인페이지 헤더, 본문 영상 슬라이더 - 로그인 및 회원가입 - 회원정보 수정 - 로그인 상태관리 |
- 디테일 페이지 (채널 분석) | - API 호출 - 메인페이지 검색 기능 - 즐겨찾기 기능 - 마이페이지 |
- API 호출 - Loading 창 - 메인페이지 인기순위 - 리스트 페이지네이션 |
- 전반적인 html 및 css 뼈대 - 메인페이지 바디슬라이더 영상 modal 기능 - 리스트페이지 목록 |
| 링크 배포 | 발표 및 README 작성 | 링크 배포 | 시연 영상 | README 작성 |
그 외 : Redux Toolkit, Swiper, Slick, React-icon, Recharts
| 메인 페이지 | 리스트 페이지 | 디테일 페이지 |
|---|---|---|
|
|
|
|
https://www.youtube.com/watch?v=qlsFz_7s4Ro
| 메인 페이지 |
|---|
|
|
- header / main / footer로 화면 구성
- header - logo / home / signup / login 각 icon 클릭시 회원가입 / 로그인 모달창 구성
- main - mainslide / search + keyword / bodyslide / best youtube 구성
- main slide : swiper slide 라이브러리를 활용한 슬라이드 구성
- 화면 렌더링 시 헤더의 슬라이더가 자동으로 넘어갑니다.
- 하단의 점 클릭 시 해당 슬라이더로 이동합니다.
- body slide : slick slide 라이브러리를 활용한 슬라이드 구성
- 해시태그 키워드 별 대표 영상을 슬라이더로 조회할 수 있습니다.
- 양 옆의 화살표를 누르면 선택한 방향으로 슬라이더가 이동합니다.
- 영상에 커서를 올리면 크기가 커지고, 클릭 시 모달창으로 영상을 재생합니다.
- main slide : swiper slide 라이브러리를 활용한 슬라이드 구성
| 로그인 | 회원가입 | 모달 |
|---|---|---|
|
|
|
|
-
- firebase authentication을 사용한 로그인 기능 구현
- 이메일/비밀번호 로그인 : 로그인 아이콘을 누르면 모달창이 뜨고, 이메일과 비밀번호를 입력하고 로그인합니다.
- 구글 소셜 로그인 : ‘Google 로그인’ 클릭 시 로그인 팝업창이 뜨고, 구글 계정으로 로그인합니다.
- firebase authentication을 사용한 로그인 기능 구현
-
- 회원가입 모달창에 이메일, 닉네임, 비밀번호를 입력하여 회원가입합니다.
- 이미 가입된 이메일인 경우 중복 가입이 불가능합니다.
-
- bodyslide의 item을 클릭시 모달창이 생성되며, 유튜브 영상을 볼 수 있습니다.
- 메인페이지 검색창에서 텍스트 입력 후 Enter키를 누르거나, 검색아이콘을 클릭해 검색할 수 있습니다.
- 텍스트 입력없이(공백 포함) Enter키/검색아이콘 클릭 시 검색어를 입력해달라는 alert창이 뜹니다.
- 키워드 클릭시 키워드에있는 단어가 검색되어, 리스트 페이지로 넘어갑니다.
- 메인 페이지 하단부에 이달의 인기 유튜버 (인기 5순위)의 썸네일 이미지, 채널명, 순위를 볼 수 있습니다.
- 인기 순위대로 나열해주는 api경로를 국내로 지정하여 한국 유튜버들 중 인기 순위 5명의 채널 id를 받고, 채널 id를 채널 id api에 전달해 썸네일을 받아오게 하여 구현하였습니다.
- 인기 5순위 유튜버 썸네일 이미지를 누르면 해당 유튜브 채널로 이동합니다.
| 리스트 페이지 |
|---|
|
|
- api 데이터를 사용해, 해당 검색 키워드를 포함한 영상이 있는 채널들에 대한 정보(구독자수, 평균 조회수)를 목록에서 볼 수 있습니다.
- `useQuery`훅을 사용하여 API 데이터를 비동기적으로 가져옵니다.
- `queryKey`를 이용하여 키워드와 정렬기준을 전달하여 리스트를 가져옵니다.
- data, isLoding, error를 통하여 api데이터 상태를 확인하며 데이터가 로딩중이면 loding컴포넌트를 표기합니다.
- 페이지네이션 및 현제 페이지의 데이터를 설정하여 페이징되도록 표기합니다.
- 각 리스트마다 즐겨찾기 추가 여부를 표기합니다.
- api로 받아오는 값 만큼 페이지가 증가 순위가 다음페이지까지 이어질 수 있도록 구현 하였습니다.
- useQuery로 refactioring 하여 data나 정렬이 바뀌지 않으면 다른경로에서 다시 돌아오더라도 api 통신을 하지 않습니다.
- keepPreviousData 값으 ture로 설정하여 값이 변경되어 값을 받아오기까지 이전 값을 ui에 보여주고 있습니다.
- 로그인 상태에서, 리스트 페이지의 회색 별 아이콘을 클릭하면 민트색 별 아이콘으로 바뀌면서 해당 유저의 즐겨찾기 목록에 해당 채널이 추가됩니다.
- 로그인 상태에서, 민트색 별 아이콘을 다시 누르면, 즐겨찾기 목록에서 해당 채널이 삭제됩니다.
- 비회원 상태에서는 (혹은 로그아웃) 회색 별 아이콘만 뜨게 하고, 이를 누를 경우 ‘즐겨찾기 기능을 이용하시려면 로그인해주세요’ 라는 alert창이 뜹니다.
- 로그인/로그아웃 여부에 따라 렌더링되도록 해, 기존 리스트페이지에서 로그인/로그아웃을 해도 즐겨찾기 아이콘이 로그인 상태에 따라 즉시 바뀝니다.
| 디테일 페이지 |
|---|
|
|
- 리스트에서 해당 채널을 클릭하면, 채널 상세 정보를 볼 수 있는 디테일 페이지로 이동합니다.
- 상단에서는 채널의 기본 정보를 볼 수 있습니다.
- 채널 방문 버튼을 클릭하면, 해당 채널 링크로 이동합니다.
- 즐겨찾기 버튼을 누르면 즐겨찾기가 되고, 해제 버튼을 누르면 즐겨찾기 해제가 됩니다.
- 비회원 상태에서는 (혹은 로그아웃) 즐겨찾기 추가 버튼만 뜨게 하고, 이를 누를 경우 ‘즐겨찾기 기능을 이용하시려면 로그인해주세요’ 라는 alert창이 뜹니다.
- 로그인/로그아웃 여부에 따라 렌더링되도록 해, 기존 상세페이지에서 로그인/로그아웃을 해도 즐겨찾기 아이콘이 로그인 상태에 따라 즉시 바뀝니다.
(1) 채널 분석 : Pie chart
- Recharts 라이브러리를 사용하여 채널 정보를 가시적으로 한 눈에 확인 할 수 있습니다.
- 구독자 수 대비 최근 평균 조회수와, 채널 평균 조회수를 비교합니다.
- 최근 영상의 평균 좋아요수와 평균 댓글수의 비율을 확인 할 수 있습니다.
(최근 영상 평균은 최근 50개 영상의 평균을 나타냅니다. )
(2) 채널 세부 정보
- 채널의 영상수, 조회수, 댓글수, 좋아요수 등 구체적인 수치를 확인 할 수 있습니다.
- 최근에 업로드한 영상 6개를 볼 수 있습니다. 영상 업로드 날짜, 조회수, 좋아요수, 댓글수를 확인 할 수 있습니다.
- 영상 썸네일을 누르면 해당 영상으로 링크가 이동합니다.
| 마이 페이지 |
|---|
|
|
- 마이페이지에서 로그아웃을 하거나, 로그인을 하지 않은 상태에서 마이페이지(/mypage)에 접근할 경우 자동으로 홈으로 이동하게 됩니다.
- 마이페이지 좌측에 로그인한 사용자의 닉네임, 프로필 이미지, 이메일, 소개글이 조회됩니다.
- 프로필 이미지를 변경하지 않은 상태에서는 기본 이미지가 뜹니다.
- 마이 페이지 우측에는 내 즐겨찾기 목록을 볼 수 있습니다.
- 수정하기 버튼을 클릭 시, 닉네임과 프로필 이미지, 소개글을 수정할 수 있습니다.
- 프로필 이미지는 파일 업로드를 통해 변경 가능합니다.
- 수정 상태에서는 수정 완료, 취소 버튼을 클릭 해 수정 내용을 저장하거나 취소할 수 있습니다.
- 내 즐겨찾기에서 해당 유저가 즐겨찾기 목록에 추가해둔 유튜브 채널들을 확인할 수 있습니다.
- 리스트에는 유튜브채널 썸네일이미지, 채널명, 구독자, 평균 영상 조회수와 함께 즐겨찾기 민트색 별 아이콘이 나타납니다.
- 민트색 별 아이콘을 누르면, '해당 채널을 내 즐겨찾기 목록에서 정말 삭제하실건가요?'라는 confirm 창이 뜨고, 확인을 누르면 새로고침과 함께 목록에서 삭제됩니다.
- 각각의 썸네일 이미지와 유튜브 채널명에 마우스 커서를 두면 손 모양이 뜨며, 클릭하면 새 탭에서 해당 유튜브채널 페이지로 이동합니다.
- 협업의 중요성
- 서로의 문제 해결에 적극적으로 도움을 주고 받으며 성장할 수 있었습니다.
- 기획과 기능 구현에서 다양한 아이디어들을 취합할 수 있었습니다.
- 초기 세팅, 소통의 중요성
-
api 명세서를 구체적으로 정하지 않고 프로젝트를 시작했는데, 후에 각자 작성한 로직에서 혼선이 생겨 api 관련 이슈가 있었습니다. 초기에 api reference를 참고하여 어떤 값이 필요한지, response는 어떻게 받는지 구체적으로 정하고 시작해야 프로젝트 도중 발생하는 혼선을 막을 수 있다는 점을 깨달았습니다.
-
api에서 받아오는 객체를 어떻게 전달할 것인지에 대한 소통이 부족했던 점이 아쉬웠습니다.
- 익숙하지 않았던 기능들 구현하며 성장
- 외부 api 사용, 리액트 쿼리, 리액트 라이브러리 등 익숙하지 않았던 기능들을 소화하여 한층 더 성장할 수 있었습니다.
곽인해
-
평소에도 자동으로 넘어가는 슬라이드와 소셜 로그인 기능을 구현해보고 싶었는데, 이번 프로젝트를 통해 시도해볼 수 있어서 유익했습니다. 막연하게 어려울 것이라고만 생각하고 선뜻 시도하지 못하던 기능들이었는데, 이번 기회를 통해 한 단계 성장한 것 같아 개인적으로 뿌듯했습니다. 그리고 혼자였다면 생각하지 못했을 것 같은 아이디어들을 내는 팀원들을 보면서 협업의 중요성을 다시 한 번 깨달았습니다.
-
이번 프로젝트는 수준 별 수업 중 베이직반 수강생들이 모여 팀을 이루었는데, 처음에는 우리끼리도 잘 할 수 있을까 걱정이 되었습니다. 그런데 걱정에 비해 다들 본인이 할 수 있는 최대한을 구현하려 적극적으로 노력하는게 느껴졌고, 결과물 또한 긍정적으로 나온 것 같다고 생각합니다. 비슷한 수준의 개발 능력을 가진 사람들이 모이더라도 협업하며 배울 점이 많다는 점을 깨달았습니다.
김현진
-
Youtube API를 처음 사용해 보다보니 어떤 데이터들을 불러 올 수 있는지, 어떤 경로로 호출을 해야하는지를 몰라서 막막했습니다. 프로젝트를 진행하면서 필요한 데이터를 반복적으로 다시 호출을 하는 등 시간을 많이 소모하였는데, 프로젝트 초기 세팅부터 어떤 데이터가 필요한지 명확하게 결정하고, api reference를 확인하여 호출 경로와 객체에 어떤 값이 담기는지를 확인하고 api 명세서를 작성해야 한다는 것을 배웠습니다. 또한 팀원들과의 소통의 중요성을 매 프로젝트를 하면서 항상 느꼈지만, api 호출을 하는 과정에서 또다시 소통의 중요성을 배우게 되었습니다.
-
react-query로 상태관리를 하였는데, 데이터를 불러와서 필요한 곳에서 반복적으로 사용을 하다보니 데이터를 전역으로 관리하는 것의 중요성을 다시 배우는 좋은 계기였습니다.
서혜련
-
이번 프로젝트에서 이전에 해보지 못했던 API, 즐겨찾기 기능 구현 등을 도전해봄으로써 많이 배울 수 있었습니다.
-
api를 받아오는 과정에서, 원하는 데이터를 쓰기 위해 알아보는 과정이 생각보다 어려웠고, api 데이터를 받아오는 역할을 처음 맡다보니 데이터를 어느 정도까지 가공해서 주는 게 좋을 지 판단하는 데에 있어 고민이 많기도 했습니다. api 명세서 등을 통해 줄 수 있는 데이터를 처음부터 명확히 하지 못해 팀원들에게 혼란을 줬던 것 같아 아쉽기도 했으나, 소통의 중요성을 깨닫는 계기가 되었습니다.
-
react-query를 사용해 외부 DB와 UI를 동기화시키는 것이 익숙하지 않아 많은 에러에 부딪혔지만, 이를 통해 즐겨찾기 기능을 구현할 수 있어 뿌듯했습니다.
-
적극적으로 서로의 문제를 해결해주면서 의견을 물어보는 팀원들에게서 배울 점이 많다고 느꼈습니다.
윤미주
-
팀원들과 함께 에러부분도 해결해 보고 도움을 주고 받으면서 정말 많이 성장할 수 있었던 것 같습니다.
-
팀원분들이 욕심을 가지고 다양한 기능 구현한 부분들을 보고 배울 수 있었고, 다양한 에러 또한 접할 수 있었습니다.
-
덕분에 이전에 해보고 싶었던 페이지 네이션, 로딩창과 같은 다른 기능들에 욕심내 도전해 보고 또 필요한 부분들을 서로서로 매꾸어가며 배울점이 정말 많은 팀이었다고 생각합니다.
-
아쉽게도 로딩창은 api에서 받아오는 값을 받아 실제 로딩되는 %를 구현하고 싶었으나, 제공 여부를 찾지 못하여 css로만 구현하게 되어 아쉬웠습니다.
-
또한 초기 세팅할 때 이전 팀에서 배웠던 것을 그대로 적용하면서도 또 프로젝트를 하다보니 부족한 부분이 있다는 것도 깨달을 수 있었습니다.
-
api경로를 받아오면서 이전에 했던 프로젝트들은 간단한 객체들을 받았지만 youtube api를 사용하면서 응답 값으로 너무많은 객체를 받다보니 값을 받아 사용하는 팀원분들이 어떤 key값을 필요로 하는지 각가의 경로를 따주어야하는지 전체 객처를 전달하면 되는지에 대한 대화가 필요하다는 것 또한 배웠습니다.
전종열
- 몸 상태가 좋지 않아서 진도를 따라가기 어려운 시간이었습니다. 그러나 팀원들과의 소통과 협업 덕분에 프로젝트에서 발생한 오류나 어려움을 함께 해결할 수 있섭니다.
- 특히 API, 전역 상태 관리등 익숙하지 않아 어려움을 겪었습니다.
- 또한 팀원들과의 소통과 협업은 프로젝트를 원활하게 진행하는데 큰 도움을 주고, 문제를 해결하고 아이디어를 나누며 팀 협업의 중요성도 깨달았습니다.
- 부족한 부분을 채우기위해 앞으로도 노력의 필요성을 느끼며, 어려움을 극복하기 위해 추가적인 학습계획을 세워 앞으로도 긍정적인 마음으로 임하며 계속 성장하도록 하겠습니다.
📦src
┣ 📂api
┃ ┣ 📜auth.js
┃ ┣ 📜config.js
┃ ┣ 📜dataApi.js
┃ ┣ 📜detailApi.js
┃ ┣ 📜favorites.js
┃ ┣ 📜mainSliderDataApi.js
┃ ┗ 📜request.js
┣ 📂assets
┃ ┣ 📂README_img
┃ ┃ ┣ 📜detail.png
┃ ┃ ┣ 📜list.png
┃ ┃ ┣ 📜loding.png
┃ ┃ ┣ 📜login.jpg
┃ ┃ ┣ 📜main.png
┃ ┃ ┣ 📜modal.jpg
┃ ┃ ┣ 📜signup.jpg
┃ ┃ ┣ 📜wireframe_detail.jpg
┃ ┃ ┣ 📜wireframe_list.jpg
┃ ┃ ┗ 📜wireframe_main.jpg
┃ ┣ 📜coloredStar.png
┃ ┣ 📜emptyStar.png
┃ ┣ 📜google.png
┃ ┣ 📜main_banner01.jpg
┃ ┣ 📜main_banner02.jpg
┃ ┣ 📜main_banner03.jpg
┃ ┣ 📜profile_defaultImage.png
┃ ┣ 📜react.svg
┃ ┗ 📜utrend_logo.png
┣ 📂components
┃ ┣ 📂AuthModal
┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┣ 📜Login.style.js
┃ ┃ ┃ ┗ 📜SignUp.style.js
┃ ┃ ┣ 📜Login.jsx
┃ ┃ ┗ 📜SignUp.jsx
┃ ┣ 📂detail
┃ ┃ ┣ 📜AdSuggestBtn.jsx
┃ ┃ ┣ 📜Detail.jsx
┃ ┃ ┣ 📜RecentVideo.jsx
┃ ┃ ┗ 📜TwoLevelPieChart.jsx
┃ ┣ 📂layout
┃ ┃ ┣ 📜Footer.jsx
┃ ┃ ┣ 📜Header.jsx
┃ ┃ ┗ 📜Loading.jsx
┃ ┣ 📂list
┃ ┃ ┣ 📜CardList.jsx
┃ ┃ ┗ 📜ListFavoriteButton.jsx
┃ ┣ 📂main
┃ ┃ ┣ 📜Main.jsx
┃ ┃ ┗ 📜Thumbnail.jsx
┃ ┣ 📂myPage
┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┗ 📜MyPageStyle.js
┃ ┃ ┣ 📜MyPageSection.jsx
┃ ┃ ┗ 📜MyProfile.jsx
┃ ┗ 📂sliders
┃ ┃ ┣ 📜BodySlider.jsx
┃ ┃ ┣ 📜HeaderSlider.jsx
┃ ┃ ┗ 📜VideoModal.jsx
┣ 📂hooks
┃ ┣ 📜useChannelDetailInfo.js
┃ ┗ 📜useMostPopularChannel.js
┣ 📂pages
┃ ┣ 📜Error.jsx
┃ ┣ 📜Home.jsx
┃ ┣ 📜List.jsx
┃ ┗ 📜MyPage.jsx
┣ 📂redux
┃ ┣ 📂config
┃ ┃ ┗ 📜configStore.js
┃ ┗ 📂modules
┃ ┃ ┣ 📜loginSlice.js
┃ ┃ ┗ 📜userSlice.js
┣ 📂share
┃ ┗ 📜Router.jsx
┣ 📂style
┃ ┗ 📜GlobalStyle.jsx
┣ 📜App.jsx
┗ 📜main.jsx