Feat/popular

.gitignore

@@ -39,10 +39,5 @@ yarn-error.log*
 *.pem
 
 # Crawling
-log/*
-crawlYoutubeSuccess.txt
-crawlYoutubeFailed.txt
-postByReleaseSuccess.txt
-postByReleaseFailed.txt
-errorLog.txt
-transDataLog.txt
+**/logs/*.txt
+

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "type": "module",
   "private": true,
   "scripts": {

apps/web/public/changelog.json

@@ -0,0 +1,18 @@
+{
+  "1.1.0": {
+    "title": "버전 1.1.0",
+    "message": [
+      "기존 노래방 데이터를 새로운 데이터로 교체하였습니다.",
+      "- TJ 노래방의 38519개의 곡 데이터 업데이트!",
+      "- 금영 노래방의 데이터도 순차적으로 업데이트 중!"
+    ]
+  },
+  "1.2.0": {
+    "title": "버전 1.2.0",
+    "message": [
+      "인기곡 페이지를 추가했습니다.",
+      "- 전체, 연도별, 월별 부른 곡의 통계와 좋아요 한 곡의 통계를 확인할 수 있습니다.",
+      "좋아요 한 곡이 통계에 반영되지 않는 문제를 수정했습니다."
+    ]
+  }
+}

apps/web/src/Footer.tsx

@@ -17,7 +17,7 @@ export default function Footer() {
   const pathname = usePathname();
 
   return (
-    <footer className="bg-secondary fixed bottom-0 flex h-8 w-[360px] justify-between">
+    <footer className="bg-background fixed bottom-0 flex h-8 w-[360px] justify-between">
       {navigation.map(item => {
         const isActive = pathname === item.href;
         return (

apps/web/src/Header.tsx

@@ -9,7 +9,7 @@ export default function Header() {
   const router = useRouter();
 
   return (
-    <header className="bg-background sticky top-0 z-50 flex h-16 w-[360px] items-center justify-between p-4">
+    <header className="bg-background sticky top-0 z-50 flex h-16 w-[360px] items-center justify-between p-4 shadow-sm">
       <Image src="/logo.png" alt="logo" width={64} height={64} onClick={() => router.push('/')} />
 
       <Sidebar />

apps/web/src/Sidebar.tsx

@@ -16,6 +16,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/components/ui/sheet';
+import useVersionDialog from '@/hooks/useVersionDialog';
 import useAuthStore from '@/stores/useAuthStore';
 
 export default function Sidebar() {
@@ -25,6 +26,8 @@ export default function Sidebar() {
   const [isEditing, setIsEditing] = useState(false);
   const [newNickname, setNewNickname] = useState(user?.nickname || '');
 
+  const { version } = useVersionDialog();
+
   const router = useRouter();
 
   const handleEditStart = () => {
@@ -149,6 +152,7 @@ export default function Sidebar() {
               >
                 <Image src="/github_mark.svg" alt="github" width={32} height={32} />
               </Button>
+              <div>버전 {version}</div>
             </div>
           </div>
         </SheetFooter>

apps/web/src/app/api/total_stats/array/route.ts

@@ -0,0 +1,55 @@
+import { NextResponse } from 'next/server';
+
+import createClient from '@/lib/supabase/server';
+import { ApiResponse } from '@/types/apiRoute';
+import { CountType } from '@/types/totalStat';
+
+export async function POST(request: Request): Promise<NextResponse<ApiResponse<void>>> {
+  try {
+    const supabase = await createClient();
+    const { songIds, countType, isMinus } = await request.json();
+
+    // countType 유효성 검사
+    if (!['sing_count', 'like_count', 'saved_count'].includes(countType)) {
+      return NextResponse.json({ success: false, error: 'Invalid count type' }, { status: 400 });
+    }
+
+    songIds.forEach(async (songId: string) => {
+      const { data } = await supabase
+        .from('total_stats')
+        .select('*')
+        .eq('song_id', songId)
+        .single();
+
+      if (data) {
+        // 기존 레코드 업데이트
+        const { error: updateError } = await supabase
+          .from('total_stats')
+          .update({
+            [countType]: data[countType as CountType] + (isMinus ? -1 : 1),
+          })
+          .eq('song_id', songId);
+
+        if (updateError) throw updateError;
+      } else {
+        // 새 레코드 생성
+        const { error: insertError } = await supabase.from('total_stats').insert({
+          song_id: songId,
+          [countType]: 1,
+          sing_count: countType === 'sing_count' ? 1 : 0,
+          like_count: countType === 'like_count' ? 1 : 0,
+          saved_count: countType === 'saved_count' ? 1 : 0,
+        });
+
+        if (insertError) throw insertError;
+      }
+    });
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Error in total_stats API:', error);
+    return NextResponse.json(
+      { success: false, error: 'Failed to update total_stats' },
+      { status: 500 },
+    );
+  }
+}

apps/web/src/app/api/total_stats/route.ts

@@ -2,9 +2,150 @@ import { NextResponse } from 'next/server';
 
 import createClient from '@/lib/supabase/server';
 import { ApiResponse } from '@/types/apiRoute';
+import { CountType, PeriodType, SongStat } from '@/types/totalStat';
 
-// 유효한 카운트 타입 정의
-type CountType = 'sing_count' | 'like_count' | 'saved_count';
+// API KEY 노출을 막기 위해 미들웨어 역할을 할 API ROUTE 활용
+
+export async function GET(request: Request): Promise<NextResponse<ApiResponse<SongStat[]>>> {
+  try {
+    const { searchParams } = new URL(request.url);
+    const countType = searchParams.get('countType') as CountType;
+    const periodType = searchParams.get('periodType') as PeriodType;
+
+    if (!countType || !periodType) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'No query provided',
+        },
+        { status: 400 },
+      );
+    }
+
+    const supabase = await createClient();
+    let resonse = [];
+    switch (countType) {
+      case 'sing_count': {
+        let startDate = new Date();
+        let endDate: Date;
+        switch (periodType) {
+          case 'all':
+            startDate = new Date(0); // 1970-01-01
+            endDate = new Date(); // 현재 날짜
+            break;
+          case 'year':
+            startDate = new Date(startDate.getFullYear(), 0, 1); // 올해의 첫날
+            endDate = new Date(startDate.getFullYear() + 1, 0, 1); // 내년의 첫날
+            break;
+          case 'month':
+            startDate = new Date(startDate.getFullYear(), startDate.getMonth(), 1); // 이번 달의 첫날
+            endDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 1); // 다음 달의 첫날
+            break;
+          default:
+            return NextResponse.json(
+              {
+                success: false,
+                error: 'Invalid period type',
+              },
+              { status: 400 },
+            );
+        }
+        const { data: singCountData, error: singCountError } = await supabase
+          .from('total_stats')
+          .select('*, songs(*)')
+          .gte('created_at', startDate.toISOString())
+          .lt('created_at', endDate.toISOString())
+          .gt('sing_count', 0)
+          .order('sing_count', { ascending: false })
+          .limit(10);
+
+        if (singCountError) {
+          return NextResponse.json(
+            {
+              success: false,
+              error: singCountError?.message || 'Unknown error',
+            },
+            { status: 500 },
+          );
+        }
+        resonse = singCountData.map(item => ({
+          value: item.sing_count,
+          song: item.songs,
+        }));
+        break;
+      }
+
+      case 'like_count': {
+        const { data: likeCountData, error: likeCountError } = await supabase
+          .from('total_stats')
+          .select('*, songs(*)')
+          .gt('like_count', 0)
+          .order('like_count', { ascending: false })
+          .limit(10);
+
+        if (likeCountError) {
+          return NextResponse.json(
+            {
+              success: false,
+              error: likeCountError?.message || 'Unknown error',
+            },
+            { status: 500 },
+          );
+        }
+        resonse = likeCountData.map(item => ({
+          value: item.like_count,
+          song: item.songs,
+        }));
+        break;
+      }
+      case 'saved_count': {
+        const { data: savedCountData, error: savedCountError } = await supabase
+          .from('total_stats')
+          .select('*, songs(*)')
+          .gt('saved_count', 0)
+          .order('saved_count', { ascending: false })
+          .limit(10);
+
+        if (savedCountError) {
+          return NextResponse.json(
+            {
+              success: false,
+              error: savedCountError?.message || 'Unknown error',
+            },
+            { status: 500 },
+          );
+        }
+        resonse = savedCountData.map(item => ({
+          value: item.saved_count,
+          song: item.songs,
+        }));
+        break;
+      }
+      default:
+        return NextResponse.json(
+          {
+            success: false,
+            error: 'Invalid count type',
+          },
+          { status: 400 },
+        );
+    }
+
+    return NextResponse.json({
+      success: true,
+      data: resonse,
+    });
+  } catch (error) {
+    console.error('Error in search API:', error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: 'Internal server error',
+      },
+      { status: 500 },
+    );
+  }
+}
 
 export async function POST(request: Request): Promise<NextResponse<ApiResponse<void>>> {
   try {

apps/web/src/app/api/version/route.ts

@@ -0,0 +1,5 @@
+import pkg from '../../../../package.json';
+
+export async function GET() {
+  return Response.json({ version: pkg.version });
+}

apps/web/src/app/layout.tsx

@@ -64,7 +64,7 @@ export default function RootLayout({
           <AuthProvider>
             <PostHogProvider>
               <ErrorWrapper>
-                <div className="bg-secondary relative flex h-full w-[360px] flex-col">
+                <div className="relative flex h-full w-[360px] flex-col">
                   <Header />
                   <main className="flex-1">{children}</main>
                   <Footer />

apps/web/src/app/library/liked/page.tsx

@@ -19,16 +19,16 @@ export default function LikedPage() {
   const likedSongs = data ?? [];
 
   return (
-    <div className="bg-background h-full px-4">
+    <div className="bg-background h-full">
       {isLoading && <StaticLoading />}
-      <div className="mb-6 flex items-center">
+      <div className="mb-6 flex items-center px-2 py-4 shadow-sm">
         <Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <h1 className="text-2xl font-bold">좋아요 곡 관리</h1>
       </div>
 
-      <div className="mb-4 flex items-center justify-between">
+      <div className="flex h-[48px] items-center justify-between p-2">
         <p className="text-muted-foreground text-sm">
           {deleteLikeSelected.length > 0
             ? `${deleteLikeSelected.length}곡 선택됨`

apps/web/src/app/library/page.tsx

@@ -27,8 +27,12 @@ export default function LibraryPage() {
   const nickname = user?.nickname ?? '근데 누구셨더라...?';
 
   return (
-    <div className="bg-background h-full space-y-4 px-4 py-8">
-      <h1 className="text-2xl font-bold">반가워요, {nickname}</h1>
+    <div className="bg-background h-full space-y-4">
+      <div className="mb-6 flex items-center justify-between px-2 py-4 shadow-sm">
+        <h1 className="text-2xl font-bold">내 라이브러리</h1>
+      </div>
+
+      {/* <h1 className="text-xl font-bold">반가워요, {nickname}</h1> */}
 
       {menuItems.map(item => (
         <Card

apps/web/src/app/library/stats/UserRankingList.tsx

@@ -0,0 +1,28 @@
+import RankingItem from '@/components/RankingItem';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { UserSongStat } from '@/types/userStat';
+import { cn } from '@/utils/cn';
+
+interface RankingListProps {
+  title: string;
+  items: UserSongStat[];
+
+  className?: string;
+}
+export default function UserRankingList({ title, items, className }: RankingListProps) {
+  return (
+    // <Card className={cn('w-[360px]', className)}>
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-xl">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <div className="space-y-0">
+          {items.map((item, index) => (
+            <RankingItem key={index} {...item} rank={index + 1} value={item.singCount} />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}