유저 정보 불러오기 수정 + 더보기 페이지 생성

package.json

@@ -19,11 +19,13 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.1",
     "@tabler/icons-react": "^3.19.0",
+    "@types/js-cookie": "^3.0.6",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cookie": "^1.0.1",
     "framer-motion": "^11.9.0",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.446.0",
     "next": "14.2.13",
     "next-themes": "^0.3.0",

src/app/more/album/page.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useState } from "react";
+import SquareContainer from "@/components/container/square-container";
+import {
+  IconChevronRight,
+  IconDotsVertical,
+  IconHeart,
+  IconInfoCircle,
+  IconPlayerPlayFilled,
+  IconShare,
+} from "@tabler/icons-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import useStreamingBar from "@/hooks/modal/use-streaming-bar";
+
+interface Album {
+  id: number;
+  name: string;
+  src: string;
+  onClickName: () => void;
+  onClickDescription: () => void;
+  description?: string;
+}
+
+export default function MoreAlbumPage() {
+  const router = useRouter();
+  const streamingBar = useStreamingBar();
+
+  const albums: Album[] = [
+    {
+      id: 1,
+      name: "Get Up",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/album/123"),
+      onClickDescription: () => router.push("/user/123"),
+      description: "2023 NewJeans",
+    },
+    {
+      id: 2,
+      name: "Drama",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/album/123"),
+      onClickDescription: () => router.push("/user/123"),
+      description: "2024 aespa",
+    },
+    {
+      id: 3,
+      name: "JORDI",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/album/123"),
+      onClickDescription: () => router.push("/user/123"),
+      description: "2021 Maroon 5",
+    },
+    {
+      id: 4,
+      name: "Love Sux",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/album/123"),
+      onClickDescription: () => router.push("/user/123"),
+      description: "2022 Avril Lavigne",
+    },
+    {
+      id: 5,
+      name: "The Winning",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/album/123"),
+      onClickDescription: () => router.push("/user/123"),
+      description: "2024 IU",
+    },
+    {
+      id: 6,
+      name: "Remember Us",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/album/123"),
+      onClickDescription: () => router.push("/user/123"),
+      description: "2018 DAY6",
+    },
+  ];
+
+  const dummy = [
+    {
+      id: 1,
+      title: "피곤해",
+    },
+    {
+      id: 2,
+      title: "피곤해",
+    },
+    {
+      id: 3,
+      title: "피곤해",
+    },
+    {
+      id: 4,
+      title: "피곤해",
+    },
+  ];
+
+  const [selectedAlbum, setSelectedAlbum] = useState<Album>(albums[0]);
+
+  const handleAlbumSelect = (album: Album) => {
+    setSelectedAlbum(album);
+  };
+
+  return (
+    <main className="flex flex-col bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-8 md:mt-24 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
+      <div className="h-auto flex flex-col gap-y-4 lg:flex-row gap-x-4 items-center justify-center">
+        {/* 왼쪽 프로필 섹션 */}
+        <div className="w-full lg:w-1/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg relative">
+          <div className="flex flex-col items-center mx-8 mt-2">
+            <Image
+              src={selectedAlbum.src}
+              alt={selectedAlbum.name}
+              width={200}
+              height={200}
+              className="rounded-lg"
+            />
+            <h1 className="text-3xl font-bold mt-8 text-center truncate tracking-wide">
+              {selectedAlbum.name}
+            </h1>
+            <p
+              onClick={() => router.push("/user/123")}
+              className="mt-4 tracking-wide uppercase truncate font-bold text-lg text-gray-700 dark:text-white hover:underline cursor-pointer"
+            >
+              {selectedAlbum.description}
+            </p>
+            <div className="flex w-full items-center justify-between mt-6">
+              <div className="flex gap-x-2 items-center justify-center mr-2 lg:mr-0">
+                <IconHeart className="size-6" />
+                <span className="text-base">13.1k</span>
+              </div>
+              <div className="flex gap-x-3">
+                <IconShare className="size-6" />
+                <IconInfoCircle className="size-6" />
+                <IconDotsVertical className="size-6" />
+              </div>
+            </div>
+
+            <div className="mt-8 w-full overflow-y-auto hide-scrollbar">
+              {dummy.map((song) => (
+                <div
+                  key={song.id}
+                  className="group flex items-center rounded-lg hover:bg-[#7E47631F] dark:hover:bg-white/10 h-12"
+                >
+                  <div className="w-[50px] pr-4">
+                    <div className="flex group-hover:hidden pr-4">
+                      {song.id}
+                    </div>
+                    <div
+                      onClick={() => streamingBar.onOpen()}
+                      className="hidden group-hover:flex text-[#FF239C]"
+                    >
+                      <IconPlayerPlayFilled className="size-6" />
+                    </div>
+                  </div>
+                  <div className="w-full group-hover:font-semibold">
+                    {song.title}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="absolute bottom-[5%]">
+              <button
+                className="bg-white dark:bg-black dark:backdrop-blur-xl hover:opacity-75 text-black dark:text-white rounded-full p-2 shadow-lg"
+                onClick={selectedAlbum.onClickName}
+              >
+                <IconChevronRight className="size-6" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* 오른쪽 아티스트 그리드 섹션 */}
+        <div className="w-full lg:w-2/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg overflow-y-auto hide-scrollbar">
+          <div className="grid grid-cols-3 xl:grid-cols-4 gap-8">
+            {albums.map((album) => (
+              <div
+                className="flex flex-col items-center cursor-pointer"
+                key={album.id}
+                onClick={() => handleAlbumSelect(album)}
+              >
+                <SquareContainer
+                  src={album.src}
+                  name={album.name}
+                  description={album.description}
+                  design="rounded-lg"
+                  onClickName={album.onClickName}
+                  onClickDescription={album.onClickDescription}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/more/artist/page.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { useState } from "react";
+import SquareContainer from "@/components/container/square-container";
+import { IconChevronRight } from "@tabler/icons-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+interface Artist {
+  id: number;
+  name: string;
+  src: string;
+  onClickName: () => void;
+  followers?: string;
+  description?: string;
+}
+
+export default function MoreArtistPage() {
+  const router = useRouter();
+
+  const artists: Artist[] = [
+    {
+      id: 1,
+      name: "NewJeans",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/user/123"),
+      followers: "1.5M",
+      description: "Hello! My name is NewJeans, and I'm passionate about exploring new ideas and cultures. I enjoy reading, traveling, and meeting new people...",
+    },
+    {
+      id: 2,
+      name: "AESPA",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/user/123"),
+      followers: "2.1M",
+      description: "We are AESPA! Known for our unique blend of K-pop and virtual reality concepts...",
+    },
+    {
+      id: 3,
+      name: "MAROON 5",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/user/123"),
+      followers: "3.2M",
+      description: "MAROON 5 is an American pop rock band that was formed in 1994 in Los Angeles, California...",
+    },
+    {
+      id: 4,
+      name: "AVRIL LAVIGNE",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/user/123"),
+      followers: "4.5M",
+      description: "AVRIL LAVIGNE is a Canadian singer, songwriter, and actress. She rose to fame with her debut album 'Let Go'...",
+    },
+    {
+      id: 5,
+      name: "IU",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/user/123"),
+      followers: "5.2M",
+      description: "IU is a South Korean singer, songwriter, and actress. She gained popularity with her albums 'IU...' and 'Palette'...",
+    },
+    {
+      id: 6,
+      name: "DAY6",
+      src: "/images/albumcover.png",
+      onClickName: () => router.push("/user/123"),
+      followers: "2.8M",
+      description: "DAY6 is a South Korean boy band that debuted in 2015. They gained popularity with their album 'The Day'...",
+    },
+  ];
+
+  const [selectedArtist, setSelectedArtist] = useState<Artist>(artists[0]);
+
+  const handleArtistSelect = (artist: Artist) => {
+    setSelectedArtist(artist);
+  };
+
+  return (
+    <main className="flex flex-col bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-8 md:mt-24 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
+      <div className="h-auto flex flex-col lg:flex-row gap-x-4 items-center justify-center">
+        {/* 왼쪽 프로필 섹션 */}
+        <div className="w-full lg:w-1/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg">
+          <div className="flex flex-col items-center mx-8 mt-2">
+            <Image
+              src={selectedArtist.src}
+              alt={selectedArtist.name}
+              width={200}
+              height={200}
+              className="rounded-full"
+            />
+            <h1 className="text-3xl font-bold mt-8 text-center truncate tracking-wide">{selectedArtist.name}</h1>
+            <div className="flex justify-center items-center gap-4 mt-6 gap-x-4 w-full">
+              <button className="bg-[#FFFFFF] text-black font-bold text-sm w-1/2 rounded-lg py-2 drop-shadow-lg hover:opacity-75">
+                {selectedArtist.followers}
+              </button>
+              <button className="bg-[#FF8EBD] text-white font-bold text-sm dark:text-black rounded-lg w-1/2 py-2 drop-shadow-lg hover:opacity-75">
+                팔로우
+              </button>
+            </div>
+            <p className="mt-6 text-gray-700 dark:text-white">
+              {selectedArtist.description}
+              <button className="text-gray-500 dark:text-gray-400">more</button>
+            </p>
+            <div className="mt-8">
+              <button 
+                className="bg-white dark:bg-black dark:backdrop-blur-xl hover:opacity-75 text-black dark:text-white rounded-full p-2"
+                onClick={selectedArtist.onClickName}
+              >
+                <IconChevronRight className="size-6" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* 오른쪽 아티스트 그리드 섹션 */}
+        <div className="w-full lg:w-2/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg overflow-y-auto hide-scrollbar">
+          <div className="grid grid-cols-3 xl:grid-cols-4 gap-8">
+            {artists.map((artist) => (
+              <div 
+                className="flex flex-col items-center cursor-pointer" 
+                key={artist.id}
+                onClick={() => handleArtistSelect(artist)}
+              >
+                <SquareContainer
+                  src={artist.src}
+                  name={artist.name}
+                  design="rounded-full"
+                  onClickName={artist.onClickName}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}