[6주차] Team Menual 신용섭 & 최무헌 과제 제출합니다. by hammoooo · Pull Request #10 · CEOS-Developers/next-netflix-22nd

hammoooo · 2025-11-08T12:06:24Z

링크: https://next-netflix-22nd-eosin.vercel.app/

협업 과정

카톡을 통해서 역할을 조율하고 이슈를 공유하였습니다.

뿌듯한 점: Branch를 페이지 단위로 나누어서 개발을 진행하였는데, 이 과정에서 시행착오가 많았지만 값진 경험이었고 보다 더 실무적으로 개발할 수 있어 좋았습니다.

아쉬운 점: PR이나 이슈를 제대로 적용하지 못한 점이 아쉬웠습니다

Research Question
5->6주차 과제 진행하면서 중점적으로 고려한 사항에 대해 작성해 주세요.

무헌:
저는 이번 6주차에서 상세 페이지를 구현하게 되었습니다.  
처음에 따로 상세페이지 API를 만들어서 파라미터로 해당 영화의 ID 값을 넘겨주어 정보들을 받아와야 한다고 생각했습니다
그러나 6주 차의 예시 템플릿을 보고 search param으로 필요한 정보들을 전달하고 있다는 것을 발견하였습니다.
따라서 추가적인 API요청 없이 기존에 받아온 DATA를 이용해 클릭 시 링크 형태로 넘겨주어 상세페이지를 구현할 수 있었습니다.

용섭:
검색페이지에서 실제로 우리는 끝까지 내려가야만 스크롤이 되지 않기에 UX 관점에서 200px전에 다음 페이지 로딩이 되도록 했습니다. useInfiniteQuery를 사용해 getNextPageParam으로 다음 페이지 계산하고, hasNextPage, isFetchingNextPage로 중복 요청을 방지했습니다. 또한 UX관점에서 자연스러움을 주기 위해 로딩 중 스켈레톤UI를 적용했습니다.

최종폴더구조

├── app
│   ├── api
│   │   └── tmdb
│   │       └── [...path]
│   │           └── route.ts
│   ├── detail
│   │   └── [id]
│   │       └── page.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── home
│   │   └── page.tsx
│   ├── layout.tsx
│   ├── page.tsx
│   ├── providers.tsx
│   └── search
│       └── page.tsx
├── components
│   └── features
│       ├── Detail.tsx
│       ├── Home
│       │   ├── Continue.tsx
│       │   ├── Home.tsx
│       │   ├── Popular.tsx
│       │   ├── Previews.tsx
│       │   └── Thumb.tsx
│       ├── landingPage.tsx
│       ├── NavBar.tsx
│       └── TabBar.tsx
├── eslint.config.mjs
├── hooks
│   ├── usePopularMovies.ts
│   ├── useSearchMovies.ts
│   ├── useTopRatedMovies.ts
│   └── useTrendingMoviesDay.ts
├── images
│   ├── info.svg
│   ├── landingPage
│   │   ├── NetflixLogo.svg
│   │   └── NetflixLogoMotion.json
│   ├── navBar
│   │   └── netflixIcon.svg
│   ├── plus.svg
│   ├── searchPage
│   │   ├── delete.svg
│   │   ├── play.svg
│   │   └── search.svg
│   ├── tabBar
│   │   ├── burger.svg
│   │   ├── download.svg
│   │   ├── home.svg
│   │   ├── play.svg
│   │   └── search.svg
│   └── top10.svg
├── lib
│   ├── tmdbImage.ts
│   └── tmdbServer.ts
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── fallback.svg
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── README.md
├── structure.txt
├── tsconfig.json
├── types
│   └── tmdb.ts
└── unused
    └── TrendingMovies.tsx

feature: tabBar 구현

- Resolved package-lock.json conflict - Integrated tabBar and folder structure from main branch

feat: detailPage구현

refactor: mainPage에 popular 추가

codus02 · 2025-11-09T04:24:25Z

고생하셨습니다!! 후기에서 말씀하신것처럼 폴더 구조를 많이 고민한것같아보입니다!!

codus02 · 2025-11-09T04:25:44Z

next-netflix/.prettierrc

그냥 개인적 궁금인데 prettier 설정도 두분이 협의하셨나요?? 다른팀은 어떤지 궁금해서요..

codus02 · 2025-11-09T04:26:10Z

next-netflix/app/favicon.ico

안쓰는 파일은 정리해도 좋을것같습니다

codus02 · 2025-11-09T04:28:00Z

next-netflix/app/search/page.tsx

+
+  return (
+    <div className="min-h-screen bg-black pt-[44px]">
+      {/* 검색창 */}


화면을 아래로 스크롤하면 현재 검색창이 상단에 고정되어서 작품목록과 겹쳐 나오는데 스크롤하면 위로 올라가 안보이게 해도 좋을것같습니다

codus02 · 2025-11-09T04:29:18Z

next-netflix/app/search/page.tsx

+      },
+      {
+        threshold: 0,
+        rootMargin: "200px", // 화면 하단 200px 전에 미리 로드


그리고 무한스크롤이 작동 안하고있는것같습니다

codus02 · 2025-11-09T04:30:38Z

next-netflix/hooks/useSearchMovies.ts

+      }
+      return undefined;
+    },
+    //staleTime: 1000 * 60 * 5, // 5분간 캐시 유지


