[♻️Refactor] 0903 QA 진행 후 리팩토링 요소 반영 (#206)

* ♻️ refactor: 테스트 스켈레톤 코드 삭제

* 🎨 styles: skeleton - 예약 내역, 내 체험관리 영역 스타일 수정

* ♻️ refactor: 배너 캐러셀 영역 스켈레톤 적용으로 인해 삭제(blurImageUrl)

* ♻️ refactor: toast 메시지로 에러메시지 보여주던걸 Alert메시지로 통일

* 🐛 fix: 비 로그인 사용자가 특정 링크 접근시 aauthGuard 동작되도록 수정, AuthGuard 코드 자체 리팩토링

* 🎨 styles: 예약내역, 내 체험관리 스켈레톤 styles 수정(브라우저 width에 맞는 길이로 수정)

* ♻️ refactor: 모든체험, 인기체험 suspense 제거 후 반영

Author: 0Hyunn

src/app/activities/page-content.tsx

@@ -46,14 +46,10 @@ const ActivitiesPageContent = () => {
         ) : (
           <>
             {/* 지연 로드: 인기 체험 */}
-            <Suspense fallback={<LoadingSpinner />}>
-              <BestActivities />
-            </Suspense>
+            <BestActivities />
 
             {/* 지연 로드: 전체 체험 목록 */}
-            <Suspense fallback={<LoadingSpinner />}>
-              <AllActivities />
-            </Suspense>
+            <AllActivities />
           </>
         )}
       </div>

src/app/my/layout.tsx

@@ -4,6 +4,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
 import Sidebar from '@/features/my/components/sidebar';
+import { AuthGuard } from '@/shared/components/auth/AuthGuard';
 import LoadingSpinner from '@/shared/components/loading-spinner/loading-spinner';
 import useWindowSize from '@/shared/libs/hooks/useWindowSize';
 
@@ -42,39 +43,41 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <div
-      className={`mx-auto flex justify-center px-[2.4rem] py-[3rem] md:w-[73.2rem] md:gap-[3rem] lg:min-w-[102.4rem] lg:gap-[5rem]`}
-    >
-      {/* 모바일에서만 보이는 뒤로가기 버튼 */}
-      {isMobile && !isMyPageRoot && (
-        <button
-          onClick={handleBackClick}
-          className="absolute top-[5.8rem] left-[2.4rem]"
-          aria-label="뒤로 가기"
-        >
-          <Image
-            src="/images/icons/back.svg"
-            alt="뒤로 가기"
-            width={23}
-            height={23}
-          />
-        </button>
-      )}
-
-      <aside
-        className={
-          (isMobile && !isMyPageRoot) ||
-          isActivityRegistration ||
-          isActivityEdit
-            ? 'hidden'
-            : ''
-        }
+    <AuthGuard>
+      <div
+        className={`mx-auto flex justify-center px-[2.4rem] py-[3rem] md:w-[73.2rem] md:gap-[3rem] lg:min-w-[102.4rem] lg:gap-[5rem]`}
       >
-        <Sidebar />
-      </aside>
-      <main className={`${isMobile && isMyPageRoot ? 'hidden' : ''} w-full`}>
-        {children}
-      </main>
-    </div>
+        {/* 모바일에서만 보이는 뒤로가기 버튼 */}
+        {isMobile && !isMyPageRoot && (
+          <button
+            onClick={handleBackClick}
+            className="absolute top-[5.8rem] left-[2.4rem]"
+            aria-label="뒤로 가기"
+          >
+            <Image
+              src="/images/icons/back.svg"
+              alt="뒤로 가기"
+              width={23}
+              height={23}
+            />
+          </button>
+        )}
+
+        <aside
+          className={
+            (isMobile && !isMyPageRoot) ||
+            isActivityRegistration ||
+            isActivityEdit
+              ? 'hidden'
+              : ''
+          }
+        >
+          <Sidebar />
+        </aside>
+        <main className={`${isMobile && isMyPageRoot ? 'hidden' : ''} w-full`}>
+          {children}
+        </main>
+      </div>
+    </AuthGuard>
   );
 }

src/app/my/my-activities/activity-registration/page.tsx

@@ -1,5 +1,4 @@
 import ActivityRegistrationForm from '@/features/activity-registration/components/activity-registration-form';
-import { AuthGuard } from '@/shared/components/auth/AuthGuard';
 
 const ActivityRegistrationPage = () => {
   return (
@@ -14,10 +13,4 @@ const ActivityRegistrationPage = () => {
   );
 };
 
-export default function GuardActivityRegistrationPage() {
-  return (
-    <AuthGuard>
-      <ActivityRegistrationPage />
-    </AuthGuard>
-  );
-}
+export default ActivityRegistrationPage;

src/app/test-skeleton/page.tsx

@@ -123,12 +123,6 @@ const BannerCarousel = () => {
                   quality={idx === 0 ? 60 : 50}
                   loading={idx === 0 ? 'eager' : 'lazy'}
                   sizes="(max-width: 768px) 100vw, (max-width: 1024px) 100vw, 112rem"
-                  placeholder={idx === 0 ? undefined : 'blur'}
-                  blurDataURL={
-                    idx === 0
-                      ? undefined
-                      : 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=='
-                  }
                 />
                 <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/90 to-transparent p-2 transition-opacity duration-700 md:p-8 lg:p-12">
                   <div className="mb-2 text-center text-[1.8rem] font-bold text-white drop-shadow-lg md:text-[2.4rem] lg:text-[3.2rem]">