[6주차] Team STORIX 김윤성&이채연 과제 제출합니다.

README.md

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 # 5주차 과제: Next Netflix 🎬🍿
 
 ## 서론
@@ -57,3 +58,82 @@
 - [Next.js 14에서 변한 것들](https://velog.io/@lee_1124/Next.js-14-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8)
 - [Git 협업 가이드](https://velog.io/@jinuku/Git-%ED%98%91%EC%97%85-%EA%B0%80%EC%9D%B4%EB%93%9C)
 - [디자이너와 개발자가 협업하기 위한 피그마 기본 기능](https://chingguhl.tistory.com/entry/%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EA%BC%AD-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%ED%94%BC%EA%B7%B8%EB%A7%88-10%EA%B0%80%EC%A7%80-%EA%B8%B0%EB%8A%A5-%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88%EC%99%80-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%ED%98%91%EC%97%85%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%EA%B8%B0%EB%B3%B8-%EA%B8%B0%EB%8A%A5)
+---
+
+# 📘 GitHub 협업 브랜치 전략 (next-netflix-22nd)
+
+## 🏁 목적
+
+- `main` 브랜치는 항상 **배포 가능한 안정 버전**으로 유지
+- 팀원별로 **담당 페이지별 브랜치**를 생성하여 작업
+- 완료되면 `main` 브랜치로 **Pull Request (PR)** 하여 병합
+
+---
+
+## 📁 브랜치 구조
+
+| 브랜치 이름     | 담당 파일                      | 담당자        |
+|----------------|---------------------------------|----------------|
+| `main`         | 전체 (배포용)                   | 김윤성         |
+| `기능1`    | `-`, `-`        | 김윤성        |
+| `기능2`   | `-`, `-`       | 김윤성         |
+| `기능3` | `-`, `-`   | 이채연         |
+| `기능4` | `-`, `-`   | 이채연         |
+| `기능5`  | `-`, `-`     | 이채연        |
+
+---
+
+## 🛠️ 브랜치 작업 순서 (팀원용)
+
+```bash
+# 1. main 기준 브랜치 생성 및 전환
+git checkout main
+git pull origin main
+git checkout -b 기능1
+
+# 2. 파일 수정 및 작업
+
+# 3. 변경사항 커밋
+git add .
+git commit -m "기능1 작업"
+
+# 4. 브랜치 푸시
+git push origin 기능1
+=======
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+>>>>>>> 93a5945 (검색창 거의다함)

next-netflix-22nd/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next-netflix-22nd/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 80,
+  "semi": true,
+  "bracketSpacing": true,
+  "objectWrap": "preserve",
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}

next-netflix-22nd/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

next-netflix-22nd/app/(frame)/detail/[media]/[id]/page.tsx

@@ -0,0 +1,50 @@
+// app/(frame)/detail/[media]/[id]/page.tsx
+import Detail from '@components/detail/detail';
+
+type Params = {
+  params: Promise<{ media: 'movie' | 'tv'; id: string }>;
+};
+
+async function fetchTmdbDetail(media: 'movie' | 'tv', id: string) {
+  const token =
+    process.env.TMDB_ACCESS_TOKEN ||
+    process.env.NEXT_PUBLIC_TMDB_ACCESS_TOKEN ||
+    '';
+  const url = `https://api.themoviedb.org/3/${media}/${id}?language=eng-US`;
+
+  const res = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json;charset=utf-8',
+    },
+    cache: 'no-store',
+  });
+  if (!res.ok) {
+    throw new Error(`TMDB detail ${media}/${id} ${res.status}`);
+  }
+  return res.json();
+}
+
+export default async function Page({ params }: Params) {
+  const { media: mediaParam, id } = await params;
+  const media = mediaParam === 'tv' ? 'tv' : 'movie';
+  try {
+    const item = await fetchTmdbDetail(media, id);
+    return (
+      <main>
+        <Detail item={item} />
+      </main>
+    );
+  } catch (err) {
+    return (
+      <main className="text-white p-6">
+        <h1 className="text-xl font-semibold">
+          상세 정보를 불러올 수 없습니다.
+        </h1>
+        <p className="mt-2 text-white/80 text-sm">
+          잠시 후 다시 시도해 주세요.
+        </p>
+      </main>
+    );
+  }
+}

next-netflix-22nd/app/(frame)/home/layout.tsx

@@ -0,0 +1,15 @@
+// src/app/pages/home/layout.tsx
+import type { ReactNode } from 'react';
+import Header from '@home/header';
+
+export default function HomeLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {/* 헤더: 오버레이 */}
+      <div className="absolute top-3 left-0 right-0 z-30">
+        <Header />
+      </div>
+      {children}
+    </>
+  );
+}

