diff --git a/app/data/brand.ts b/app/data/brand.ts
index 0f5afbc..3a0e344 100644
--- a/app/data/brand.ts
+++ b/app/data/brand.ts
@@ -20,3 +20,20 @@ export const BRAND_DATA: Brand[] = [
     { id: 5, name: "디스이즈네버댓", matchRate: 88, tags: ["스트릿", "캐주얼", "트렌디"], isLiked: true, category: "FASHION" },
     { id: 6, name: "커버낫", matchRate: 82, tags: ["아메리칸 캐주얼", "빈티지", "유니섹스"], isLiked: false, category: "FASHION" },
 ];
+
+// 캠페인 보기에서 사용하는 브랜드
+export interface BrandDetail {
+  brandName: string;
+  brandTag: string[];
+  brandDescription: string;
+  brandMatchingRatio: number;
+  brandIsLiked: boolean;
+  brandCategory: string[];
+}
+
+export interface BrandResponse {
+    isSuccess: boolean;
+    code: string;
+    message: string;
+    result: BrandDetail[];
+}
diff --git a/app/routes/business/calendar/calendar-content.tsx b/app/routes/business/calendar/calendar-content.tsx
index e8b9930..d1f8722 100644
--- a/app/routes/business/calendar/calendar-content.tsx
+++ b/app/routes/business/calendar/calendar-content.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { getMyCollaborations } from "./api/calendar";
 import type { CampaignCollaboration } from "./api/calendar";
 import FilterBottomSheet from "../components/FilterBottomSheet";
@@ -13,6 +14,7 @@ import EmptyState from "../components/EmptyState";
 
 
 export default function CalendarContent() {
+  const navigate = useNavigate();
   const [mainTab, setMainTab] = useState<"collaboration" | "matching">("collaboration");
   const [activeTab, setActiveTab] = useState<"thisMonth" | "today">("thisMonth");
   const [matchingSubTab, setMatchingSubTab] = useState<"sent" | "received">("sent");
@@ -54,6 +56,10 @@ export default function CalendarContent() {
     return item.startDate.includes(currentMonthStr) || item.endDate.includes(currentMonthStr);
   });
 
