feat: 제안 보기 UI 레이아웃 및 모달 버튼 스타일 수정

src/components/common/Modal.tsx

@@ -0,0 +1,23 @@
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export default function Modal({ isOpen, onClose, children }: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center px-6">
+      {/* 배경 레이어 */}
+      <div 
+        className="absolute inset-0 bg-black/30" 
+        onClick={onClose} 
+      />
+      {/* 모달 본체 */}
+      <div className="relative w-full max-w-[327px] bg-white rounded-[10px] p-6 shadow-xl animate-in fade-in zoom-in duration-200">
+        {children}
+      </div>
+    </div>
+  );
+}

src/globals.css

@@ -36,6 +36,7 @@ html {
   --color-core-3: #b7b7f3;
   --color-core-50: #6666e580;
   --color-core-70: #B7B7F3B2;
+  --color-status-review: #A7B8FC; 
   ;
 
   /* State 컬러 */

src/routes/_main/_business/components/CampaignBrandCard.tsx

@@ -13,6 +13,7 @@ export default function CampaignBrandCard({
   statusText = "보낸 제안",
   roomId = "123" // 예시 ID 
 }: CampaignBrandCardProps) {
+  const isReviewing = statusText === "검토 중";
   return (
     <section className="bg-bg-w p-5 flex flex-col gap-4 -mx-4 -mt-6">
       {/* 상단 브랜드 정보 */}
@@ -42,7 +43,9 @@ export default function CampaignBrandCard({
             <span className="text-title5 text-core-1">매칭률</span>
             <span className="text-title6 text-core-1">99%</span>
           </div>
-          <span className="text-callout1 text-core-1 mt-3">{statusText}</span>
+          <span className={`text-callout1 mt-3 ${isReviewing ? "text-status-review" : "text-core-1"}`}>
+        {statusText}
+      </span>
         </div>
       </div>
 

src/routes/_main/_business/components/CampaignCard.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from "@tanstack/react-router";
 import BrandLogo from "../../../../assets/brand-logo.png";
 import ArrowRight from "../../../../assets/icon/arrow-right.svg";
 import SearchIcon from "../../../../assets/icon/search.svg";
@@ -20,7 +21,7 @@ export default function CampaignCard({
   logo,
   showButton = true,
 }: CampaignCardProps) {
-  const BUTTON_WIDTH = '280px';
+  const navigate = useNavigate();
 
   // 로고 컴포넌트
   const Logo = (
@@ -35,10 +36,7 @@ export default function CampaignCard({
 
   return (
     <Card image={Logo}>
-      <div
-        className="flex flex-col h-[72px] justify-between"
-        style={{ width: BUTTON_WIDTH }}
-      >
+      <div className="flex flex-col flex-1 gap-2 min-w-0">
         {/* 브랜드 + 제목/날짜 */}
         <div className="flex flex-col w-full">
           <div className="flex items-center gap-1">
@@ -51,22 +49,29 @@ export default function CampaignCard({
               {title}
             </p>
             <div className="flex flex-col items-end text-[10px] text-text-gray3 leading-tight ml-2 flex-shrink-0">
-              <span>{startDate}.25</span>
-              <span>{endDate}.25</span>
+              <span>{startDate}</span>
+              <span>{endDate}</span>
             </div>
           </div>
         </div>
 
         {/* 캠페인 보기 버튼 */}
         {showButton && (
           <button
-            className="relative flex items-center justify-center bg-[#EBEEFB] rounded-[6px] transition-colors hover:bg-[#DEE2F5]"
-            style={{ width: BUTTON_WIDTH, height: '50px' }}
+          onClick={() => navigate({ to: "/campaign" })}
+            className="
+              flex items-center justify-center 
+              w-full max-w-[221px] h-[30px] 
+              gap-2 px-4 py-[5px] 
+              bg-[#EBEEFB] rounded-[6px] 
+              transition-colors hover:bg-[#DEE2F5]
+              mt-1
+            "
           >
             <img
               src={SearchIcon}
               alt="돋보기"
-              className="absolute left-[12px] w-3.5 h-3.5 object-contain"
+              className="w-3.5 h-3.5 object-contain"
             />
             <span className="text-[13px] font-medium text-text-black">
               캠페인 보기

src/routes/_main/_business/components/MonthlyCalendar.tsx

@@ -53,15 +53,15 @@ export default function MonthlyCalendar() {
         </div>
 
         {/* 일정 바 */}
-        <div className="absolute top-[85px] left-0 w-full pointer-events-none">
+        <div className="absolute top-[200px] left-0 w-full pointer-events-none">
           {/* 비플레인 */}
           <div
             className="absolute flex items-center justify-center text-[11px] text-white shadow-sm bg-grad-1"
             style={{
-              left: "28.57%",
+              left: "16.57%",
               width: "57.14%",
-              height: "20px",
-              borderRadius: "20px",
+              height: "22px",
+              borderRadius: "11px",
               top: "0px",
             }}
           >
@@ -72,11 +72,11 @@ export default function MonthlyCalendar() {
           <div
             className="absolute flex items-center justify-center text-[11px] text-white shadow-sm bg-grad-2"
             style={{
-              left: "57.14%",
-              width: "42.85%",
-              height: "20px",
-              borderRadius: "20px",
-              top: "25px",
+              left: "48.14%",
+              width: "48.85%",
+              height: "22px",
+              borderRadius: "11px",
+              top: "26px",
             }}
           >
             라운드랩

src/routes/_main/_business/components/WeeklyCalendar.tsx

@@ -4,42 +4,61 @@ export default function WeeklyCalendar() {
   const dates = [6, 7, 8, 9, 10, 11, 12];
 
   return (
-    <div className="flex flex-col gap-3 p-4 bg-white rounded-xl shadow-sm">
+    <div className="flex flex-col gap-3 p-4 bg-white rounded-xl shadow-sm relative">
       {/* 요일 */}
       <div className="grid grid-cols-7 text-center text-callout2 text-text-gray3">
         {WEEK_DAYS.map((day) => (
           <div key={day}>{day}</div>
         ))}
       </div>
 
-      {/* 날짜 */}
-      <div className="grid grid-cols-7 gap-y-2 text-center">
+      {/* 날짜 그리드 */}
+      <div className="grid grid-cols-7 text-center mb-10">
         {dates.map((date) => (
-          <div
-            key={date}
-            className={`flex items-center justify-center w-8 h-8 mx-auto rounded-full ${
-              date === 11
-                ? "bg-core-1 text-white"
-                : "text-text-gray3"
-            }`}
-          >
-            {date}
+          <div key={date} className="h-10 flex items-center justify-center">
+            <div
+              className={`flex items-center justify-center w-8 h-8 rounded-full text-[15px] ${
+                date === 11
+                  ? "bg-core-1 text-white"
+                  : "text-text-black"
+              }`}
+            >
+              {date}
+            </div>
           </div>
         ))}
       </div>
 
-      {/* 일정 */}
-      <div className="flex flex-col gap-2">
+      {/* 일정 바 컨테이너 */}
+      <div className="absolute top-[82px] left-4 right-4 pointer-events-none">
         {/* 비플레인 */}
-        <div className="w-3/4 py-1 text-center text-callout2 text-white rounded-full bg-grad-1">
+        <div
+          className="absolute flex items-center justify-center text-[11px] text-white shadow-sm bg-grad-1"
+          style={{
+            left: "14.28%", 
+            width: "57.14%", 
+            height: "22px",
+            borderRadius: "11px",
+            top: "0px",
+          }}
+        >
           비플레인
         </div>
 
         {/* 라운드랩 */}
-        <div className="w-2/3 py-1 text-center text-callout2 text-white rounded-full bg-grad-2">
+        <div
+          className="absolute flex items-center justify-center text-[11px] text-white shadow-sm bg-grad-2"
+          style={{
+            left: "42.85%", 
+            width: "57.14%",
+            height: "22px",
+            borderRadius: "11px",
+            top: "26px", 
+          }}
+        >
           라운드랩
         </div>
       </div>
     </div>
   );
-}
+}