feat: 마이페이지 UI 변경

app/routes/mypage/components/mypage/ConfirmModal.tsx

@@ -0,0 +1,122 @@
+export default function ConfirmModal({
+  title,
+  desc,
+  primaryText,
+  onClose,
+  onPrimary,
+
+  showCloseIcon = false,
+  icon = null,
+  closeOnDim = false,
+  widthClassName = "w-[343px]",
+  heightClassName = "h-[214px]",
+  containerClassName = "",
+  dimClassName = "bg-[#17171833]",
+  titleClassName = "text-[20px] leading-[24px]",
+  descClassName = "text-[14px] leading-[20px] text-[#6B6B73]",
+}: {
+  title: React.ReactNode;
+  desc?: React.ReactNode;
+  primaryText: string;
+  onClose: () => void;
+  onPrimary: () => void;
+
+  showCloseIcon?: boolean;      // 왼쪽 상단 X
+  icon?: React.ReactNode;       // 상단 아이콘(느낌표)
+  closeOnDim?: boolean;         // 딤 클릭 시 닫기
+  widthClassName?: string;      // 모달 너비
+  heightClassName?: string;     // 모달 높이
+  containerClassName?: string;  // 모달 박스 추가 클래스
+  dimClassName?: string;        // 딤 색
+  titleClassName?: string;      // 타이틀 스타일
+  descClassName?: string;       // 설명 스타일
+}) {
+  return (
+    <div className="fixed inset-0 z-50">
+      {/* dim */}
+      {closeOnDim ? (
+        <button
+          type="button"
+          aria-label="닫기"
+          onClick={onClose}
+          className={`absolute inset-0 ${dimClassName}`}
+        />
+      ) : (
+        <div className={`absolute inset-0 ${dimClassName}`} />
+      )}
+
+      {/* modal */}
+      <div
+        className={[
+          "absolute left-1/2 top-1/2",
+          widthClassName,
+          heightClassName,
+          "-translate-x-1/2 -translate-y-1/2",
+          "rounded-[10px] bg-white shadow-xl",
+          "flex flex-col",
+          containerClassName,
+        ].join(" ")}
+      >
+        {/* close icon */}
+        {showCloseIcon ? (
+          <button
+            type="button"
+            aria-label="닫기"
+            onClick={onClose}
+            className="absolute left-3 top-3 grid place-items-center w-8 h-8 rounded-full text-[#7B7D8A] active:bg-black/5"
+          >
+            <span className="text-[22px] leading-none">×</span>
+          </button>
+        ) : null}
+
+        {/* content */}
+        <div className="flex-1 px-5 flex flex-col justify-center">
+          {/* icon */}
+          {icon ? <div className="flex justify-center mb-4">{icon}</div> : null}
+
+          <div className={`text-center font-semibold text-black ${titleClassName}`}>
+            {title}
+          </div>
+
+          {desc ? (
+            <div className={`mt-4 text-center ${descClassName}`}>
+              {desc}
+            </div>
+          ) : null}
+        </div>
+
+        {/* buttons – bottom */}
+        <div className="mt-auto px-5 pb-4">
+          <div className="flex gap-3">
+            <button
+              type="button"
+              onClick={onClose}
+              className="
+                h-11 flex-1 rounded-[12px]
+                border border-[#C8CCFF]
+                bg-white text-[14px] leading-[18px]
+                font-semibold text-[#6666E5]
+                transition-colors active:bg-[#F3F4FF]
+              "
+            >
+              취소
+            </button>
+
+            <button
+              type="button"
+              onClick={onPrimary}
+              className="
+                h-11 flex-1 rounded-[12px]
+                bg-[#6666E5] text-[14px] leading-[18px]
+                font-semibold text-white
+                transition-colors active:bg-[#3F40C2]
+              "
+            >
+              {primaryText}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/routes/mypage/components/mypage/GateModal.tsx

@@ -0,0 +1,60 @@
+export default function GateModal({
+  onClose,
+  onGoTest,
+}: {
+  onClose: () => void;
+  onGoTest: () => void;
+}) {
+  return (
+    <div className="fixed inset-0 z-50">
+      {/* dim */}
+      <div className="absolute inset-0 bg-black/45" />
+
+      {/* modal */}
+      <div className="absolute left-1/2 top-1/2 w-[320px] h-[320px] -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-5 shadow-xl">
+        <div className="relative w-[270px] h-[24px]">
+          <button
+            type="button"
+            onClick={onClose}
+            className="absolute left-0 top-0 text-[#9B9BA1]"
+            aria-label="닫기"
+          >
+            ✕
+          </button>
+        </div>  
+
+        <div className="flex flex-col items-center pt-8">
+          <div className="flex h-[64px] w-[64px] items-center justify-center rounded-full bg-[#5B5CEB]">
+            <span className="text-[28px] font-bold text-white">!</span>
+          </div>
+
+          <div className="mt-8 text-center text-[18px] font-semibold text-[#111] leading-6">
+            매칭 검사를
+            <br />
+            먼저 진행해주세요
+          </div>
+
+          <button
+            type="button"
+            onClick={onGoTest}
+            className="mt-8 flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-[#5B5CEB] text-[15px] font-semibold text-white"
+          >
+            <span className="inline-flex h-5 w-5 items-center justify-center">
+              <svg width="26" height="16" viewBox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+              <rect width="26" height="16" fill="url(#pattern0_2021_21638)"/>
+              <defs>
+                <pattern id="pattern0_2021_21638" patternContentUnits="objectBoundingBox" width="1" height="1">
+                  <use xlinkHref="#image0_2021_21638" transform="matrix(0.008 0 0 0.013 0 -0.007)"/>
+                </pattern>
+                <image id="image0_2021_21638" width="125" height="78" preserveAspectRatio="none" xlinkHref="data:image/png;base64,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"/>
+              </defs>
+              </svg>
+
+            </span>
+            매칭 검사하기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/routes/mypage/components/mypage/MenuButton.tsx

@@ -0,0 +1,45 @@
+export default function MenuButton({
+  title, label, onClick, muted, py,
+}: {
+  title?: string;
+  label: string;
+  onClick: () => void;
+  muted?: boolean;
+  py?: number;
+}) {
+  return (
+    <div className="w-full">
+      {title && (
+        <div
+          className={[
+            "px-5 pt-[11px] pb-[5px]",
+            "text-[10px] leading-[12px] text-[#5B5D6B]",
+            muted ? "opacity-70" : "",
+          ].join(" ")}
+        >
+          {title}
+        </div>
+      )}
+
+      {/* label */}
+      <div className="px-5">
+        <button
+          type="button"
+          onClick={onClick}
+          className={[
+            "w-full text-left rounded-none",
+            "transition-colors active:bg-[#E6E6EB]",
+            muted ? "text-[#B7B7BF]" : "text-[#111]",
+            "text-[14px] leading-[20px] style-Medium",
+          ].join(" ")}
+          style={{
+            paddingTop: py,
+            paddingBottom: py,
+          }}
+        >
+          {label}
+        </button>
+      </div>
+    </div>
+  );
+}

app/routes/mypage/components/profileCard/CommonSection.tsx

@@ -0,0 +1,19 @@
+export default function Section({
+  title,
+  right,
+  children,
+}: {
+  title: string;
+  right?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="py-6">
+      <div className="flex items-center justify-between mb-[12px]">
+        <div className="text-[14px] font-semibold text-black/80">{title}</div>
+        {right}
+      </div>
+      {children}
+    </section>
+  );
+}

app/routes/mypage/components/profileCard/ProfileSection.tsx

@@ -0,0 +1,55 @@
+export default function ProfileSection() {
+
+  const profileImage = "";
+
+  return (
+    <div className="px-4 py-6">
+      {/* profile summary */}
+      <div className="flex items-center gap-4 mt-[10px]">
+        <div className="relative">
+          <div className="relative w-[50px] h-[50px] rounded-[20px] border border-[#E6E6F3] bg-gray-200 overflow-hidden">
+            {/* 프로필 이미지 */}
+            {profileImage ? (
+              <img
+                src={profileImage}
+                alt="profile"
+                className="absolute inset-0 w-full h-full object-cover"
+              />
+            ) : (
+              <div className="absolute inset-0 bg-gradient-to-b from-gray-200 to-gray-300" />
+            )}
+          </div>
+
+          <button
+            type="button"
+            className="absolute -right-[2px] -bottom-[2px] w-[18px] h-[18px] rounded-full bg-white grid place-items-center shadow active:scale-95 transition"
+            aria-label="프로필 수정"
+          >
+            <svg
+              width="9"
+              height="9"
+              viewBox="0 0 9 9"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0.9375 7.91973V6.74536L5.4875 2.19536L6.6625 3.36973L2.1125 7.91973H0.9375ZM7.325 2.70661L7.82812 2.20348C7.85723 2.17445 7.88032 2.13997 7.89607 2.102C7.91182 2.06404 7.91993 2.02334 7.91993 1.98223C7.91993 1.94113 7.91182 1.90043 7.89607 1.86246C7.88032 1.8245 7.85723 1.79001 7.82812 1.76098L7.09625 1.02911C7.06722 1.00001 7.03274 0.976917 6.99477 0.961163C6.95681 0.945409 6.9161 0.937299 6.875 0.937299C6.8339 0.937299 6.79319 0.945409 6.75523 0.961163C6.71726 0.976917 6.68278 1.00001 6.65375 1.02911L6.15062 1.53223L7.325 2.70661ZM0 7.91973V6.35723L5.99125 0.365983C6.22566 0.131644 6.54354 0 6.875 0C7.20646 0 7.52434 0.131644 7.75875 0.365983L8.49125 1.09848C8.72559 1.33289 8.85723 1.65078 8.85723 1.98223C8.85723 2.31369 8.72559 2.63157 8.49125 2.86598L2.5 8.85723H0V7.91973Z"
+                fill="#9B9BA1"
+              />
+            </svg>
+          </button>
+        </div>  
+
+        <div className="flex-1 gap-[6px]">
+          <div className="text-[16px] font-Semibold leading-[20px]">비비</div>
+          <div className="text-[12px] text-black/50 leading-[16px] mt-[2px]">여성 22세</div>
+          <div className="text-[12px] text-[#6D6AFE] leading-[16px] mt-[2px]">
+            관심분야: 뷰티, 패션
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}