[3주차 과제] 유튜브 랜딩 페이지 클론 / 프로젝트 기본 세팅

[KIMGEONHWI]

✨어떤 과제를 수행했나요?✨

3주차 유튜브 랜딩 페이지 클론 / 프로젝트 기본 세팅 과제

1. 유튜브 랜딩 페이지 스크린 샷

2. [초기세팅]prettier, eslint, styleLint에 대해서(아티클 작성)
https://velog.io/@geonhwi1014/%EC%B4%88%EA%B8%B0%EC%84%B8%ED%8C%85prettier-eslint-styleLint%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

✨어려웠던점, 트러블슈팅✨

FontAwesomeIcon 적용
React에서는 FontAwesomeIcon를 처음 사용해보는데 사용 방법대로 적용하였으나 Icon이 화면에 랜더링이 되지 않는 문제가 발생.
=> 어짜피 프로젝트에서는 svg를 사용할 것이라 큰 의미 없긴 하지만, 적용하는데 1시간 이상 투자하였음. (시간 아깝다)
참고자료
https://ssddo-story.tistory.com/15

MainSectionItem 구현

export const mainConstants = [
  {
    id: 0,
    imgSrc: "/src/assets/img/img_screen_1.png",
    title: "[K-Fancam] 뉴진스 혜린 직캠 'How Sweet'(New Jeans HaeRin Fancam) 뮤직뱅... ",
    place: "KBS Kpop",
    endTime: "조회수 5.9만회 ㆍ 2일 전",
  },
  {
    id: 1,
    imgSrc: "/src/assets/img/img_screen_2.png",
    title: "[K-Fancam] 뉴진스 혜린 직캠 'How Sweet'(New Jeans HaeRin Fancam) 뮤직뱅... ",
    place: "KBS Kpop",
    endTime: "조회수 5.9만회 ㆍ 2일 전",
  },
  {
    id: 2,
    imgSrc: "/src/assets/img/img_screen_3.png",
    title: "[K-Fancam] 뉴진스 혜린 직캠 'How Sweet'(New Jeans HaeRin Fancam) 뮤직뱅... ",
    place: "KBS Kpop",
    endTime: "조회수 5.9만회 ㆍ 2일 전",
  },
  {
    id: 3,
    imgSrc: "/src/assets/img/img_screen_4.png",
    title: "[K-Fancam] 뉴진스 혜린 직캠 'How Sweet'(New Jeans HaeRin Fancam) 뮤직뱅... ",
    place: "KBS Kpop",
    endTime: "조회수 5.9만회 ㆍ 2일 전",
  },
  {
    id: 4,
    imgSrc: "/src/assets/img/img_screen_5.png",
    title: "[K-Fancam] 뉴진스 혜린 직캠 'How Sweet'(New Jeans HaeRin Fancam) 뮤직뱅... ",
    place: "KBS Kpop",
    endTime: "조회수 5.9만회 ㆍ 2일 전",
  },
  {
    id: 5,
    imgSrc: "/src/assets/img/img_screen_6.png",
    title: "[K-Fancam] 뉴진스 혜린 직캠 'How Sweet'(New Jeans HaeRin Fancam) 뮤직뱅... ",
    place: "KBS Kpop",
    endTime: "조회수 5.9만회 ㆍ 2일 전",
  },
];

위와 같이 더미 데이터를 상수 파일로 분리하여 map함수를 활용하여 item을 불러옴.

function HomeMainSection() {
  return (
    <HomeMainWrapper>
      <HomeMainContainer>
        {mainConstants.map((item) => (
          <Card key={item.id}>
            <img src={item.imgSrc} alt={`img-${item.id}`} />
            <CardContent>
              <Title>{item.title}</Title>
              <Place>{item.place}</Place>
              <EndTime>{item.endTime}</EndTime>
            </CardContent>
          </Card>
        ))}
      </HomeMainContainer>
    </HomeMainWrapper>
  );
}

아쉬운점🥲

aside 구현에서 button

