Update README.md

README.md

@@ -1 +1,60 @@
 # Whatsubs
+
+최근 OTT 플랫폼이 늘어나며 인기 콘텐츠를 시청하고자 하는 이용자들의 구독료 부담이 증가하고 있습니다. 또한 구독 서비스를 일일이 관리하는 것에 큰 피로감을 느끼고 있습니다.
+
+이를 개선하기 위해 사용자의 선호도와 인구통계학적 정보(나이, 직업, 성별)를 기반으로 OTT 콘텐츠와 더불어 OTT 구독 조합을 추천해 주는 웹서비스를 개발했습니다.
+
+다양한 OTT 플랫폼의 콘텐츠를 한 번에 검색할 수 있으며, OTT 구독 조합을 추천받아 보다 효율적으로 구독할 수 있도록 도와줍니다.
+
+## 1. 프로젝트 개요
+
+### 1.1 프로젝트 목표
+
+- OTT 플랫폼의 콘텐츠를 한 번에 검색할 수 있는 웹서비스 개발
+- 사용자의 선호도와 인구통계학적 정보(나이, 직업, 성별)를 기반으로 OTT 구독 조합을 추천해 주는 웹서비스 개발
+
+### 1.2 프로젝트 기대효과
+
+- OTT 플랫폼의 콘텐츠를 한 눈에 볼 수 있어 사용자가 원하는 콘텐츠를 빠르게 찾을 수 있음
+- OTT 구독 조합을 추천받아 보다 효율적으로 구독할 수 있음
+
+## 2. 프로젝트 설계
+
+### 2.1 프로젝트 구조도
+
+![프로젝트 구조도](/documents/readme/2-1.png)
+
+### 2.2 프로젝트 기능
+
+- OTT 콘텐츠 검색
+- OTT 구독 조합 추천
+- 콘텐츠 평가, 리뷰 및 관리
+
+## 3. 프로젝트 구현
+
+### 3.1 추천 시스템
+
+![추천 시스템](/documents/readme/3-1.png)
+
+- 사용자의 평점 데이터와 인구통계학적 정보(나이, 직업, 성별)를 기반으로 OTT 콘텐츠와 OTT 구독 조합을 추천해 줍니다.
+
+### 3.2 OTT 콘텐츠 탐색
+
+![OTT 콘텐츠 탐색](/documents/readme/3-2.png)
+
+- 다양한 OTT 플랫폼의 콘텐츠를 한 번에 탐색할 수 있습니다.
+- 무한 스크롤 기능을 통해 사용자가 원하는 만큼의 콘텐츠를 볼 수 있습니다.
+  - `Intersection Observer API`를 사용하여 무한 스크롤 기능 구현
+  - 보이지 않는 콘텐츠는 `display: none`으로 처리하여 성능 최적화
+- 필터링 기능을 통해 사용자가 원하는 콘텐츠를 장르, 플랫폼, 관람등급 등으로 검색할 수 있습니다.
+- 사용자가 원하는 콘텐츠를 클릭하면 해당 콘텐츠 카드가 뒤집히면서 평가를 남길 수 있습니다.
+
+### 3.3 콘텐츠 평가, 리뷰 및 관리
+
+![콘텐츠 평가, 리뷰 및 관리](/documents/readme/3-3.png)
+
+- 콘텐츠 상세 정보를 확인할 수 있습니다.
+- 사용자가 콘텐츠를 평가하고 리뷰를 남길 수 있습니다.
+  - 사용자는 시청 상태(찜하기, 보는중, 봤어요)를 저장할 수 있습니다.
+  - 시청을 완료한 경우 평점을 남길 수 있습니다.
+  - 리뷰는 각 시청 상태별로 남길 수 있습니다. 즉, 여러 번의 리뷰를 남길 수 있습니다.

lib/client/usePlayLinks.ts

@@ -19,6 +19,7 @@ export default function usePlayLinks(props?: Props) {
   const { data: subscriptions } = useSWR<Subscription[]>('/api/subscriptions');
   const { data } = useSWR(subscriptions && props?.link, async url => {
     const response = await fetch(`https://whatsubs.herokuapp.com/${url}`);
+    console.log('response', response);
     const html = await response.text();
 
     const $ = cheerio.load(html);

pages/api/translate/[text].ts

@@ -1,33 +1,34 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import axios from 'axios';
 
 const translatePapago = async (req: NextApiRequest, res: NextApiResponse) => {
-  try {
-    const { text } = req.query;
+  // try {
+  //   const { text } = req.query;
 
-    const response = await axios.post(
-      'https://openapi.naver.com/v1/papago/n2mt',
-      {
-        source: 'en',
-        target: 'ko',
-        text: text,
-      },
-      {
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-          'X-Naver-Client-Id': process.env.NAVER_CLIENT_ID,
-          'X-Naver-Client-Secret': process.env.NAVER_CLIENT_SECRET,
-        },
-      }
-    );
+  //   const response = await axios.post(
+  //     'https://openapi.naver.com/v1/papago/n2mt',
+  //     {
+  //       source: 'en',
+  //       target: 'ko',
+  //       text: text,
+  //     },
+  //     {
+  //       headers: {
+  //         'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+  //         'X-Naver-Client-Id': process.env.NAVER_CLIENT_ID,
+  //         'X-Naver-Client-Secret': process.env.NAVER_CLIENT_SECRET,
+  //       },
+  //     }
+  //   );
 
-    const translatedText = response.data?.message?.result?.translatedText || '';
+  //   const translatedText = response.data?.message?.result?.translatedText || '';
 
-    res.status(200).json({ translatedText });
-  } catch (error) {
-    console.error('Translation error:', error);
-    res.status(500).json({ error: 'Translation failed' });
-  }
+  //   res.status(200).json({ translatedText });
+  // } catch (error) {
+  //   console.error('Translation error:', error);
+  //   res.status(500).json({ error: 'Translation failed' });
+  // }
+
+  res.status(200).json({ translatedText: '' });
 };
 
 export default translatePapago;