From 82ea5a06f150781af1e9272f897568ab63d5fa7d Mon Sep 17 00:00:00 2001 From: ohsuhyeon0119 <141830897+ohsuhyeon0119@users.noreply.github.com> Date: Fri, 2 Feb 2024 19:47:30 +0900 Subject: [PATCH] Feat/main caroucel team6 (#36) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat : 메인 캐러셀 추가 * feat : readme 개발팀 소개 수정 * fix : readme 개발팀 섹션 태그로 변경 * fix : readme 표 너비 속성 깃허브에 적용 안되는 문제 해결 * fix : readme 롤백 --- README.md | 48 +++++++++++--------- src/apis/content.ts | 19 +++++--- src/apis/custom.ts | 1 - src/components/ContentList.tsx | 80 +++++++++++++++++++++------------- src/pages/MainPage.tsx | 4 ++ 5 files changed, 92 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index 94e602e..78695c0 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,29 @@ # 🎥 와플피디아 🎥 -🧇[**와플피디아**](https://d1vexdz72u651e.cloudfront.net/) 는 [**왓챠피디아 웹사이트**](https://pedia.watcha.com/ko-KR/)의 클론 프로젝트입니다! 기존의 왓챠피디아는 영화와 책, TV 프로그램에 대해 추천을 받을 수 있고, 자신의 관람평과 별점을 공유하여 다른 유저와 소통하는 **콘텐츠 추천 & 의견 커뮤니티 웹서비스** 입니다. 저희 TEAM6 팀원들은 개발기간과 서로의 역량을 고려하여, 와플피디아를 **영화 콘텐츠에 대한 의견 커뮤니티 서비스**에 집중하는, 그러나 핵심적이고 필수적인 기능들을 내실 있게 제공하는 웹서비스로 완성하고자 하였습니다. 많이 부족하지만 열과 성을 다해 제작한 저희 와플피디아 서비스를 만족스럽게 사용하실 수 있기를 바랍니다🙏🙏 +- 🧇[**와플피디아**](https://d1vexdz72u651e.cloudfront.net/) 는 [**왓챠피디아 웹사이트**](https://pedia.watcha.com/ko-KR/)의 클론 프로젝트입니다! +- 기존의 왓챠피디아는 영화와 책, TV 프로그램에 대해 추천을 받을 수 있고, 자신의 관람평과 별점을 공유하여 다른 유저와 소통하는 **콘텐츠 추천 & 의견 커뮤니티 웹서비스** 입니다. 저희 TEAM6 팀원들은 개발기간과 서로의 역량을 고려하여, 와플피디아를 **영화 콘텐츠에 대한 의견 커뮤니티 서비스**에 집중하는, 그러나 핵심적이고 필수적인 기능들을 내실 있게 제공하는 웹서비스로 완성하고자 하였습니다. +- 많이 부족하지만 열과 성을 다해 제작한 저희 와플피디아 서비스를 만족스럽게 사용하실 수 있기를 바랍니다🙏🙏 -개발 기간 : 23.12.28 ~ 24.02.02 +- 개발 기간 : 23.12.28 ~ 24.02.02 -\*본 레포는 **TEAM6-WEB REPO** 이므로 FRONTEND 개발에 관한 내용을 위주로 설명합니다. +- 본 레포는 **TEAM6-WEB REPO** 이므로 FRONTEND 개발에 관한 내용을 위주로 설명합니다. -BACKEND 개발에 관해 궁금하시다면? [TEAM6-SERVER REPO](https://github.com/wafflestudio21-5/team6-server) -

+- BACKEND 개발에 관해 궁금하시다면? [TEAM6-SERVER REPO](https://github.com/wafflestudio21-5/team6-server) +

+ +## 🏷️ 목차 + +#### 1. [배포 💻](#💻-배포) + +#### 2. [개발팀 & 역할 분담 🙋‍♂️](#🙋‍♂️-개발팀--역할-분담) + +#### 3. [Stacks 🔧](#🔧-stacks) + +#### 4. [주요 PAGE & MODAL 소개📃](#📃-주요-page--modal-소개) + +#### 5. [모바일 반응형 📱](#📱-모바일-반응형) + +#### 6. [특별 기능 🎨](#🎨-특별-기능) ## 💻 배포 @@ -20,23 +36,13 @@ BACKEND 개발에 관해 궁금하시다면? [TEAM6-SERVER REPO](https://github. ## 🙋‍♂️ 개발팀 & 역할 분담 -오수현 [@ohsuhyeon0119](https://github.com/ohsuhyeon0119) - -- 팀장 역할 수행 및 일정 관리 -- 유저 페이지 및 유저 하위 페이지 디자인&기능 / 인증 서비스 구현 -

- -박민철 [@ComPhyPark](https://github.com/ComPhyPark) +| | | | +| :-----------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------: | +| 오수현 | 박민철 | 정우진 | +| [@ohsuhyeon0119](https://github.com/ohsuhyeon0119) | [@ComPhyPark](https://github.com/ComPhyPark) | [@izone00](https://github.com/izone00) | +| 팀장 역할 수행 및 일정 관리, 유저 페이지 및 유저 하위 페이지 디자인&기능 / 인증 서비스 구현 | 랜딩 페이지와 레이아웃의 디자인 & 기능 구현, 웹서비스의 전체적인 버그 관리 및 수정 | 영화 개별 페이지 및 콘텐츠 하위 페이지 구현, 추가 서비스 (내가 구경한 영화 모음 보관함) 구현 | -- 랜딩 페이지 디자인&기능 구현 -- 웹서비스의 전체적인 버그 수정 -

- -정우진 [izone00](https://github.com/izone00) - -- 영화 개별 페이지 및 콘텐츠 하위 페이지들에 대한 전반적인 디자인&기능 구현 -- 와플피디아만의 추가 서비스 (내가 구경한 영화 모음 보관함) 구현 -

+ ## 🔧 Stacks diff --git a/src/apis/content.ts b/src/apis/content.ts index ffd43d8..b3df2bf 100644 --- a/src/apis/content.ts +++ b/src/apis/content.ts @@ -5,8 +5,8 @@ import { BASE_API_URL } from "./const"; // 나중에 바꾸기 export async function getContentListRequest( - order: string, - accessToken?: string, + choice: string, + accessToken?: string ) { const headers: HeadersInit = accessToken ? { @@ -14,13 +14,18 @@ export async function getContentListRequest( } : {}; - if (order === "box-office") + if (choice === "box-office") return fetch(`${BASE_API_URL}/contentTest/movies/boxoffice/update/`, { method: "GET", headers: headers, }); - - return fetch(`${BASE_API_URL}/contents?order=${order}`, { + if (choice === "recommend") { + return fetch(`${BASE_API_URL}/contents/carousels/2`, { + method: "GET", + headers: headers, + }); + } + return fetch(`${BASE_API_URL}/contents?order=${choice}`, { method: "GET", headers: headers, }); @@ -39,7 +44,7 @@ export async function getContentRequest(movieCD: string, accessToken?: string) { export async function createRatingRequest( movieCD: string, rate: number, - accessToken: string, + accessToken: string ) { return fetch(`${BASE_API_URL}/contents/${movieCD}/rate`, { method: "POST", @@ -56,7 +61,7 @@ export async function createRatingRequest( export async function updateRatingRequest( rateId: number, rate: number, - accessToken: string, + accessToken: string ) { return fetch(`${BASE_API_URL}/contents/rates/${rateId}`, { method: "PUT", diff --git a/src/apis/custom.ts b/src/apis/custom.ts index 1f0b265..96a8253 100644 --- a/src/apis/custom.ts +++ b/src/apis/custom.ts @@ -7,7 +7,6 @@ export function defaultResponseHandler(res: Response) { } export function errorInBodyResponseHandler(res: Response) { if (!res.ok) { - console.log(res); // res.json()에 에러 메시지가 담겨 있음 } return res.json(); } diff --git a/src/components/ContentList.tsx b/src/components/ContentList.tsx index e381ff1..d80b882 100644 --- a/src/components/ContentList.tsx +++ b/src/components/ContentList.tsx @@ -21,6 +21,7 @@ export type ContentListProps = { }; function ContentCell(content: MovieType, rank: number) { + console.log(content.title_ko, content.average_rate); return (
  • @@ -109,41 +110,58 @@ export default function ContentList({ title, order }: ContentListProps) { const { accessToken } = useAuthContext(); useEffect(() => { - order === "box-office" - ? getContentListRequest(order, accessToken ?? undefined) - .then(defaultResponseHandler) - .then((data) => { - setContents( - data.map( - (movieRes: { - movie: MovieType; - my_rate: number | null; - rank: number; - }) => { - const movie = movieRes.movie; - return { - ...movie, - poster: movie.poster.replace("http", "https"), - my_rate: movieRes.my_rate - ? { my_rate: movieRes.my_rate } - : null, - }; - } - ) - ); - }) - : getContentListRequest(order, accessToken ?? undefined) - .then(defaultResponseHandler) - .then((data) => { - setContents( - data.map((movie: MovieType) => { + order === "box-office" && + getContentListRequest(order, accessToken ?? undefined) + .then(defaultResponseHandler) + .then((data) => { + console.log("boxoffice : ", data); + setContents( + data.map( + (movieRes: { + movie: MovieType; + my_rate: number | null; + rank: number; + }) => { + const movie = movieRes.movie; return { ...movie, poster: movie.poster.replace("http", "https"), + my_rate: movieRes.my_rate + ? { my_rate: movieRes.my_rate } + : null, }; - }) - ); - }); + } + ) + ); + }); + order === "latest" && + getContentListRequest(order, accessToken ?? undefined) + .then(defaultResponseHandler) + .then((data) => { + console.log(data); + setContents( + data.map((movie: MovieType) => { + return { + ...movie, + poster: movie.poster.replace("http", "https"), + }; + }) + ); + }); + order === "recommend" && + getContentListRequest(order, accessToken ?? undefined) + .then(defaultResponseHandler) + .then((data) => { + const movies = data.movies; + setContents( + movies.map((movie: MovieType) => { + return { + ...movie, + poster: movie.poster.replace("http", "https"), + }; + }) + ); + }); }, [order, accessToken]); function handleRightClick() { diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 4933089..4a0f04f 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -13,6 +13,10 @@ export default function MainPage() { title: "최신 영화", order: "latest", }, + { + title: "🧇 TEAM6's PICK", + order: "recommend", + }, ]; return (