function HomeNav() {
  return (
    <HomeNavWrapper>
      <HomeNavContainer>
        <HomeNavList>홈</HomeNavList>
        <HomeNavList>shorts</HomeNavList>
        <HomeNavList>구독</HomeNavList>
        <HomeNavList>YouTube Music</HomeNavList>
      </HomeNavContainer>
      <HorizonLine />
      <HomeNavContainer>
        <HomeNavList>나</HomeNavList>
        <HomeNavList>내 채널</HomeNavList>
        <HomeNavList>시청기록</HomeNavList>
        <HomeNavList>재생목록</HomeNavList>
        <HomeNavList>내 동영상</HomeNavList>
        <HomeNavList>나중에 볼 동영상</HomeNavList>
        <HomeNavList>좋아요 표시한 동영상</HomeNavList>
        <HomeNavList>오프라인 저장 동영상</HomeNavList>
      </HomeNavContainer>
      <HorizonLine />
      <HomeNavContainer>
        <HomeNavList>구독</HomeNavList>
      </HomeNavContainer>
    </HomeNavWrapper>
  );
}

header 밑에 있는 button

function HomeHeaderBottom() {
  return (
    <HomeHeaderBottomWrapper>
      <HomeHeaderBottomBtn>전체</HomeHeaderBottomBtn>
      <HomeHeaderBottomBtn>게임</HomeHeaderBottomBtn>
      <HomeHeaderBottomBtn>음악</HomeHeaderBottomBtn>
      <HomeHeaderBottomBtn>믹스</HomeHeaderBottomBtn>
      <HomeHeaderBottomBtn>라이브</HomeHeaderBottomBtn>
      <HomeHeaderBottomBtn>야구</HomeHeaderBottomBtn>
      <HomeHeaderBottomBtnLong>최근에 업로드된 동영상</HomeHeaderBottomBtnLong>
      <HomeHeaderBottomBtnMiddle>감상한 동영상</HomeHeaderBottomBtnMiddle>
      <HomeHeaderBottomBtnMiddle>새로운 맞춤 동영상</HomeHeaderBottomBtnMiddle>
    </HomeHeaderBottomWrapper>
  );
}

재사용이 많이 되는 버튼은 공통 컴포넌트로 분리하여 재사용하면 더 좋았을텐데 급하게 구현하느라 그러지 못한점이 아쉽습니다!
리팩토링할 기회가 생긴다면 하고 싶은 부분입니다.

🤔 PR Point

HomeHeaderBottom.jsx

위 사진과 같이 전체, 게임, 음악, 믹스, 라이브, 야구 버튼은 동일한 버튼이고 최근에 업로드된 동영상, 감상한 동영상, 새로운 맞춤 동영상 버튼은 너비가 더 긴 버튼입니다.
너비만 다를 뿐 모두 동일한 스타일링이 적용된 버튼인데, 버튼 안에 들어가는 글자수에 따라 너비가 늘어나는 반응형? 버튼을 구현할 수 있는지 궁금합니다.

      <HomeHeaderBottomBtn>야구</HomeHeaderBottomBtn>
      <HomeHeaderBottomBtnLong>최근에 업로드된 동영상</HomeHeaderBottomBtnLong>
      <HomeHeaderBottomBtnMiddle>감상한 동영상</HomeHeaderBottomBtnMiddle>

이런식으로 글자길이에 따라 다른 태그로 감싸주어 스타일링 해주는 것이 효율이 매우 떨어지는 것 같습니다.
하나의 버튼으로 재사용성을 늘리고 싶은데 가능한지 궁금합니다.

[SooY2]

pr을 너무 잘써서 pr에 올라온 질문들을 얼른 답해주고 싶은 마음에.. 이 부분들만 일단 코리 남깁니다~~
아티클까지... 짱건휘 수고해따

[SooY2]

목록도 상수화해서 map돌리는 방법을 사용할 수 있습니당
content(목록 제목), link(이동할 링크) 등 을 props로 넘겨서 추상화할 수 있을거 같아요!

[SooY2]

객체로 만든거 너무너무 좋네유~~

[SooY2]

아나 열심히 남겼는데 삭제이슈 ;;;

[SooY2]

Suggested change

	width: 4rem;
	width: fit-content;

fit-content 속성을 사용하면 내용물에 맞춰 너비를 설정할 수 있어요! 여백을 원한다면 padding!!

[SooY2]

Suggested change

	const HomeHeaderBottomBtnLong = styled.button`
	const HomeHeaderBottomBtnLong = styled(HomeHeaderBottomBtn)`

HomeHeaderBottomBtn에서 속성 하나만 변하는 상황이라면 스타일링 컴포넌트 상속을 사용해 보는것도 추천합니당 ~