마이페이지 추가 / main 브렌치로 병합

app/mypage/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { SearchLine } from "@/src/assets/icons/home";
+import FootPrintIcon from "@/src/assets/icons/mypage/footPrintIcon";
+import MapPinIcon from "@/src/assets/icons/mypage/mapPinIcon";
+import RecentIcon from "@/src/assets/icons/mypage/recentIcon";
+import PinsetIcon from "@/src/assets/icons/mypage/pinsetIcon";
+import { MypageSection, UserInfoCard, PinReportSection } from "@/src/features/mypage/ui";
+import { useRouter } from "next/navigation";
+import { useOAuthStore } from "@/src/features/login/model/authStore";
+
+
+export default function MypagePage() {
+    const { userName } = useOAuthStore();
+    const imageUrl = null;
+    const router = useRouter();
+    return (
+        <div className="flex flex-col min-h-screen gap-5 px-5 pb-6 bg-greyscale-grey-25">
+            {/* 사용자 정보 카드 */}
+            <UserInfoCard 
+                imageUrl={imageUrl}
+                userName={userName}
+                userEmail="백엔드에서이메일정보전달필요@naver.com"
+                onSettingsClick={() => {
+                    router.push("/mypage/settings");
+                }}
+            />
+
+            {/* 핀 보고서 섹션 */}
+            <PinReportSection
+                onDiagnosisClick={() => {
+                    router.push("/eligibility");
+                }}
+            />
+
+            {/* 내 정보 섹션 */}
+            <MypageSection
+                title="내 정보"
+                items={[
+                    {
+                        icon: <FootPrintIcon />,
+                        label: "관심 주변 환경 설정",
+                        onClick: () => {
+                            alert("관심 주변 환경 설정 미구현 상태");
+                            // TODO: 네비게이션 구현
+                        },
+                    },
+                    {
+                        icon: <MapPinIcon />,
+                        label: "핀포인트 설정",
+                        onClick: () => {
+                            router.push("/mypage/pinpoints");
+                        },
+                    },
+                ]}
+            />
+
+            {/* 내 활동 섹션 */}
+            <MypageSection
+                title="내 활동"
+                items={[
+                    {
+                        icon: <PinsetIcon />,
+                        label: "저장 목록",
+                        onClick: () => {
+                            alert("저장 목록 이동 미구현 상태");
+                            // TODO: 네비게이션 구현
+                        },
+                    },
+                    {
+                        icon: <RecentIcon />,
+                        label: "최근 본 공고",
+                        onClick: () => {
+                            alert("최근 본 공고 이동 미구현 상태");
+                            // TODO: 네비게이션 구현
+                        },
+                    },
+                ]}
+            />
+        </div>
+    );
+}
+

src/assets/icons/mypage/footPrintIcon.tsx

@@ -0,0 +1,17 @@
+const FootPrintIcon = () => {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_10323_69268)">
+                <path d="M4.86155 0.866699C3.54065 0.866699 2.33594 2.87863 2.33594 4.43803C2.33594 5.1841 2.58666 6.65175 3.17373 7.83204H6.55549C7.13644 6.65175 7.39328 5.1841 7.39328 4.43803C7.39328 2.87863 6.18857 0.866699 4.86155 0.866699ZM4.86767 11.4278C5.82165 11.4278 6.33534 10.4799 6.33534 9.1346C6.33534 9.00617 6.3231 8.81659 6.29865 8.6698H3.43669C3.41223 8.81659 3.4 9.00617 3.4 9.1346C3.4 10.4799 3.91368 11.4278 4.86767 11.4278ZM12.2916 4.88445C11.0441 4.43191 9.23401 5.9057 8.69584 7.37339C8.4451 8.07662 8.17604 9.54429 8.31667 10.853L11.4966 12.0088C12.4506 11.0976 13.1906 9.81335 13.4474 9.09786C13.9795 7.63635 13.5392 5.34309 12.2916 4.88445ZM8.68363 14.8096C9.58255 15.1337 10.3898 14.4182 10.8484 13.1584C10.8912 13.0361 10.9402 12.8527 10.9768 12.7059L8.28609 11.7214C8.21272 11.8559 8.13325 12.0271 8.0904 12.1494C7.63176 13.4153 7.79076 14.4793 8.68363 14.8096Z" fill="#2E293D" />
+            </g>
+            <defs>
+                <clipPath id="clip0_10323_69268">
+                    <rect width="11.3333" height="14.2547" fill="white" transform="translate(2.33594 0.866699)" />
+                </clipPath>
+            </defs>
+        </svg>
+
+    );
+};
+
+export default FootPrintIcon;

