Feat/translate by llm

.gitignore

@@ -33,6 +33,15 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+
 # Misc
 .DS_Store
 *.pem
+
+# Crawling
+crawlYoutubeSuccess.txt
+crawlYoutubeFailed.txt
+postByReleaseSuccess.txt
+postByReleaseFailed.txt
+errorLog.txt
+transDataLog.txt

README.md

@@ -42,31 +42,83 @@ sing-code/
 ```
 
 ## 📦 배포
-(배포된 링크들을 작성)
+[Singcode](https://singcode.vercel.app/)
 
 ## ✨ 주요 기능
-(스크린샷과 함께 어떤 기능이 있는지 설명)
+
+
+### 부를 곡 페이지
+
+* 자신이 저장한 부를 곡을 조회합니다.
+* 부를 곡의 순서를 바꿀 수 있습니다.
+* 곡을 부르거나, 부르지 않고 삭제할 수 있습니다.
+
+<div style="display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;">
+<img src="https://github.com/user-attachments/assets/b29b2dc0-dde3-4d69-9ce5-69a91ffe7985" height=800  style="height:800px; width:auto;" />
+</div>
+
+* 좋아요 표시한 곡이나 최근 부른 곡 중에서 부를 곡으로 추가할 수 있습니다.
+
+
+<div style="display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;">
+<img src="https://github.com/user-attachments/assets/6a6e9f12-758c-4462-853d-4fadf3fb4851"   height=800  style="height:800px; width:auto;"/>
+</div>
+
+### 검색 페이지
+* 제목, 가수 이름으로 곡을 검색할 수 있습니다.
+* 몇몇 일본곡은 한국어를 지원합니다.
+  * 번역이 잘못되거나 부정확할 수 있습니다. 발견하신다면 제보 바랍니다.
+
+<div style="display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;">
+  <img src="https://github.com/user-attachments/assets/886efbf5-bfc9-4b88-be8a-6e0e027dffc5"   height=800  style="height:800px; width:auto;" />
+</div>
+
+
+### 라이브러리 페이지
+
+* 자신의 활동 기록을 조회 및 관리할 수 있습니다.
+* 좋아요 한 곡들을 조회하고 일괄 삭제할 수 있습니다.
+* 자신이 가장 많이 부른 곡의 순위를 확인할 수 있습니다.
+
+<div style="display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;">
+  <img src="https://github.com/user-attachments/assets/d395522e-e10f-43ba-ab49-6ae299322978"   height=800  style="height:800px; width:auto;" />
+  <img src="https://github.com/user-attachments/assets/8ca69483-ca76-47b2-b719-e301bbec3ee7"   height=800  style="height:800px; width:auto;"  />
+  <img src="https://github.com/user-attachments/assets/f2fbe965-470c-4bc0-ae3d-17f6974cceac"  height=800  style="height:800px; width:auto;"  />
+</div>
+
+### 로그인 & 회원가입 지원
+
+* Supabase DB에 사용자 아이디를 외래키로 하여 데이터를 저장 및 관리하기에 모든 서비스는 회원가입이 필수입니다.
+* 이메일 인증 회원가입과 카카오 회원가입을 지원합니다.
+
+<div style="display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;">
+<img src="https://github.com/user-attachments/assets/4cf4094b-717c-4a88-a5bb-1ae285f3af8e"   height=800  style="height:800px; width:auto;" />
+<img src="https://github.com/user-attachments/assets/8d7d8e9f-c447-4b2e-800a-dd3007fd0b40"  height=800  style="height:800px; width:auto;" />
+</div>
 
 ## 📖 프로젝트 기록
-(작업 기간이 얼마나 걸렸고 어떤 과정들이 있었는지 기술)
+
+- 2025.03.12 : 프로젝트 시작
+- 2025.4.24 : MVP 버전 완성. (부를 곡, 검색, 라이브러리)
+- 2025.4.27 : ChatGPT API 활용 일본어 곡 번역 시도, cheerio 및 puppeteer를 활용해서 국내곡 데이터 추가
 
 ## 📝 회고
-해결하고자 했던 문제
-(어떤 문제를 해결하고 싶었는지)
 
-무엇을 얻었는지
-(프로젝트를 통해 배운 점과 느낀 점)
+### 해결하고자 했던 문제
 
+- 기존 유사한 서비스에서 하나의 곡을 검색할 때 TJ, 금영 API로 따로따로 가져온다는 문제를 데이터를 크롤링하여 자체 DB(Supabase)를 만드는 것으로 해결했습니다.
+- (쉽게 일본 곡 검색한다는 목적 강조??)
+- Next.js의 API Route를 활용하여 서버리스 API를 구축하고 외부 API의 URL을 감추고자 하였습니다.
+- react query를 활용하여 서버, 즉 DB와의 동기화를 구축하고자 하였습니다.
+- OPEN API로는 금영 노래방의 곡을 DB에 저장하기에 한계가 있었기에 puppeteer로 금영 노래방 유튜브 채널을 렌더링하여 곡을 검색하고 cheerio로 결과를 파싱하여 크롤링 프로세스를 설계하였습니다.
 
+### 무엇을 얻었는지
 
-## 📄 라이선스
+- DMS인 Supabase를 통해 DB를 직접 구축하면서 DB Table 구조에 대한 개념을 익혔습니다.
+- react query를 도입하며 쿼리 키를 활용한 낙관적 업데이트, 데이터 캐싱에 대한 이해를 높였습니다.
 
-이 프로젝트는 MIT 라이선스를 따릅니다.
 
-```
-MIT License
 
