[FEAT] WTH-421: 마이페이지 개선뷰 UI 구현

src/app/(private)/[clubId]/(main)/mypage/activity/loading.tsx

@@ -0,0 +1,5 @@
+import { MyPageActivitySkeleton } from '@/components/mypage/skeleton';
+
+export default function Loading() {
+  return <MyPageActivitySkeleton />;
+}

src/app/(private)/[clubId]/(main)/mypage/activity/page.tsx

@@ -0,0 +1,7 @@
+import { MyPageActivityContent } from '@/components/mypage/MyPageActivityContent';
+
+export const dynamic = 'force-dynamic';
+
+export default function MyPageActivityPage() {
+  return <MyPageActivityContent />;
+}

src/app/(private)/[clubId]/(main)/mypage/layout.tsx

@@ -0,0 +1,16 @@
+import { MyPageNav } from '@/components/mypage/MyPageNav';
+
+interface MyPageLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function MyPageLayout({ children }: MyPageLayoutProps) {
+  return (
+    <div className="desktop:px-16 tablet:pt-450 mx-auto flex w-full items-start gap-500 px-450 pb-[80px]">
+      <aside className="tablet:flex hidden shrink-0">
+        <MyPageNav />
+      </aside>
+      <div className="flex min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}

src/app/(private)/[clubId]/(main)/mypage/posts/page.tsx

@@ -0,0 +1,7 @@
+import { MyPagePostsContent } from '@/components/mypage/MyPagePostsContent';
+
+export const dynamic = 'force-dynamic';
+
+export default function MyPagePostsPage() {
+  return <MyPagePostsContent />;
+}

src/app/(private)/[clubId]/(main)/mypage/profiles/[profileId]/edit/page.tsx

@@ -0,0 +1,7 @@
+import { EditProfilePageContent } from '@/components/mypage/EditProfilePageContent';
+
+export const dynamic = 'force-dynamic';
+
+export default function EditProfilePage() {
+  return <EditProfilePageContent />;
+}

src/app/(private)/[clubId]/(main)/mypage/profiles/add/page.tsx

@@ -0,0 +1,7 @@
+import { AddProfilePageContent } from '@/components/mypage/AddProfilePageContent';
+
+export const dynamic = 'force-dynamic';
+
+export default function AddProfilePage() {
+  return <AddProfilePageContent />;
+}

src/app/(private)/[clubId]/(main)/mypage/profiles/loading.tsx

@@ -0,0 +1,5 @@
+import { ProfileManagementSkeleton } from '@/components/mypage/skeleton/ProfileManagementSkeleton';
+
+export default function Loading() {
+  return <ProfileManagementSkeleton />;
+}

src/app/(private)/[clubId]/(main)/mypage/profiles/page.tsx

@@ -0,0 +1,7 @@
+import { ProfileManagementContent } from '@/components/mypage';
+
+export const dynamic = 'force-dynamic';
+
+export default function ProfilesPage() {
+  return <ProfileManagementContent />;
+}

src/app/(private)/[clubId]/(main)/mypage/sessions/loading.tsx

@@ -0,0 +1,5 @@
+import { MyPageSessionsSkeleton } from '@/components/mypage/skeleton/MyPageSessionsSkeleton';
+
+export default function Loading() {
+  return <MyPageSessionsSkeleton />;
+}

src/app/(private)/[clubId]/(main)/mypage/sessions/page.tsx

@@ -0,0 +1,25 @@
+import { MyPageSessionsContent } from '@/components/mypage/MyPageSessionsContent';
+import { attendanceServerApi } from '@/lib/apis/attendance.server';
+import type { AttendanceSummary } from '@/types/attendance';
+
+interface MyPageSessionsPageProps {
+  params: Promise<{ clubId: string }>;
+}
+
+export const dynamic = 'force-dynamic';
+
+export default async function MyPageSessionsPage({ params }: MyPageSessionsPageProps) {
+  const { clubId } = await params;
+
+  let summary: AttendanceSummary | undefined;
+  let errorMessage: string | undefined;
+
+  try {
+    const response = await attendanceServerApi.getDetail(clubId);
+    summary = response.data;
+  } catch {
+    errorMessage = '출석 기록을 불러오지 못했습니다.';
+  }
+
+  return <MyPageSessionsContent summary={summary} errorMessage={errorMessage} />;
+}

src/app/(private)/[clubId]/(main)/mypage/settings/loading.tsx

@@ -0,0 +1,5 @@
+import { MyPageSettingsSkeleton } from '@/components/mypage/skeleton';
+
+export default function Loading() {
+  return <MyPageSettingsSkeleton />;
+}

src/app/(private)/[clubId]/(main)/mypage/settings/page.tsx

@@ -0,0 +1,7 @@
+import { MyPageSettingsContent } from '@/components/mypage/MyPageSettingsContent';
+
+export const dynamic = 'force-dynamic';
+
+export default function MyPageSettingsPage() {
+  return <MyPageSettingsContent />;
+}

src/app/(private)/[clubId]/(main)/mypage/settings/theme/page.tsx

@@ -0,0 +1,7 @@
+import { ThemeModePageContent } from '@/components/mypage/ThemeModePageContent';
+
+export const dynamic = 'force-dynamic';
+
+export default function ThemeModePage() {
+  return <ThemeModePageContent />;
+}

src/app/globals.css

@@ -56,6 +56,10 @@
   --pink-700: #8e448a;
   --pink-900: #280526;
 
+  --opacity-60: #ffffff99;
+  --opacity-100: #00c8aa1f;
+  --opacity-200: #00c8aa4d;
+
   --background: var(--neutral-200);
   --background-2: var(--neutral-300);
   --foreground: var(--text-normal);
@@ -66,8 +70,9 @@
   --text-alternative: var(--neutral-600);
   --text-disabled: var(--neutral-500);
   --text-inverse: var(--neutral-0);
-  --container-code: var(--neutral-400);
+  --text-brand: var(--primary-500);
 
+  --container-code: var(--neutral-400);
   --code-keyword: #d73a49;
   --code-string: #032f62;
   --code-comment: #6a737d;
@@ -85,11 +90,15 @@
   --container-secondary: var(--secondary-500);
   --container-secondary-interaction: var(--secondary-700);
   --container-secondary-alternative: var(--secondary-100);
+  --container-opacity: var(--opacity-60);
 
   --button-neutral: var(--neutral-400);
   --button-neutral-interaction: var(--neutral-500);
   --button-primary: var(--primary-500);
   --button-primary-interaction: var(--primary-600);
+  --button-primary-subtle: var(--opacity-100);
+  --button-primary-subtle-interaction: var(--opacity-200);
+  --button-disabled: var(--neutral-400);
 
   --icon-normal: var(--neutral-800);
   --icon-strong: var(--neutral-900);
@@ -279,6 +288,15 @@
   --pink-700: #f3a7f0;
   --pink-900: #faddf9;
 
+  --opacity-60: #1e202199;
+  --opacity-100: #355d5a80;
+  --opacity-200: #00c8aa66;
+
+  --button-primary-subtle: var(--opacity-100);
+  --button-primary-subtle-interaction: var(--opacity-200);
+
+  --container-opacity: var(--opacity-60);
+
   --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
@@ -338,6 +356,11 @@
   --color-button-neutral-interaction: var(--button-neutral-interaction);
   --color-button-primary: var(--button-primary);
   --color-button-primary-interaction: var(--button-primary-interaction);
+  --color-button-primary-subtle: var(--button-primary-subtle);
+  --color-button-primary-subtle-interaction: var(--button-primary-subtle-interaction);
+  --color-button-disabled: var(--button-disabled);
+
+  --color-container-opacity: var(--container-opacity);
 
   --color-icon-normal: var(--icon-normal);
   --color-icon-strong: var(--icon-strong);

src/assets/icons/index.ts

@@ -64,3 +64,8 @@ export { default as RushIcon } from './rush.svg';
 export { default as QuestionCircleIcon } from './question_circle.svg';
 export { default as DotIcon } from './dot.svg';
 export { default as EmptyListIcon } from './empty_list.svg';
+export { default as PhoneIcon } from './phone.svg';
+export { default as MailIcon } from './mail.svg';
+export { default as SettingIcon } from './setting.svg';
+export { default as AddRoundIcon } from './add_round.svg';
+export { default as CalendarIcon } from './calendar.svg';

src/components/auth/hub/FormFieldWrapper.tsx

@@ -8,7 +8,7 @@ function FieldError({ message }: { message?: string }) {
 }
 
 interface FormFieldWrapperProps {
-  label: string;
+  label?: string;
   error?: string;
   children: React.ReactNode;
 }

src/components/board/BoardContent.tsx

@@ -24,9 +24,15 @@ function toDisplayImages(files: FileItem[]) {
 
 interface BoardContentProps {
   boardId: number | null;
+  onlyCurrentUser?: boolean;
+  emptyMessage?: string;
 }
 
-function BoardContent({ boardId }: BoardContentProps) {
+function BoardContent({
+  boardId,
+  onlyCurrentUser = false,
+  emptyMessage = '아직 게시글이 없습니다.',
+}: BoardContentProps) {
   const router = useRouter();
   const { clubId } = useParams<{ clubId: string }>();
   const currentUserId = useUserId();
@@ -43,6 +49,10 @@ function BoardContent({ boardId }: BoardContentProps) {
   const { ref: sentinelRef, isIntersecting } = useIntersectionObserver({
     rootMargin: '200px',
   });
+  const filteredPosts =
+    onlyCurrentUser && currentUserId != null
+      ? posts?.filter((post) => post.author.id === currentUserId)
+      : posts;
 
   useEffect(() => {
     if (!isError || !error) return;
@@ -72,16 +82,16 @@ function BoardContent({ boardId }: BoardContentProps) {
       </main>
     );
 
-  if (!posts || posts.length === 0)
+  if (!filteredPosts || filteredPosts.length === 0)
     return (
       <main className="flex min-w-0 flex-1 flex-col items-center justify-center py-800">
-        <p className="typo-body1 text-text-alternative">아직 게시글이 없습니다.</p>
+        <p className="typo-body1 text-text-alternative">{emptyMessage}</p>
       </main>
     );
 
   return (
     <main className="flex min-w-0 flex-1 flex-col gap-400">
-      {posts.map((post) => (
+      {filteredPosts.map((post) => (
         <PostCard.Root key={post.id} className="relative">
           <PostCard.Header>
             <PostCard.Author

src/components/board/CategorySelector.tsx

@@ -13,7 +13,6 @@ import {
   Icon,
 } from '@/components/ui';
 import { ChannelList } from '@/components/board/ChannelList';
-import { useClubName } from '@/stores';
 import type { BoardNavItem } from '@/types/board';
 
 interface CategorySelectorProps {
@@ -38,9 +37,6 @@ function CategorySelector({
 }: CategorySelectorProps) {
   const [open, setOpen] = useState(false);
   const activeItem = items.find((item) => item.id === activeId);
-  const clubName = useClubName();
-
-  const boardName = clubName ?? '게시판';
   const channelName = activeItem?.label ?? '';
 
   // 아이템 선택 후 드롭다운 닫기