[6주차] Team Modelly 손주완&정윤지 과제 제출합니다.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+### 🚀 이슈 유형
+- [ ] 기능 추가
+- [ ] 버그 수정
+- [ ] 리팩토링
+- [ ] 기타 (설명 추가)
+
+---
+
+### ✨ 기능
+어떤 기능을 구현할지 간단히 작성해주세요.
+
+---
+
+### 📎 참고 자료
+피그마, 노션, 스크린샷, 관련 링크 등 있으면 첨부해주세요.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,17 @@
+### 💡 To Reviewers
+- 해당 브랜치에서 새롭게 설치한 라이브러리가 있다면 함께 명시해 주세요.
+- 리뷰어가 코드를 이해하는 데 도움이 되는 정보나 참고사항이 있다면 자유롭게 작성해 주세요.
+
+### 🔥 작업 내용 (가능한 구체적으로 작성해 주세요)
+- 메인 페이지 리스트 컴포넌트 구현
+- 헤더 구현
+
+### 🤔 추후 작업 예정
+- 추가 구현이 필요한 부분이나 다음 작업 계획을 작성해 주세요.
+
+### 📸 작업 결과 (스크린샷)
+- 작업 결과를 보여주는 스크린샷을 첨부해 주세요.
+
+### 🔗 관련 이슈
+- 브랜치 생성 시 연결했던 이슈 번호를 작성해 주세요.
+- 예: #2

.gitignore

@@ -0,0 +1,43 @@
+# 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
+
+.cursorrules

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

README.md

@@ -1,59 +1,36 @@
-# 5주차 과제: Next Netflix 🎬🍿
+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:
 
-이번 주부터는 새 프로젝트인 **Netflix 클론코딩**을 진행합니다! 
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-이번 과제에서는 **Next.js**를 활용해 **SSR(Server Side Rendering)** 을 직접 경험해보고, 주어진 **Figma 디자인**을 활용해 스타일링 하는 방법을 이해하는 것을 목표로 합니다.
+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 사용법을 공부해봅니다.
-- Figma로 주어지는 디자인으로 스타일링 하는 방식에 익숙해집니다.
-- Git을 이용한 협업 방식에 익숙해집니다.
-- 프론트엔드와 백엔드 시스템에 대한 흐름을 이해합니다.
+- [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!
 
-> 2025년 11월 1일 토요일 (기한 엄수)
+## 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.
 
-- [결과화면](https://next-netflix-18th-2.vercel.app)의 랜딩 페이지와 메인 페이지를 구현합니다.
-- [Figma](https://www.figma.com/file/UqdXDovIczt1Gl0IjknHQf/Netflix?node-id=0%3A1)의 디자인을 그대로 구현합니다.
-- Open api를 사용해서 데이터 패칭을 진행합니다. (ex. [themoviedb API](https://developers.themoviedb.org/3/getting-started/introduction))
-- `yarn`, `yarn berry`, `npm`, `pnpm`등 패키지 매니저를 직접 선택해 Next.js를 세팅해 봅니다.
-
-### 👍🏻 선택 요건
-
-- SSR(Server Side Rendering)을 적용해서 구현합니다.
-- 웹 폰트를 사용합니다.
-- 반응형을 고려합니다.
-
-### 🔑 Research Question
-
-- 전반적인 협업 과정에 대해 알려주세요. 👏🏻 (21기 PR 참고하셔도 좋을 것 같아요)
-
----
-
-### **🔗 링크 및 참고자료**
-
-- [useCallback과 React.Memo를 이용한 렌더링 최적화](https://velog.io/@yejinh/useCallback%EA%B3%BC-React.Memo%EC%9D%84-%ED%86%B5%ED%95%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94)
-- [성능 최적화](https://ui.toast.com/fe-guide/ko_PERFORMANCE)
-- [React 18의 새로운 기능](https://www.youtube.com/watch?v=7mkQi0TlJQo)
-- [react 서버 컴포넌트가 해결하는 문제들 in kakao 기술 블로그](https://tech.kakaopay.com/post/react-server-components/)
-- [vercel의 배포 방식](https://www.youtube.com/watch?v=8q-jCvLWwKc&t=11s)
-- [랜딩페이지 영상](https://lottiefiles.com/kr/)
-- [Next.js Docs](https://beta.nextjs.org/docs)
-- [Next.js 13에서 변한 것들](https://velog.io/@hang_kem_0531/Next.js-13%EC%9D%B4-%EB%82%98%EC%99%80%EB%B2%84%EB%A0%B8%EB%8B%A4)
-- [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)
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

eslint.config.mjs

@@ -0,0 +1,29 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import nextTs from 'eslint-config-next/typescript';
+import prettierConfig from 'eslint-config-prettier';
+import pluginPrettier from 'eslint-plugin-prettier';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  {
+    plugins: {
+      'simple-import-sort': simpleImportSort,
+      prettier: pluginPrettier,
+    },
+    rules: {
+      // disable stylistic rules that conflict with Prettier
+      ...prettierConfig.rules,
+      // keep import sorting automated
+      'simple-import-sort/imports': 'warn',
+      'simple-import-sort/exports': 'warn',
+      // surface prettier issues as ESLint warnings
+      'prettier/prettier': 'warn',
+    },
+  },
+  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,25 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  },
+  turbopack: {
+    rules: {
+      '*.svg': {
+        loaders: ['@svgr/webpack'],
+        as: '*.ts',
+      },
+    },
+  },
+  images: {
+    domains: ['image.tmdb.org'], // 외부 이미지 도메인 추가
+  },
+};
+
+export default nextConfig;