-Copyright (c) 2025
+## 📄 라이선스
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-...
+이 프로젝트는 MIT 라이선스를 따릅니다.

packages/crawling/package.json

@@ -7,10 +7,19 @@
     ".": "./src/index.js"
   },
   "dependencies": {
-    "@supabase/supabase-js": "^2.49.1",
     "@repo/open-api": "workspace:*",
+    "@supabase/supabase-js": "^2.49.1",
     "axios": "^1.5.0",
     "cheerio": "^1.0.0",
-    "dotenv": "^16.4.7"
+    "dotenv": "^16.4.7",
+    "openai": "^4.96.0",
+    "puppeteer": "^24.7.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.1",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.4.0",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.3"
   }
 }

packages/crawling/src/argList.ts

@@ -0,0 +1,52 @@
+import { ArgList } from "./types";
+
+const getObject = (
+  url: string,
+  artist: string,
+  titleIndex: number,
+  tjIndex: number,
+  kyIndex: number
+): ArgList => {
+  return { url, artist, titleIndex, tjIndex, kyIndex };
+};
+
+// 테이블 구조 상 불가능했던 문서
+// aiko, AKB48, 노기자카46, 니시노 카나, 모닝구 무스메, Sound Horizon, 오오츠카 아이, 케야키자카46
+// 너무 적은 데이터
+// &TEAM, NiziU
+
+export const argList = [
+  // url, artist, titleIndex, tjIndex, kyIndex
+  getObject("AAA(혼성그룹)", "AAA", 0, 3, 2),
+  getObject("Aimer", "에이머(Aimer)", 2, 0, 1),
+  getObject("amazarashi", "아마자라시(amazarashi)", 0, 1, 2),
+  getObject("BUMP OF CHICKEN", "BUMP OF CHICKEN", 0, 1, 2),
+  getObject("DREAMS COME TRUE(밴드)", "DREAMS COME TRUE", 0, 1, 2),
+  getObject("ELLEGARDEN", "엘르가든(ELLEGARDEN)", 0, 1, 2),
+  getObject("King Gnu", "킹누(King Gnu)", 0, 1, 2),
+  getObject("LiSA", "리사(LiSA)", 2, 0, 1),
+  getObject("Mrs. GREEN APPLE", "미세스그린애플(Mrs. GREEN APPLE)", 0, 1, 2),
+  getObject("Official髭男dism", "오피셜히게단디즘(Official髭男dism)", 2, 0, 1),
+  getObject("Perfume", "퍼퓸(Perfume)", 0, 1, 2),
+  getObject("RADWIMPS", "래드윔프스(RADWIMPS)", 2, 0, 1),
+  getObject("SEKAI NO OWARI", "세카이노오와리(SEKAI NO OWARI)", 0, 1, 2),
+  getObject("SPYAIR", "스파이에어(SPYAIR)", 2, 0, 1),
+  getObject("Vaundy", "바운디(Vaundy)", 2, 0, 1),
+  getObject("w-inds.", "w-inds.", 0, 1, 2),
+  getObject("YOASOBI", "요아소비(YOASOBI)", 0, 1, 2),
+  getObject(
+    "계속 한밤중이면 좋을 텐데.",
+    "계속 한밤중이면 좋을 텐데.(즛토마요나카데이이노니)",
+    2,
+    0,
+    1
+  ),
+  getObject("베리즈코보", "베리즈코보", 0, 1, 2),
+  getObject("아라시(아이돌)", "아라시", 0, 1, 2),
+  getObject("아이묭", "아이묭(あいみょん)", 0, 1, 2),
+  getObject("요네즈 켄시", "요네즈 켄시", 2, 0, 1),
+  getObject("요루시카", "요루시카(ヨルシカ)", 0, 1, 2),
+  getObject("유이카", "유이카", 0, 1, 2),
+  getObject("호시노 겐", "호시노 겐", 0, 1, 2),
+  getObject("Creepy Nuts", "크리피 넛츠(Creepy Nuts)", 2, 0, 1),
+];

packages/crawling/src/crawlWiki.js → packages/crawling/src/crawlWiki.ts

@@ -1,30 +1,33 @@
-import axios from 'axios';
-import * as cheerio from 'cheerio';
-import dotenv from 'dotenv';
+import axios from "axios";
+import * as cheerio from "cheerio";
+import dotenv from "dotenv";
 
