From ae6c1c30dfb8afd73a758e26c5d551ce5ddf9e18 Mon Sep 17 00:00:00 2001 From: choi Date: Tue, 19 Nov 2024 13:30:22 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9C=A0=EC=A0=80=20=EC=A0=95=EB=B3=B4=20?= =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 39 ++++++++++-------- src/app/user/[userId]/page.tsx | 10 +++-- src/features/main/bar.tsx | 26 ++++++++---- src/features/main/main-album.tsx | 6 ++- src/features/main/main-artist.tsx | 6 ++- src/features/main/main-playlist.tsx | 6 ++- src/features/main/main-track.tsx | 3 ++ src/features/main/topbar.tsx | 2 +- src/lib/axios.ts | 8 ++++ src/provider/userProvider.tsx | 64 +++++++++++++++++++++++++++++ 10 files changed, 137 insertions(+), 33 deletions(-) create mode 100644 src/lib/axios.ts create mode 100644 src/provider/userProvider.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a00b485..2942914 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,6 +9,7 @@ import { Toaster } from "@/components/ui/sonner"; import { ThemeProvider } from "@/components/ui/theme-provider"; import AuthProvider from "@/provider/authProvider"; +import { UserProvider } from "@/provider/userProvider"; export const metadata: Metadata = { title: "Untitled", @@ -38,26 +39,28 @@ export default function RootLayout({ disableTransitionOnChange > - - - -
-
- -
-
- -
- -
- -
- - {children} -
+ + + + +
+
+ +
+
+ +
+ +
+ +
+ + {children} +
+ ); -} \ No newline at end of file +} diff --git a/src/app/user/[userId]/page.tsx b/src/app/user/[userId]/page.tsx index c2cb1e9..95580dc 100644 --- a/src/app/user/[userId]/page.tsx +++ b/src/app/user/[userId]/page.tsx @@ -1,6 +1,7 @@ "use client"; import { useState } from "react"; +import { ChevronDown } from "lucide-react"; import { IconLink, @@ -21,12 +22,15 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import UserTrack from "@/features/user/user-track"; import UserAlbum from "@/features/user/user-album"; import UserPlaylist from "@/features/user/user-playlist"; -import { ChevronDown } from "lucide-react"; + +import { useUser } from "@/provider/userProvider"; export default function UserPage() { const [activeTab, setActiveTab] = useState("track"); const [array, setArray] = useState("new"); + const { user } = useUser(); + const tabs = [ { id: "track", label: "트랙", icon: IconMusic, onClick: () => {} }, { id: "album", label: "앨범", icon: IconDisc, onClick: () => {} }, @@ -45,12 +49,12 @@ export default function UserPage() {
- + U
-
YANG RARO
+
{user?.name || "U"}
diff --git a/src/lib/axios.ts b/src/lib/axios.ts new file mode 100644 index 0000000..ccd7c11 --- /dev/null +++ b/src/lib/axios.ts @@ -0,0 +1,8 @@ +import axios from 'axios'; + +export const api = axios.create({ + baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '', + headers: { + 'Content-Type': 'application/json', + }, +}); \ No newline at end of file diff --git a/src/provider/userProvider.tsx b/src/provider/userProvider.tsx new file mode 100644 index 0000000..82ade2e --- /dev/null +++ b/src/provider/userProvider.tsx @@ -0,0 +1,64 @@ +"use client"; + +import { AxiosError } from "axios"; +import React, { createContext, useContext, useEffect, useState } from "react"; + +import { api } from "../lib/axios"; + +export interface Artist { + uuid: string; + name: string; + email: string; + artistImage: string; +} + +interface UserContextType { + user: Artist | null; + isLoading: boolean; + error: Error | null; +} + +const UserContext = createContext(undefined); + +export function UserProvider({ children }: { children: React.ReactNode }) { + const [user, setUser] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchUser = async () => { + try { + const { data } = await api.get("/artist"); + setUser(data); + } catch (err) { + if (err instanceof AxiosError) { + setError( + new Error( + err.response?.data?.message || "Failed to fetch user data" + ) + ); + } else { + setError(new Error("An unexpected error occurred")); + } + } finally { + setIsLoading(false); + } + }; + + fetchUser(); + }, []); + + return ( + + {children} + + ); +} + +export function useUser() { + const context = useContext(UserContext); + if (context === undefined) { + throw new Error("useUser must be used within a UserProvider"); + } + return context; +}