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

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

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

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

@@ -0,0 +1,6 @@
+import SkeletonSetting from '@/domains/mypage/skeleton/main/SkeletonSetting';
+
+function loading() {
+  return <SkeletonSetting />;
+}
+export default loading;

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

@@ -1,38 +1,12 @@
-'use client';
-import TextButton from '@/shared/components/button/TextButton';
-import Button from '@/shared/components/button/Button';
-import ToggleBtn from '@/domains/mypage/components/ToggleBtn';
-import { useState } from 'react';
-import EditNickName from '@/domains/mypage/components/EditNickName';
-import WithdrawModal from '@/domains/mypage/components/WithdrawModal';
+import MySetting from '@/domains/mypage/main/MySetting';
 
-function MySetting() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isQuit, setIsQuit] = useState(false);
+import { Metadata } from 'next';
+export const metadata: Metadata = {
+  title: 'SSOUL | 마이페이지',
+  description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
+};
 
-  return (
-    <section className="flex flex-col h-80 md:h-100 lg:h-125 justify-between">
-      {isOpen && <EditNickName open={isOpen} onClose={() => setIsOpen(!isOpen)} />}
-      {isQuit && <WithdrawModal open={isQuit} onClose={() => setIsQuit(!isQuit)} />}
-      <div>
-        <div className="flex justify-between py-5 border-b-1 border-gray-light">
-          <div className="text-lg">닉네임 : UserName</div>
-          <TextButton onClick={() => setIsOpen(!isOpen)}>수정하기</TextButton>
-        </div>
-        <div className="flex justify-between py-5">
-          <h2>알람설정</h2>
-          <ToggleBtn />
-        </div>
-      </div>
-      <div className="flex justify-between items-center">
-        <TextButton onClick={() => setIsQuit(!isQuit)}>회원탈퇴</TextButton>
-
-        <div className="flex gap-2 ">
-          <Button color="purple">취소</Button>
-          <Button>변경상태 저장</Button>
-        </div>
-      </div>
-    </section>
-  );
+function page() {
+  return <MySetting />;
 }
-export default MySetting;
+export default page;

src/app/mypage/mybar/loading.tsx

@@ -0,0 +1,24 @@
+import SkeletonCocktailCard from '@/domains/recipe/skeleton/SkeletonCocktailCard';
+
+function loading() {
+  return (
+    <div
+      className="grid grid-cols-1 justify-items-center mt-10 gap-8
+                 sm:[grid-template-columns:repeat(2,minmax(0,320px))]
+                 sm:justify-evenly
+                 md:[grid-template-columns:repeat(3,minmax(0,250px))]"
+    >
+      <SkeletonCocktailCard />
+      <SkeletonCocktailCard />
+      <SkeletonCocktailCard />
+      <SkeletonCocktailCard />
+      <SkeletonCocktailCard />
+      <SkeletonCocktailCard />
+
+      {/* {Array.from({ length: 6 }).map((_, i) => (
+        <SkeletonCocktailCard key={i} />
+      ))} */}
+    </div>
+  );
+}
+export default loading;

src/app/mypage/mybar/page.tsx

@@ -1,6 +1,11 @@
-'use client';
 import CocktailCard from '@/domains/recipe/CocktailCard';
 import Img from '@/shared/assets/images/dummy/exampleCocktail.png';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'SSOUL | 마이페이지',
+  description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
+};
 
 function MyBar() {
   return (