From 040f0bb76039df09ac37e53db3fb6a6293d23f69 Mon Sep 17 00:00:00 2001
From: mtm1018 <mtm1018@naver.com>
Date: Tue, 30 Sep 2025 15:12:56 +0900
Subject: [PATCH 1/4] =?UTF-8?q?[style]=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/layout.tsx                     | 14 +++--
 .../mypage/my-active/my-comment/loading.tsx   | 24 +++++++++
 src/app/mypage/my-active/my-comment/page.tsx  | 13 +++--
 src/app/mypage/my-active/my-like/loading.tsx  | 15 ++++++
 src/app/mypage/my-active/my-like/page.tsx     | 10 +++-
 src/app/mypage/my-active/my-post/loading.tsx  | 15 ++++++
 src/app/mypage/my-active/my-post/page.tsx     | 10 +++-
 src/app/mypage/my-alarm/loading.tsx           | 24 +++++++++
 src/app/mypage/my-alarm/page.tsx              |  8 ++-
 src/app/mypage/my-setting/loading.tsx         |  6 +++
 src/app/mypage/my-setting/page.tsx            | 44 ++++------------
 src/app/mypage/mybar/loading.tsx              | 24 +++++++++
 src/app/mypage/mybar/page.tsx                 |  7 ++-
 .../components/postInfo/PostInfo.tsx          | 22 --------
 src/domains/mypage/main/MyNav.tsx             | 44 ++++++++--------
 src/domains/mypage/main/MySetting.tsx         | 37 ++++++++++++++
 src/domains/mypage/main/TabMenu.tsx           | 12 +----
 .../mypage/skeleton/main/SkeletonLayout.tsx   | 13 +++++
 .../skeleton/main/SkeletonMyProfile.tsx       | 51 +++++++++++++++++++
 .../skeleton/main/SkeletonMypageNav.tsx       | 29 +++++++++++
 .../mypage/skeleton/main/SkeletonSetting.tsx  | 32 ++++++++++++
 src/domains/recipe/CocktailCard.tsx           |  2 +
 src/domains/recipe/skeleton/SkeletonAlarm.tsx | 26 ++++++++++
 .../recipe/skeleton/SkeletonCocktailCard.tsx  | 16 ++++++
 .../shared/skeleton/SkeletonPostCard.tsx      | 35 +++++++++++++
 25 files changed, 432 insertions(+), 101 deletions(-)
 create mode 100644 src/app/mypage/my-active/my-comment/loading.tsx
 create mode 100644 src/app/mypage/my-active/my-like/loading.tsx
 create mode 100644 src/app/mypage/my-active/my-post/loading.tsx
 create mode 100644 src/app/mypage/my-alarm/loading.tsx
 create mode 100644 src/app/mypage/my-setting/loading.tsx
 create mode 100644 src/app/mypage/mybar/loading.tsx
 delete mode 100644 src/domains/community/components/postInfo/PostInfo.tsx
 create mode 100644 src/domains/mypage/main/MySetting.tsx
 create mode 100644 src/domains/mypage/skeleton/main/SkeletonLayout.tsx
 create mode 100644 src/domains/mypage/skeleton/main/SkeletonMyProfile.tsx
 create mode 100644 src/domains/mypage/skeleton/main/SkeletonMypageNav.tsx
 create mode 100644 src/domains/mypage/skeleton/main/SkeletonSetting.tsx
 create mode 100644 src/domains/recipe/skeleton/SkeletonAlarm.tsx
 create mode 100644 src/domains/recipe/skeleton/SkeletonCocktailCard.tsx
 create mode 100644 src/domains/shared/skeleton/SkeletonPostCard.tsx

