Feat/main caroucel team6 (#36)

* feat : 메인 캐러셀 추가 * feat : readme 개발팀 소개 수정 * fix : readme 개발팀 섹션 태그로 변경 * fix : readme 표 너비 속성 깃허브에 적용 안되는 문제 해결 * fix : readme 롤백
wafflestudio21-5 · Feb 2, 2024 · 82ea5a0 · 82ea5a0
1 parent dcfbe92
commit 82ea5a0
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 60 deletions.
diff --git 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)
-<br/><br/>
+- BACKEND 개발에 관해 궁금하시다면? [TEAM6-SERVER REPO](https://github.com/wafflestudio21-5/team6-server)
+  <br/><br/>
+
+## 🏷️ 목차
+
+#### 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)
-
-- 팀장 역할 수행 및 일정 관리
-- 유저 페이지 및 유저 하위 페이지 디자인&기능 / 인증 서비스 구현
-  <br/><br/>
-
-박민철 [@ComPhyPark](https://github.com/ComPhyPark)
+|                                                                                             |                                                                                    |                                                                                              |
+| :-----------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------: |
+|                                           오수현                                            |                                       박민철                                       |                                            정우진                                            |
+|                     [@ohsuhyeon0119](https://github.com/ohsuhyeon0119)                      |                    [@ComPhyPark](https://github.com/ComPhyPark)                    |                            [@izone00](https://github.com/izone00)                            |
+| 팀장 역할 수행 및 일정 관리, 유저 페이지 및 유저 하위 페이지 디자인&기능 / 인증 서비스 구현 | 랜딩 페이지와 레이아웃의 디자인 & 기능 구현, 웹서비스의 전체적인 버그 관리 및 수정 | 영화 개별 페이지 및 콘텐츠 하위 페이지 구현, 추가 서비스 (내가 구경한 영화 모음 보관함) 구현 |
 
-- 랜딩 페이지 디자인&기능 구현
-- 웹서비스의 전체적인 버그 수정
-  <br/><br/>
-
-정우진 [izone00](https://github.com/izone00)
-
-- 영화 개별 페이지 및 콘텐츠 하위 페이지들에 대한 전반적인 디자인&기능 구현
-- 와플피디아만의 추가 서비스 (내가 구경한 영화 모음 보관함) 구현
-  <br/><br/>
+</div>
 
 ## 🔧 Stacks
 

diff --git a/src/apis/content.ts b/src/apis/content.ts
@@ -5,22 +5,27 @@ import { BASE_API_URL } from "./const";
 
 // 나중에 바꾸기
 export async function getContentListRequest(
-  order: string,
-  accessToken?: string,
+  choice: string,
+  accessToken?: string
 ) {
   const headers: HeadersInit = accessToken
     ? {
         Authorization: "Bearer " + accessToken,
       }
     : {};
 
-  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
@@ -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
@@ -21,6 +21,7 @@ export type ContentListProps = {
 };
 
 function ContentCell(content: MovieType, rank: number) {
+  console.log(content.title_ko, content.average_rate);
   return (
     <li key={rank}>
       <Link to={`/contents/${content.movieCD}`}>
@@ -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
@@ -13,6 +13,10 @@ export default function MainPage() {
       title: "최신 영화",
       order: "latest",
     },
+    {
+      title: "🧇 TEAM6's PICK",
+      order: "recommend",
+    },
   ];
   return (
     <section className={styles.mainSection}>