From b2dce81de1ea4a7ad80859bedea2278e8935a14b Mon Sep 17 00:00:00 2001
From: choi <cejewe@naver.com>
Date: Fri, 20 Dec 2024 15:27:44 +0900
Subject: [PATCH] =?UTF-8?q?getProfile=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/watch/[watchId]/page.tsx | 226 +++++++++++++++----------------
 src/features/main/bar.tsx        |  17 ++-
 2 files changed, 116 insertions(+), 127 deletions(-)

diff --git a/src/app/watch/[watchId]/page.tsx b/src/app/watch/[watchId]/page.tsx
index ec56e39..397655c 100644
--- a/src/app/watch/[watchId]/page.tsx
+++ b/src/app/watch/[watchId]/page.tsx
@@ -30,17 +30,9 @@ export default function WatchPage() {
   const [mobile, setMobile] = useState<boolean>(false);
   const isMobile = useMediaQuery({ maxWidth: 768 });
 
-  const checkResize = () => {
-    if (isMobile) {
-      setMobile(true);
-    } else {
-      setMobile(false);
-    }
-  };
-
   useEffect(() => {
-    checkResize();
-  }, []);
+    setMobile(isMobile);
+  }, [isMobile]);
 
   const [view, setView] = useState<ViewState>("nowPlaying");
   const router = useRouter();
