[#75] 마이페이지 지원 자격 UI 구현

app/(main)/layout.tsx

@@ -5,7 +5,7 @@ import { ReactNode } from "react";
 // TODO: pathname 토대로 분기처리 필요
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <div className="min-h-dvh flex flex-col">
+    <div className="min-h-dvh flex flex-col bg-gray-100">
       {/* TODO: 게스트 - unauthenticated, 회원 authenticated */}
       <Header />
       <main /*className="container mx-auto px-4 py-8 flex-1 flex"*/>

app/(main)/mypage/(information)/eligibility/page.tsx

@@ -1,3 +1,5 @@
-export default function Page() {
-  return <div>eligibility - 지원 자격</div>;
+import MyPageEligibilityPage from "@/src/_pages/mypage/(information)/eligibility/mypage-eligibility-page";
+
+export default function page() {
+  return <MyPageEligibilityPage />;
 }

src/_pages/mypage/(information)/eligibility/mypage-eligibility-page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import Button from "@/src/shared/ui/button";
+import Card from "@/src/shared/ui/card";
+
+type InfoItem = {
+  label: string;
+  value: string;
+};
+
+const personalInfoList: InfoItem[] = [
+  { label: "생년월일", value: "1999.10.21" },
+  { label: "상태", value: "재직중" },
+  { label: "주소", value: "경기도 00시 00구 00로 333-3" },
+];
+
+const assetInfoList: InfoItem[] = [
+  { label: "월 평균 소득", value: "0원" },
+  { label: "총 자산 규모", value: "0원" },
+];
+
+export default function MyPageEligibilityPage() {
+  return (
+    <div className="space-y-6 px-6 pb-12 pt-6">
+      {/* 개인 정보 */}
+      <Card padding="large" shadow="sm" className="rounded-3xl border-0">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-slate-900">개인 정보</h2>
+          <Button type="button" className="text-sm font-medium text-blue-600">
+            수정
+          </Button>
+        </div>
+
+        <ul className="space-y-4 text-sm">
+          {personalInfoList.map((item) => (
+            <li
+              key={item.label}
+              className="flex items-start justify-between gap-4"
+            >
+              <span className="text-slate-600">{item.label}</span>
+              <span className="text-right text-slate-900">{item.value}</span>
+            </li>
+          ))}
+        </ul>
+      </Card>
+
+      {/* 자산 현황 */}
+      <Card padding="large" shadow="sm" className="rounded-3xl border-0">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-slate-900">자산 현황</h2>
+          <Button type="button" className="text-sm font-medium text-blue-600">
+            수정
+          </Button>
+        </div>
+
+        <ul className="space-y-4 text-sm">
+          {assetInfoList.map((item) => (
+            <li
+              key={item.label}
+              className="flex items-center justify-between gap-4"
+            >
+              <span className="text-slate-600">{item.label}</span>
+              <span className="text-slate-900">{item.value}</span>
+            </li>
+          ))}
+        </ul>
+      </Card>
+    </div>
+  );
+}

src/_pages/mypage/mypage.tsx

@@ -1,64 +1,75 @@
 import { MenuItem, MenuSection } from "@/src/shared/components/mypage-menu";
 import Button from "@/src/shared/ui/button";
-import { CustomerSupportSection } from "@/src/widgets/mypage-customer-support";
-import { Heart, LogOut, User } from "lucide-react";
+import { Heart, User, Eye, FileText } from "lucide-react";
 
 export default function MyPage() {
   return (
-    <>
+    <div className="px-6 pb-10">
       {/* Profile Section */}
-      <section className="mb-8 flex items-center gap-3 px-1">
-        <div className="h-12 w-12 rounded-full overflow-hidden">
-          <div className="w-full h-full bg-slate-400" />
-        </div>
-        <div>
-          <p className="text-lg font-bold">
+      <section className="mb-6 flex items-start justify-between py-6">
+        <div className="min-w-0">
+          <p className="text-2xl font-bold text-slate-900">
             <span>김청년</span> 님
           </p>
-          <Button>내 지원 자격 보기</Button>
+          <p className="mt-2 text-base text-slate-500">
+            이메일: asdf1234@kakao.com
+          </p>
         </div>
-      </section>
 
-      {/* 지원 현황 */}
-      <section className="mb-8">
-        지원 이력, 심사중, 달성 - entities 카드로 분리
+        <Button
+          type="button"
+          className="shrink-0 rounded-xl bg-slate-600 px-5 py-3 text-base font-semibold text-white"
+        >
+          로그아웃
+        </Button>
       </section>
 
-      {/* 최근 지원 공고 */}
-      <section className="mb-8">최근 지원 공고(카드 - entities)</section>
-
-      <div className="space-y-8">
-        {/* 나의 정보 */}
-        <MenuSection title="나의 정보">
+      <div className="space-y-10">
+        {/* 개인 정보 */}
+        <MenuSection title="개인 정보">
           <MenuItem
-            link="/mypage"
+            link="/mypage/eligibility"
             icon={<User size={20} />}
             label="지원 자격"
           />
           <MenuItem
-            link="/mypage"
+            link="/mypage/scrap"
             icon={<Heart size={20} />}
             label="관심 공고"
           />
+          <MenuItem
+            link="/mypage/recent"
+            icon={<Eye size={20} />}
+            label="최근 열람 공고"
+          />
         </MenuSection>
 
         {/* 고객 지원 */}
-        <CustomerSupportSection />
-
-        {/* 계정 설정 (로그아웃) */}
-        <MenuSection title=" 계정 설정">
+        <MenuSection title="고객 지원">
+          <MenuItem
+            link="/mypage/faq"
+            icon={<FileText size={20} />}
+            label="자주 묻는 질문 (FAQ)"
+          />
           <MenuItem
-            link="/mypage"
-            icon={<LogOut size={20} />}
-            label="알림 설정"
+            link="/mypage/terms"
+            icon={<FileText size={20} />}
+            label="서비스 이용약관"
           />
           <MenuItem
-            link="/mypage"
-            icon={<LogOut size={20} />}
-            label="로그아웃"
+            link="/mypage/privacy"
+            icon={<FileText size={20} />}
+            label="개인정보 처리방침"
           />
         </MenuSection>
+
+        {/* 탈퇴하기 */}
+        <div className="flex justify-end">
+          <button type="button" className="text-sm text-slate-300">
+            탈퇴하기
+          </button>
+        </div>
       </div>
-    </>
+    </div>
   );
 }

src/shared/components/mypage-menu.tsx

@@ -11,8 +11,8 @@ export function MenuSection({
 }) {
   return (
     <section>
-      <h2 className="mb-3 px-1 text-sm font-bold text-gray-800">{title}</h2>
-      <div className="overflow-hidden rounded-2xl shadow-sm border border-gray-100">
+      <h2 className="mb-3 px-1 text-sm font-bold text-gray-900">{title}</h2>
+      <div className="overflow-hidden rounded-2xl shadow-sm border border-gray-100 bg-white">
         {children}
       </div>
     </section>
@@ -30,12 +30,12 @@ export function MenuItem({
 }) {
   return (
     <Link href={link}>
-      <Button className="flex w-full items-center justify-between border-b border-gray-50 p-4 last:border-none hover:bg-gray-50 transition-colors">
+      <Button className="flex w-full items-center justify-between border-b border-gray-50 p-6 last:border-none hover:bg-gray-50 transition-colors">
         <div className="flex items-center gap-3">
           <div className="text-gray-500">{icon}</div>
           <span className="text-sm font-medium text-gray-700">{label}</span>
         </div>
-        <ChevronRight size={18} className="text-gray-300" />
+        <ChevronRight size={20} className="text-black" />
       </Button>
     </Link>
   );