-import { parseNumber, parseJapaneseText, parseText } from './utils.js';
+import { ArgList, Song } from "./types";
+
+import { parseNumber, parseJapaneseText, parseText } from "./utils";
 dotenv.config();
 
 // ✅ 나무위키에서 데이터 크롤링
-export async function scrapeSongs(dst) {
+export async function scrapeSongs(dst: ArgList) {
   try {
     const { url, artist, titleIndex, tjIndex, kyIndex } = dst;
     if (!url || !artist) {
-      throw new Error('url 또는 artist가 없습니다.');
+      throw new Error("url 또는 artist가 없습니다.");
     }
 
-    const baseUrl = process.env.NAMU_KARAOKE_URL;
-    const endURL = process.env.NAMU_KARAOKE_END_URL;
+    const baseUrl = "https://namu.wiki/w/";
+    const endURL =
+      "/%EB%85%B8%EB%9E%98%EB%B0%A9%20%EC%88%98%EB%A1%9D%20%EB%AA%A9%EB%A1%9D";
     const fullURL = baseUrl + url + endURL;
     console.log(fullURL);
     const { data } = await axios.get(fullURL);
     // const { data } = await axios.get(url, { headers: { 'User-Agent': 'Mozilla/5.0' } });
     const $ = cheerio.load(data);
 
-    let songs = [];
+    let songs: Song[] = [];
 
-    $('table tbody tr').each((index, element) => {
-      const cols = $(element).find('td');
+    $("table tbody tr").each((index, element) => {
+      const cols = $(element).find("td");
 
       const title = parseJapaneseText($(cols[titleIndex]).text());
       const num_tj = parseNumber($(cols[tjIndex]).text().trim().slice(0, 5));
@@ -36,29 +39,31 @@ export async function scrapeSongs(dst) {
 
     return songs;
   } catch (error) {
-    console.error('크롤링 실패:', error);
+    console.error("크롤링 실패:", error);
     return [];
   }
 }
 
-export async function scrapeAllSongs(dst) {
+export async function scrapeAllSongs() {
   try {
     const titleIndex = 2;
     const artistIndex = 3;
     const tjIndex = 0;
     const kyIndex = 1;
 
-    const baseUrl = process.env.NAMU_KARAOKE_URL;
-    const url = '애니메이션%20음악/노래방%20수록%20목록/전체곡%20일람';
+    const baseUrl = "https://namu.wiki/w/";
+    const url = "애니메이션%20음악/노래방%20수록%20목록/전체곡%20일람";
     const fullURL = baseUrl + url;
     console.log(fullURL);
-    const { data } = await axios.get(fullURL, { headers: { 'User-Agent': 'Mozilla/5.0' } });
+    const { data } = await axios.get(fullURL, {
+      headers: { "User-Agent": "Mozilla/5.0" },
+    });
     const $ = cheerio.load(data);
 
-    let songs = [];
+    let songs: Song[] = [];
 
-    $('table tbody tr').each((index, element) => {
-      const cols = $(element).find('td');
+    $("table tbody tr").each((index, element) => {
+      const cols = $(element).find("td");
 
       const title = parseText($(cols[titleIndex]).text());
       const artist = parseText($(cols[artistIndex]).text());
@@ -71,7 +76,7 @@ export async function scrapeAllSongs(dst) {
 
     return songs;
   } catch (error) {
-    console.error('크롤링 실패:', error);
+    console.error("크롤링 실패:", error);
     return [];
   }
 }
@@ -83,17 +88,19 @@ export async function scrapeUtaiteSongs() {
     const tjIndex = 0;
     const kyIndex = 1;
 
-    const baseUrl = process.env.NAMU_KARAOKE_URL;
-    const url = '우타이테 오리지널 곡/노래방 수록 목록';
+    const baseUrl = "https://namu.wiki/w/";
+    const url = "우타이테 오리지널 곡/노래방 수록 목록";
     const fullURL = baseUrl + url;
     console.log(fullURL);
-    const { data } = await axios.get(fullURL, { headers: { 'User-Agent': 'Mozilla/5.0' } });
+    const { data } = await axios.get(fullURL, {
+      headers: { "User-Agent": "Mozilla/5.0" },
+    });
     const $ = cheerio.load(data);
 
-    let songs = [];
+    let songs: Song[] = [];
 
-    $('table tbody tr').each((index, element) => {
-      const cols = $(element).find('td');
+    $("table tbody tr").each((index, element) => {
+      const cols = $(element).find("td");
 
       const title = parseText($(cols[titleIndex]).text());
       const artist = parseText($(cols[artistIndex]).text());
@@ -106,7 +113,7 @@ export async function scrapeUtaiteSongs() {
 
     return songs;
   } catch (error) {
-    console.error('크롤링 실패:', error);
+    console.error("크롤링 실패:", error);
     return [];
   }
 }