+  const handleCardClick = (type: "sent" | "received") => {
+    navigate(`/business/proposal?type=${type}`);
+  };
+
   return (
     <div className="flex flex-col w-full min-h-screen bg-bluegray-1">
       {/* 탭 네비게이션 */}
@@ -156,17 +162,41 @@ export default function CalendarContent() {
                 <div className="flex flex-col gap-4">
                   {matchingSubTab === "sent" ? (
                     <>
-                      <MatchingCard brand="라운드랩" status="매칭" date="12.23.25" actionLabel="제안 보기" />
-                      <MatchingCard brand="비플레인" status="검토 중" date="12.23.25" actionLabel="제안 보기" />
-                      <MatchingCard brand="땡큐파머" status="검토 중" date="12.23.25" actionLabel="제안 보기" />
-                      <MatchingCard brand="이즈트리" status="거절" date="12.23.25" actionLabel="거절 사유 보기" />
+                      <MatchingCard 
+                        brand="라운드랩" status="매칭" date="12.23.25" actionLabel="제안 보기" 
+                        onClick={() => handleCardClick("sent")} // 4. 핸들러 연결
+                      />
+                      <MatchingCard 
+                        brand="비플레인" status="검토 중" date="12.23.25" actionLabel="제안 보기" 
+                        onClick={() => handleCardClick("sent")}
+                      />
+                      <MatchingCard 
+                        brand="땡큐파머" status="검토 중" date="12.23.25" actionLabel="제안 보기" 
+                        onClick={() => handleCardClick("sent")}
+                      />
+                      <MatchingCard 
+                        brand="이즈트리" status="거절" date="12.23.25" actionLabel="거절 사유 보기" 
+                        onClick={() => handleCardClick("sent")}
+                      />
                     </>
                   ) : (
                     <>
-                      <MatchingCard brand="라운드랩" status="매칭" date="12.23.25" actionLabel="제안 보기" />
-                      <MatchingCard brand="비플레인" status="검토 중" date="12.23.25" actionLabel="제안 보기" />
-                      <MatchingCard brand="그레이스유" status="검토 중" date="12.23.25" actionLabel="제안 보기" />
-                      <MatchingCard brand="이즈트리" status="거절" date="12.23.25" actionLabel="거절 사유 보기" />
+                      <MatchingCard 
+                        brand="라운드랩" status="매칭" date="12.23.25" actionLabel="제안 보기" 
+                        onClick={() => handleCardClick("received")} // 4. 핸들러 연결
+                      />
+                      <MatchingCard 
+                        brand="비플레인" status="검토 중" date="12.23.25" actionLabel="제안 보기" 
+                        onClick={() => handleCardClick("received")}
+                      />
+                      <MatchingCard 
+                        brand="그레이스유" status="검토 중" date="12.23.25" actionLabel="제안 보기" 
+                        onClick={() => handleCardClick("received")}
+                      />
+                      <MatchingCard 
+                        brand="이즈트리" status="거절" date="12.23.25" actionLabel="거절 사유 보기" 
+                        onClick={() => handleCardClick("received")}
+                      />
                     </>
                   )}
                 </div>
diff --git a/app/routes/business/components/CampaignBrandCard.tsx b/app/routes/business/components/CampaignBrandCard.tsx
index aac6572..aedd1ce 100644
--- a/app/routes/business/components/CampaignBrandCard.tsx
+++ b/app/routes/business/components/CampaignBrandCard.tsx
@@ -3,13 +3,18 @@ import chatIcon from "../../../assets/chat-icon.svg";
 import arrowRightIcon from "../../../assets/icon/arrow-right.svg";
 
 interface CampaignBrandCardProps {
-  showChatSection?: boolean; // 채팅 섹션 표시 여부
+  showChatSection?: boolean; 
   statusText?: string;      // '보낸 제안' 또는 '검토 중'
+  brandName?: string;     
+  brandTags?: string[];   
+
 }
 
 export default function CampaignBrandCard({ 
   showChatSection = true, 
-  statusText = "보낸 제안" 
+  statusText = "보낸 제안",
+  brandName,
+  brandTags
 }: CampaignBrandCardProps) {
   return (
     <section className="bg-bg-w p-5 flex flex-col gap-4 -mx-4 -mt-6">
@@ -27,11 +32,15 @@ export default function CampaignBrandCard({
 
           <div className="flex flex-col gap-1">
             <div className="flex items-center gap-1">
-              <h2 className="text-title1 text-text-black">비플레인</h2>
+              <h2 className="text-title1 text-text-black">
+                {brandName || "브랜드명"}
+              </h2>
               <img src={arrowRightIcon} alt="arrow"/>
             </div>
             <p className="text-callout1 text-text-gray3 mt-3">
-              #저자극 #천연재료 #민감성피부
+              {brandTags && brandTags.length > 0 
+                ? brandTags.map(tag => `#${tag}`).join(" ") 
+                : "#태그정보없음"}
             </p>
           </div>
         </div>
diff --git a/app/routes/business/components/MatchingCard.tsx b/app/routes/business/components/MatchingCard.tsx
index 97fb2fa..62868e5 100644
--- a/app/routes/business/components/MatchingCard.tsx
+++ b/app/routes/business/components/MatchingCard.tsx
@@ -6,6 +6,7 @@ interface MatchingCardProps {
   status: "매칭" | "검토 중" | "거절";
   date: string;
   actionLabel: string;
+  onClick?: () => void;
 }
 
 export default function MatchingCard({
@@ -13,6 +14,7 @@ export default function MatchingCard({
   status,
   date,
   actionLabel,
+  onClick,
 }: MatchingCardProps) {
   // 상태에 따른 텍스트 컬러
   const getStatusStyle = () => {
@@ -53,7 +55,10 @@ export default function MatchingCard({
 
         <div className="flex gap-2 items-center">
           {/* 제안 보기 버튼 */}
-          <button className="flex-2 py-2 flex items-center justify-center gap-1.5 bg-bluegray-2 rounded-lg transition-opacity hover:opacity-90">
+          <button 
+            onClick={onClick} 
+            className="flex-2 py-2 flex items-center justify-center gap-1.5 bg-bluegray-2 rounded-lg transition-opacity hover:opacity-90 active:scale-[0.98]"
+          >
             <img src={searchIcon} alt="조회" className="w-3.5 h-3.5" />
             <span className="text-title7 text-text-gray2">{actionLabel}</span>
           </button>
diff --git a/app/routes/business/proposal/api/proposal.ts b/app/routes/business/proposal/api/proposal.ts
new file mode 100644
index 0000000..cfca5e8
--- /dev/null
+++ b/app/routes/business/proposal/api/proposal.ts
@@ -0,0 +1,92 @@
+import axios from "axios";
+import { tokenStorage } from "../../../../lib/token";
+import type { BrandDetail } from "../../../../data/brand";
+
+// 1. 응답 데이터의 공통 포맷 정의 (isSuccess 등을 포함)
+export interface ApiResponse<T> {
+  isSuccess: boolean;
+  code: string;
+  message: string;
+  result: T;
+}
+
+export interface ProposalDetail {
+  proposalId: number;
+  brandId: number;
+  creatorId: number;
+  title: string;
+  description: string;
+  rewardAmount: number;
+  productId: number;
+  startDate: string;
+  endDate: string;
+  status: string;
+  refusalReason: string | null;
+  contentTags: {
+    formats: { id: number; name: string }[];
+    categories: { id: number; name: string }[];
+    tones: { id: number; name: string }[];
+    involvements: { id: number; name: string }[];
+    usageRanges: { id: number; name: string }[];
+  };
+}
+
+export const getProposalDetail = async (proposalId: string): Promise<ProposalDetail> => {
+  const BASE_URL = "https://api.realmatch.co.kr";
+
+  // 1. tokenStorage 유틸을 사용하여 안전하게 토큰을 가져옵니다.
+  const token = tokenStorage.getAccessToken();
+
+  console.log("현재 보관된 토큰:", token);
+  console.log("토큰 만료 여부:", tokenStorage.isTokenExpired());
+  console.log("현재 사용자 ID:", tokenStorage.getUserId());
+  console.log("현재 사용자 역할(Role):", tokenStorage.getRole());
+
+  try {
+    const response = await axios.get(`${BASE_URL}/api/v1/campaigns/proposal/${proposalId}`, {
+      headers: {
+        // 2. 토큰이 있을 때만 Authorization 헤더를 추가합니다.
+        ...(token && { Authorization: `Bearer ${token}` }),
+        "accept": "*/*"
+      }
+    });
+
+    if (response.data.isSuccess) {
+      return response.data.result;
+    }
+
+    throw new Error(response.data.message || "데이터 로드 실패");
+  } catch (error) { // : any 삭제
+    if (axios.isAxiosError(error)) { // axios 에러인지 확인하는 가드 추가 (권장)
+      if (error.response?.status === 401) {
+        console.error("401 에러: 토큰이 유효하지 않거나 로그인이 필요합니다.");
+      }
+    }
+    throw error;
+  }
+};
+
+// 브랜드 상세 정보를 가져오는 API 함수 예시
+export const getBrandDetail = async (brandId: number | string): Promise<BrandDetail> => {
+  const BASE_URL = "https://api.realmatch.co.kr";
+  const token = tokenStorage.getAccessToken();
+
+  try {
+    const response = await axios.get(`${BASE_URL}/api/v1/brands/${brandId}`, {
+      headers: {
+        ...(token && { Authorization: `Bearer ${token}` }),
+        "accept": "*/*"
+      }
+    });
+
+    if (response.data.isSuccess) {
+      // 스웨거 응답 구조상 result가 배열이므로 첫 번째 요소를 반환
+      return response.data.result[0];
+    }
+
+    throw new Error(response.data.message || "브랜드 정보 로드 실패");
+  } catch (error) { // : any 삭제
+    console.error("브랜드 상세 조회 실패:", error);
+    throw error;
+  }
+};
\ No newline at end of file
diff --git a/app/routes/business/proposal/sent-proposal-content.tsx b/app/routes/business/proposal/sent-proposal-content.tsx
index 0a1975b..9ad2c7b 100644
--- a/app/routes/business/proposal/sent-proposal-content.tsx
+++ b/app/routes/business/proposal/sent-proposal-content.tsx
@@ -1,4 +1,7 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { getProposalDetail, getBrandDetail, type ProposalDetail} from "./api/proposal"; // 경로 확인 필요
+import type { BrandDetail } from "../../../data/brand";
 
 import Header from "../../../components/layout/Header";
 import CampaignBrandCard from "../components/CampaignBrandCard";
@@ -11,45 +14,85 @@ import arrowPurpleIcon from "../../../assets/arrow-purple.svg";
 import profileIcon from "../../../assets/icon-profile.svg";
 
 export default function ProposalContent() {
+    const [searchParams] = useSearchParams();
     const [isContentOpen, setIsContentOpen] = useState(false);
 
+    // 데이터 상태 관리
+    const [data, setData] = useState<ProposalDetail | null>(null);
+    const [brand, setBrand] = useState<BrandDetail | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    const proposalId = searchParams.get("proposalId") || "1";
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setIsLoading(true);
+                const proposalResult = await getProposalDetail(proposalId);
+                setData(proposalResult);
+
+                // 브랜드 상세 정보
+                if (proposalResult.brandId) {
+                    const brandResult = await getBrandDetail(proposalResult.brandId);
+                    setBrand(brandResult);
+                }
+
+            } catch (error) {
+                console.error("제안 상세 조회 실패:", error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchData();
+    }, [proposalId]);
+
+    if (isLoading) return <div className="p-10 text-center">로딩 중...</div>;
+    if (!data) return <div className="p-10 text-center">데이터를 찾을 수 없습니다.</div>;
+
+    // 태그 배열을 문자열로 변환하는 헬퍼 함수
+    const getTagNames = (tags: { name: string }[]) => tags.map(t => t.name).join(", ");
+
     return (
         <div className="flex flex-col w-full min-h-screen bg-bg-w font-pretendard">
             <Header title="제안 보기" />
 
             <main className="flex flex-col pb-24">
-                {/* 1. 상단 섹션: 브랜드 카드 및 제안 프로필 */}
+                {/* 브랜드 카드 및 제안 프로필 */}
                 <div className="px-4 py-6">
                     <CampaignBrandCard
                         showChatSection={false}
-                        statusText="검토 중"
+                        statusText={data.status}
+                        brandName={brand?.brandName}
+                        brandTags={brand?.brandTag}
                     />
 
                     <div className="flex flex-col gap-4">
-                        <h2 className="text-title1 text-text-black">신규 캠페인</h2>
+                        <h2 className="text-title1 text-text-black">{data.title}</h2>
 
                         <div className="flex flex-col gap-2">
                             <p className="text-title3 text-text-gray2">제안 프로필</p>
-                            
+
                             <div className="w-full p-4 bg-bluegray-2 rounded-2xl flex justify-between items-center border border-core-70">
                                 <div className="flex items-center gap-3">
                                     <div className="flex items-center justify-center">
                                         <img src={profileIcon} alt="profile" />
                                     </div>
-                                    <span className="text-callout1 text-text-black">@ivveeee</span>
+                                    <span className="text-callout1 text-text-black">
+                                        @{data.creatorId || "unknown"}
+                                    </span>
                                 </div>
-                                <img src={arrowPurpleIcon} alt="arrow"/>
+                                <img src={arrowPurpleIcon} alt="arrow" />
                             </div>
                         </div>
                     </div>
                 </div>
 
-                {/* 2. 상세 정보 섹션 */}
+                {/* 상세 정보 섹션 */}
                 <div className="bg-bluegray-1 px-4 py-8 flex flex-col gap-6">
                     {/* 캠페인명 */}
                     <CampaignInfoGroup label="캠페인명">
                         <div className="w-full p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1 text-text-gray1">
-                            비플레인 클렌징 및 세럼 리뷰 콘텐츠
+                            {data.title}
                         </div>
                     </CampaignInfoGroup>
 
@@ -70,8 +113,7 @@ export default function ProposalContent() {
                             <div className="flex flex-col gap-2">
                                 <p className="text-caption2 text-text-gray3">설명</p>
                                 <div className="w-full p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1 leading-relaxed text-text-gray1">
-                                    안녕하세요 크리에이터 비비 입니다! 비플레인의 가치가 제 채널에서 소개하는
-                                    뷰티 콘텐츠와 잘 맞닿아 있다고 생각되어 협찬을 제안드립니다.
+                                    {data.description}
                                 </div>
                             </div>
 
@@ -79,12 +121,12 @@ export default function ProposalContent() {
                             {isContentOpen && (
                                 <div className="grid grid-cols-2 gap-4 animate-slide-up">
                                     <div className="col-span-2">
-                                        <ContentItem label="형식" value="인스타그램 릴스" />
+                                        <ContentItem label="형식" value={getTagNames(data.contentTags.formats)} />
                                     </div>
-                                    <ContentItem label="종류" value="겟레디윗미, 스토리" />
-                                    <ContentItem label="톤" value="수다적인, 일상적인" />
-                                    <ContentItem label="관여도" value="가이드만 제공" />
-                                    <ContentItem label="활용 범위" value="크리에이터 1차 활용" />
+                                    <ContentItem label="종류" value={getTagNames(data.contentTags.categories)} />
+                                    <ContentItem label="톤" value={getTagNames(data.contentTags.tones)} />
+                                    <ContentItem label="관여도" value={getTagNames(data.contentTags.involvements)} />
+                                    <ContentItem label="활용 범위" value={getTagNames(data.contentTags.usageRanges)} />
                                 </div>
                             )}
                         </div>
@@ -94,14 +136,14 @@ export default function ProposalContent() {
                     <div className="grid grid-cols-2 gap-4">
                         <CampaignInfoGroup label="협찬품">
                             <div className="w-full p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1 flex justify-between items-center text-text-gray1">
-                                <span className="truncate">글로우 크림 1개</span>
+                                <span className="truncate">상품 ID: {data.productId}</span>
                                 <img src={arrowRightIcon} alt="arrow" className="w-4 h-4 opacity-30" />
                             </div>
                         </CampaignInfoGroup>
 
                         <CampaignInfoGroup label="원고료">
                             <div className="w-full p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1 flex justify-between items-center text-text-gray1">
-                                200,000 <span className="text-text-black">원</span>
+                                {data.rewardAmount.toLocaleString()} <span className="text-text-black">원</span>
                             </div>
                         </CampaignInfoGroup>
                     </div>
@@ -110,11 +152,11 @@ export default function ProposalContent() {
                     <CampaignInfoGroup label="제작 기간">
                         <div className="flex items-center gap-2 text-text-gray1">
                             <div className="flex-1 p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1">
-                                2025년 1월 20일
+                                {(data?.startDate || "").replace(/-/g, '. ')}
                             </div>
                             <span className="text-text-gray3">~</span>
                             <div className="flex-1 p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1">
-                                2025년 1월 30일
+                                {(data?.endDate || "").replace(/-/g, '. ')}
                             </div>
                         </div>
                     </CampaignInfoGroup>