[6주차] Team DiggIndie 백승선 & 조성아 과제 제출합니다.

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

.github/ISSUE_TEMPLATE/커스텀-이슈-템플릿.md

@@ -0,0 +1,23 @@
+---
+name: 커스텀 이슈 템플릿
+about: 해당 이슈 생성 템플릿을 사용하여 이슈를 생성해주세요.
+title: "[♻️ refactor /✨ feat /\U0001F41B bug /\U0001F527 fix / \U0001F9F9chore ] 이슈
+  제목"
+labels: ''
+assignees: ''
+
+---
+
+📌 이슈 내용
+------------
+이슈를 설명해주세요.
+
+
+📝 작업 내용
+------------
+- [ ] 작업 1
+- [ ] 작업 2
+
+
+✨ 참고 사항
+------------

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,22 @@
+### 체크리스트!
+- [ ] ✅ base가 dev가 맞나요?
+- [ ] 🔀 PR 제목의 형식을 잘 작성했나요?
+- [ ] 🧹 불필요한 코드는 제거했나요?
+- [ ] 💭 이슈는 등록했나요?
+- [ ] 🏷️ 라벨은 등록했나요?
+
+## #️⃣연관된 이슈
+> ex) #이슈번호, #이슈번호
+
+## 작업 브랜치명
+> ex)feat/home
+
+## 📝작업 내용
+> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)
+
+### 📷스크린샷 (선택)
+
+## 💬리뷰 요구사항(선택)
+> 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
+
+#### close:  자신이 개발 전에 올린 이슈번호

.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

.prettierrc

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

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README.md

@@ -1,59 +1,40 @@
-# 5주차 과제: Next Netflix 🎬🍿
-
-## 서론
-
-안녕하세요, 프론트 운영진 **권동욱**입니다! 🩷🥰
-
-이번 주부터는 새 프로젝트인 **Netflix 클론코딩**을 진행합니다! 
-
-이번 과제에서는 **Next.js**를 활용해 **SSR(Server Side Rendering)** 을 직접 경험해보고, 주어진 **Figma 디자인**을 활용해 스타일링 하는 방법을 이해하는 것을 목표로 합니다.
-
-또한 이번 주부터는 프론트 페어와 함께하는 첫 과제인 만큼, 팀별로 미리 **호흡**을 맞춰볼 수 있는 좋은 기회가 될 것 같습니다.
-
-그럼 이번 과제도 모두 파이팅입니다!!!! 🔥🔥
-
-## 과제
-
-### **⭐ 과제 목표**
-
-- Next.js 사용법을 공부해봅니다.
-- Figma로 주어지는 디자인으로 스타일링 하는 방식에 익숙해집니다.
-- Git을 이용한 협업 방식에 익숙해집니다.
-- 프론트엔드와 백엔드 시스템에 대한 흐름을 이해합니다.
-
-### 📅 기한
-
-> 2025년 11월 1일 토요일 (기한 엄수)
-
-### **✅ 필수 요건**
-
-- [결과화면](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)
+## 소개
+
+next.js 프레임워크 기반의 넷플릭스 클론 코딩 프로젝트
+
+## 배포링크
+
+https://next-netflix-22nd.vercel.app/
+
+## UX 향상을 위한 노력
+
+- search 페이지 skeleton 적용
+- 무한 스크롤, debounce 적용으로 불필요한 API 호출 방지
+
+## Team DiggIndie
+
+- 백승선
+- 조성아
+
+## 폴더 구조
+
+```
+app
+ ┣ comingSoon
+ ┃ ┗ page.tsx
+ ┣ downloads
+ ┃ ┗ page.tsx
+ ┣ home
+ ┃ ┗ page.tsx
+ ┣ more
+ ┃ ┗ page.tsx
+ ┣ search
+ ┃ ┗ page.tsx
+ ┣ title
+ ┃ ┗ [id]
+ ┃ ┃ ┗ page.tsx
+ ┣ font.css
+ ┣ globals.css
+ ┣ layout.tsx
+ ┗ page.tsx
+```

app/comingSoon/page.tsx

@@ -0,0 +1,9 @@
+import Spinner from '@/components/Spinner';
+
+export default function ComingSoon() {
+  return (
+    <div className="flex items-center justify-center min-h-screen ">
+      <Spinner />
+    </div>
+  );
+}

app/downloads/page.tsx

@@ -0,0 +1,9 @@
+import Spinner from '@/components/Spinner';
+
+export default function Downloads() {
+  return (
+    <div className="flex items-center justify-center min-h-screen ">
+      <Spinner />
+    </div>
+  );
+}

app/font.css

@@ -0,0 +1,39 @@
+@font-face {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/sf-pro-display-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/sf-pro-display-medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/sf-pro-display-semibold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/sf-pro-display-bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('/fonts/sf-pro-display-heavy.woff2') format('woff2');
+}

app/globals.css

@@ -0,0 +1,79 @@
+@import 'tailwindcss';
+@import './font.css';
+
+@font-face {
+  font-family: 'SF Pro Display';
+  src: url('/fonts/sf-pro-display-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  src: url('/fonts/sf-pro-display-medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  src: url('/fonts/sf-pro-display-semibold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  src: url('/fonts/sf-pro-display-bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  src: url('/fonts/sf-pro-display-heavy.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+    --background: #ffffff;
+    --foreground: #171717;
+}
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --font-sans: var(--font-geist-sans);
+    --font-mono: var(--font-geist-mono);
+}
+
+@layer base {
+  body {
+    background: var(--color-grayscale-02-white);
+    color: var(--color-grayscale-02-white);
+    font-family: var(--font-sans);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #0a0a0a;
+        --foreground: #ededed;
+    }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+}
+
+*::-webkit-scrollbar {
+    display: none;
+}