diff --git a/src/app/mypage/layout.tsx b/src/app/mypage/layout.tsx
index ea5d1d4..9210987 100644
--- a/src/app/mypage/layout.tsx
+++ b/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;
diff --git a/src/app/mypage/my-active/my-comment/loading.tsx b/src/app/mypage/my-active/my-comment/loading.tsx
new file mode 100644
index 0000000..04bd3d4
--- /dev/null
+++ b/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;
diff --git a/src/app/mypage/my-active/my-comment/page.tsx b/src/app/mypage/my-active/my-comment/page.tsx
index 92772ec..3d67535 100644
--- a/src/app/mypage/my-active/my-comment/page.tsx
+++ b/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;
diff --git a/src/app/mypage/my-active/my-like/loading.tsx b/src/app/mypage/my-active/my-like/loading.tsx
new file mode 100644
index 0000000..b1b824c
--- /dev/null
+++ b/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;
diff --git a/src/app/mypage/my-active/my-like/page.tsx b/src/app/mypage/my-active/my-like/page.tsx
index e302dfa..dc8342c 100644
--- a/src/app/mypage/my-active/my-like/page.tsx
+++ b/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;
diff --git a/src/app/mypage/my-active/my-post/loading.tsx b/src/app/mypage/my-active/my-post/loading.tsx
new file mode 100644
index 0000000..b1b824c
--- /dev/null
+++ b/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;
diff --git a/src/app/mypage/my-active/my-post/page.tsx b/src/app/mypage/my-active/my-post/page.tsx
index 1e96abc..276459b 100644
--- a/src/app/mypage/my-active/my-post/page.tsx
+++ b/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;
diff --git a/src/app/mypage/my-alarm/loading.tsx b/src/app/mypage/my-alarm/loading.tsx
new file mode 100644
index 0000000..4ad9073
--- /dev/null
+++ b/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>
+//   );
+// }
diff --git a/src/app/mypage/my-alarm/page.tsx b/src/app/mypage/my-alarm/page.tsx
index a4d4b2c..bcb8998 100644
--- a/src/app/mypage/my-alarm/page.tsx
+++ b/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>
diff --git a/src/app/mypage/my-setting/loading.tsx b/src/app/mypage/my-setting/loading.tsx
new file mode 100644
index 0000000..3462efe
--- /dev/null
+++ b/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;
diff --git a/src/app/mypage/my-setting/page.tsx b/src/app/mypage/my-setting/page.tsx
index 9adc305..61cd249 100644
--- a/src/app/mypage/my-setting/page.tsx
+++ b/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;
diff --git a/src/app/mypage/mybar/loading.tsx b/src/app/mypage/mybar/loading.tsx
new file mode 100644
index 0000000..615114f
--- /dev/null
+++ b/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;
diff --git a/src/app/mypage/mybar/page.tsx b/src/app/mypage/mybar/page.tsx
index c1c34b7..7101511 100644
--- a/src/app/mypage/mybar/page.tsx
+++ b/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 (
diff --git a/src/domains/community/components/postInfo/PostInfo.tsx b/src/domains/community/components/postInfo/PostInfo.tsx
deleted file mode 100644
index 80d7243..0000000
--- a/src/domains/community/components/postInfo/PostInfo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-function PostInfo({ hasUserName = false }: { hasUserName?: boolean }) {
-  return (
-    <ul
-      className="flex font-light sm:gap-3 gap-1 sm:text-[14px] text-[12px] text-gray"
-      aria-label="게시글 정보"
-    >
-      {hasUserName && (
-        <>
-          <li>실버븬</li>
-          <li aria-hidden="true">|</li>
-        </>
-      )}
-      <li>3분 전</li>
-      <li aria-hidden="true">|</li>
-      <li>조회 3</li>
-      <li aria-hidden="true">|</li>
-      <li>댓글 3</li>
-    </ul>
-  );
-}
-
-export default PostInfo;
diff --git a/src/domains/mypage/main/MyNav.tsx b/src/domains/mypage/main/MyNav.tsx
index c764de2..bff0aca 100644
--- a/src/domains/mypage/main/MyNav.tsx
+++ b/src/domains/mypage/main/MyNav.tsx
@@ -2,11 +2,11 @@
 import TabMenu from '@/domains/mypage/main/TabMenu';
 import TextButton from '@/shared/components/button/TextButton';
 import Link from 'next/link';
-
 import { useState } from 'react';
 import DeleteAllModal from '../components/DeleteAllModal';
+import { usePathname } from 'next/navigation';
 
-const options = [
+const MAIN_TABMENU = [
   {
     title: '나만의 BAR',
     href: '/mypage/mybar',
@@ -25,7 +25,7 @@ const options = [
   },
 ];
 
-const ActiveTab = [
+const SUB_TABMENU = [
   {
     title: '내가 쓴 글',
     href: '/mypage/my-active/my-post',
@@ -41,8 +41,14 @@ const ActiveTab = [
 ];
 
 function MyNav() {
-  const [isClick, setIsClick] = useState(0);
-  const [activeTab, setActiveTab] = useState(0);
+  const pathname = usePathname();
+
+  const currentIndex = MAIN_TABMENU.findIndex((opt) => pathname.startsWith(opt.href));
+  const isActive = currentIndex === -1 ? 0 : currentIndex;
+
+  const subIndex = SUB_TABMENU.findIndex((opt) => pathname.startsWith(opt.href));
+  const isSubActive = subIndex === -1 ? 0 : subIndex;
+
   const [isDeleteAll, setIsDeleteAll] = useState(false);
 
   return (
@@ -56,8 +62,8 @@ function MyNav() {
 
       <nav aria-label="마이페이지 섹션">
         <ul role="tablist" className="mt-3 md:mt-10 flex justify-center gap-3">
-          {options.map(({ title, href }, i) => {
-            const selected = i === isClick;
+          {MAIN_TABMENU.map(({ title, href }, i) => {
+            const selected = i === isActive;
             const tabId = `main-tab-${i}`;
             const panelId = `main-panel-${i}`;
             return (
@@ -68,8 +74,7 @@ function MyNav() {
                     role="tab"
                     index={i}
                     title={title}
-                    isClick={isClick}
-                    setIsClick={setIsClick}
+                    isClick={isActive}
                     aria-selected={selected ? 'true' : 'false'}
                     aria-controls={panelId}
                     tabIndex={selected ? 0 : -1}
@@ -80,29 +85,29 @@ function MyNav() {
           })}
         </ul>
       </nav>
-      {options.map((_, i) => (
+      {MAIN_TABMENU.map((_, i) => (
         <div
           key={`main-panel-${i}`}
           id={`main-panel-${i}`}
           role="tabpanel"
           aria-labelledby={`main-tab-${i}`}
-          hidden={isClick !== i}
+          hidden={isActive !== i}
         >
           {/* 필요하면 여기 메인 탭별 콘텐츠 렌더 */}
         </div>
       ))}
 
-      {(isClick == 0 || isClick == 2) && (
+      {(isActive == 0 || isActive == 2) && (
         <TextButton className="self-end" onClick={() => setIsDeleteAll(!isDeleteAll)}>
           전체삭제
         </TextButton>
       )}
 
-      {isClick == 1 && (
+      {isActive == 1 && (
         <nav aria-label="내 활동 하위 탭">
           <ul role="tablist" className="flex gap-5 w-full justify-center">
-            {ActiveTab.map(({ href, title }, i) => {
-              const selected = i === activeTab;
+            {SUB_TABMENU.map(({ href, title }, i) => {
+              const selected = i === isSubActive;
               const tabId = `sub-tab-${i}`;
               const panelId = `sub-panel-${i}`;
               return (
@@ -116,8 +121,7 @@ function MyNav() {
                       role="tab"
                       title={title}
                       type="underLine"
-                      isClick={activeTab}
-                      setIsClick={setActiveTab}
+                      isClick={isSubActive}
                       index={i}
                     />
                   </Link>
@@ -127,14 +131,14 @@ function MyNav() {
           </ul>
         </nav>
       )}
-      {isClick === 1 &&
-        ActiveTab.map((_, i) => (
+      {isActive === 1 &&
+        SUB_TABMENU.map((_, i) => (
           <div
             key={`sub-panel-${i}`}
             id={`sub-panel-${i}`}
             role="tabpanel"
             aria-labelledby={`sub-tab-${i}`}
-            hidden={activeTab !== i}
+            hidden={isActive !== i}
           >
             {/* 필요하면 여기 서브 탭별 콘텐츠 렌더 */}
           </div>
diff --git a/src/domains/mypage/main/MySetting.tsx b/src/domains/mypage/main/MySetting.tsx
new file mode 100644
index 0000000..f50e9ac
--- /dev/null
+++ b/src/domains/mypage/main/MySetting.tsx
@@ -0,0 +1,37 @@
+'use client';
+import EditNickName from '@/domains/mypage/components/EditNickName';
+import ToggleBtn from '@/domains/mypage/components/ToggleBtn';
+import WithdrawModal from '@/domains/mypage/components/WithdrawModal';
+import Button from '@/shared/components/button/Button';
+import TextButton from '@/shared/components/button/TextButton';
+import { useState } from 'react';
+
+function MySetting() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isQuit, setIsQuit] = useState(false);
+  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>
+  );
+}
+export default MySetting;
diff --git a/src/domains/mypage/main/TabMenu.tsx b/src/domains/mypage/main/TabMenu.tsx
index 320bbc3..3cc986a 100644
--- a/src/domains/mypage/main/TabMenu.tsx
+++ b/src/domains/mypage/main/TabMenu.tsx
@@ -1,11 +1,9 @@
 import tw from '@/shared/utills/tw';
 import { cva } from 'class-variance-authority';
-import { Dispatch, SetStateAction } from 'react';
 
 interface Props {
   title: string;
   isClick: number;
-  setIsClick: Dispatch<SetStateAction<number>>;
   index: number;
   role: string;
   type?: 'default' | 'underLine';
@@ -59,17 +57,11 @@ export const TabClass = cva(
   }
 );
 
-function TabMenu({ title, setIsClick, isClick, role, type, index, id, ...rest }: Props) {
+function TabMenu({ title, isClick, role, type, index, id, ...rest }: Props) {
   const isActive = index == isClick;
 
   return (
-    <button
-      id={id}
-      role={role}
-      className={tw(TabClass({ type, isActive }))}
-      onClick={() => setIsClick(index)}
-      {...rest}
-    >
+    <button id={id} role={role} className={tw(TabClass({ type, isActive }))} {...rest}>
       {title}
     </button>
   );
diff --git a/src/domains/mypage/skeleton/main/SkeletonLayout.tsx b/src/domains/mypage/skeleton/main/SkeletonLayout.tsx
new file mode 100644
index 0000000..21c4d34
--- /dev/null
+++ b/src/domains/mypage/skeleton/main/SkeletonLayout.tsx
@@ -0,0 +1,13 @@
+import SkeletonMypageNav from '@/domains/mypage/skeleton/main/SkeletonMypageNav';
+import SkeletonMyProfile from '@/domains/mypage/skeleton/main/SkeletonMyProfile';
+
+function SkeletonLayout() {
+  return (
+    <div className="max-w-1024 page-layout py-12">
+      <SkeletonMyProfile />
+      <SkeletonMypageNav />
+      <div className="mt-10"></div>
+    </div>
+  );
+}
+export default SkeletonLayout;
diff --git a/src/domains/mypage/skeleton/main/SkeletonMyProfile.tsx b/src/domains/mypage/skeleton/main/SkeletonMyProfile.tsx
new file mode 100644
index 0000000..ad134e5
--- /dev/null
+++ b/src/domains/mypage/skeleton/main/SkeletonMyProfile.tsx
@@ -0,0 +1,51 @@
+// domains/mypage/skeleton/SkeletonMyProfile.tsx
+function SkeletonMyProfile() {
+  return (
+    <div>
+      <section className="h-auto p-6 bg-white rounded-2xl animate-pulse">
+        <header className="flex flex-col gap-8 md:gap-3 md:flex-row md:justify-between">
+          {/* 왼쪽: 프로필 */}
+          <div className="flex flex-col pb-4 md:pb-0 gap-6">
+            {/* 아바타 + 이름 */}
+            <div className="flex items-center gap-2">
+              <div className="rounded-full w-17.5 h-17.5 bg-gray animate-pulse" />
+              <div className="h-6 w-24 bg-gray animate-pulse rounded" />
+            </div>
+            {/* 통계 리스트 */}
+            <ul className="flex gap-3 text-xs">
+              {['좋아요', '글', '댓글', '칵테일 킵'].map((_, i) => (
+                <li key={i} className="flex gap-1 items-center">
+                  <div className="h-4 w-12 bg-gray animate-pulse rounded" />
+                  {i < 3 && <span className="text-gray-300">|</span>}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* 오른쪽: MyAbv + AbvGraph */}
+          <aside className="flex flex-col gap-2 md:pt-3">
+            {/* MyAbv 스켈레톤 */}
+            <dl className="flex justify-between items-center gap-2">
+              <dt className="flex gap-1 items-center">
+                <div className="h-5 w-24 bg-gray animate-pulse rounded" />
+                <div className="h-5 w-5 bg-gray animate-pulse rounded-full" />
+              </dt>
+              <dd className="flex items-center gap-1">
+                <div className="h-7 md:h-10 w-12 md:w-16 bg-gray animate-pulse rounded" />
+              </dd>
+            </dl>
+
+            {/* AbvGraph 스켈레톤 */}
+            <div
+              className="w-full md:w-49 h-3 rounded-full overflow-hidden border border-gray"
+              aria-hidden="true"
+            >
+              <div className="w-full h-full bg-gray animate-pulse" />
+            </div>
+          </aside>
+        </header>
+      </section>
+    </div>
+  );
+}
+export default SkeletonMyProfile;
diff --git a/src/domains/mypage/skeleton/main/SkeletonMypageNav.tsx b/src/domains/mypage/skeleton/main/SkeletonMypageNav.tsx
new file mode 100644
index 0000000..8d694ad
--- /dev/null
+++ b/src/domains/mypage/skeleton/main/SkeletonMypageNav.tsx
@@ -0,0 +1,29 @@
+function SkeletonMypageNav() {
+  return (
+    <section
+      aria-labelledby="mypage-tabs-skeleton"
+      className="mt-6 md:mt-1 flex flex-col gap-3 animate-pulse"
+    >
+      <h2 id="mypage-tabs-skeleton" className="sr-only">
+        마이페이지 탭 메뉴 (로딩 중)
+      </h2>
+
+      {/* 메인 탭 메뉴 스켈레톤 */}
+      <nav aria-label="마이페이지 섹션">
+        <ul role="tablist" className="mt-3 md:mt-10 flex justify-center gap-3">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <li key={i} role="presentation">
+              <div className="h-8 w-20 bg-gray animate-pulse rounded-full" />
+            </li>
+          ))}
+        </ul>
+      </nav>
+
+      {/* 전체삭제 버튼 자리 (조건부) */}
+      <div className="flex justify-end">
+        <div className="h-6 w-16 bg-gray animate-pulse rounded" />
+      </div>
+    </section>
+  );
+}
+export default SkeletonMypageNav;
diff --git a/src/domains/mypage/skeleton/main/SkeletonSetting.tsx b/src/domains/mypage/skeleton/main/SkeletonSetting.tsx
new file mode 100644
index 0000000..b594cce
--- /dev/null
+++ b/src/domains/mypage/skeleton/main/SkeletonSetting.tsx
@@ -0,0 +1,32 @@
+function SkeletonSetting() {
+  return (
+    <section
+      className="flex flex-col h-80 md:h-100 lg:h-125 justify-between animate-pulse"
+      aria-hidden="true"
+    >
+      <div>
+        {/* 닉네임 영역 */}
+        <div className="flex justify-between py-5 border-b border-gray">
+          <div className="h-6 w-40 bg-gray animate-pulse rounded" />
+          <div className="h-5 w-16 bg-gray animate-pulse rounded" />
+        </div>
+
+        {/* 알람 설정 영역 */}
+        <div className="flex justify-between py-5">
+          <div className="h-5 w-24 bg-gray animate-pulse rounded" />
+          <div className="h-6 w-12 bg-gray animate-pulse rounded-full" />
+        </div>
+      </div>
+
+      {/* 하단 버튼 영역 */}
+      <div className="flex justify-between items-center">
+        <div className="h-5 w-20 bg-gray animate-pulse rounded" />
+        <div className="flex gap-2">
+          <div className="h-9 w-20 bg-gray animate-pulse rounded-lg" />
+          <div className="h-9 w-28 bg-gray animate-pulse rounded-lg" />
+        </div>
+      </div>
+    </section>
+  );
+}
+export default SkeletonSetting;
diff --git a/src/domains/recipe/CocktailCard.tsx b/src/domains/recipe/CocktailCard.tsx
index 87796a1..65121fa 100644
--- a/src/domains/recipe/CocktailCard.tsx
+++ b/src/domains/recipe/CocktailCard.tsx
@@ -4,6 +4,8 @@ import Img from '@/shared/assets/images/dummy/exampleCocktail.png';
 import Label from '../shared/components/label/Label';
 import Keep from '../shared/components/keep/Keep';
 import tw from '@/shared/utills/tw';
+import { Suspense } from 'react';
+import SkeletonMyBar from '../mypage/skeleton/pages/SkeletonMyBar';
 
 interface Props {
   src?: StaticImageData;
diff --git a/src/domains/recipe/skeleton/SkeletonAlarm.tsx b/src/domains/recipe/skeleton/SkeletonAlarm.tsx
new file mode 100644
index 0000000..1f7f8d6
--- /dev/null
+++ b/src/domains/recipe/skeleton/SkeletonAlarm.tsx
@@ -0,0 +1,26 @@
+function SkeletonAlarm() {
+  return (
+    <div
+      className="px-3 md:px-5 py-4 h-auto md:h-33 rounded-2xl bg-gray-dark animate-pulse"
+      aria-hidden="true"
+    >
+      <div className="flex flex-col gap-2">
+        {/* 상단: 아이콘 + 날짜 / 우측: 상대시간 */}
+        <div className="flex justify-between items-center">
+          <div className="flex gap-2 items-center">
+            <div className="w-10 h-10 rounded-full bg-gray/80 animate-pulse" />
+            <div className="h-4 w-16 bg-gray/80 animate-pulse rounded" />
+          </div>
+          <div className="h-4 w-14 bg-gray/80 animate-pulse rounded" />
+        </div>
+
+        {/* 본문: 제목 + 내용 */}
+        <div className="flex flex-col gap-1">
+          <div className="h-5 w-40 bg-gray/80 rounded" />
+          <div className="h-4 w-56 bg-gray/80 animate-pulse rounded" />
+        </div>
+      </div>
+    </div>
+  );
+}
+export default SkeletonAlarm;
diff --git a/src/domains/recipe/skeleton/SkeletonCocktailCard.tsx b/src/domains/recipe/skeleton/SkeletonCocktailCard.tsx
new file mode 100644
index 0000000..fc55039
--- /dev/null
+++ b/src/domains/recipe/skeleton/SkeletonCocktailCard.tsx
@@ -0,0 +1,16 @@
+// domains/recipe/SkeletonCocktailCard.tsx
+function SkeletonCocktailCard() {
+  return (
+    <div className="flex flex-col gap-4 animate-pulse">
+      {/* 이미지 박스 (실제 카드와 동일한 크기) */}
+      <div className="w-80 h-75 md:w-62.5 rounded-xl overflow-hidden bg-gray animate-pulse relative"></div>
+
+      {/* 텍스트 영역 */}
+      <div className="flex flex-col gap-1 font-bold font-serif">
+        <div className="h-5 w-32 bg-gray animate-pulse rounded" />
+        <div className="h-4 w-20 bg-gray animate-pulse rounded" />
+      </div>
+    </div>
+  );
+}
+export default SkeletonCocktailCard;
diff --git a/src/domains/shared/skeleton/SkeletonPostCard.tsx b/src/domains/shared/skeleton/SkeletonPostCard.tsx
new file mode 100644
index 0000000..7436263
--- /dev/null
+++ b/src/domains/shared/skeleton/SkeletonPostCard.tsx
@@ -0,0 +1,35 @@
+// domains/community/skeleton/SkeletonPostCard.tsx
+function SkeletonPostCard() {
+  return (
+    <article className="pt-5 pb-3 border-b border-gray-light animate-pulse" aria-hidden="true">
+      {/* 라벨 자리 */}
+      <div className="h-5 w-16 bg-gray animate-pulse rounded" />
+
+      <section className="flex items-start justify-between mt-3">
+        <div className="flex flex-col gap-3 flex-1">
+          {/* 제목 자리 */}
+          <div className="h-6 w-2/3 bg-gray animate-pulse rounded" />
+
+          {/* 본문 텍스트 자리 */}
+          <div className="space-y-2">
+            <div className="h-4 w-3/6 bg-gray animate-pulse rounded" />
+            <div className="h-4 w-3/6 bg-gray animate-pulse rounded" />
+          </div>
+
+          {/* PostInfo 자리 */}
+          <div className="flex gap-2 items-center mt-2">
+            <div className="w-6 h-6 rounded-full bg-gray animate-pulse" />
+            <div className="h-4 w-2/5 bg-gray animate-pulse rounded" />
+          </div>
+        </div>
+
+        {/* 썸네일 이미지 자리 */}
+        <figure className="flex items-start ml-4">
+          <div className="w-[80px] sm:w-[100px] md:w-[120px] h-[80px] sm:h-[100px] md:h-[120px] bg-gray animate-pulse rounded-lg" />
+        </figure>
+      </section>
+    </article>
+  );
+}
+
+export default SkeletonPostCard;

From 4140ef5fcd84f623bc96d07f9e28304a74254604 Mon Sep 17 00:00:00 2001
From: mtm1018 <mtm1018@naver.com>
Date: Tue, 30 Sep 2025 16:39:29 +0900
Subject: [PATCH 2/4] =?UTF-8?q?[stlye]=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/details/RecipeComment.tsx      | 12 +++++++
 .../recipe/components/main/Accordion.tsx      | 10 +++---
 src/domains/recipe/details/DetailMain.tsx     |  5 ++-
 src/domains/recipe/store/accordionStore.ts    |  2 ++
 .../components/select-box/SelectBox.tsx       | 31 +++++++++++--------
 src/domains/shared/hook/useCloseOutside.tsx   |  5 +--
 src/shared/assets/icons/selectDown_24.svg     |  2 +-
 src/shared/hook/index.ts                      |  1 -
 8 files changed, 45 insertions(+), 23 deletions(-)
 create mode 100644 src/domains/recipe/components/details/RecipeComment.tsx
 delete mode 100644 src/shared/hook/index.ts

diff --git a/src/domains/recipe/components/details/RecipeComment.tsx b/src/domains/recipe/components/details/RecipeComment.tsx
new file mode 100644
index 0000000..321c305
--- /dev/null
+++ b/src/domains/recipe/components/details/RecipeComment.tsx
@@ -0,0 +1,12 @@
+import CommentHeader from '@/domains/shared/components/comment/CommentHeader';
+import CommentList from '@/domains/shared/components/comment/CommentList';
+
+function RecipeComment() {
+  return (
+    <div className="mb-10 border-t-1 border-gray">
+      <CommentHeader totalComment={true} />
+      <CommentList />
+    </div>
+  );
+}
+export default RecipeComment;
diff --git a/src/domains/recipe/components/main/Accordion.tsx b/src/domains/recipe/components/main/Accordion.tsx
index 7e64bfc..5e5dea9 100644
--- a/src/domains/recipe/components/main/Accordion.tsx
+++ b/src/domains/recipe/components/main/Accordion.tsx
@@ -2,20 +2,20 @@
 
 import SelectBox from '@/domains/shared/components/select-box/SelectBox';
 
-const selectOption = [
+const SELECT_OPTIONS = [
   {
     id: 'abv',
-    option: ['', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'],
+    option: ['도수 전체', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'],
     title: '도수',
   },
   {
     id: 'base',
-    option: ['', '위스키', '진', '럼', '보드카', '데킬라', '리큐르'],
+    option: ['베이스 전체', '위스키', '진', '럼', '보드카', '데킬라', '리큐르'],
     title: '베이스',
   },
   {
     id: 'glass',
-    option: ['', '클래식', '롱', '슈터', '숏'],
+    option: ['글라스 전체', '클래식', '롱', '슈터', '숏'],
     title: '글라스',
   },
 ];
@@ -23,7 +23,7 @@ const selectOption = [
 function Accordion() {
   return (
     <ul className="flex w-full gap-3">
-      {selectOption.map(({ id, option, title }) => {
+      {SELECT_OPTIONS.map(({ id, option, title }) => {
         return (
           <li key={id}>
             <SelectBox option={option} title={title} id={id} groupKey="filter" />
diff --git a/src/domains/recipe/details/DetailMain.tsx b/src/domains/recipe/details/DetailMain.tsx
index 71c6f2c..55aa0d6 100644
--- a/src/domains/recipe/details/DetailMain.tsx
+++ b/src/domains/recipe/details/DetailMain.tsx
@@ -9,6 +9,7 @@ import Image from 'next/image';
 import DetailList from './DetailList';
 import { Suspense } from 'react';
 import SkeletonDetail from '../skeleton/SkeletonDetail';
+import RecipeComment from '../components/details/RecipeComment';
 
 function DetailMain() {
   return (
@@ -46,7 +47,9 @@ function DetailMain() {
           </div>
         </section>
 
-        <section>{/* 여기에 댓글 컴포넌트 */}</section>
+        <section className="mt-20">
+          <RecipeComment />
+        </section>
       </div>
     </Suspense>
   );
diff --git a/src/domains/recipe/store/accordionStore.ts b/src/domains/recipe/store/accordionStore.ts
index 5739eb9..4e58151 100644
--- a/src/domains/recipe/store/accordionStore.ts
+++ b/src/domains/recipe/store/accordionStore.ts
@@ -21,6 +21,8 @@ export const useAccordionStore = create<Accordion>((set) => ({
   setOpen: (group, id) => set((s) => ({ openByGroup: { ...s.openByGroup, [group]: id } })),
 
   // 같은 id가 이미 열려있으면 닫고 id 교체
+  // 동적키를 받아서 관리 키가없으면 어떻게든 id든 타이틀이던 받아서 있음. 그래서 false면 아이디가 키로 들어가는데
+  // 같은 아이디클릭시 null을 반환해서 토글이 됨.
   toggle: (group, id) =>
     set((s) => {
       const cur = s.openByGroup[group] ?? null;
diff --git a/src/domains/shared/components/select-box/SelectBox.tsx b/src/domains/shared/components/select-box/SelectBox.tsx
index a384467..a45a815 100644
--- a/src/domains/shared/components/select-box/SelectBox.tsx
+++ b/src/domains/shared/components/select-box/SelectBox.tsx
@@ -1,7 +1,6 @@
 'use client';
-import { Ref, useEffect, useMemo, useRef, useState } from 'react';
+import { Ref, useMemo, useRef, useState } from 'react';
 import Down from '@/shared/assets/icons/selectDown_24.svg';
-
 import { useShallow } from 'zustand/shallow';
 import { ID, useAccordionStore } from '@/domains/recipe/store/accordionStore';
 import useCloseOutside from '../../hook/useCloseOutside';
@@ -20,24 +19,19 @@ interface Props {
 function SelectBox({ id, groupKey, ref, option, title, onChange, use }: Props) {
   const [isOpen, setIsOpen] = useState(false);
   const [select, setSelect] = useState('');
-
   const menuRef = useRef<HTMLDivElement>(null);
 
   const ingroup = !!groupKey;
+  // groupKey가 있을경우 true
   // groupkey일 경우 전달받은 ID로 식별 아닐경우 title로 식별
-  const keyId = useMemo<ID>(() => id ?? title, [id, title]);
 
-  useCloseOutside({
-    menuRef,
-    onClose: () => {
-      if (!ingroup) setIsOpen(false);
-      else closeGroup(groupKey);
-    },
-  });
+  const keyId = useMemo<ID>(() => id ?? title, [id, title]);
+  // id가 없을경우 title로 키 아이디를 받음
 
   const { openId, toggleGroup, closeGroup } = useAccordionStore(
     useShallow((s) => ({
       openId: ingroup ? (s.openByGroup[groupKey] ?? null) : null,
+      // 그룹키가 없으면 openId == null 따라서 state로 관리됨
       toggleGroup: s.toggle,
       closeGroup: s.closeGroup,
     }))
@@ -46,9 +40,15 @@ function SelectBox({ id, groupKey, ref, option, title, onChange, use }: Props) {
   //groupkey가 있을 떄와 없을때로 구분해서 state혹은 store로 관리
   const localOpen = ingroup ? openId === keyId : isOpen;
 
+  // 그룹일 경우 filter와 id abv | base | glass 를
   const toggle = () => {
     if (ingroup) toggleGroup(groupKey, keyId);
-    else setIsOpen((v) => !v);
+    else
+      setIsOpen((prev) => {
+        const next = !prev;
+        console.log('TOGGLE BTN CLICK:', { prev, next });
+        return next;
+      });
   };
 
   const close = () => {
@@ -63,8 +63,13 @@ function SelectBox({ id, groupKey, ref, option, title, onChange, use }: Props) {
     close();
   };
 
+  useCloseOutside({
+    menuRef,
+    onClose: close,
+  });
+
   return (
-    <div className="flex flex-col gap-2 relative h-6" ref={menuRef}>
+    <div className="flex flex-col gap-2 relative h-6" ref={menuRef} id="select">
       <button
         ref={ref}
         className="flex gap-2 cursor-pointer text-base"
diff --git a/src/domains/shared/hook/useCloseOutside.tsx b/src/domains/shared/hook/useCloseOutside.tsx
index a9467ea..af5e87b 100644
--- a/src/domains/shared/hook/useCloseOutside.tsx
+++ b/src/domains/shared/hook/useCloseOutside.tsx
@@ -8,14 +8,15 @@ type Props = {
 function useCloseOutside({ menuRef, onClose }: Props) {
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
+      e.stopPropagation();
       if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
         onClose();
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('click', handleClickOutside);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('click', handleClickOutside);
     };
   }, [menuRef, onClose]);
 }
diff --git a/src/shared/assets/icons/selectDown_24.svg b/src/shared/assets/icons/selectDown_24.svg
index 494eb37..66637f6 100644
--- a/src/shared/assets/icons/selectDown_24.svg
+++ b/src/shared/assets/icons/selectDown_24.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9L12 15L6 9" stroke="white" stroke-width="2"/>
+<path d="M18 9L12 15L6 9" stroke="currentColor" stroke-width="2"/>
 </svg>
diff --git a/src/shared/hook/index.ts b/src/shared/hook/index.ts
deleted file mode 100644
index 1e44f67..0000000
--- a/src/shared/hook/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// 커스텀 hook

From cf0fe33a45d9c9785d85176b1f8391e064dfe3d4 Mon Sep 17 00:00:00 2001
From: mtm1018 <mtm1018@naver.com>
Date: Tue, 30 Sep 2025 16:41:00 +0900
Subject: [PATCH 3/4] =?UTF-8?q?[style]=ED=8F=AC=EB=A7=A4=ED=8C=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/domains/recipe/CocktailCard.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/domains/recipe/CocktailCard.tsx b/src/domains/recipe/CocktailCard.tsx
index 65121fa..87796a1 100644
--- a/src/domains/recipe/CocktailCard.tsx
+++ b/src/domains/recipe/CocktailCard.tsx
@@ -4,8 +4,6 @@ import Img from '@/shared/assets/images/dummy/exampleCocktail.png';
 import Label from '../shared/components/label/Label';
 import Keep from '../shared/components/keep/Keep';
 import tw from '@/shared/utills/tw';
-import { Suspense } from 'react';
-import SkeletonMyBar from '../mypage/skeleton/pages/SkeletonMyBar';
 
 interface Props {
   src?: StaticImageData;

From e0499a0569f7998d1cb210d4ef64055df8005ba5 Mon Sep 17 00:00:00 2001
From: mtm1018 <mtm1018@naver.com>
Date: Tue, 30 Sep 2025 16:58:46 +0900
Subject: [PATCH 4/4] =?UTF-8?q?[docs]=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/my-active/my-comment/loading.tsx | 4 ++--
 src/app/mypage/my-active/my-comment/page.tsx    | 4 ++--
 src/app/mypage/my-active/my-like/loading.tsx    | 4 ++--
 src/app/mypage/my-active/my-like/page.tsx       | 4 ++--
 src/app/mypage/my-active/my-post/loading.tsx    | 4 ++--
 src/app/mypage/my-active/my-post/page.tsx       | 4 ++--
 src/app/mypage/my-active/page.tsx               | 4 ++--
 src/app/mypage/my-alarm/loading.tsx             | 4 ++--
 src/app/mypage/my-alarm/page.tsx                | 4 ++--
 src/app/mypage/my-setting/loading.tsx           | 4 ++--
 src/app/mypage/my-setting/page.tsx              | 4 ++--
 src/app/mypage/mybar/loading.tsx                | 4 ++--
 src/app/mypage/mybar/page.tsx                   | 4 ++--
 src/app/mypage/page.tsx                         | 4 ++--
 src/app/recipe/[id]/page.tsx                    | 4 ++--
 15 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/app/mypage/my-active/my-comment/loading.tsx b/src/app/mypage/my-active/my-comment/loading.tsx
index 04bd3d4..5d49f91 100644
--- a/src/app/mypage/my-active/my-comment/loading.tsx
+++ b/src/app/mypage/my-active/my-comment/loading.tsx
@@ -1,4 +1,4 @@
-function loading() {
+function Loading() {
   return (
     <ul aria-hidden="true" className="flex flex-col mt-6 animate-pulse">
       {Array.from({ length: 2 }).map((_, i) => (
@@ -21,4 +21,4 @@ function loading() {
     </ul>
   );
 }
-export default loading;
+export default Loading;
diff --git a/src/app/mypage/my-active/my-comment/page.tsx b/src/app/mypage/my-active/my-comment/page.tsx
index 3d67535..25e11be 100644
--- a/src/app/mypage/my-active/my-comment/page.tsx
+++ b/src/app/mypage/my-active/my-comment/page.tsx
@@ -6,11 +6,11 @@ export const metadata: Metadata = {
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
-function MyComment() {
+function Page() {
   return (
     <>
       <CommentList />
     </>
   );
 }
-export default MyComment;
+export default Page;
diff --git a/src/app/mypage/my-active/my-like/loading.tsx b/src/app/mypage/my-active/my-like/loading.tsx
index b1b824c..8540266 100644
--- a/src/app/mypage/my-active/my-like/loading.tsx
+++ b/src/app/mypage/my-active/my-like/loading.tsx
@@ -1,6 +1,6 @@
 import SkeletonPostCard from '@/domains/shared/skeleton/SkeletonPostCard';
 
-function loading() {
+function Loading() {
   return (
     <ul>
       {Array.from({ length: 6 }).map((_, i) => (
@@ -12,4 +12,4 @@ function loading() {
   );
 }
 
-export default loading;
+export default Loading;
diff --git a/src/app/mypage/my-active/my-like/page.tsx b/src/app/mypage/my-active/my-like/page.tsx
index dc8342c..ef1a370 100644
--- a/src/app/mypage/my-active/my-like/page.tsx
+++ b/src/app/mypage/my-active/my-like/page.tsx
@@ -6,7 +6,7 @@ export const metadata: Metadata = {
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
-function page() {
+function Page() {
   return (
     <ul>
       <li>
@@ -30,4 +30,4 @@ function page() {
     </ul>
   );
 }
-export default page;
+export default Page;
diff --git a/src/app/mypage/my-active/my-post/loading.tsx b/src/app/mypage/my-active/my-post/loading.tsx
index b1b824c..8540266 100644
--- a/src/app/mypage/my-active/my-post/loading.tsx
+++ b/src/app/mypage/my-active/my-post/loading.tsx
@@ -1,6 +1,6 @@
 import SkeletonPostCard from '@/domains/shared/skeleton/SkeletonPostCard';
 
-function loading() {
+function Loading() {
   return (
     <ul>
       {Array.from({ length: 6 }).map((_, i) => (
@@ -12,4 +12,4 @@ function loading() {
   );
 }
 
-export default loading;
+export default Loading;
diff --git a/src/app/mypage/my-active/my-post/page.tsx b/src/app/mypage/my-active/my-post/page.tsx
index 276459b..3e7803f 100644
--- a/src/app/mypage/my-active/my-post/page.tsx
+++ b/src/app/mypage/my-active/my-post/page.tsx
@@ -6,7 +6,7 @@ export const metadata: Metadata = {
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
-function page() {
+function Page() {
   return (
     <ul>
       <li>
@@ -21,4 +21,4 @@ function page() {
     </ul>
   );
 }
-export default page;
+export default Page;
diff --git a/src/app/mypage/my-active/page.tsx b/src/app/mypage/my-active/page.tsx
index 73173d7..fc9a176 100644
--- a/src/app/mypage/my-active/page.tsx
+++ b/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;
diff --git a/src/app/mypage/my-alarm/loading.tsx b/src/app/mypage/my-alarm/loading.tsx
index 4ad9073..78d7e26 100644
--- a/src/app/mypage/my-alarm/loading.tsx
+++ b/src/app/mypage/my-alarm/loading.tsx
@@ -1,6 +1,6 @@
 import SkeletonAlarm from '@/domains/recipe/skeleton/SkeletonAlarm';
 
-function loading() {
+function Loading() {
   return (
     <div className="flex flex-col gap-3">
       <SkeletonAlarm></SkeletonAlarm>
@@ -11,7 +11,7 @@ function loading() {
     </div>
   );
 }
-export default loading;
+export default Loading;
 
 // function SkeletonAlarmList({ count = 5 }: { count?: number }) {
 //   return (
diff --git a/src/app/mypage/my-alarm/page.tsx b/src/app/mypage/my-alarm/page.tsx
index bcb8998..ec9e77c 100644
--- a/src/app/mypage/my-alarm/page.tsx
+++ b/src/app/mypage/my-alarm/page.tsx
@@ -7,7 +7,7 @@ export const metadata: Metadata = {
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
-function MyAlarm() {
+function Page() {
   return (
     <div className="flex flex-col gap-3">
       <Alarm></Alarm>
@@ -17,4 +17,4 @@ function MyAlarm() {
     </div>
   );
 }
-export default MyAlarm;
+export default Page;
diff --git a/src/app/mypage/my-setting/loading.tsx b/src/app/mypage/my-setting/loading.tsx
index 3462efe..b5b1021 100644
--- a/src/app/mypage/my-setting/loading.tsx
+++ b/src/app/mypage/my-setting/loading.tsx
@@ -1,6 +1,6 @@
 import SkeletonSetting from '@/domains/mypage/skeleton/main/SkeletonSetting';
 
-function loading() {
+function Loading() {
   return <SkeletonSetting />;
 }
-export default loading;
+export default Loading;
diff --git a/src/app/mypage/my-setting/page.tsx b/src/app/mypage/my-setting/page.tsx
index 61cd249..b7e3f79 100644
--- a/src/app/mypage/my-setting/page.tsx
+++ b/src/app/mypage/my-setting/page.tsx
@@ -6,7 +6,7 @@ export const metadata: Metadata = {
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
-function page() {
+function Page() {
   return <MySetting />;
 }
-export default page;
+export default Page;
diff --git a/src/app/mypage/mybar/loading.tsx b/src/app/mypage/mybar/loading.tsx
index 615114f..9bc8bb8 100644
--- a/src/app/mypage/mybar/loading.tsx
+++ b/src/app/mypage/mybar/loading.tsx
@@ -1,6 +1,6 @@
 import SkeletonCocktailCard from '@/domains/recipe/skeleton/SkeletonCocktailCard';
 
-function loading() {
+function Loading() {
   return (
     <div
       className="grid grid-cols-1 justify-items-center mt-10 gap-8
@@ -21,4 +21,4 @@ function loading() {
     </div>
   );
 }
-export default loading;
+export default Loading;
diff --git a/src/app/mypage/mybar/page.tsx b/src/app/mypage/mybar/page.tsx
index 7101511..e2e3238 100644
--- a/src/app/mypage/mybar/page.tsx
+++ b/src/app/mypage/mybar/page.tsx
@@ -7,7 +7,7 @@ export const metadata: Metadata = {
   description: 'SSOUL 서비스에서 나의 활동을 관리할 수 있는 페이지입니다',
 };
 
-function MyBar() {
+function Page() {
   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))]  
@@ -51,4 +51,4 @@ function MyBar() {
     </div>
   );
 }
-export default MyBar;
+export default Page;
diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
index 9a91307..9c828f3 100644
--- a/src/app/mypage/page.tsx
+++ b/src/app/mypage/page.tsx
@@ -1,6 +1,6 @@
 import { redirect } from 'next/navigation';
 
-function page() {
+function Page() {
   return redirect('/mypage/mybar');
 }
-export default page;
+export default Page;
diff --git a/src/app/recipe/[id]/page.tsx b/src/app/recipe/[id]/page.tsx
index 6c018da..11f867e 100644
--- a/src/app/recipe/[id]/page.tsx
+++ b/src/app/recipe/[id]/page.tsx
@@ -1,7 +1,7 @@
 import DetailMain from '@/domains/recipe/details/DetailMain';
 import StarBg from '@/domains/shared/components/star-bg/StarBg';
 
-function page() {
+function Page() {
   return (
     <div className="w-full relative">
       <StarBg className="absolute top-0 left-0 h-200 lg:h-200" />
@@ -9,4 +9,4 @@ function page() {
     </div>
   );
 }
-export default page;
+export default Page;