[#143] 마이페이지 스켈레톤 UI 적용

src/app/globals.css

@@ -133,38 +133,3 @@ div.swiper-scrollbar-drag {
 div.swiper-scrollbar {
   background: var(--color-gray-300);
 }
-
-/* 스켈레톤 애니메이션 */
-
-@-webkit-keyframes skeleton-gradient {
-  0% {
-    background-color: rgba(165, 165, 165, 0.1);
-  }
-
-  50% {
-    background-color: rgba(165, 165, 165, 0.3);
-  }
-
-  100% {
-    background-color: rgba(165, 165, 165, 0.1);
-  }
-}
-
-@keyframes skeleton-gradient {
-  0% {
-    background-color: rgba(165, 165, 165, 0.1);
-  }
-
-  50% {
-    background-color: rgba(165, 165, 165, 0.3);
-  }
-
-  100% {
-    background-color: rgba(165, 165, 165, 0.1);
-  }
-}
-
-.skeleton-gradient {
-  -webkit-animation: skeleton-gradient 1.8s infinite ease-in-out;
-  animation: skeleton-gradient 1.8s infinite ease-in-out;
-}

src/app/myprofile/_components/my-profile/my-profile.tsx

@@ -13,8 +13,12 @@ import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
 import getUserReview from "@/api/my-profile/get-user-review";
 import getUserWines from "@/api/user/get-user-wines";
 import { EmptyState } from "@/components";
-import Loader from "@/components/loader/loader";
-import CardSkeleton from "@/components/card/card-skeleton";
+
+const WINE_ITEM_CONTAINER = cn(
+  "grid w-full gap-y-[16px] pt-[24px]",
+  "tablet:grid-cols-2 tablet:gap-x-[16px] tablet:gap-y-[32px]",
+  "pc:grid-cols-3 pc:gap-x-[15px] pc:gap-y-[40px] pc:pt-[40px]"
+);
 
 interface MyProfileProps {
   userInfo: User;
@@ -61,80 +65,80 @@ const MyProfile = ({ userInfo }: MyProfileProps) => {
   if (!userInfo) return redirect("/login");
 
   return (
-    <main className="flex-col-center mx-auto w-full pc:flex-row pc:items-start">
-      <article className="container w-full">
-        <ProfileTabs tab={tab} setTab={setTab} />
-        <section className="mt-[61px] tablet:mt-[67px] pc:mt-[70px]">
-          {tab === "review" && (
-            <>
-              {reviewIsLoading ? (
-                <Loader />
-              ) : userReview?.length === 0 || reviewIsError ? (
-                <EmptyState
-                  icon="EmptyStateIcon"
-                  title="아직 등록된 리뷰가 없습니다."
-                  description="리뷰를 등록해보세요!"
-                />
-              ) : (
-                (userReview as ReviewItemType[])?.map((review) => (
-                  <ReviewItem key={review.id} review={review} />
-                ))
-              )}
-              <div ref={reviewObserverRef} className="mt-[100px] h-1 w-full" />
-            </>
-          )}
+    <>
+      <main className="flex-col-center mx-auto w-full pc:flex-row pc:items-start">
+        <article className="container w-full">
+          <ProfileTabs tab={tab} setTab={setTab} />
+          <section className="mt-[61px] tablet:mt-[67px] pc:mt-[70px]">
+            {tab === "review" && (
+              <>
+                {reviewIsLoading && (
+                  <>
+                    {Array.from({ length: 4 }).map((_, i) => (
+                      <ReviewItem key={`skeleton-${i}`} skeleton />
+                    ))}
+                  </>
+                )}
+                {userReview?.length === 0 || reviewIsError ? (
+                  <EmptyState
+                    icon="EmptyStateIcon"
+                    title="아직 등록된 리뷰가 없습니다."
+                    description="리뷰를 등록해보세요!"
+                  />
+                ) : (
+                  (userReview as ReviewItemType[])?.map((review) => (
+                    <ReviewItem key={review.id} review={review} />
+                  ))
+                )}
+                {isFetchingNextPage && (
+                  <div className={WINE_ITEM_CONTAINER} ref={reviewObserverRef}>
+                    {Array.from({ length: 4 }).map((_, i) => (
+                      <ReviewItem key={`skeleton-${i}`} skeleton />
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
 
-          {tab === "registered" && (
-            <>
-              {wineIsLoading ? (
-                <Loader />
-              ) : userWinesTotalCount === 0 || wineIsError ? (
-                <EmptyState
-                  icon="EmptyStateIcon"
-                  title="아직 등록한 와인이 없어요!"
-                  description="지금 첫 번째 와인을 등록해보세요"
-                  actionLabel="와인 등록하기"
-                  actionHref="/register/new"
-                />
-              ) : (
-                <>
-                  <div
-                    className={cn(
-                      "grid w-full gap-y-[16px] pt-[24px]",
-                      "pc:grid-cols-3 pc:gap-x-[15px] pc:gap-y-[40px] pc:pt-[40px]",
-                      "tablet:grid-cols-2 tablet:gap-x-[16px] tablet:gap-y-[32px]"
-                    )}
-                  >
+            {tab === "registered" && (
+              <>
+                {wineIsLoading && (
+                  <div className={WINE_ITEM_CONTAINER}>
+                    {Array.from({ length: 6 }).map((_, i) => (
+                      <WineItem key={`skeleton-${i}`} skeleton />
+                    ))}
+                  </div>
+                )}
+                {userWinesTotalCount === 0 || wineIsError ? (
+                  <EmptyState
+                    icon="EmptyStateIcon"
+                    title="아직 등록한 와인이 없어요!"
+                    description="지금 첫 번째 와인을 등록해보세요"
+                    actionLabel="와인 등록하기"
+                    actionHref="/register/new"
+                  />
+                ) : (
+                  <div className={WINE_ITEM_CONTAINER}>
                     {(userWines as WineType[])?.map((wine) => (
                       <WineItem key={wine.id} wine={wine} />
                     ))}
                   </div>
-                  <div
-                    ref={wineObserverRef}
-                    className="mt-[100px] h-1 w-full"
-                  />
-                  {wineIsLoading === false && isFetchingNextPage && (
-                    <div
-                      className={cn(
-                        "grid w-full gap-y-[16px] pt-[24px]",
-                        "pc:grid-cols-3 pc:gap-x-[15px] pc:gap-y-[40px] pc:pt-[40px]",
-                        "tablet:grid-cols-2 tablet:gap-x-[16px] tablet:gap-y-[32px]"
-                      )}
-                    >
-                      {Array.from({ length: 6 }).map((_, i) => (
-                        <CardSkeleton key={i} />
-                      ))}
-                    </div>
-                  )}
-                </>
-              )}
-            </>
-          )}
+                )}
+                {isFetchingNextPage && (
+                  <div className={WINE_ITEM_CONTAINER} ref={wineObserverRef}>
+                    {Array.from({ length: 6 }).map((_, i) => (
+                      <WineItem key={`skeleton-${i}`} skeleton />
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
 
-          {tab === "account" && <AccountItem user={userInfo} />}
-        </section>
-      </article>
-    </main>
+            {tab === "account" && <AccountItem user={userInfo} />}
+          </section>
+        </article>
+      </main>
+    </>
   );
 };
 

src/app/myprofile/_components/review-item/review-item-skeleton.tsx

@@ -0,0 +1,65 @@
+import { cn } from "@/lib/utils";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+import Image from "next/image";
+
+const ReviewItemSkeleton = () => {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-[51px] border-b border-gray-300 py-[16px] pb-[28px] pt-[39px]",
+        "tablet:gap-[54px]",
+        "pc:gap-[50px] pc:py-[80px]"
+      )}
+    >
+      <div className="flex w-full flex-col items-start justify-center gap-8 px-[14px]">
+        <div className="flex-col-center w-full gap-[26px]">
+          <div className="flex w-full flex-col items-start gap-5">
+            {/*별점 컴포넌트 */}
+            <Skeleton width={200} height={20} />
+            {/* 와인 정보 */}
+            <div
+              className={cn(
+                "flex w-full items-center gap-2",
+                "tablet:gap-4",
+                "pc:gap-[17px]"
+              )}
+            >
+              <div className="relative h-[80px] w-[60px]">
+                <Image src="/images/placeholder/img-wine.svg" alt="" fill />
+              </div>
+              <div>
+                <Skeleton width={300} height={20} style={{ marginBottom: 6 }} />
+                <Skeleton width={100} height={16} />
+              </div>
+            </div>
+          </div>
+          <div className="w-full">
+            {/* FlavorIconList 컴포넌트 */}
+            <Skeleton width={600} height={20} style={{ marginBottom: 6 }} />
+          </div>
+          {/* 리뷰 내용 */}
+          <div className="w-full">
+            <Skeleton width="100%" height={20} style={{ marginBottom: 8 }} />
+            <Skeleton width="85%" height={20} />
+          </div>
+        </div>
+
+        {/* WineTaste 컴포넌트 */}
+        <div
+          className={cn(
+            "flex w-full flex-col gap-3",
+            "tablet:grid tablet:grid-cols-2 tablet:gap-4",
+            "pc:grid pc:grid-cols-2 pc:gap-4"
+          )}
+        >
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} width="100%" height={16} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReviewItemSkeleton;

src/app/myprofile/_components/review-item/review-item.tsx

@@ -7,17 +7,31 @@ import { buildTasteData } from "@/components/wine-taste";
 import { ReviewItemType } from "../../_types/review-type";
 import { ReviewInfo, ReviewRating } from ".";
 import FlavorIconList from "@/components/flavor-icon-list/flavor-icon-list";
+import ReviewItemSkeleton from "./review-item-skeleton";
 
-const ReviewItem = ({ review }: { review: ReviewItemType }) => {
+const ReviewItem = ({
+  review,
+  skeleton = false,
+}: {
+  review?: ReviewItemType;
+  skeleton?: boolean;
+}) => {
   const [optionMenu, setOptionMenu] = useState(false);
 
+  if (skeleton) {
+    return <ReviewItemSkeleton />;
+  }
+
+  if (!review) {
+    return null;
+  }
+
   const tastes = buildTasteData({
     lightBold: review.lightBold,
     smoothTannic: review.smoothTannic,
     drySweet: review.drySweet,
     softAcidic: review.softAcidic,
   });
-
   return (
     <div
       className={cn(
@@ -27,7 +41,7 @@ const ReviewItem = ({ review }: { review: ReviewItemType }) => {
       )}
     >
       <div className="flex w-full flex-col items-start justify-center gap-8 px-[14px]">
-        <div className="flex w-full flex-col items-center justify-center gap-[26px]">
+        <div className="flex-col-center w-full gap-[26px]">
           <div className="flex w-full flex-col items-start gap-5">
             <ReviewRating
               setOptionMenu={setOptionMenu}

src/app/myprofile/_components/wine-item/wine-item.tsx

@@ -39,10 +39,12 @@ const WineItem = ({ wine, skeleton = false }: WineItemProps) => {
   };
 
   if (skeleton) {
-    return <CardSkeleton hasActionMenu />;
+    return <CardSkeleton />;
   }
 
-  if (!wine) return null;
+  if (!wine) {
+    return null;
+  }
 
   return (
     <>

src/components/card/card-skeleton.tsx

@@ -3,13 +3,9 @@ import "react-loading-skeleton/dist/skeleton.css";
 
 interface CardSkeletonProps {
   showReview?: boolean;
-  hasActionMenu?: boolean;
 }
 
-const CardSkeleton = ({
-  showReview = false,
-  hasActionMenu = false,
-}: CardSkeletonProps) => {
+const CardSkeleton = ({ showReview = false }: CardSkeletonProps) => {
   return (
     <div className="group relative w-full">
       {/* 이미지 영역 */}
@@ -29,12 +25,6 @@ const CardSkeleton = ({
             <Skeleton width="83%" height={16} />
           </>
         )}
-        {/* 액션메뉴 (우측 상단) */}
-        {hasActionMenu && (
-          <div style={{ position: "absolute", right: 0, top: 0, zIndex: 10 }}>
-            <Skeleton circle width={32} height={32} />
-          </div>
-        )}
       </div>
     </div>
   );

src/components/index.ts

@@ -23,6 +23,6 @@ export { default as Card } from "./card/card";
 export { default as LikeButton } from "./button/like-button";
 export { default as Carousel } from "./carousel/carousel";
 export { default as EmptyState } from "./empty-state/empty-state";
-export { default as FloatingActions } from "./utils/floating-actions";
+export { default as FloatingActions } from "./floating-actions/floating-actions";
 export { default as ChatButton } from "./button/chat-button";
 export { default as ChatBot } from "./chat-bot/chat-bot";