src/assets/icons/mypage/mapPinIcon.tsx

@@ -0,0 +1,17 @@
+const MapPinIcon = () => {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_10323_69273)">
+                <path d="M12.2427 3.09062C13.3443 4.19204 13.9743 5.6787 13.9995 7.23623C14.0248 8.79376 13.4433 10.3001 12.378 11.4366L12.2427 11.5766L9.41404 14.4046C9.05512 14.7633 8.57329 14.9722 8.06614 14.9889C7.55899 15.0056 7.06445 14.8289 6.6827 14.4946L6.5867 14.4046L3.75737 11.576C2.63215 10.4507 2 8.9246 2 7.33329C2 5.74198 2.63215 4.21585 3.75737 3.09062C4.8826 1.9654 6.40873 1.33325 8.00004 1.33325C9.59135 1.33325 11.1175 1.9654 12.2427 3.09062ZM8.00004 5.33329C7.73739 5.33329 7.47732 5.38502 7.23467 5.48553C6.99202 5.58604 6.77154 5.73336 6.58582 5.91908C6.40011 6.10479 6.25279 6.32527 6.15228 6.56792C6.05177 6.81057 6.00004 7.07065 6.00004 7.33329C6.00004 7.59593 6.05177 7.856 6.15228 8.09866C6.25279 8.34131 6.40011 8.56179 6.58582 8.7475C6.77154 8.93322 6.99202 9.08054 7.23467 9.18105C7.47732 9.28156 7.73739 9.33329 8.00004 9.33329C8.53047 9.33329 9.03918 9.12258 9.41425 8.7475C9.78932 8.37243 10 7.86372 10 7.33329C10 6.80286 9.78932 6.29415 9.41425 5.91908C9.03918 5.544 8.53047 5.33329 8.00004 5.33329Z" fill="#2E293D" />
+            </g>
+            <defs>
+                <clipPath id="clip0_10323_69273">
+                    <rect width="16" height="16" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+
+    );
+};
+
+export default MapPinIcon;

src/assets/icons/mypage/myPageArrow.tsx

@@ -0,0 +1,17 @@
+const MyPageArrow = () => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_10323_69270)">
+                <path d="M7.5 5L12.5 10L7.5 15" stroke="#BBBAC5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_10323_69270">
+                    <rect width="20" height="20" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+
+    );
+};
+
+export default MyPageArrow;

src/assets/icons/mypage/pinsetIcon.tsx

