From 47ded5ed9f946a44dfac0c3f37a6e4aa69e14b01 Mon Sep 17 00:00:00 2001
From: choi <cejewe@naver.com>
Date: Thu, 16 Jan 2025 15:11:29 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8A=B8=EB=9E=99=20=EC=88=98=EC=A0=95,=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20&=20=ED=8A=B8=EB=9E=99=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=ED=9A=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/albums/[id]/page.tsx             |   1 +
 src/app/layout.tsx                       |   2 +
 src/app/page.tsx                         |  10 +-
 src/components/albums/EditTrackModal.tsx | 138 +++++++++++++++++++++
 src/components/albums/TrackActions.tsx   | 133 ++++++++++++++++++++
 src/components/albums/TrackList.tsx      |  34 +++++-
 src/components/home/TrackSection.tsx     | 148 +++++++++++++++++++++++
 7 files changed, 454 insertions(+), 12 deletions(-)
 create mode 100644 src/components/albums/EditTrackModal.tsx
 create mode 100644 src/components/albums/TrackActions.tsx
 create mode 100644 src/components/home/TrackSection.tsx

diff --git a/src/app/albums/[id]/page.tsx b/src/app/albums/[id]/page.tsx
index 623bd48..9fc81be 100644
--- a/src/app/albums/[id]/page.tsx
+++ b/src/app/albums/[id]/page.tsx
@@ -49,6 +49,7 @@ export default async function AlbumPage({ params }: AlbumPageProps) {
         <TrackList 
           tracks={album.trackResponseDtos} 
           albumId={params.id}
+          artistId={album.artistResponseDto.uuid}
         />
       </div>
     </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4720d1e..93d2bff 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { BackgroundImage } from "@/components/layout/BackgroundImage";
 import { getAuthCookie } from "@/lib/server-auth";
 import { ThemeProvider } from "@/contexts/theme/ThemeContext";
 import { UserProvider } from "@/contexts/auth/UserContext";
+import { Toaster } from "@/components/ui/toaster"
 
 // getUser 함수 수정
 const getUser = async () => {
@@ -77,6 +78,7 @@ export default async function RootLayout({
             </UserProvider>
           </AuthProvider>
         </ThemeProvider>
+        <Toaster />
       </body>
     </html>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f4ff694..e10dc0e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
 import { AlbumSection } from "@/components/home/AlbumSection";
+import { TrackSection } from "@/components/home/TrackSection";
 
 export default function Home() {
   return (
@@ -18,14 +19,7 @@ export default function Home() {
             )}
           >
             <AlbumSection />
-            
-            {/* 최신 업로드 섹션 */}
-            <section className="p-6 border-t border-white/10">
-              <h2 className="text-xl font-bold mb-4">최신 업로드</h2>
-              <div className="space-y-4">
-                {/* 트랙 리스트가 들어갈 자리 */}
-              </div>
-            </section>
+            <TrackSection />
           </div>
         </div>
 
diff --git a/src/components/albums/EditTrackModal.tsx b/src/components/albums/EditTrackModal.tsx
new file mode 100644
index 0000000..8a35e64
--- /dev/null
+++ b/src/components/albums/EditTrackModal.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { useState } from "react";
+import { useToast } from "@/hooks/use-toast";
+import { checkAuth } from "@/lib/auth";
+
+interface Track {
+  uuid: string;
+  title: string;
+  lyric: string;
+}
+
+interface EditTrackModalProps {
+  track: Track;
+  isOpen: boolean;
+  onClose: () => void;
+  onUpdate: (track: Track) => void;
+}
+
+export function EditTrackModal({ track, isOpen, onClose, onUpdate }: EditTrackModalProps) {
+  const { toast } = useToast();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [form, setForm] = useState({
+    title: track.title,
+    lyric: track.lyric,
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      setIsSubmitting(true);
+      const { accessToken } = await checkAuth();
+
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_BASE_URL}/tracks/${track.uuid}`,
+        {
+          method: "PATCH",
+          headers: {
+            "Authorization": `Bearer ${accessToken}`,
+            "Content-Type": "application/json",
+          },
+          credentials: "include",
+          body: JSON.stringify({
+            title: form.title.trim(),
+            lyric: form.lyric.trim(),
+          }),
+        }
+      );
+
+      if (!response.ok) throw new Error("트랙 수정에 실패했습니다.");
+
+      const updatedTrack = { ...track, ...form };
+      onUpdate(updatedTrack);
+      
+      toast({
+        title: "트랙 수정 완료",
+        description: "트랙이 수정되었습니다.",
+        variant: "default",
+      });
+      
+      onClose();
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "트랙 수정 실패",
+        description: error instanceof Error ? error.message : "트랙 수정에 실패했습니다.",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>트랙 수정</DialogTitle>
+          <DialogDescription className="hidden">트랙 정보를 수정해주세요.</DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-6 mt-4">
+          <div>
+            <label className="text-sm font-medium mb-2 block">트랙 제목</label>
+            <Input
+              value={form.title}
+              onChange={(e) =>
+                setForm((prev) => ({ ...prev, title: e.target.value }))
+              }
+              className="bg-white/5 border-white/10"
+              maxLength={50}
+              required
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-2 block">가사</label>
+            <Textarea
+              value={form.lyric}
+              onChange={(e) =>
+                setForm((prev) => ({ ...prev, lyric: e.target.value }))
+              }
+              className="bg-white/5 border-white/10 min-h-[120px] resize-none"
+              maxLength={1000}
+              required
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onClose}
+              disabled={isSubmitting}
+            >
+              취소
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              수정하기
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/albums/TrackActions.tsx b/src/components/albums/TrackActions.tsx
new file mode 100644
index 0000000..fa4d5ec
--- /dev/null
+++ b/src/components/albums/TrackActions.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { MoreVertical, Edit2, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useToast } from "@/hooks/use-toast";
+import { checkAuth } from "@/lib/auth";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { EditTrackModal } from "./EditTrackModal";
+
+interface Track {
+  uuid: string;
+  title: string;
+  lyric: string;
+}
+
+interface TrackActionsProps {
+  track: Track;
+  onUpdate: (track: Track) => void;
+  onDelete: (trackId: string) => void;
+}
+
+export function TrackActions({ track, onUpdate, onDelete }: TrackActionsProps) {
+  const { toast } = useToast();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    try {
+      setIsDeleting(true);
+      const { accessToken } = await checkAuth();
+
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_BASE_URL}/tracks/${track.uuid}`,
+        {
+          method: "DELETE",
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+          credentials: "include",
+        }
+      );
+
+      if (!response.ok) throw new Error("트랙 삭제에 실패했습니다.");
+
+      onDelete(track.uuid);
+      toast({
+        title: "트랙 삭제 완료",
+        variant: "default",
+        description: "트랙이 삭제되었습니다.",
+      });
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "트랙 삭제 실패",
+        description: error instanceof Error ? error.message : "트랙 삭제에 실패했습니다.",
+      });
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteDialog(false);
+    }
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="p-2 hover:bg-white/5 rounded-full">
+            <MoreVertical className="w-4 h-4" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-40">
+          <DropdownMenuItem
+            onClick={() => setShowEditModal(true)}
+          >
+            <Edit2 className="w-4 h-4 mr-2" />
+            수정
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => setShowDeleteDialog(true)}
+            className="text-red-500 focus:text-red-500"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            삭제
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>트랙을 삭제하시겠습니까?</AlertDialogTitle>
+            <AlertDialogDescription>
+              이 작업은 되돌릴 수 없습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-destructive hover:bg-destructive/90"
+            >
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <EditTrackModal
+        track={track}
+        isOpen={showEditModal}
+        onClose={() => setShowEditModal(false)}
+        onUpdate={onUpdate}
+      />
+    </>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/albums/TrackList.tsx b/src/components/albums/TrackList.tsx
index f9a8e9f..ade16a7 100644
--- a/src/components/albums/TrackList.tsx
+++ b/src/components/albums/TrackList.tsx
@@ -5,25 +5,34 @@ import { Play, Music, Loader2 } from "lucide-react";
 import { formatDuration } from "@/lib/format";
 import { useEffect, useState } from "react";
 import { useInView } from "react-intersection-observer";
+import { TrackActions } from "@/components/albums/TrackActions";
+import { useAuth } from "@/contexts/auth/AuthContext";
+import { useUser } from "@/contexts/auth/UserContext";
 
 interface Track {
   uuid: string;
   title: string;
   duration: number;
+  lyric: string;
 }
 
 interface TrackListProps {
   tracks: Track[];
   albumId: string;
+  artistId: string;
 }
 
-export function TrackList({ tracks: initialTracks, albumId }: TrackListProps) {
+export function TrackList({ tracks: initialTracks, albumId, artistId }: TrackListProps) {
+  const { isAuthenticated } = useAuth();
+  const { user } = useUser();
   const [tracks, setTracks] = useState<Track[]>(initialTracks);
   const [page, setPage] = useState(0);
   const [hasMore, setHasMore] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const { ref, inView } = useInView();
 
+  const isOwner = isAuthenticated && user?.uuid === artistId;
+
   const fetchMoreTracks = async () => {
     if (isLoading || !hasMore) return;
 
@@ -76,7 +85,7 @@ export function TrackList({ tracks: initialTracks, albumId }: TrackListProps) {
       ) : (
         <div className="space-y-1">
           {tracks.map((track, index) => (
-            <button
+            <div
               key={track.uuid}
               className={cn(
                 "w-full px-4 py-3",
@@ -97,11 +106,28 @@ export function TrackList({ tracks: initialTracks, albumId }: TrackListProps) {
                 </div>
                 <Play className="w-4 h-4 absolute left-2 opacity-0 group-hover:opacity-100 transition-all duration-300" />
                 <div className="flex-1 text-left">{track.title}</div>
-                <div className="text-sm text-muted-foreground">
+                <div className="text-sm text-muted-foreground mr-4">
                   {formatDuration(track.duration)}
                 </div>
+                {isOwner && (
+                  <TrackActions 
+                    track={track} 
+                    onUpdate={(updatedTrack) => {
+                      setTracks(prev => 
+                        prev.map(t => t.uuid === updatedTrack.uuid ? {
+                          ...t,
+                          title: updatedTrack.title,
+                          lyric: updatedTrack.lyric
+                        } : t)
+                      );
+                    }} 
+                    onDelete={(deletedTrackId) => {
+                      setTracks(prev => prev.filter(t => t.uuid !== deletedTrackId));
+                    }} 
+                  />
+                )}
               </div>
-            </button>
+            </div>
           ))}
           
           {hasMore && (
diff --git a/src/components/home/TrackSection.tsx b/src/components/home/TrackSection.tsx
new file mode 100644
index 0000000..1382f53
--- /dev/null
+++ b/src/components/home/TrackSection.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Music, Loader2 } from "lucide-react";
+import { formatDuration } from "@/lib/format";
+import { useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
+import Link from "next/link";
+import Image from "next/image";
+
+interface Track {
+  trackResponseDto: {
+    uuid: string;
+    title: string;
+    duration: number;
+    artUrl: string;
+  };
+  albumResponseDto: {
+    uuid: string;
+    title: string;
+  };
+  artistResponseDto: {
+    uuid: string;
+    name: string;
+  };
+}
+
+export function TrackSection() {
+  const [tracks, setTracks] = useState<Track[]>([]);
+  const [page, setPage] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const { ref, inView } = useInView();
+
+  const fetchTracks = async () => {
+    if (isLoading || !hasMore) return;
+
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_BASE_URL}/tracks?page=${page}&pageSize=10`,
+        {
+          credentials: "include",
+        }
+      );
+
+      if (!response.ok) throw new Error("트랙 목록을 불러오는데 실패했습니다.");
+
+      const data = await response.json();
+
+      if (data.length === 0) {
+        setHasMore(false);
+        return;
+      }
+
+      setTracks((prev) => [...prev, ...data]);
+      setPage((prev) => prev + 1);
+    } catch (error) {
+      console.error("Failed to fetch tracks:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (inView) {
+      fetchTracks();
+    }
+  }, [inView]);
+
+  return (
+    <section className="p-6 border-t border-white/10">
+      <h2 className="text-xl font-bold mb-4">최신 업로드</h2>
+      {tracks.length === 0 && !isLoading ? (
+        <div className="flex flex-col items-center justify-center py-8">
+          <Music className="w-12 h-12 text-muted-foreground mb-4" />
+          <p className="text-muted-foreground text-center">
+            아직 등록된 트랙이 없습니다
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {tracks.map((track) => (
+            <div
+              key={track.trackResponseDto.uuid}
+              className={cn(
+                "w-full px-4 py-3",
+                "flex items-center gap-4",
+                "rounded-xl",
+                "transition-all duration-300",
+                "hover:bg-white/5",
+                "group relative"
+              )}
+            >
+              <div className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                <div className="absolute inset-0 bg-gradient-to-r from-white/5 to-transparent" />
+              </div>
+
+              <div className="relative flex items-center gap-4 w-full">
+                <div className="relative w-10 h-10 rounded-lg overflow-hidden">
+                  <Image
+                    src={track.trackResponseDto.artUrl}
+                    alt={track.trackResponseDto.title}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium truncate">
+                    {track.trackResponseDto.title}
+                  </div>
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Link
+                      href={`/profile/${track.artistResponseDto.uuid}`}
+                      className="hover:underline truncate"
+                    >
+                      {track.artistResponseDto.name}
+                    </Link>
+                    <span>•</span>
+                    <Link
+                      href={`/albums/${track.albumResponseDto.uuid}`}
+                      className="hover:underline truncate"
+                    >
+                      {track.albumResponseDto.title}
+                    </Link>
+                  </div>
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  {formatDuration(track.trackResponseDto.duration)}
+                </div>
+              </div>
+            </div>
+          ))}
+
+          {hasMore && (
+            <div ref={ref} className="py-4 flex justify-center">
+              {isLoading && (
+                <div className="text-sm text-muted-foreground">
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}