[6주차] BariBari 미션 제출합니다. #16
Conversation
라우팅한 거 보냅니다,,,
[fix] styled-components 삭제
Lottie Loading 페이지 만듬요
[feat] 홈 화면 스타일링 및 전체 구조 수정
[feat] Header 컴포넌트 생성
�Recoil 선언까지 해놨어용!!
[feat] Top Rated 완성
[fix] TitleText 함수명 수정
프리뷰랑 toprated까지 완성
[feat] header randomimage 불러오기 성공
mainpage 전체 구조 수정
[feat] nowPlaying, popularMovies 구현
[style] MainPage/id page style 정리
[chore] SearchPage 및 global.css 수정
|
|
||
| const Container = styled.div<{circle: boolean;}>` | ||
| width: 110px; | ||
| height: ${(props) => (props.circle ? '105px' : '163px')}; |
There was a problem hiding this comment.
scroll 내리다 보면 2px정도 밀리는 형상이 있어서 감싸는 div에는 굳이 height를 주지 않아도 될 것 같아요!
| height: ${(props) => (props.circle ? '105px' : '163px')}; |
|
|
||
| return ( | ||
|
|
||
| <div className={styles.container}> |
There was a problem hiding this comment.
container을 맨 마지막으로 내리면 position : fixed로 되어있는 Navigation과 겹쳐 보이지 않는데 전체를 감싸는 container에 padding-bottom : 60px; 정도 주면 좋을 것 같아요
| <body> | ||
| <Providers> | ||
| <RecoilRoot> | ||
| {children} | ||
| </RecoilRoot> | ||
| </Providers> | ||
| </body> |
There was a problem hiding this comment.
대부분의 page에서 Navigation 사용하는 것 같은데 매 페이지 하단에 <Navigation/>을 주기 보다 Layout에서 전체적으로 준 다음 Navigation Component에서 페이지 확장성을 위해 '/' 나'/ProfilePage'에 예외를 주는 건 어떨까요 ??
There was a problem hiding this comment.
오 그것도 좋은 방법인 것 같네요!!👍👍 감사합니다!:D
next-netflix/app/Search/page.tsx
Outdated
| const MovieTitle = styled.div` | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| font-size: 14.7222px; | ||
| line-height: 30px; | ||
| letter-spacing: 0.751111px; | ||
| padding-left: 15px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| color: white; | ||
| ` |
There was a problem hiding this comment.
MovieTitle이 길어지면
옆 Play 버튼이 작아질 수 있어서 MovieTitle이 정해진 영역만 차지하도록 width를 주는 건 어떨까요 ?
| const MovieTitle = styled.div` | |
| font-style: normal; | |
| font-weight: 400; | |
| font-size: 14.7222px; | |
| line-height: 30px; | |
| letter-spacing: 0.751111px; | |
| padding-left: 15px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| color: white; | |
| ` | |
| const MovieTitle = styled.div` | |
| font-style: normal; | |
| font-weight: 400; | |
| font-size: 14.7222px; | |
| line-height: 30px; | |
| letter-spacing: 0.751111px; | |
| padding-left: 15px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| color: white; | |
| width : 180px; | |
| ` |
There was a problem hiding this comment.
헛 제가 무한스크롤 기능 구현에 초점을 맞추느라 디자인 부분을 세세하게 체크하지 못했네요;-; 코드에 반영하도록 하겠습니다! 감사합니다🙌
next-netflix/app/Search/page.tsx
Outdated
| <div key={result.id}> | ||
| {result.id ? ( | ||
| <InnerList> | ||
| <Img src={`https://image.tmdb.org/t/p/original${result.poster_path}`} alt={result.title} /> |
There was a problem hiding this comment.
result의 id는 있지만 poster가 없을 수 있어서
| <Img src={`https://image.tmdb.org/t/p/original${result.poster_path}`} alt={result.title} /> | |
| {result.poster_path === null ? ( ( | |
| <Img src="/error.jpg" alt={result.title} /> | |
| ) : ( | |
| <Img src={`https://image.tmdb.org/t/p/original${result.poster_path}`} alt={result.title} /> | |
| )} |
로 예외처리 해주는 게 좋을 것 같아요!
There was a problem hiding this comment.
아하 어쩐지 종종 poster_path 불러오는데 엑박이 뜨는 부분들이 있더라구요..! 예외 처리하면 해결이 되겠네요 감사합니다~! Repick 팀에서는 넷플릭스 배경으로 하셨던데 잘 보았습니닷 ㅎㅎ
| return ( | ||
| <div className={styles.container} align-items="center"> | ||
| <Title>넷플릭스를 시청할 프로필을 선택하세요.</Title> | ||
| <BigProfileBox> | ||
| {userInfo.map((user, index) => ( | ||
| <Link href={`/Home`} as={`/Home`} key={user.userId}> | ||
| <ProfileBox onClick = {() => handleUser(user.userId, user.userName)}> | ||
| <ProfileImage src= {`/image/${user.userName}.jpeg`}/> | ||
| <ProfileName>{user.userName}</ProfileName> | ||
| </ProfileBox> | ||
| </Link> | ||
| ))} | ||
|
|
||
| </BigProfileBox> | ||
| </div> | ||
|
|
||
| ); | ||
| } |
| <MovieSlider> | ||
| { | ||
| previewMovies.map((movie) =>{ | ||
| return ( | ||
| <PosterBox key={movie.id} id={movie.id} circle = {true} title = {movie.title} image = {`https://image.tmdb.org/t/p/original${movie.poster_path}`} description= {movie.overview}/> | ||
| ); | ||
| }, | ||
| )} | ||
| </MovieSlider> |
There was a problem hiding this comment.
중복되는 code인 만큼 따로 component로 관리해도 좋을 것 같아요!
| @@ -0,0 +1,38 @@ | |||
| "use client" | |||
next-netflix/app/Search/page.tsx
Outdated
| ); | ||
| }); | ||
| })} | ||
| <div ref={bottom} /> |
There was a problem hiding this comment.
저희랑 ref 사용하시는 건 같은 데 저희는 참고 여기 참고했습니다! 한번 확인해보셔요~~
There was a problem hiding this comment.
참고자료 덕에 제 에러의 원인을 명확히 파악할 수 있었네요 감사합니닷~!!
| <NavItem icon = "Coming Soon"/> | ||
| <NavItem icon = "Downloads"/> |
There was a problem hiding this comment.
Coming Soon 과 Downloads 에 해당하는 페이지가 없어서 404 에러가 뜨는 것 같아요!!
NavItem 컴포넌트에서 예외 처리를 해주거나 다른 컴포넌트로 관리해도 좋을 것 같아요ㅎㅎ👍🏻
| <ProfileBox> | ||
| <Profile src = {`/image/${user.userName}.jpeg`}/> | ||
| </ProfileBox> |
| <Title>넷플릭스를 시청할 프로필을 선택하세요.</Title> | ||
| <BigProfileBox> | ||
| {userInfo.map((user, index) => ( | ||
| <Link href={`/Home`} as={`/Home`} key={user.userId}> | ||
| <ProfileBox onClick = {() => handleUser(user.userId, user.userName)}> | ||
| <ProfileImage src= {`/image/${user.userName}.jpeg`}/> | ||
| <ProfileName>{user.userName}</ProfileName> | ||
| </ProfileBox> | ||
| </Link> | ||
| ))} | ||
|
|
||
| </BigProfileBox> |
|
|
||
| const fetchSearchData = async ({ queryKey, pageParam = 1 }: { queryKey: [string]; pageParam?: number | undefined }) => { | ||
| const searchInput = queryKey[0]; | ||
| const apiKey = "4a427cc6585f047c91a2fa3483fb8d31"; |
There was a problem hiding this comment.
apiKey와 같은 변수는 .env 파일로 관리해보는 게 어떨까요ㅎㅎ?
There was a problem hiding this comment.
네넵 맞아요 .env 파일에 상수로 처리를 해줬었는데.. 눈물 나는 vercel 배포 에러들 중 apiKey를 읽어오지 못하는 에러가 있더라구요..! 그래서 부득이하게 마지막에 apiKey 변수를 직접 입력해줄 수 밖에 없었습니다 ;-;
참고로 Nextjs에서 .env 파일에 상수를 선언하고, 파일 전역에서 사용하고 싶을 경우 NEXT_PUBLIC_~~ 이런 식으로 선언을 해주면 된다고 합니다!
| <TitleBox>{movieInform[0].title}</TitleBox> | ||
| <DesBox>{movieInform[0].description}</DesBox> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
recoil을 이용해서 상세페이지 정보를 받아오셨군요,,! 저는 useSearchParams()를 이용해 query를 받아오는 방식으로 정보를 받아왔는데, 그럴 경우 주소가 너무 길게 나오게 되더라구요,, recoil을 통해 하는 방법을 생각 못했는데,, 알아갑니다,,!
| <Title>넷플릭스를 시청할 프로필을 선택하세요.</Title> | ||
| <BigProfileBox> | ||
| {userInfo.map((user, index) => ( | ||
| <Link href={`/Home`} as={`/Home`} key={user.userId}> | ||
| <ProfileBox onClick = {() => handleUser(user.userId, user.userName)}> | ||
| <ProfileImage src= {`/image/${user.userName}.jpeg`}/> | ||
| <ProfileName>{user.userName}</ProfileName> | ||
| </ProfileBox> | ||
| </Link> | ||
| ))} | ||
|
|
||
| </BigProfileBox> |
| const topRatedMovies = useRecoilValue(topRatedMoviesRecoil); | ||
| const popularMovies = useRecoilValue(popularMoviesRecoil); | ||
| const previewMovies = useRecoilValue(previewMoviesRecoil); | ||
| const nowPlayingMovies = useRecoilValue(nowPlayingMoviesRecoil); |
| <PosterBox key={movie.id} id={movie.id} circle = {false} title = {movie.title} image = {`https://image.tmdb.org/t/p/original${movie.poster_path}`} description= {movie.overview}/> | ||
| ); |
There was a problem hiding this comment.
https://image.tmdb.org/t/p/original 가 계속 반복되니까 상수로 따로 빼주시면 좋을 것 같아요!
| <Title>넷플릭스를 시청할 프로필을 선택하세요.</Title> | ||
| <BigProfileBox> | ||
| {userInfo.map((user, index) => ( | ||
| <Link href={`/Home`} as={`/Home`} key={user.userId}> | ||
| <ProfileBox onClick = {() => handleUser(user.userId, user.userName)}> | ||
| <ProfileImage src= {`/image/${user.userName}.jpeg`}/> | ||
| <ProfileName>{user.userName}</ProfileName> | ||
| </ProfileBox> | ||
| </Link> | ||
| ))} | ||
|
|
||
| </BigProfileBox> |
next-netflix/app/Search/page.tsx
Outdated
| {!isQueryLoading && !isDataLoading && !isFetching && data && data.pages && ( | ||
| <List> | ||
| {searchResults.map((movie) => { | ||
| console.log(movie); // movie 로그 출력 |
This comment was marked as duplicate.
This comment was marked as duplicate.
Sorry, something went wrong.
[feat] Search페이지 클릭시 세부페이지 이동 완성
서론
안녕하세요 바리바리팀 오예린, 최민주입니다!😇
이번 과제는 처음부터 끝까지 정말로 에러와 싸웠던 한 주였네요..😱
reactQuery, SSR 등 새로운 개념들을 코드에 녹여보려고 한 것이 수 많은 물음표와 에러의 원인이 된 것 같아요.
그래도 그 덕에 민주도 저도 강해질 수 있었던 것 같습니다..^-^ 고생 많았다고 제 파트너에게 박수를 쳐주고 싶네요!🥂
배포 링크
감격
구현 내용
필수 요건
상세 페이지와 검색 페이지를 구현한다.
상세 페이지는 동적 라우팅을 이용해 구현한다.
검색 페이지는 실시간 키워드 검색으로 구현한다.
피그마 디자인을 그대로 구현한다.
SSR을 적용해서 구현한다.
getServerSideProps()를 활용을 했는데, 제 컴퓨터에서만 실행이 되고 다른 분들의 컴퓨터에서는 실행이 되지 않는 아주 요상한 문제가 발생하더라구요..!getStaticProps,getInitialProps,getServerSideProps가 지원이 안된다는 글을 찾았습니다. 대신fetch사용을 권장한다고 합니다. 참고결론: 배포할 때는 Nextjs 13 버전 쓰는 것을 지양하세요..! 고생 많이 하는 것 같아요..!😇👍
Open api를 사용해서 데이터 패칭을 진행한다.
선택 사항
검색 페이지 무한스크롤을 구현한다.
배포하기 전 코드에서 무한 스크롤이 적용이 됐다가 안됐다가 했는데, 배포한 결과를 보니 무한 스크롤 기능이 작동을 하지 않네요..! ㅜㅠ ... 이건 차차 수정을 해보도록 하겠습니다..div ref={bottom}위치를 화면 아래로 내렸더니 먹히는 것 같아요..! 야호Netflix 로고가 뜬 후에 프로필을 선택할 수 있는 화면을 구현하였습니다.
프로필을 누르고 Home 화면으로 넘어가면
Navigation바 오른쪽에 해당 프로필이 작고 귀엽게 뜹니다!🎵Key Questions
1. 정적 라우팅(Static Routing)/동적 라우팅(Dynamic Routing)이란?
2. 성능 최적화를 위해 사용한 방법
Homepage에서PosterBox컴포넌트 활용PosterBox라는 하나의 컴포넌트로 처리해 성능을 개선하였습니다.<PosterBox key={movie.id} id={movie.id} circle = {false} title = {movie.title} image = {`https://image.tmdb.org/t/p/original${movie.poster_path}`} description= {movie.overview}/>에서circle불리언 값을 props로 전달해 보여지는 이미지의 모습을 원 혹은 사각형으로 결정하였습니다.Next
Image컴포넌트 활용Navigation컴포넌트,Header컴포넌트에서 활용하신 것을 확인할 수 있습니다.