RealMatchTeam · yerimi00 · Feb 12, 2026 · Feb 12, 2026 · Feb 12, 2026 · Feb 12, 2026
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
@@ -12,7 +12,7 @@ export default function Header({
   rightElement,
 }: HeaderProps) {
   return (
-    <header className="sticky top-0 z-50 flex items-center justify-between w-full h-[60px] px-4.5 bg-white border-b border-text-gray5 safe-area-top">
+    <header className="sticky top-0 z-50 flex items-center justify-between w-full min-h-[60px] px-4.5 bg-white border-b border-text-gray5 safe-area-top">
       {/* 왼쪽: 뒤로가기 버튼 */}
       <div className="flex items-center">
         {showBack && (

diff --git a/app/routes/business/proposal/received-proposal-content.tsx b/app/routes/business/proposal/received-proposal-content.tsx
@@ -118,7 +118,7 @@ export default function ReceivedProposalContent() {
 
     return (
         <div className="flex flex-col w-full min-h-screen bg-[var(--color-bg-w)] font-pretendard relative">
-            <div className="h-[60px]">
+            <div className="min-h-[60px]">
                 <NavigationHeader title="제안 보기" onBack={() => navigate(-1)} />
             </div>
 

diff --git a/app/routes/mypage/components/profileCard/TraitModal.tsx b/app/routes/mypage/components/profileCard/TraitModal.tsx
@@ -1,3 +1,5 @@
+import { useHideBottomTab } from "../../../../hooks/useHideBottomTab";
+
 type Trait = {
   badge: string;
   icon: (className?: string) => React.ReactNode;
@@ -12,106 +14,119 @@ export default function TraitModal({
   trait: Trait;
   onClose: () => void;
 }) {
+  useHideBottomTab(true);
+
+  const isContentTrait = trait.badge.includes("콘텐츠");
   const cols = trait.topSummary.length;
 
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center px-5 py-5"
+      className="fixed inset-y-0 left-1/2 z-50 w-full max-w-[480px] -translate-x-1/2 bg-black/40"
       onClick={onClose}
     >
-      <div
-        className={[
-          "w-full",
-          "bg-[#F3F4F8] rounded-[13px]",
-          "relative",
-        ].join(" ")}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* close */}
-        <button
-          type="button"
-          onClick={onClose}
-          className="absolute left-4 top-4 text-[#9B9BA1] active:opacity-70"
-          aria-label="close"
+      <div className="mx-auto flex h-full w-full max-w-[480px] items-center justify-center px-5 py-5">
+        <div
+          className={[
+            "w-full",
+            "bg-[#F3F4F8] rounded-[13px]",
+            "relative",
+          ].join(" ")}
+          onClick={(e) => e.stopPropagation()}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="none"
+          {/* close */}
+          <button
+            type="button"
+            onClick={onClose}
+            className="absolute left-4 top-4 text-[#9B9BA1] active:opacity-70"
+            aria-label="close"
           >
-            <g clipPath="url(#clip0_1168_63046)">
-              <path
-                d="M-1 11L5 5L11 11M11 -1L4.99886 5L-1 -1"
-                stroke="#9B9BA1"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_1168_63046">
-                <rect width="10" height="10" fill="white" />
-              </clipPath>
-            </defs>
-          </svg>
-        </button>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="10"
+              height="10"
+              viewBox="0 0 10 10"
+              fill="none"
+            >
+              <g clipPath="url(#clip0_1168_63046)">
+                <path
+                  d="M-1 11L5 5L11 11M11 -1L4.99886 5L-1 -1"
+                  stroke="#9B9BA1"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_1168_63046">
+                  <rect width="10" height="10" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          </button>
 
-        {/* body */}
-        <div className="flex flex-col px-4 pt-5 pb-[18px] gap-[10px]">
-          <div className="">
-            <div className=" flex items-center justify-center gap-2">
-              <div className="flex items-center justify-center">
-                <div className="">{trait.icon("w-[46px] h-[47px]")}</div>
+          {/* body */}
+          <div className="flex flex-col px-4 pt-5 pb-[18px] gap-[10px]">
+            <div>
+              <div className="flex items-center justify-center gap-2">
+                <div className="flex items-center justify-center">
+                  <div>{trait.icon("w-[46px] h-[47px]")}</div>
+                </div>
+                <div className="text-title1 text-core-1">
+                  {trait.badge}
+                </div>
               </div>
-              <div className="text-title1 text-core-1">
-                {trait.badge}
+            </div>
+
+            {/* top summary bar */}
+            <div className="bg-white rounded-[13px] px-[6px] py-3">
+              <div
+                className={[
+                  "grid",
+                  cols === 3 ? "grid-cols-3" : "grid-cols-4",
+                  "items-stretch",
+                ].join(" ")}
+              >
+                {trait.topSummary.map((item, i) => (
+                  <div
+                    key={i}
+                    className={[
+                      "text-center px-[1px]",
+                      i === 0 ? "" : "border-l border-[#E8E8FB]",
+                    ].join(" ")}
+                  >
+                    <div className="text-callout2 text-core-1">
+                      {item.label}
+                    </div>
+                    <div className="mt-1 text-callout1 text-text-gray2 whitespace-pre-line">
+                      {isContentTrait
+                        ? item.value.replace(/,\s*/g, "\n")
+                        : item.value}
+                    </div>
+                  </div>
+                ))}
               </div>
             </div>
-          </div>
 
-          {/* top summary bar */}
-          <div className="bg-white rounded-[13px] px-[6px] py-3">
-            <div
-              className={[
-                "grid",
-                cols === 3 ? "grid-cols-3" : "grid-cols-4",
-                "items-stretch",
-              ].join(" ")}
-            >
-              {trait.topSummary.map((item, i) => (
-                <div
-                  key={i}
-                  className={[
-                    "text-center px-[1px]",
-                    i === 0 ? "" : "border-l border-[#E8E8FB]",
-                  ].join(" ")}
-                >
-                  <div className="text-callout2 text-core-1">
-                    {item.label}
+            {/* sections */}
+            <div className="space-y-[14px] ml-2.5">
+              {trait.sections.map((section, i) => (
+                <div key={i}>
+                  <div className="text-callout1 text-core-1">
+                    {section.title}
                   </div>
-                  <div className="mt-1 text-callout1 text-text-gray2">
-                    {item.value}
+                  <div className="text-callout1 text-text-gray1">
+                    {isContentTrait
+                      ? section.items.map((item, idx) => (
+                          <span key={`${item}-${idx}`} className="block">
+                            {item}
+                          </span>
+                        ))
+                      : section.items.join(", ")}
                   </div>
                 </div>
               ))}
             </div>
           </div>
-
-          {/* sections */}
-          <div className="space-y-[14px] ml-2.5">
-            {trait.sections.map((section, i) => (
-              <div key={i}>
-                <div className="text-callout1 text-core-1">
-                  {section.title}
-                </div>
-                <div className="text-callout1 text-text-gray1">
-                  {section.items.join(", ")}
-                </div>
-              </div>
-            ))}
-          </div>
         </div>
       </div>
     </div>

diff --git a/app/routes/mypage/edit/edit-content.tsx b/app/routes/mypage/edit/edit-content.tsx
@@ -194,7 +194,7 @@ export default function MyPageEdit() {
   return (
     <div className="min-h-full w-full flex flex-col ">
       <div className="w-full flex flex-col flex-1">
-        <div className="h-[60px]">
+        <div className="min-h-[60px]">
           <NavigationHeader
             title="회원정보 설정"
             onBack={() => navigate(-1)}

diff --git a/app/routes/mypage/likes/likes-content.tsx b/app/routes/mypage/likes/likes-content.tsx
@@ -312,7 +312,7 @@ export default function MyPageLikes() {
   return (
     <div className="h-screen-full bg-gradient-to-b from-[#F6F6FF] via-[#F3F3FA] to-[#E8E8FB]">
       <div className="w-full shadow-2xl flex flex-col">
-        <div className="h-[60px]">
+        <div className="min-h-[60px]">
           <NavigationHeader
             title="내 찜"
             titleClassName="font-semibold"

diff --git a/app/routes/mypage/notification/marketing/marketing-content.tsx b/app/routes/mypage/notification/marketing/marketing-content.tsx
@@ -29,7 +29,7 @@ export default function MarketingDetail() {
   return (
     <div className="h-screen-full bg-[#F3F4F8]">
       <div className="w-full bg-white shadow-2xl flex flex-col">
-        <div className="h-[60px]">
+        <div className="min-h-[60px]">
           <NavigationHeader
             title="마케팅 활용 및 광고성 정보 수신 동의"
             onBack={() => navigate(-1)}

diff --git a/app/routes/mypage/notification/notifications-content.tsx b/app/routes/mypage/notification/notifications-content.tsx
@@ -93,7 +93,7 @@ export default function MyPageNotifications() {
     <div className="h-screen-full bg-[#F3F4F8]">
       <div className="w-full bg-white shadow-2xl flex flex-col">
         <div className="pt-[env(safe-area-inset-top)]">
-          <div className="h-[60px]">
+          <div className="min-h-[60px]">
             <NavigationHeader title="알림 설정" onBack={() => navigate(-1)} />
           </div>
         </div>

diff --git a/app/routes/mypage/privacy/privacy-content.tsx b/app/routes/mypage/privacy/privacy-content.tsx
@@ -68,7 +68,7 @@ export default function MyPagePrivacy() {
   return (
     <div className="h-screen-full bg-[#F3F4F8]">
       <div className="w-full bg-white shadow-2xl flex flex-col">
-        <div className="h-[60px]">
+        <div className="min-h-[60px]">
           <NavigationHeader title="개인정보 처리방침" onBack={() => navigate(-1)} />
         </div>
 

diff --git a/app/routes/mypage/profileCard/profileCard-content.tsx b/app/routes/mypage/profileCard/profileCard-content.tsx
@@ -242,7 +242,7 @@ export default function ProfileCard() {
     <div className="h-screen-full">
       <div className="w-full bg-white shadow-2xl flex flex-col">
         {/* header */}
-        <div className="h-[60px]">
+        <div className="min-h-[60px]">
           <NavigationHeader
             title={"내 프로필 카드"}
             onBack={() => history.back()}

diff --git a/app/routes/mypage/terms/terms-content.tsx b/app/routes/mypage/terms/terms-content.tsx
@@ -53,7 +53,7 @@ export default function MyPageTerms() {
   return (
     <div className="h-screen-full bg-[#F3F4F8]">
       <div className="w-full bg-white shadow-2xl flex flex-col">
-        <div className="h-[60px]">
+        <div className="min-h-[60px]">
           <NavigationHeader title="서비스 이용 약관" onBack={() => navigate(-1)} />
         </div>
 

diff --git a/app/routes/mypage/traits/traits-content.tsx b/app/routes/mypage/traits/traits-content.tsx
@@ -559,7 +559,7 @@ export default function TraitsPage() {
   return (
     <div className="h-screen-full bg-[#404252]">
       <div className="w-full bg-white shadow-2xl flex flex-col">
-        <div className="h-[60px]">
+        <div className="min-h-[60px]">
           <NavigationHeader title="내 특성" onBack={() => navigate(-1)} />
         </div>
 

diff --git a/app/routes/notification/notification-content.tsx b/app/routes/notification/notification-content.tsx
@@ -46,7 +46,7 @@

    useEffect(() => {
        fetchNotificationsData();
    }, [activeTab]);

    // 전체 읽기 핸들러
    const handleReadAll = async () => {
@@ -96,7 +96,7 @@
     };
     return (
         <div className="h-screen-full bg-grad-auth ">
-            <div className="h-[60px]">
+            <div className="min-h-[60px]">
                 <NavigationHeader title="알림" onBack={() => navigate(-1)} />
             </div>
 
@@ -162,4 +162,4 @@
             </div>
         </div>
     );
-}
+}