@@ -0,0 +1,14 @@
+const PinsetIcon = () => {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <mask id="path-1-inside-1_10323_69281" fill="white">
+                <path d="M6.81152 12H4.04785C3.70116 12 3.45092 11.6914 3.5459 11.3809L4.29004 8.94629C4.39136 8.61427 4.39317 8.26174 4.2959 7.92871L2.69824 2.45508C2.5337 1.89148 2.9771 1.33301 3.58887 1.33301H12.1094C12.7211 1.33301 13.1645 1.89148 13 2.45508L11.4023 7.92871C11.3051 8.26174 11.3067 8.61427 11.4082 8.94629L12.1523 11.3809C12.2473 11.6914 11.9971 12 11.6504 12H8.54004L7.89746 14.4873C7.83557 14.7264 7.51697 14.7264 7.45508 14.4873L6.81152 12Z" />
+            </mask>
+            <path d="M6.81152 12H4.04785C3.70116 12 3.45092 11.6914 3.5459 11.3809L4.29004 8.94629C4.39136 8.61427 4.39317 8.26174 4.2959 7.92871L2.69824 2.45508C2.5337 1.89148 2.9771 1.33301 3.58887 1.33301H12.1094C12.7211 1.33301 13.1645 1.89148 13 2.45508L11.4023 7.92871C11.3051 8.26174 11.3067 8.61427 11.4082 8.94629L12.1523 11.3809C12.2473 11.6914 11.9971 12 11.6504 12H8.54004L7.89746 14.4873C7.83557 14.7264 7.51697 14.7264 7.45508 14.4873L6.81152 12Z" fill="#2E293D" />
+            <path d="M6.81152 12L8.2637 11.6243L7.97281 10.5H6.81152V12ZM3.5459 11.3809L4.98033 11.8195L4.98039 11.8193L3.5459 11.3809ZM4.29004 8.94629L5.72453 9.38475L5.72472 9.38412L4.29004 8.94629ZM4.2959 7.92871L2.85598 8.349L2.85606 8.34925L4.2959 7.92871ZM2.69824 2.45508L4.13816 2.03479L4.13813 2.03471L2.69824 2.45508ZM13 2.45508L11.5601 2.03469L11.5601 2.03479L13 2.45508ZM11.4023 7.92871L12.8422 8.34925L12.8423 8.349L11.4023 7.92871ZM11.4082 8.94629L12.8427 8.50783L12.8427 8.50776L11.4082 8.94629ZM12.1523 11.3809L10.7179 11.8193L10.7179 11.8195L12.1523 11.3809ZM8.54004 12V10.5H7.37831L7.08772 11.6248L8.54004 12ZM7.89746 14.4873L9.34959 14.8632L9.34978 14.8625L7.89746 14.4873ZM7.45508 14.4873L6.0029 14.863L6.00295 14.8632L7.45508 14.4873ZM6.81152 12V10.5H4.04785V12V13.5H6.81152V12ZM4.04785 12V10.5C4.55799 10.5 5.22297 11.026 4.98033 11.8195L3.5459 11.3809L2.11147 10.9422C1.67888 12.3569 2.84433 13.5 4.04785 13.5V12ZM3.5459 11.3809L4.98039 11.8193L5.72453 9.38475L4.29004 8.94629L2.85555 8.50783L2.11141 10.9424L3.5459 11.3809ZM4.29004 8.94629L5.72472 9.38412C5.9116 8.77175 5.9147 8.12088 5.73574 7.50817L4.2959 7.92871L2.85606 8.34925C2.87164 8.40261 2.87113 8.45679 2.85536 8.50846L4.29004 8.94629ZM4.2959 7.92871L5.73582 7.50842L4.13816 2.03479L2.69824 2.45508L1.25833 2.87536L2.85598 8.349L4.2959 7.92871ZM2.69824 2.45508L4.13813 2.03471C4.27938 2.51853 3.88438 2.83301 3.58887 2.83301V1.33301V-0.166992C2.06982 -0.166992 0.788022 1.26444 1.25835 2.87545L2.69824 2.45508ZM3.58887 1.33301V2.83301H12.1094V1.33301V-0.166992H3.58887V1.33301ZM12.1094 1.33301V2.83301C11.8139 2.83301 11.4189 2.51854 11.5601 2.03469L13 2.45508L14.4399 2.87546C14.9102 1.26443 13.6284 -0.166992 12.1094 -0.166992V1.33301ZM13 2.45508L11.5601 2.03479L9.96243 7.50842L11.4023 7.92871L12.8423 8.349L14.4399 2.87536L13 2.45508ZM11.4023 7.92871L9.9625 7.50817C9.7837 8.12037 9.78625 8.77151 9.97374 9.38482L11.4082 8.94629L12.8427 8.50776C12.8272 8.45703 12.8265 8.40311 12.8422 8.34925L11.4023 7.92871ZM11.4082 8.94629L9.97372 9.38475L10.7179 11.8193L12.1523 11.3809L13.5868 10.9424L12.8427 8.50783L11.4082 8.94629ZM12.1523 11.3809L10.7179 11.8195C10.4753 11.026 11.1402 10.5 11.6504 10.5V12V13.5C12.8539 13.5 14.0194 12.3569 13.5868 10.9422L12.1523 11.3809ZM11.6504 12V10.5H8.54004V12V13.5H11.6504V12ZM8.54004 12L7.08772 11.6248L6.44514 14.1121L7.89746 14.4873L9.34978 14.8625L9.99236 12.3752L8.54004 12ZM7.89746 14.4873L6.44533 14.1114C6.77143 12.8517 8.58111 12.8517 8.90721 14.1114L7.45508 14.4873L6.00295 14.8632C6.45283 16.6011 8.89971 16.6011 9.34959 14.8632L7.89746 14.4873ZM7.45508 14.4873L8.90726 14.1116L8.2637 11.6243L6.81152 12L5.35934 12.3757L6.0029 14.863L7.45508 14.4873Z" fill="#2E293D" mask="url(#path-1-inside-1_10323_69281)" />
+        </svg>
+
+    );
+};
+
+export default PinsetIcon;