next-netflix-22nd/app/(frame)/home/page.tsx

@@ -0,0 +1,101 @@
+// src/app/pages/home/page.tsx
+import Section from '@home/section';
+import Hero from '@home/hero';
+import CardRow from '@home/cardrow';
+import HeroOverlay from '@home/herooverlay';
+import Previews from '@home/previews';
+
+// 기존 섹션들 + 새 섹션들 임포트
+import {
+  getPopularOnNetflix,
+  getTrendingNow,
+  getTop10InKoreaToday,
+  getKoreanMovies,
+  getNetflixOriginals,
+  getNewReleases,
+} from '@/lib/tmdb';
+
+export default async function Page() {
+  // My List는 아직 저장소 연동이 없으니 비워둠(섹션은 보이되, 내용 없으면 표시문구가 나옴)
+  const myList: any[] = [];
+
+  const [pPopular, pTrending, pTop10, pKrMovies, pOriginals, pNew] =
+    await Promise.allSettled([
+      getPopularOnNetflix('movie'),
+      getTrendingNow(),
+      getTop10InKoreaToday(),
+      getKoreanMovies(),
+      getNetflixOriginals(),
+      getNewReleases(),
+    ]);
+
+  const popularNetflix =
+    pPopular.status === 'fulfilled' ? (pPopular.value.results ?? []) : [];
+  const trending =
+    pTrending.status === 'fulfilled' ? (pTrending.value.results ?? []) : [];
+  const top10 =
+    pTop10.status === 'fulfilled' ? (pTop10.value.results ?? []) : [];
+  const koreanMovies =
+    pKrMovies.status === 'fulfilled' ? (pKrMovies.value.results ?? []) : [];
+  const netflixOriginals =
+    pOriginals.status === 'fulfilled' ? (pOriginals.value.results ?? []) : [];
+  const newReleases =
+    pNew.status === 'fulfilled' ? (pNew.value.results ?? []) : [];
+
+  // Hero 후보: 트렌딩에서 하나, 없으면 다른 섹션에서
+  const heroItem =
+    trending[0] ??
+    popularNetflix[0] ??
+    koreanMovies[0] ??
+    netflixOriginals[0] ??
+    newReleases[0] ??
+    top10[0];
+
+  const heroRank = heroItem
+    ? top10.findIndex((x: any) => x.id === (heroItem as any).id) + 1 ||
+      undefined
+    : undefined;
+
+  return (
+    <>
+      {/* Hero는 이미지만 (상단부터 415px) */}
+      <Hero item={heroItem} />
+      <HeroOverlay rank={heroRank} />
+
+      {/* 헤더에 가리지 않도록 Hero 이후부터만 여백 */}
+      <div className="mt-14 px-6 space-y-10">
+        <Section title="Previews">
+          <Previews items={trending.length ? trending : popularNetflix} />
+        </Section>
+
+        <Section title="Continue Watching">
+          <CardRow items={trending} />
+        </Section>
+
+        <Section title="Popular on Netflix">
+          <CardRow items={popularNetflix} />
+        </Section>
+
+        <Section title="Trending Now">
+          <CardRow items={trending} />
+        </Section>
+
+        <Section title="Top 10 in Korea Today">
+          <CardRow items={top10} numbered />
+        </Section>
+
+        <Section title="Korean Movies">
+          <CardRow items={koreanMovies} />
+        </Section>
+
+        <Section title="Netflix Originals">
+          <CardRow items={netflixOriginals} />
+        </Section>
+
+        <Section title="New Releases">
+          <CardRow items={newReleases} />
+        </Section>
+      </div>
+    </>
+  );
+}

next-netflix-22nd/app/(frame)/layout.tsx

@@ -0,0 +1,41 @@
+import Menu from '@home/menu';
+
+export default function FrameLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="w-full h-dvh bg-[gray] flex items-start justify-center">
+      <div className="relative w-[375px] h-dvh max-w-[100vh] text-white bg-black">
+        <section
+          aria-label="메인 화면"
+          className="
+            absolute inset-0
+            overflow-y-auto overscroll-y-contain
+            [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden
+            pt-0
+            pb-[calc(48px+24px+env(safe-area-inset-bottom))]
+          "
+        >
+          {children}
+        </section>
+
+        <div className="absolute left-0 right-0 bottom-[24px] z-20 flex justify-center">
+          <Menu />
+        </div>
+
+        <div
+          className="absolute left-0 right-0 bottom-0 h-6 z-10 bg-black"
+          aria-hidden
+        >
+          <img
+            src="/home-indicator.svg"
+            alt=""
+            className="h-full w-auto mx-auto select-none pointer-events-none"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}