Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

페이지 기능: 채널 페이지 유튜브 api 연결 #220

Merged
merged 9 commits into from
Feb 28, 2024

Conversation

seoye0ng
Copy link
Collaborator

해당 사항 (중복 선택)

  • FEAT : 새로운 기능 추가 및 개선
  • TEST : 테스트 추가 및 리팩토링
  • FIX : 버그 수정
  • REFACTOR : 결과의 변경 없이 코드의 구조를 재조정
  • STYLE : 코드 스타일에 관련된 변경 사항
  • DOCS : 코드가 아닌 문서를 수정한 경우
  • REMOVE : 파일을 삭제하는 작업만 수행
  • RENAME : 파일 또는 폴더명을 수정하거나 위치(경로)를 변경
  • CHORE : 패키지 매니저 설정, 코드 수정 없이 설정 변경(eslint) 등 기타 사항

설명

Key Changes

  1. react-youtube 라이브러리 설치
  2. 유튜브 api 연결
  3. 채널 버튼 임시로 디자인
image

How it Works

To Reviewers

  1. 채널 버튼은 디자인이 완성되면 바뀔 예정입니다.
  2. 하루 할당량이 금방 초과되어 버려서 할당량 초과 오류가 나고 있습니다. 아마 이부분은 백엔드분들과 논의해 봐야할 것 같습니다.

@seoye0ng seoye0ng added ⚙ Setting 개발 환경 설정 ✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링 labels Feb 28, 2024
@seoye0ng seoye0ng self-assigned this Feb 28, 2024
Copy link

vercel bot commented Feb 28, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
f1-wash-pedia-fe ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 28, 2024 5:34am

Copy link
Collaborator

@bottlewook bottlewook left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다~!
흠 아무래도 여러 사용자가 youtube api를 호출하면 할당량은 금방 소진될 것 같은데 아마 백엔드분들이 만들어주셔야 할 것 같네요

title: 'Teddy Swims - You\'re Still The One (Shania Twain Cover)',
description: 'Teddy Swims - You\'re Still The One (Shania Twain Cover)',
}];
const channelList = {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const channelList = {
const CHANNEL_LIST = {

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

완료!

<div>
<Header className={cx('header')} />
<>
<div className={cx('headerTitleContainer')}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

하나 감쌀 땐 wrapper로 하시는 게 좋을 것 같아요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

완료!

return (
<ChannelArticle key={data.id} data={data} />
<ChannelArticle key={idx} data={data} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cud 기능이 없어서 idx 사용해도 좋을 것 같아요~

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인!

const cx = classNames.bind(styles);

function ChannelArticle({ data }: ChannelArticleProps) {
const opts = {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

컴포넌트 랜더링 될 때마다 객체가 재생성 되므로 useMemo를 사용해도 좋지만 이 경우는 값이 바뀌지 않기 때문에 컴포넌트 상위로 빼주시고 변수명은 UPPER_CASE로 바꿔주세요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

완료!

Copy link
Collaborator

@bottlewook bottlewook left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

굳굳~

@seoye0ng seoye0ng merged commit 5d286d4 into develop Feb 28, 2024
6 checks passed
@seoye0ng seoye0ng deleted the feature-page-channel branch February 28, 2024 05:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링 ⚙ Setting 개발 환경 설정
Projects
None yet
Development

Successfully merging this pull request may close these issues.

페이지 기능: 채널 페이지 유튜브 api 연결
2 participants