src/assets/icons/mypage/recentIcon.tsx

@@ -0,0 +1,16 @@
+const RecentIcon = () => {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_10323_69286)">
+                <path d="M11.3359 2.22664C12.3414 2.80721 13.1779 3.64032 13.7625 4.6435C14.3471 5.64669 14.6595 6.78515 14.6689 7.9462C14.6783 9.10724 14.3843 10.2506 13.816 11.2631C13.2476 12.2756 12.4248 13.1221 11.4288 13.7188C10.4328 14.3156 9.29818 14.6419 8.13734 14.6653C6.97649 14.6888 5.82964 14.4087 4.81031 13.8528C3.79098 13.2968 2.93452 12.4843 2.32572 11.4956C1.71691 10.507 1.37688 9.37644 1.33927 8.21597L1.33594 7.99997L1.33927 7.78397C1.37661 6.63263 1.71164 5.51061 2.3117 4.5273C2.91176 3.54399 3.75637 2.73294 4.7632 2.17322C5.77002 1.61351 6.9047 1.32423 8.05661 1.33359C9.20851 1.34295 10.3383 1.65063 11.3359 2.22664ZM8.0026 3.99997C7.83931 3.99999 7.68171 4.05994 7.55969 4.16845C7.43767 4.27695 7.35971 4.42647 7.3406 4.58864L7.33594 4.66664V7.99997L7.34194 8.0873C7.35714 8.20297 7.40242 8.31262 7.47327 8.4053L7.53127 8.47197L9.53127 10.472L9.59394 10.5266C9.71085 10.6173 9.85463 10.6666 10.0026 10.6666C10.1506 10.6666 10.2944 10.6173 10.4113 10.5266L10.4739 10.4713L10.5293 10.4086C10.62 10.2917 10.6692 10.1479 10.6692 9.99997C10.6692 9.85199 10.62 9.70822 10.5293 9.5913L10.4739 9.52864L8.66927 7.7233V4.66664L8.6646 4.58864C8.6455 4.42647 8.56754 4.27695 8.44552 4.16845C8.3235 4.05994 8.16589 3.99999 8.0026 3.99997Z" fill="#2E293D" />
+            </g>
+            <defs>
+                <clipPath id="clip0_10323_69286">
+                    <rect width="16" height="16" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export default RecentIcon;