5분간 캐시 유지되게 한점 좋은것같습니다 !! 이런 생각은 안해봤는데 좋은 아이디어같습니다

codus02 · 2025-11-09T04:32:38Z

next-netflix/app/layout.tsx

화면 전체 크기를 설정하지 않고 축소하면 계속 축소되도록 의도하신건가요?? 개인적으로는 화면 크기가 고정되어있는것도 좋을것같습니다

codus02 · 2025-11-09T04:35:03Z

next-netflix/app/search/page.tsx

+          onChange={(e) => setQuery(e.target.value)}
+          autoFocus
+        />
+        <button onClick={() => setQuery("")} className="p-1 shrink-0">


검색창에서 x 버튼을 누르면 입력 내용이 삭제되는 기능이 있으니까 호버 기능도 넣었어도 좋았을것 같습니다!!

sungahChooo · 2025-11-10T03:34:57Z

next-netflix/app/home/page.tsx

@@ -0,0 +1,25 @@
+import Previews from "../../components/features/Home/Previews";


절대경로 일관되게 적용하시는게 더 좋을 거 같습니다..!

sungahChooo · 2025-11-10T03:40:19Z

next-netflix/components/features/TabBar.tsx

+                    .filter(Boolean)
+                    .join(" ")}
+                />
+                <span className={`text-[8.2px] ${active ? "text-white" : "text-[#8c8787]"}`}>


현재 서치, 커밍순,.. 등 다른 버튼을 눌러도 홈 아이콘만 흰색입니다..! 이 부분 수정 필요할 거 같습니

sungahChooo · 2025-11-10T03:41:10Z

next-netflix/hooks/usePopularMovies.ts

+  const url = `/api/tmdb/movie/popular?language=${encodeURIComponent(language)}`;
+  const res = await fetch(url, { cache: "no-store" });
+  if (!res.ok) throw new Error(`TMDB error: ${res.status}`);
+  return res.json();


axios 적용 추천 드려요!

sungahChooo · 2025-11-10T06:38:50Z

next-netflix/components/features/TabBar.tsx

TabBar 파일 위치가 components 안에 Home폴더 밖에 있는게 더 자연스러울 거 같습니다.

sungahChooo · 2025-11-10T06:41:01Z

next-netflix/components/features/TabBar.tsx

comming-soon페이지, download 페이지 등이 없는데 라우티잉 되어있어서 이런 오류들이 나는거 같아요

sungahChooo · 2025-11-10T06:42:23Z

next-netflix/app/search/page.tsx

+                      key={i}
+                      className="flex items-center bg-[#424242] mb-[3px] h-[76px] animate-pulse"
+                    />
+                  ))


검석어가 없을 때에는 무한스크롤이 작동이 안하는거 같은데 의도하신건가요..?? 아니라면 수정이 필요해 보입니다

sungahChooo

안녕하세요! 코드 잘 봤습니다 과제하느라 수고 정말 많으셨어요 !!!!👏🏻

hammoooo and others added 18 commits October 29, 2025 15:11

feature: next 초기세팅

7b60029

feature: tabBar 구현

12c61fe

Merge pull request #1 from dragunshin/feature/mainPage

61d9f9a

feature: tabBar 구현

feature: LandingPage 구현

9a57c01

Merge origin/main into feature/landingPage

c3ba7f0

- Resolved package-lock.json conflict - Integrated tabBar and folder structure from main branch

refactor: 구조 변경

2c8e639

feature: navBar 구현

74fcbdd

feature: SSR 구현

a97524e

Design: UI 수정

85f292e

feature: searchPage 구현

f085ca0

fix: SVG import 경로 대소문자 수정 (SearchPage -> searchPage)

eba77d6

Design: css 변경

1df5b34

feat: detailPage구현

2a232d6

Merge pull request #3 from dragunshin/feature/detailPage

df99749

feat: detailPage구현

refactor: mainPage에 popular 추가

6998a57

Merge pull request #4 from dragunshin/feature/detailPage

31e7f63

refactor: mainPage에 popular 추가

feature: 무한 스크롤 구현

0e5bc10

style: 코드 스타일 최종 정리

eca2174

codus02 reviewed Nov 9, 2025

View reviewed changes

sungahChooo reviewed Nov 10, 2025

View reviewed changes

feature: 무한 스크롤 구현 수정

3a5b747

		@@ -0,0 +1,25 @@
		import Previews from "../../components/features/Home/Previews";

Comments

Conversation

hammoooo commented Nov 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

협업 과정

Uh oh!

codus02 commented Nov 9, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sungahChooo left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

hammoooo commented Nov 8, 2025 •

edited

Loading