[style] 마이페이지 스켈레톤 UI #88 (#90)

* [style]마이페이지 스켈레톤 ui

* [stlye] 마이페이지 스켈레톤 UI

* [style]포매팅 수정

* [docs] 파일명 수정

Author: mtm-git1018

src/app/mypage/layout.tsx

@@ -1,13 +1,17 @@
 import MyNav from '@/domains/mypage/main/MyNav';
 import MyProfile from '@/domains/mypage/main/MyProfile';
+import SkeletonLayout from '@/domains/mypage/skeleton/main/SkeletonLayout';
+import { Suspense } from 'react';
 
 function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="max-w-1024 page-layout py-12">
-      <MyProfile />
-      <MyNav />
-      <div className="mt-5">{children}</div>
-    </div>
+    <Suspense fallback={<SkeletonLayout />}>
+      <div className="max-w-1024 page-layout py-12">
+        <MyProfile />
+        <MyNav />
+        <div className="mt-5">{children}</div>
+      </div>
+    </Suspense>
   );
 }
 export default Layout;

src/app/mypage/my-active/my-comment/loading.tsx

@@ -0,0 +1,24 @@
+function Loading() {
+  return (
+    <ul aria-hidden="true" className="flex flex-col mt-6 animate-pulse">
+      {Array.from({ length: 2 }).map((_, i) => (
+        <li key={i} className="border-b border-gray py-3">
+          <article>
+            {/* CommentTitle 자리 */}
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-full bg-gray animate-pulse" />
+              <div className="h-4 w-24 bg-gray animate-pulse rounded" />
+            </div>
+
+            {/* 본문 텍스트 자리 */}
+            <div className="mt-4 space-y-2">
+              <div className="h-4 w-3/4 bg-gray animate-pulse rounded" />
+              <div className="h-4 w-1/2 bg-gray animate-pulse rounded" />
+            </div>
+          </article>
+        </li>
+      ))}
+    </ul>
+  );
+}
+export default Loading;

src/app/mypage/my-active/my-comment/page.tsx

@@ -1,9 +1,16 @@
 import CommentList from '@/domains/shared/components/comment/CommentList';
-function MyComment() {
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'SSOUL | 마이페이지',
+  description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
+};
+
+function Page() {
   return (
-    <ul>
-      <CommentList></CommentList>
-    </ul>
+    <>
+      <CommentList />
+    </>
   );
 }
-export default MyComment;
+export default Page;

src/app/mypage/my-active/my-like/loading.tsx

@@ -0,0 +1,15 @@
+import SkeletonPostCard from '@/domains/shared/skeleton/SkeletonPostCard';
+
+function Loading() {
+  return (
+    <ul>
+      {Array.from({ length: 6 }).map((_, i) => (
+        <li key={i}>
+          <SkeletonPostCard />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default Loading;

src/app/mypage/my-active/my-like/page.tsx

@@ -1,6 +1,12 @@
 import PostCard from '@/domains/community/main/PostCard';
+import { Metadata } from 'next';
 
-function MyPost() {
+export const metadata: Metadata = {
+  title: 'SSOUL | 마이페이지',
+  description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
+};
+
+function Page() {
   return (
     <ul>
       <li>
@@ -24,4 +30,4 @@ function MyPost() {
     </ul>
   );
 }
-export default MyPost;
+export default Page;

src/app/mypage/my-active/my-post/loading.tsx

@@ -0,0 +1,15 @@
+import SkeletonPostCard from '@/domains/shared/skeleton/SkeletonPostCard';
+
+function Loading() {
+  return (
+    <ul>
+      {Array.from({ length: 6 }).map((_, i) => (
+        <li key={i}>
+          <SkeletonPostCard />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default Loading;

src/app/mypage/my-active/my-post/page.tsx

@@ -1,6 +1,12 @@
 import PostCard from '@/domains/community/main/PostCard';
+import { Metadata } from 'next';
 
-function MyPost() {
+export const metadata: Metadata = {
+  title: 'SSOUL | 마이페이지',
+  description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
+};
+
+function Page() {
   return (
     <ul>
       <li>
@@ -15,4 +21,4 @@ function MyPost() {
     </ul>
   );
 }
-export default MyPost;
+export default Page;

src/app/mypage/my-active/page.tsx

@@ -1,6 +1,6 @@
 import { redirect } from 'next/navigation';
 
-function page() {
+function Page() {
   return redirect('/mypage/my-active/my-post');
 }
-export default page;
+export default Page;

src/app/mypage/my-alarm/loading.tsx

@@ -0,0 +1,24 @@
+import SkeletonAlarm from '@/domains/recipe/skeleton/SkeletonAlarm';
+
+function Loading() {
+  return (
+    <div className="flex flex-col gap-3">
+      <SkeletonAlarm></SkeletonAlarm>
+      <SkeletonAlarm></SkeletonAlarm>
+      <SkeletonAlarm></SkeletonAlarm>
+      <SkeletonAlarm></SkeletonAlarm>
+      <SkeletonAlarm></SkeletonAlarm>
+    </div>
+  );
+}
+export default Loading;
+
+// function SkeletonAlarmList({ count = 5 }: { count?: number }) {
+//   return (
+//     <div className="flex flex-col gap-3">
+//       {Array.from({ length: count }).map((_, i) => (
+//         <SkeletonAlarm key={i} />
+//       ))}
+//     </div>
+//   );
+// }

src/app/mypage/my-alarm/page.tsx

@@ -1,14 +1,20 @@
 import Alarm from '@/domains/mypage/components/Alarm';
 
-function MyAlarm() {
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'SSOUL | 마이페이지',
+  description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
+};
+
+function Page() {
   return (
     <div className="flex flex-col gap-3">
       <Alarm></Alarm>
       <Alarm></Alarm>
-
       <Alarm></Alarm>
       <Alarm></Alarm>
     </div>
   );
 }
-export default MyAlarm;
+export default Page;