@@ -58,124 +50,122 @@ export default function WatchPage() {
     <>
       {!mobile && (
         <main className="h-full w-full z-50 relative flex flex-col overflow-hidden py-8 md:px-24 px-8">
-        <div className="absolute inset-0 bg-[url('/images/aespa.png')] bg-cover bg-center brightness-50"></div>
-  
-        <div
-          onClick={handleClick}
-          className="relative flex w-full items-center justify-between"
-        >
-          <div className="flex flex-1 gap-x-4">
-            <button onClick={handleClick}>
-              <IconMaximize className="size-8 text-white" />
-            </button>
-            <button onClick={(e) => toggleView(e)}>
-              {view === "nowPlaying" ? (
-                <IconAlignBoxCenterMiddle className="size-8 text-white" />
-              ) : (
-                <IconVinyl className="size-8 text-white" />
-              )}
-            </button>
-          </div>
+          <div className="absolute inset-0 bg-[url('/images/aespa.png')] bg-cover bg-center brightness-50"></div>
+
           <div
-            onClick={(e) => e.stopPropagation()}
-            className="flex items-center flex-2 space-x-4"
+            onClick={handleClick}
+            className="relative flex w-full items-center justify-between"
           >
-            <button>
-              <IconArrowsShuffle className="size-5" />
-            </button>
-            <button>
-              <IconPlayerSkipBackFilled className="size-5" />
-            </button>
-            <button className="rounded-full bg-white drop-shadow-md p-2 text-black">
-              <IconPlayerPlayFilled className="size-5" />
-            </button>
-            <button>
-              <IconPlayerSkipForwardFilled className="size-5" />
-            </button>
-            <button>
-              <IconRepeat className="size-5" />
-            </button>
-          </div>
-          <div className="flex flex-1 items-center space-x-2">
-            <VolumeComponent onClick={(e) => e.stopPropagation()} />
-            <button>
-              <IconDotsVertical
-                onClick={(e) => e.stopPropagation()}
-                className="size-5"
-              />
-            </button>
-          </div>
-        </div>
-  
-        <div className="relative flex items-center justify-center space-x-4 w-full py-4">
-          <div className="text-sm pb-2 font-bold">01:53</div>
-          <div className="w-full">
-            <CustomSlider
-              className="cursor-pointer"
-              defaultValue={[50]}
-              max={100}
-              step={1}
-            />
-          </div>
-          <div className="text-sm pb-2 font-bold">03:10</div>
-        </div>
-  
-        <div className="relative flex flex-col md:flex-row items-center justify-between md:justify-center w-full h-full md:my-8 md:gap-x-10 gap-y-8 md:gap-y-0 overflow-y-auto">
-          <div className="flex flex-col items-center justify-center gap-y-4 w-full md:w-1/4">
-            <div className="bg-gradient-to-br from-[#FFFFFFA0] to-[#999999A0] aspect-square rounded-lg mb-4">
-              <div className="p-6 flex items-center justify-center">
-                <Image
-                  src="/images/albumcover.png"
-                  alt="albumcover"
-                  width={500}
-                  height={500}
-                  className="rounded-lg"
+            <div className="flex flex-1 gap-x-4">
+              <button onClick={handleClick}>
+                <IconMaximize className="size-8 text-white" />
+              </button>
+              <button onClick={(e) => toggleView(e)}>
+                {view === "nowPlaying" ? (
+                  <IconAlignBoxCenterMiddle className="size-8 text-white" />
+                ) : (
+                  <IconVinyl className="size-8 text-white" />
+                )}
+              </button>
+            </div>
+            <div
+              onClick={(e) => e.stopPropagation()}
+              className="flex items-center flex-2 space-x-4"
+            >
+              <button>
+                <IconArrowsShuffle className="size-5" />
+              </button>
+              <button>
+                <IconPlayerSkipBackFilled className="size-5" />
+              </button>
+              <button className="rounded-full bg-white drop-shadow-md p-2 text-black">
+                <IconPlayerPlayFilled className="size-5" />
+              </button>
+              <button>
+                <IconPlayerSkipForwardFilled className="size-5" />
+              </button>
+              <button>
+                <IconRepeat className="size-5" />
+              </button>
+            </div>
+            <div className="flex flex-1 items-center space-x-2">
+              <VolumeComponent onClick={(e) => e.stopPropagation()} />
+              <button>
+                <IconDotsVertical
+                  onClick={(e) => e.stopPropagation()}
+                  className="size-5"
                 />
-              </div>
+              </button>
             </div>
-            <div className="text-3xl font-bold">WHIPLASH</div>
-            <div className="text-2xl font-bold text-neutral-300 flex items-center gap-x-2">
-              <Link href="/user/123" className="hover:underline">
-                에스파
-              </Link>
-              <span>·</span>
-              <Link href="/album/123" className="hover:underline">
-                WHIPLASH
-              </Link>
+          </div>
+
+          <div className="relative flex items-center justify-center space-x-4 w-full py-4">
+            <div className="text-sm pb-2 font-bold">01:53</div>
+            <div className="w-full">
+              <CustomSlider
+                className="cursor-pointer"
+                defaultValue={[50]}
+                max={100}
+                step={1}
+              />
             </div>
+            <div className="text-sm pb-2 font-bold">03:10</div>
           </div>
-  
-          <div className="flex flex-col h-full w-full md:w-1/3">
-            <div className="bg-gradient-to-br from-[#FFFFFFA0] to-[#999999A0] h-full rounded-lg p-2 overflow-y-auto hide-scrollbar">
-              {view === "nowPlaying" ? (
-                <WatchNowPlaying />
-              ) : (
-                <div className="whitespace-pre-line p-4 text-2xl truncate leading-loose text-white">
-                  Fancy 이건 참 화려해
-                  <br />
-                  It&apos;s glowing and it&apos;s flashy (yeah)
-                  <br />
-                  알아, 적당함이 뭔지 keep it classy
-                  <br />
-                  따라 하지 넌 또 하나부터 열까지 (yeah)
-                  <br />
-                  아닌척하지 (yeah)
-                  <br />
-                  Under pressure, body sweating, can you focus? (Hoo)
-                  <br />
-                  I deliver, I can promise, I&apos;m the coldest (cold)
-                  <br />
-                  외면해도 소용없지 don&apos;t you blow it?
+
+          <div className="relative flex flex-col md:flex-row items-center justify-between md:justify-center w-full h-full md:my-8 md:gap-x-10 gap-y-8 md:gap-y-0 overflow-y-auto">
+            <div className="flex flex-col items-center justify-center gap-y-4 w-full md:w-1/4">
+              <div className="bg-gradient-to-br from-[#FFFFFFA0] to-[#999999A0] aspect-square rounded-lg mb-4">
+                <div className="p-6 flex items-center justify-center">
+                  <Image
+                    src="/images/albumcover.png"
+                    alt="albumcover"
+                    width={500}
+                    height={500}
+                    className="rounded-lg"
+                  />
                 </div>
-              )}
+              </div>
+              <div className="text-3xl font-bold">WHIPLASH</div>
+              <div className="text-2xl font-bold text-neutral-300 flex items-center gap-x-2">
+                <Link href="/user/123" className="hover:underline">
+                  에스파
+                </Link>
+                <span>·</span>
+                <Link href="/album/123" className="hover:underline">
+                  WHIPLASH
+                </Link>
+              </div>
+            </div>
+
+            <div className="flex flex-col h-full w-full md:w-1/3">
+              <div className="bg-gradient-to-br from-[#FFFFFFA0] to-[#999999A0] h-full rounded-lg p-2 overflow-y-auto hide-scrollbar">
+                {view === "nowPlaying" ? (
+                  <WatchNowPlaying />
+                ) : (
+                  <div className="whitespace-pre-line p-4 text-2xl truncate leading-loose text-white">
+                    Fancy 이건 참 화려해
+                    <br />
+                    It&apos;s glowing and it&apos;s flashy (yeah)
+                    <br />
+                    알아, 적당함이 뭔지 keep it classy
+                    <br />
+                    따라 하지 넌 또 하나부터 열까지 (yeah)
+                    <br />
+                    아닌척하지 (yeah)
+                    <br />
+                    Under pressure, body sweating, can you focus? (Hoo)
+                    <br />
+                    I deliver, I can promise, I&apos;m the coldest (cold)
+                    <br />
+                    외면해도 소용없지 don&apos;t you blow it?
+                  </div>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-      </main>
-      )}
-      {mobile && (
-        <MobileWatchPage />
+        </main>
       )}
+      {mobile && <MobileWatchPage />}
     </>
   );
 }
diff --git a/src/features/main/bar.tsx b/src/features/main/bar.tsx
index 5e1bcc4..a0210bc 100644
--- a/src/features/main/bar.tsx
+++ b/src/features/main/bar.tsx
@@ -45,7 +45,7 @@ export function Bar() {
 
   const [uploadOpen, setUploadOpen] = useState(false);
   const [settingOpen, setSettingOpen] = useState(false);
-  const [profileData, setProfileData] = useState<Profile>();
+  const [profileData, setProfileData] = useState<Profile | null>();
 
   const uploadRef = useRef(null);
   useOutsideClick(uploadRef, () => setUploadOpen(false));
@@ -55,16 +55,12 @@ export function Bar() {
 
   useEffect(() => {
     const getProfileData = async () => {
-      try {
-        const data = await getProfile();
-        setProfileData(data);
-      } catch (error) {
-        console.error("프로필 로딩 실패:", error);
-      }
+      const data = await getProfile();
+      setProfileData(data);
     };
 
     getProfileData();
-  }, [profileData])
+  }, []);
 
   const links = [
     {
@@ -114,7 +110,10 @@ export function Bar() {
       title: "프로필",
       icon: (
         <Avatar>
-          <AvatarImage src={profileData ? profileData.profileImage : user?.artistImage} alt={profileData ? profileData.name : user?.name} />
+          <AvatarImage
+            src={profileData?.profileImage || user?.artistImage}
+            alt={profileData?.name || user?.name}
+          />
           <AvatarFallback>
             {user?.name ? (
               user.name.charAt(0).toUpperCase()