From 37b38652ad3e844cec7400e0cdc7058319df6051 Mon Sep 17 00:00:00 2001
From: kirinkiri <k.melissa0520@gmail.com>
Date: Sat, 22 Feb 2025 19:13:30 +0900
Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=EB=B3=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyPlans/Cards/PlanCard.tsx     | 29 ++++++--
 .../MyPlans/Cards/QuotationCard.tsx           | 25 ++++---
 src/components/MyPlans/QuotationCardList.tsx  | 17 ++++-
 .../myreview-manage/completed-trip/index.tsx  | 34 +++++----
 .../myreview-manage/reviewable-trip/index.tsx |  2 +-
 .../[planId]/[quotationId].tsx                | 73 +++++++++++++------
 src/services/quotationServiceDreamer.ts       | 19 ++++-
 7 files changed, 138 insertions(+), 61 deletions(-)

diff --git a/src/components/MyPlans/Cards/PlanCard.tsx b/src/components/MyPlans/Cards/PlanCard.tsx
index 06b1d5a0..e0ab800c 100644
--- a/src/components/MyPlans/Cards/PlanCard.tsx
+++ b/src/components/MyPlans/Cards/PlanCard.tsx
@@ -9,10 +9,13 @@ interface PlanData {
 
 export default function PlanCard({ planDetail }: PlanData) {
   return (
-    <div className="flex flex-col gap-y-[32px] mobile:gap-y-4">
-      <div className="w-fill border-color semibol flex flex-col gap-y-1 rounded-2xl border-[1px] bg-color-background-200 px-10 py-8 text-xl mobile:px-[16px] mobile:py-[16px] mobile-tablet:text-md">
+    <div className="flex flex-col gap-y-8 mobile:gap-y-4">
+      <div className="w-fill border-color semibol flex flex-col gap-y-1 rounded-2xl border-[1px] bg-color-background-200 px-10 py-8 text-xl mobile:px-4 mobile:py-4 mobile-tablet:text-md">
         <div className="flex">
-          <label className="w-[150px] text-color-gray-300" htmlFor="createdAt">
+          <label
+            className="w-40 flex-shrink-0 whitespace-nowrap text-color-gray-300 mobile-tablet:w-28"
+            htmlFor="createdAt"
+          >
             플랜요청일
           </label>
           <div className="text-color-black-400">
@@ -20,7 +23,10 @@ export default function PlanCard({ planDetail }: PlanData) {
           </div>
         </div>
         <div className="flex">
-          <label className="w-[150px] text-color-gray-300" htmlFor="tripType">
+          <label
+            className="w-40 flex-shrink-0 whitespace-nowrap text-color-gray-300 mobile-tablet:w-28"
+            htmlFor="tripType"
+          >
             여행 유형
           </label>
           <div className="text-nowrap text-color-black-400">
@@ -28,7 +34,10 @@ export default function PlanCard({ planDetail }: PlanData) {
           </div>
         </div>
         <div className="flex">
-          <label className="w-[150px] text-color-gray-300" htmlFor="tripDate">
+          <label
+            className="w-40 flex-shrink-0 whitespace-nowrap text-color-gray-300 mobile-tablet:w-28"
+            htmlFor="tripDate"
+          >
             여행 날짜
           </label>
           <div className="flex-1 flex-wrap text-color-black-400">
@@ -36,7 +45,10 @@ export default function PlanCard({ planDetail }: PlanData) {
           </div>
         </div>
         <div className="flex">
-          <label className="w-[150px] text-color-gray-300" htmlFor="serviceArea">
+          <label
+            className="w-40 flex-shrink-0 whitespace-nowrap text-color-gray-300 mobile-tablet:w-28"
+            htmlFor="serviceArea"
+          >
             여행지
           </label>
           <div className="text-color-black-400">
@@ -44,7 +56,10 @@ export default function PlanCard({ planDetail }: PlanData) {
           </div>
         </div>
         <div className="flex">
-          <label className="w-[150px] text-color-gray-300" htmlFor="details">
+          <label
+            className="w-40 flex-shrink-0 whitespace-nowrap text-color-gray-300 mobile-tablet:w-28"
+            htmlFor="details"
+          >
             세부 요청 사항
           </label>
           <div className="text-color-black-400">{planDetail ? planDetail.details : "-"}</div>
diff --git a/src/components/MyPlans/Cards/QuotationCard.tsx b/src/components/MyPlans/Cards/QuotationCard.tsx
index 0306f6fe..dcf45c13 100644
--- a/src/components/MyPlans/Cards/QuotationCard.tsx
+++ b/src/components/MyPlans/Cards/QuotationCard.tsx
@@ -7,6 +7,7 @@ import Link from "next/link";
 import { Plan } from "@/services/planService";
 import { formatToDetailedDate } from "@/utils/formatDate";
 import { QuotationServiceDreamer } from "@/services/quotationServiceDreamer";
+import { convertRegionToKorean } from "@/utils/formatRegion";
 
 interface MakerInfo {
   nickName: string;
@@ -47,7 +48,7 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
   }
 
   return (
-    <div className="mb-[32px] flex flex-col rounded-2xl bg-color-gray-50 px-6 py-7 shadow mobile-tablet:px-3 mobile-tablet:py-4">
+    <div className="mb-[32px] flex w-full flex-col rounded-2xl bg-color-gray-50 px-6 py-7 shadow mobile-tablet:px-3 mobile-tablet:py-4">
       <div className="justify-left flex items-center gap-[12px] mobile-tablet:mt-[6px]">
         {quotationDetail.isConfirmed !== false && (
           <Label labelType="CONFIRMED" customLabelContainerClass="rounded-lg" />
@@ -57,7 +58,7 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
           <Label labelType="REQUEST" customLabelContainerClass="rounded-lg" />
         )}
       </div>
-      <div className="border-color bg-body.bg-gray my-6 flex gap-6 rounded-md border-[1px] px-[18px] py-4 mobile-tablet:my-[14px] mobile-tablet:gap-3 mobile-tablet:px-[10px]">
+      <div className="border-color bg-body.bg-gray my-6 flex max-w-full gap-6 rounded-md border-[1px] px-[18px] py-4 mobile-tablet:my-[14px] mobile-tablet:gap-3 mobile-tablet:px-[10px]">
         <div className="flex h-20 w-20 flex-shrink-0 items-center mobile-tablet:h-[46px] mobile-tablet:w-[46px]">
           <Image
             src={`/assets/img_avatar${quotationDetail.maker.image.split("_")[1]}.svg`}
@@ -72,7 +73,7 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
             <p className="semibold text-xl mobile-tablet:text-lg">
               {quotationDetail.maker.nickName}
             </p>
-            <div className="flex content-center items-center gap-4 mobile-tablet:gap-1">
+            <div className="flex content-center items-center gap-3 mobile-tablet:gap-1">
               <div className="medium flex flex-shrink-0 items-center gap-[6px] text-lg mobile-tablet:gap-[5px] mobile-tablet:text-sm">
                 <Image
                   src={icon_active_star}
@@ -91,7 +92,7 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
                   className="flex items-center"
                 >
                   <div className="flex mobile-tablet:h-[14px] mobile-tablet:w-[14px]">
-                    <Image src={link} alt="링크이미지" width={30} height={30} />
+                    <Image src={link} alt="링크이미지" width={25} height={25} />
                   </div>
                   <p className="content-center text-color-gray-400">SNS</p>
                 </Link>
@@ -120,28 +121,28 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
       <div>
         <div className="flex items-center gap-[12px] mobile-tablet:grid mobile-tablet:grid-cols-3 mobile-tablet:gap-0">
           <div className="flex items-center gap-3 mobile-tablet:col-span-3 mobile-tablet:mb-3">
-            <p className="regular whitespace-nowrap rounded-[4px] bg-color-background-400 px-[6px] py-[4px] text-2lg text-color-gray-500 mobile-tablet:text-md">
+            <p className="medium whitespace-nowrap rounded-[4px] bg-color-background-400 px-[6px] py-[4px] text-2lg text-color-gray-500 mobile-tablet:text-md">
               여행일
             </p>
-            <p className="medium text-2lg text-color-black-300 mobile-tablet:text-md">
+            <p className="medium whitespace-nowrap text-2lg text-color-black-300 mobile-tablet:text-md">
               {formatToDetailedDate(planDetail.tripDate)}
             </p>
           </div>
           <p className="text-color-line-200 mobile-tablet:hidden">ㅣ</p>
           <div className="flex items-center gap-3">
-            <p className="whitespace-nowrap rounded-[4px] bg-color-background-400 px-[6px] py-[4px] text-2lg font-normal leading-[26px] text-color-gray-500 mobile-tablet:text-md">
+            <p className="medium whitespace-nowrap rounded-[4px] bg-color-background-400 px-[6px] py-[4px] text-2lg leading-[26px] text-color-gray-500 mobile-tablet:text-md">
               여행지
             </p>
-            <p className="whitespace-nowrap text-2lg font-medium leading-[26px] text-color-black-300 mobile-tablet:text-md">
-              {planDetail.serviceArea}
+            <p className="medium whitespace-nowrap text-2lg leading-[26px] text-color-black-300 mobile-tablet:text-md">
+              {convertRegionToKorean(planDetail.serviceArea)}
             </p>
           </div>
         </div>
         <div className="flex items-center justify-end gap-4 py-6">
-          <p className="medium text-2lg mobile-tablet:text-md">견적 금액</p>
+          <p className="medium text-2lg mobile-tablet:text-md">견적 코코넛</p>
           <p className="bold text-2xl mobile-tablet:text-2lg">
             {" "}
-            {quotationDetail.price.toLocaleString()}원
+            {quotationDetail.price.toLocaleString()} 개
           </p>
         </div>
       </div>
@@ -151,7 +152,7 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
             className="semibold w-full text-nowrap rounded-lg bg-color-blue-300 px-[32.5px] py-4 text-xl text-gray-50 mobile:text-md tablet:text-lg mobile-tablet:px-[16px] mobile-tablet:py-[11px]"
             onClick={handleConfirmButton}
           >
-            플랜 확정하기
+            견적 확정하기
           </button>
         )}
         <button className="semibold w-full text-nowrap rounded-lg border-[1px] border-solid border-color-blue-300 px-[32.5px] py-4 text-xl text-color-blue-300 mobile:text-md tablet:text-lg mobile-tablet:px-[16px] mobile-tablet:py-[11px]">
diff --git a/src/components/MyPlans/QuotationCardList.tsx b/src/components/MyPlans/QuotationCardList.tsx
index 951b04c6..85d56297 100644
--- a/src/components/MyPlans/QuotationCardList.tsx
+++ b/src/components/MyPlans/QuotationCardList.tsx
@@ -6,6 +6,7 @@ import { Plan } from "@/services/planService";
 import Link from "next/link";
 import Image from "next/image";
 import loading from "@public/assets/icon_loading.gif";
+import { useEffect, useState } from "react";
 
 interface PlanData {
   planDetail: Plan;
@@ -21,6 +22,20 @@ export default function QuotationCardList({ planDetail }: PlanData) {
     enabled: !!id,
   });
 
+  //1440px이하부터 타블렛 디자인으로 변경
+  const [isTablet, setIsTablet] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsTablet(window.innerWidth <= 1440);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center">
@@ -50,7 +65,7 @@ export default function QuotationCardList({ planDetail }: PlanData) {
 
   return (
     <>
-      <div className="items-center justify-center gap-4 pc:grid pc:grid-cols-2 mobile-tablet:flex mobile-tablet:flex-col">
+      <div className={`grid gap-4 ${isTablet ? "grid-cols-1" : "grid-cols-2"} pc:grid`}>
         {quotations.list.map((quotation) => (
           <QuotationCard key={quotation.id} quotationDetail={quotation} planDetail={planDetail} />
         ))}
diff --git a/src/pages/myreview-manage/completed-trip/index.tsx b/src/pages/myreview-manage/completed-trip/index.tsx
index b926323c..ebe28be6 100644
--- a/src/pages/myreview-manage/completed-trip/index.tsx
+++ b/src/pages/myreview-manage/completed-trip/index.tsx
@@ -37,6 +37,14 @@ export function CompletedTrip() {
   const totalPages = Math.ceil((data?.totalCount || 1) / pageSize);
   const planData = data?.list.flat() || [];
 
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <Image src={loading} alt="로딩 중" />
+      </div>
+    );
+  }
+
   return (
     <>
       <MyReviewNav />
@@ -50,22 +58,16 @@ export function CompletedTrip() {
               </p>
             </div>
           )}
-          {isLoading ? (
-            <div className="flex h-screen items-center justify-center">
-              <Image src={loading} alt="로딩 중" />
-            </div>
-          ) : (
-            <>
-              <MyCompletedTripList plans={planData} />
-              {totalPages > 1 && (
-                <Pagination
-                  currentPage={currentPage}
-                  totalPages={totalPages}
-                  onPageChange={handlePageChange}
-                />
-              )}
-            </>
-          )}
+          <>
+            <MyCompletedTripList plans={planData} />
+            {totalPages > 1 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={handlePageChange}
+              />
+            )}
+          </>
         </div>
       </Layout>
     </>
diff --git a/src/pages/myreview-manage/reviewable-trip/index.tsx b/src/pages/myreview-manage/reviewable-trip/index.tsx
index d37b1ff1..b1508dc8 100644
--- a/src/pages/myreview-manage/reviewable-trip/index.tsx
+++ b/src/pages/myreview-manage/reviewable-trip/index.tsx
@@ -37,7 +37,7 @@ export function ReviewableTrip() {
 
   const totalPages = Math.ceil((data?.totalCount || 1) / pageSize);
   const planData = data?.list.flat() || [];
-  console.log(planData);
+
   return (
     <>
       <MyReviewNav />
diff --git a/src/pages/mytrip-manage/quotationdetail-dreamer/[planId]/[quotationId].tsx b/src/pages/mytrip-manage/quotationdetail-dreamer/[planId]/[quotationId].tsx
index 268b5e49..b4d131b3 100644
--- a/src/pages/mytrip-manage/quotationdetail-dreamer/[planId]/[quotationId].tsx
+++ b/src/pages/mytrip-manage/quotationdetail-dreamer/[planId]/[quotationId].tsx
@@ -104,6 +104,20 @@ export function QuotationDetailDreamer() {
     }
   }, [planId, quotationId]);
 
+  //1440px이하부터 타블렛 디자인으로 변경
+  const [isTablet, setIsTablet] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsTablet(window.innerWidth <= 1440);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   async function handleConfirmButton() {
     try {
       if (quotationDetail)
@@ -203,7 +217,9 @@ export function QuotationDetailDreamer() {
     );
   }
   return (
-    <div className="relative flex w-full flex-col mobile:mb-20 tablet:mb-[72px]">
+    <div
+      className={`relative flex w-full flex-col mobile:mb-20 ${isTablet ? "mb-[72px]" : "mb-0"}`}
+    >
       <div className="semibold center flex py-8 text-2xl text-color-black-400 mobile-tablet:text-2lg">
         견적 상세
       </div>
@@ -212,7 +228,13 @@ export function QuotationDetailDreamer() {
           <div className="flex">
             <div className="flex w-full flex-col rounded-2xl bg-color-gray-50 px-6 py-7 shadow mobile-tablet:px-3 mobile-tablet:py-4">
               <div className="justify-left flex items-center gap-[12px] mobile-tablet:mt-[6px]">
+                {quotationDetail.isConfirmed !== false && (
+                  <Label labelType="CONFIRMED" customLabelContainerClass="rounded-lg" />
+                )}
                 <Label labelType={planDetail.tripType} customLabelContainerClass="rounded-lg" />
+                {quotationDetail.isAssigned !== false && (
+                  <Label labelType="REQUEST" customLabelContainerClass="rounded-lg" />
+                )}
               </div>
               <div className="border-color bg-body.bg-gray my-6 flex gap-6 rounded-md border-[1px] px-[18px] py-4 mobile-tablet:my-[14px] mobile-tablet:gap-3 mobile-tablet:px-[10px]">
                 <div className="flex h-20 w-20 items-center mobile-tablet:h-[46px] mobile-tablet:w-[46px]">
@@ -238,7 +260,7 @@ export function QuotationDetailDreamer() {
                         />
                         <p>{quotationDetail.maker.averageRating}</p>
                         <p className="text-color-gray-400">
-                          (${quotationDetail.maker.totalReviews})
+                          ({quotationDetail.maker.totalReviews})
                         </p>
                       </div>
                       <p className="mx-4 text-color-line-200 mobile-tablet:mx-1">ㅣ</p>
@@ -268,7 +290,7 @@ export function QuotationDetailDreamer() {
                       height={24}
                       className="color-red-200 h-[24px] w-[24px]"
                     />
-                    136
+                    <p>{quotationDetail.maker.totalFollows}</p>
                   </div>
                 </div>
               </div>
@@ -279,26 +301,28 @@ export function QuotationDetailDreamer() {
               </div>
             </div>
           </div>
-          <hr className="border-Line-100 my-10 mobile-tablet:my-6" />
+          <hr className={`border-Line-100 ${isTablet ? "my-6" : "my-10"}`} />
           <div className="flex flex-col gap-8 mobile-tablet:gap-4">
-            <p className="semibold text-2xl text-color-black-400 mobile-tablet:text-lg">견적가</p>
+            <p className="semibold text-2xl text-color-black-400 mobile-tablet:text-lg">
+              견적 코코넛
+            </p>
             <p className="bold text-3xl text-color-black-400 mobile-tablet:text-xl">
-              {quotationDetail.price} 원
+              {quotationDetail.price} 개
             </p>
           </div>
-          <hr className="border-Line-100 my-10 mobile-tablet:my-6" />
-          <div className="flex flex-col gap-[22px] pc:hidden">
+          <hr className={`border-Line-100 ${isTablet ? "my-6" : "my-10"}`} />
+          <div className={`${isTablet ? `flex flex-col gap-[22px]` : "hidden"}`}>
             <p className="semibold text-black-400 text-xl">플랜 공유하기</p>
             <div className="flex gap-4">{sharePromptContent}</div>
           </div>
-          <hr className="border-Line-100 my-6 pc:hidden" />
+          <hr className={`${isTablet ? "border-Line-100 my-6" : "hidden"}`} />
           <div>
             <p className="semibold mb-8 text-2xl text-color-black-400 mobile-tablet:text-lg">
               플랜 정보
             </p>
             <PlanCard planDetail={planDetail} />
             {planDetail.status === "PENDING" && (
-              <div className="mt-5 rounded-xl border-[1px] border-solid border-color-blue-300 bg-color-blue-100 mobile-tablet:mt-2">
+              <div className="mb-28 mt-5 rounded-xl border-[1px] border-solid border-color-blue-300 bg-color-blue-100 mobile-tablet:mt-2">
                 <div className="semibold flex gap-2 p-6 text-lg text-color-blue-300 mobile-tablet:p-3 mobile-tablet:text-sm">
                   <Image src={icon_blueinfo} alt="알림" /> 확정하지 않은 플랜이에요!
                 </div>
@@ -307,19 +331,26 @@ export function QuotationDetailDreamer() {
           </div>
         </div>
         <div className="flex flex-col flex-nowrap mobile-tablet:relative mobile-tablet:w-full mobile-tablet:flex-grow">
-          <div className="flex w-full mobile:px-6 tablet:px-[72px] mobile-tablet:fixed mobile-tablet:inset-x-0 mobile-tablet:bottom-0 mobile-tablet:flex-grow mobile-tablet:gap-2 mobile-tablet:bg-color-gray-50 mobile-tablet:py-[10px]">
-            <button className="bg-body.bg-gray flex rounded-2xl border-[1px] p-2 pc:hidden">
-              <Image src={icon_like_black} alt="좋아요" width={32} height={32} />
-            </button>
-            <button
-              className="semibold flex w-full items-center justify-center text-nowrap rounded-2xl bg-color-blue-300 px-28 py-4 text-xl text-gray-50 shadow mobile:text-md tablet:text-lg mobile-tablet:w-full mobile-tablet:max-w-full mobile-tablet:px-4 mobile-tablet:py-[11px]"
-              onClick={handleConfirmButton}
+          {planDetail.status === "PENDING" && (
+            <div
+              className={`${isTablet ? "fixed inset-x-0 bottom-0 flex-grow gap-2 bg-color-gray-50 px-40 py-[10px]" : "relative w-full"} flex mobile:px-6`}
             >
-              견적 확정하기
-            </button>
-          </div>
+              <button
+                className={`${isTablet ? "bg-body.bg-gray flex rounded-2xl border-[1px] p-2" : "hidden"}`}
+              >
+                <Image src={icon_like_black} alt="좋아요" width={32} height={32} />
+              </button>
+
+              <button
+                className="semibold flex w-full items-center justify-center text-nowrap rounded-2xl bg-color-blue-300 px-28 py-4 text-xl text-gray-50 shadow mobile:text-md tablet:text-lg mobile-tablet:w-full mobile-tablet:max-w-full mobile-tablet:px-4 mobile-tablet:py-[11px]"
+                onClick={handleConfirmButton}
+              >
+                견적 확정하기
+              </button>
+            </div>
+          )}
           <hr className="border-Line-100 my-10 mobile-tablet:hidden" />
-          <div className="flex flex-col gap-[22px] mobile-tablet:hidden">
+          <div className={`flex flex-col gap-[22px] ${isTablet ? "hidden" : ""}`}>
             <p className="semibold text-black-400 flex text-xl">플랜 공유하기</p>
             <div className="flex gap-4">{sharePromptContent}</div>
           </div>
diff --git a/src/services/quotationServiceDreamer.ts b/src/services/quotationServiceDreamer.ts
index 052759b9..45aa8a8d 100644
--- a/src/services/quotationServiceDreamer.ts
+++ b/src/services/quotationServiceDreamer.ts
@@ -77,9 +77,22 @@ export const QuotationServiceDreamer = {
     try {
       const response = await api.patch(`quotes/${quoteId}/confirm`, payload);
       return response;
-    } catch (error) {
-      console.error("견적 확정에 실패 하였습니다.", error);
-      throw error;
+    } catch (error: any) {
+      if (error.response) {
+        // 서버에서 응답이 왔을 때 (500, 404 등)
+        console.error("Server Error:", error.response.status, error.response.data);
+        throw new Error(
+          `API Error: ${error.response.status} - ${error.response.data.message || "Unknown error"}`,
+        );
+      } else if (error.request) {
+        // 요청은 갔지만 응답이 없을 때 (네트워크 문제)
+        console.error("No Response:", error.request);
+        throw new Error("No response from server. Please try again.");
+      } else {
+        // 요청 자체의 문제 (설정 오류 등)
+        console.error("Request Error:", error.message);
+        throw new Error("Request setup error.");
+      }
     }
   },
 };

From 79fb35fda1a4aa81c3d4c91ea0248f9f19e4e68b Mon Sep 17 00:00:00 2001
From: kirinkiri <k.melissa0520@gmail.com>
Date: Sat, 22 Feb 2025 19:23:14 +0900
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EC=83=81=EC=84=B8=EB=B3=B4=EA=B8=B0?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EC=98=81=EC=97=AD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyPlans/Cards/QuotationCard.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/MyPlans/Cards/QuotationCard.tsx b/src/components/MyPlans/Cards/QuotationCard.tsx
index dcf45c13..8ef55ffd 100644
--- a/src/components/MyPlans/Cards/QuotationCard.tsx
+++ b/src/components/MyPlans/Cards/QuotationCard.tsx
@@ -155,13 +155,13 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
             견적 확정하기
           </button>
         )}
-        <button className="semibold w-full text-nowrap rounded-lg border-[1px] border-solid border-color-blue-300 px-[32.5px] py-4 text-xl text-color-blue-300 mobile:text-md tablet:text-lg mobile-tablet:px-[16px] mobile-tablet:py-[11px]">
-          <Link
-            href={`/mytrip-manage/quotationdetail-dreamer/${planDetail.id}/${quotationDetail.id}`}
-          >
+        <Link
+          href={`/mytrip-manage/quotationdetail-dreamer/${planDetail.id}/${quotationDetail.id}`}
+        >
+          <button className="semibold w-full text-nowrap rounded-lg border-[1px] border-solid border-color-blue-300 px-[32.5px] py-4 text-xl text-color-blue-300 mobile:text-md tablet:text-lg mobile-tablet:px-[16px] mobile-tablet:py-[11px]">
             상세보기
-          </Link>
-        </button>
+          </button>
+        </Link>
       </div>
     </div>
   );

From 72230d5a24aebd3c7a1d59ef1a8b753a022d99a3 Mon Sep 17 00:00:00 2001
From: kirinkiri <k.melissa0520@gmail.com>
Date: Sat, 22 Feb 2025 20:20:49 +0900
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=EC=97=AC=ED=96=89=EC=99=84=EB=A3=8C?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/CompleteTrip.tsx        | 25 +++++++++++++++++--
 .../MyPlans/Cards/QuotationCard.tsx           |  7 +++---
 src/components/MyReviews/Cards/TripCard.tsx   |  2 +-
 src/services/planService.ts                   | 24 ++++++++++++++++++
 4 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/components/Common/CompleteTrip.tsx b/src/components/Common/CompleteTrip.tsx
index ec5a7c3f..d989162b 100644
--- a/src/components/Common/CompleteTrip.tsx
+++ b/src/components/Common/CompleteTrip.tsx
@@ -1,10 +1,31 @@
-export default function CompleteTrip() {
+import planService, { Plan } from "@/services/planService";
+
+interface CompleteTripProps {
+  planDetail: Plan;
+  closeModal: () => void;
+}
+
+export default function CompleteTrip({ planDetail, closeModal }: CompleteTripProps) {
+  async function handleSubmit() {
+    try {
+      await planService.completePlan(planDetail.id);
+      alert("여행이 완료되었습니다!");
+      window.location.reload();
+      closeModal();
+    } catch (error) {
+      console.error(`여행 완료에 실패 하였습니다. ${error}`);
+    }
+  }
+
   return (
     <div>
       <div className="mb-12 w-64">
         <p className="semibold mobile-tablet:medium text-2lg">여행을 완료하시겠습니까?</p>
       </div>
-      <button className="semibold px-21 w-full rounded-xl bg-blue-500 py-3 text-lg text-white">
+      <button
+        className="semibold px-21 w-full rounded-xl bg-blue-500 py-3 text-lg text-white"
+        onClick={handleSubmit}
+      >
         여행 완료 확정
       </button>
     </div>
diff --git a/src/components/MyPlans/Cards/QuotationCard.tsx b/src/components/MyPlans/Cards/QuotationCard.tsx
index 8ef55ffd..7336e49b 100644
--- a/src/components/MyPlans/Cards/QuotationCard.tsx
+++ b/src/components/MyPlans/Cards/QuotationCard.tsx
@@ -40,10 +40,10 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
   async function handleConfirmButton() {
     try {
       await QuotationServiceDreamer.confirmQuotation({ isConfirmed: true }, quotationDetail.id);
-      alert("플랜이 확정되었습니다.");
+      alert("견적이 확정되었습니다.");
       window.location.reload();
     } catch (error) {
-      alert(`플랜 확정에 실패했습니다. 다시 시도해주세요. ${error}`);
+      alert(`견적 확정에 실패했습니다. 다시 시도해주세요. ${error}`);
     }
   }
 
@@ -157,8 +157,9 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
         )}
         <Link
           href={`/mytrip-manage/quotationdetail-dreamer/${planDetail.id}/${quotationDetail.id}`}
+          className="semibold w-full rounded-lg border-[1px] border-solid border-color-blue-300 object-center px-[32.5px] py-4 mobile-tablet:px-[16px] mobile-tablet:py-[11px]"
         >
-          <button className="semibold w-full text-nowrap rounded-lg border-[1px] border-solid border-color-blue-300 px-[32.5px] py-4 text-xl text-color-blue-300 mobile:text-md tablet:text-lg mobile-tablet:px-[16px] mobile-tablet:py-[11px]">
+          <button className="w-full text-nowrap text-xl text-color-blue-300 mobile:text-md tablet:text-lg">
             상세보기
           </button>
         </Link>
diff --git a/src/components/MyReviews/Cards/TripCard.tsx b/src/components/MyReviews/Cards/TripCard.tsx
index 711b228c..cc6341e8 100644
--- a/src/components/MyReviews/Cards/TripCard.tsx
+++ b/src/components/MyReviews/Cards/TripCard.tsx
@@ -93,7 +93,7 @@ export default function TripCard({ planDetail }: TripCardProps) {
       </div>
       {isCompleteModalOpen && (
         <ReceiveModalLayout label="여행 완료" closeModal={closeCompleteModal}>
-          <CompleteTrip />
+          <CompleteTrip planDetail={planDetail} closeModal={closeCompleteModal} />
         </ReceiveModalLayout>
       )}
       {isReviewModalOpen && (
diff --git a/src/services/planService.ts b/src/services/planService.ts
index e2b47636..898e651f 100644
--- a/src/services/planService.ts
+++ b/src/services/planService.ts
@@ -181,6 +181,30 @@ const planService = {
       console.error("플랜 취소 실패", error);
     }
   },
+
+  completePlan: async (planId: string) => {
+    try {
+      const response = await api.patch(`/plans/${planId}/complete`);
+      console.log("응답 데이터:", response);
+      return response;
+    } catch (error: any) {
+      if (error.response) {
+        // 서버에서 응답이 왔을 때 (500, 404 등)
+        console.error("Server Error:", error.response.status, error.response.data);
+        throw new Error(
+          `API Error: ${error.response.status} - ${error.response.data.message || "Unknown error"}`,
+        );
+      } else if (error.request) {
+        // 요청은 갔지만 응답이 없을 때 (네트워크 문제)
+        console.error("No Response:", error.request);
+        throw new Error("No response from server. Please try again.");
+      } else {
+        // 요청 자체의 문제 (설정 오류 등)
+        console.error("Request Error:", error.message);
+        throw new Error("Request setup error.");
+      }
+    }
+  },
 };
 
 export default planService;

From 33ea9057885dc1e7f491a1beb981448860851b96 Mon Sep 17 00:00:00 2001
From: kirinkiri <k.melissa0520@gmail.com>
Date: Sat, 22 Feb 2025 22:43:34 +0900
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EA=B2=AC=EC=A0=81=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A3=A8=ED=8A=B8=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=EA=B2=AC=EC=A0=81=ED=99=95=EC=A0=95?=
 =?UTF-8?q?=EC=8B=9C=20=ED=94=8C=EB=9E=9C=EC=83=81=EC=84=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MyPlans/Cards/QuotationCard.tsx           |  9 ++++-
 .../MyReviews/MyCompletedTripList.tsx         | 17 +++++++++-
 src/components/MyReviews/MyReviewList.tsx     | 18 ++++++++--
 .../myreview-manage/completed-trip/index.tsx  |  2 +-
 .../myreview-manage/reviewed-trip/index.tsx   | 34 +++++++++----------
 .../[quotationId].tsx => [planId].tsx}        |  0
 6 files changed, 58 insertions(+), 22 deletions(-)
 rename src/pages/mytrip-manage/quotationdetail-dreamer/{[planId]/[quotationId].tsx => [planId].tsx} (100%)

diff --git a/src/components/MyPlans/Cards/QuotationCard.tsx b/src/components/MyPlans/Cards/QuotationCard.tsx
index 7336e49b..5a30f2f9 100644
--- a/src/components/MyPlans/Cards/QuotationCard.tsx
+++ b/src/components/MyPlans/Cards/QuotationCard.tsx
@@ -8,6 +8,7 @@ import { Plan } from "@/services/planService";
 import { formatToDetailedDate } from "@/utils/formatDate";
 import { QuotationServiceDreamer } from "@/services/quotationServiceDreamer";
 import { convertRegionToKorean } from "@/utils/formatRegion";
+import { useRouter } from "next/router";
 
 interface MakerInfo {
   nickName: string;
@@ -37,11 +38,14 @@ interface QuotationCardProps {
 }
 
 export default function QuotationCard({ quotationDetail, planDetail }: QuotationCardProps) {
+  const router = useRouter();
+
   async function handleConfirmButton() {
     try {
       await QuotationServiceDreamer.confirmQuotation({ isConfirmed: true }, quotationDetail.id);
       alert("견적이 확정되었습니다.");
       window.location.reload();
+      router.push(`/mytrip-manage/ongoin-plan/detail/${planDetail.id}`);
     } catch (error) {
       alert(`견적 확정에 실패했습니다. 다시 시도해주세요. ${error}`);
     }
@@ -156,7 +160,10 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
           </button>
         )}
         <Link
-          href={`/mytrip-manage/quotationdetail-dreamer/${planDetail.id}/${quotationDetail.id}`}
+          href={{
+            pathname: `/mytrip-manage/quotationdetail-dreamer/${planDetail.id}`,
+            query: { quotationId: quotationDetail.id },
+          }}
           className="semibold w-full rounded-lg border-[1px] border-solid border-color-blue-300 object-center px-[32.5px] py-4 mobile-tablet:px-[16px] mobile-tablet:py-[11px]"
         >
           <button className="w-full text-nowrap text-xl text-color-blue-300 mobile:text-md tablet:text-lg">
diff --git a/src/components/MyReviews/MyCompletedTripList.tsx b/src/components/MyReviews/MyCompletedTripList.tsx
index 2e090905..135f3f35 100644
--- a/src/components/MyReviews/MyCompletedTripList.tsx
+++ b/src/components/MyReviews/MyCompletedTripList.tsx
@@ -1,14 +1,29 @@
 import TripCard from "@/components/MyReviews/Cards/TripCard";
 import { Plan } from "@/services/planService";
+import { useEffect, useState } from "react";
 
 interface CompletedPlanListProps {
   plans: Plan[];
 }
 
 export default function MyCompletedTripList({ plans }: CompletedPlanListProps) {
+  //1440px이하부터 타블렛 디자인으로 변경
+  const [isTablet, setIsTablet] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsTablet(window.innerWidth <= 1440);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   return (
     <>
-      <div className="items-center justify-center gap-4 pc:grid pc:grid-cols-2 mobile-tablet:flex mobile-tablet:flex-col">
+      <div className={`grid gap-4 ${isTablet ? "grid-cols-1" : "grid-cols-2"} pc:grid`}>
         {plans.map((plan) => (
           <TripCard key={plan.id} planDetail={plan} />
         ))}
diff --git a/src/components/MyReviews/MyReviewList.tsx b/src/components/MyReviews/MyReviewList.tsx
index a30d063c..7d9a825a 100644
--- a/src/components/MyReviews/MyReviewList.tsx
+++ b/src/components/MyReviews/MyReviewList.tsx
@@ -1,14 +1,28 @@
 import ReviewCard from "@/components/MyReviews/Cards/ReviewCard";
 import { Review } from "@/services/reviewService";
-
+import { useEffect, useState } from "react";
 interface MyReviewListProps {
   reviews: Review[];
 }
 
 export default function MyReviewList({ reviews }: MyReviewListProps) {
+  //1440px이하부터 타블렛 디자인으로 변경
+  const [isTablet, setIsTablet] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsTablet(window.innerWidth <= 1440);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   return (
     <>
-      <div className="items-center justify-center gap-4 pc:grid pc:grid-cols-2 mobile-tablet:flex mobile-tablet:flex-col">
+      <div className={`grid gap-4 ${isTablet ? "grid-cols-1" : "grid-cols-2"} pc:grid`}>
         {reviews.map((review) => (
           <ReviewCard key={review.id} reviewDetail={review} />
         ))}
diff --git a/src/pages/myreview-manage/completed-trip/index.tsx b/src/pages/myreview-manage/completed-trip/index.tsx
index ebe28be6..e4133e70 100644
--- a/src/pages/myreview-manage/completed-trip/index.tsx
+++ b/src/pages/myreview-manage/completed-trip/index.tsx
@@ -50,7 +50,7 @@ export function CompletedTrip() {
       <MyReviewNav />
       <Layout bodyClass="bg-gray">
         <div className="my-10">
-          {planData.length === 0 && (
+          {!isLoading && planData.length === 0 && (
             <div className="flex h-screen flex-col items-center justify-center gap-8">
               <Image src={icon_luggage_frown} alt="비어있음" />
               <p className="regular text-2xl text-color-gray-400">
diff --git a/src/pages/myreview-manage/reviewed-trip/index.tsx b/src/pages/myreview-manage/reviewed-trip/index.tsx
index 6e08654a..60a71d21 100644
--- a/src/pages/myreview-manage/reviewed-trip/index.tsx
+++ b/src/pages/myreview-manage/reviewed-trip/index.tsx
@@ -38,12 +38,18 @@ export function ReviewedTrip() {
   const totalPages = Math.max(1, Math.ceil((data?.totalCount || 1) / pageSize));
   const reviewData = data?.list.flat() || [];
 
+  if (isLoading) {
+    <div className="flex h-screen items-center justify-center">
+      <Image src={loading} alt="로딩 중" />
+    </div>;
+  }
+
   return (
     <>
       <MyReviewNav />
       <Layout bodyClass="bg-gray">
         <div className="my-10">
-          {reviewData.length === 0 && (
+          {!isLoading && reviewData.length === 0 && (
             <div className="flex h-screen flex-col items-center justify-center gap-8">
               <Image src={icon_luggage_frown} alt="비어있음" />
               <p className="regular text-2xl text-color-gray-400">아직 등록된 리뷰가 없어요!</p>
@@ -54,22 +60,16 @@ export function ReviewedTrip() {
               </Link>
             </div>
           )}
-          {isLoading ? (
-            <div className="flex h-screen items-center justify-center">
-              <Image src={loading} alt="로딩 중" />
-            </div>
-          ) : (
-            <>
-              <MyReviewList reviews={reviewData} />
-              {totalPages > 1 && (
-                <Pagination
-                  currentPage={currentPage}
-                  totalPages={totalPages}
-                  onPageChange={handlePageChange}
-                />
-              )}
-            </>
-          )}
+          <>
+            <MyReviewList reviews={reviewData} />
+            {totalPages > 1 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={handlePageChange}
+              />
+            )}
+          </>
         </div>
       </Layout>
     </>
diff --git a/src/pages/mytrip-manage/quotationdetail-dreamer/[planId]/[quotationId].tsx b/src/pages/mytrip-manage/quotationdetail-dreamer/[planId].tsx
similarity index 100%
rename from src/pages/mytrip-manage/quotationdetail-dreamer/[planId]/[quotationId].tsx
rename to src/pages/mytrip-manage/quotationdetail-dreamer/[planId].tsx

From 0622790706e9190ed2faf8cc94974fbfe8e7e98c Mon Sep 17 00:00:00 2001
From: kirinkiri <k.melissa0520@gmail.com>
Date: Sun, 23 Feb 2025 04:01:35 +0900
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20UI=ED=86=B5=EC=9D=BC=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=8B=A8=EC=9C=84=ED=91=9C=EC=8B=9C,=20=EB=A1=9C=EB=94=A9?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4,=20=EA=B2=AC=EC=A0=81=ED=99=95=EC=A0=95?=
 =?UTF-8?q?=EC=8B=A4=ED=8C=A8=EB=AA=A8=EB=8B=AC=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MyPlans/Cards/QuotationCard.tsx           | 262 ++++++++++--------
 .../MyPlans/Cards/QuotationCardCompleted.tsx  |  28 +-
 src/components/MyPlans/MyPlanDetail.tsx       |  14 +-
 .../MyPlans/MyPlanDetailCompleted.tsx         |  10 +-
 src/components/MyPlans/QuotationCardList.tsx  |   1 -
 .../MyPlans/QuotationCardListCompleted.tsx    |  17 +-
 src/components/MyReviews/Cards/ReviewCard.tsx |   9 +-
 .../MyReviews/MyCompletedTripList.tsx         |   2 +-
 .../myreview-manage/reviewable-trip/index.tsx |  34 +--
 .../myreview-manage/reviewed-trip/index.tsx   |   8 +-
 .../quotationdetail-dreamer/[planId].tsx      |   4 +-
 src/services/quotationServiceDreamer.ts       |   7 +-
 src/services/reviewService.ts                 |  10 +-
 13 files changed, 251 insertions(+), 155 deletions(-)

diff --git a/src/components/MyPlans/Cards/QuotationCard.tsx b/src/components/MyPlans/Cards/QuotationCard.tsx
index 5a30f2f9..6cac8bd3 100644
--- a/src/components/MyPlans/Cards/QuotationCard.tsx
+++ b/src/components/MyPlans/Cards/QuotationCard.tsx
@@ -9,6 +9,9 @@ import { formatToDetailedDate } from "@/utils/formatDate";
 import { QuotationServiceDreamer } from "@/services/quotationServiceDreamer";
 import { convertRegionToKorean } from "@/utils/formatRegion";
 import { useRouter } from "next/router";
+import { useState, useEffect } from "react";
+import ModalLayout from "@/components/Common/ModalLayout";
+import ChargeModal from "@/components/Gnb/ChargeModal";
 
 interface MakerInfo {
   nickName: string;
@@ -39,6 +42,21 @@ interface QuotationCardProps {
 
 export default function QuotationCard({ quotationDetail, planDetail }: QuotationCardProps) {
   const router = useRouter();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isChargeModalOpen, setIsChargeModalOpen] = useState(false);
+  const [coconut, setCoconut] = useState(0);
+
+  useEffect(() => {
+    const authData = localStorage.getItem("auth");
+    if (authData) {
+      try {
+        const parsedData = JSON.parse(authData);
+        setCoconut(parsedData.state?.coconut ?? 0);
+      } catch (error) {
+        console.error("로컬스토리지 데이터 파싱 오류:", error);
+      }
+    }
+  }, []);
 
   async function handleConfirmButton() {
     try {
@@ -46,131 +64,159 @@ export default function QuotationCard({ quotationDetail, planDetail }: Quotation
       alert("견적이 확정되었습니다.");
       window.location.reload();
       router.push(`/mytrip-manage/ongoin-plan/detail/${planDetail.id}`);
-    } catch (error) {
-      alert(`견적 확정에 실패했습니다. 다시 시도해주세요. ${error}`);
+    } catch (error: any) {
+      if (error.status === 400) {
+        setIsModalOpen(true);
+      } else {
+        alert(`견적 확정에 실패했습니다. 다시 시도해주세요. ${error.message}`);
+      }
     }
   }
 
   return (
-    <div className="mb-[32px] flex w-full flex-col rounded-2xl bg-color-gray-50 px-6 py-7 shadow mobile-tablet:px-3 mobile-tablet:py-4">
-      <div className="justify-left flex items-center gap-[12px] mobile-tablet:mt-[6px]">
-        {quotationDetail.isConfirmed !== false && (
-          <Label labelType="CONFIRMED" customLabelContainerClass="rounded-lg" />
-        )}
-        <Label labelType={planDetail.tripType} customLabelContainerClass="rounded-lg" />
-        {quotationDetail.isAssigned !== false && (
-          <Label labelType="REQUEST" customLabelContainerClass="rounded-lg" />
-        )}
-      </div>
-      <div className="border-color bg-body.bg-gray my-6 flex max-w-full gap-6 rounded-md border-[1px] px-[18px] py-4 mobile-tablet:my-[14px] mobile-tablet:gap-3 mobile-tablet:px-[10px]">
-        <div className="flex h-20 w-20 flex-shrink-0 items-center mobile-tablet:h-[46px] mobile-tablet:w-[46px]">
-          <Image
-            src={`/assets/img_avatar${quotationDetail.maker.image.split("_")[1]}.svg`}
-            alt="프로필사진"
-            width={80}
-            height={80}
-            className="rounded-full border-2 border-color-blue-400"
-          />
-        </div>
-        <div className="flex w-full">
-          <div className="w-full flex-col items-center justify-between text-xs text-color-black-500">
-            <p className="semibold text-xl mobile-tablet:text-lg">
-              {quotationDetail.maker.nickName}
-            </p>
-            <div className="flex content-center items-center gap-3 mobile-tablet:gap-1">
-              <div className="medium flex flex-shrink-0 items-center gap-[6px] text-lg mobile-tablet:gap-[5px] mobile-tablet:text-sm">
-                <Image
-                  src={icon_active_star}
-                  alt="별점"
-                  className="color-red-200 h-6 w-6 mobile-tablet:h-[14px] mobile-tablet:w-[14px]"
-                />
-                <p>{quotationDetail.maker.averageRating}</p>
-                <p className="text-color-gray-400">({quotationDetail.maker.totalReviews})</p>
+    <div>
+      {isModalOpen && (
+        <ModalLayout label="보유 코코넛이 부족합니다!" closeModal={() => setIsModalOpen(false)}>
+          <div className="m-4 flex flex-col items-center gap-4">
+            <div className="semibold flex-col gap-2 text-xl">
+              <div className="flex justify-center gap-2">
+                <p>보유 코코넛 :</p> <p className="medium text-color-red-200">{coconut}</p>{" "}
+                <p>개</p>
               </div>
-              <p className="text-color-line-200">ㅣ</p>
-              <div className="medium flex flex-shrink-0 items-center gap-[6px] object-center text-lg mobile-tablet:gap-[5px] mobile-tablet:text-sm">
-                <Link
-                  href={quotationDetail.maker.gallery}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center"
-                >
-                  <div className="flex mobile-tablet:h-[14px] mobile-tablet:w-[14px]">
-                    <Image src={link} alt="링크이미지" width={25} height={25} />
-                  </div>
-                  <p className="content-center text-color-gray-400">SNS</p>
-                </Link>
-              </div>
-              <p className="text-color-line-200">ㅣ</p>
-              <div className="medium flex flex-shrink-0 gap-[6px] text-lg mobile-tablet:gap-[5px] mobile-tablet:text-sm">
-                <p>{quotationDetail.maker.totalConfirms}건</p>
-                <p className="text-color-gray-400">확정</p>
+              <div className="flex justify-center gap-2">
+                <p>필요 코코넛 :</p>
+                <p className="medium text-color-red-200">
+                  {quotationDetail.price.toLocaleString()}
+                </p>
+                <p>개</p>
               </div>
             </div>
           </div>
-          <div className="medium flex-col text-2lg text-color-blue-400 mobile-tablet:text-sm">
-            <div className="flex items-center">
-              <Image
-                src={icon_like_red}
-                alt="좋아요"
-                width={24}
-                height={24}
-                className="color-red-200 h-[24px] w-[24px]"
-              />
-              <p>{quotationDetail.maker.totalFollows}</p>
+        </ModalLayout>
+      )}
+
+      <div className="mb-[32px] flex w-full flex-col rounded-2xl bg-color-gray-50 px-6 py-7 shadow mobile-tablet:px-3 mobile-tablet:py-4">
+        <div className="justify-left flex items-center gap-[12px] mobile-tablet:mt-[6px]">
+          {quotationDetail.isConfirmed !== false && (
+            <Label labelType="CONFIRMED" customLabelContainerClass="rounded-lg" />
+          )}
+          <Label labelType={planDetail.tripType} customLabelContainerClass="rounded-lg" />
+          {quotationDetail.isAssigned !== false && (
+            <Label labelType="REQUEST" customLabelContainerClass="rounded-lg" />
+          )}
+        </div>
+        <div className="border-color bg-body.bg-gray my-6 flex max-w-full gap-6 rounded-md border-[1px] px-[18px] py-4 mobile-tablet:my-[14px] mobile-tablet:gap-3 mobile-tablet:px-[10px]">
+          <div className="flex h-20 w-20 flex-shrink-0 items-center mobile-tablet:h-[46px] mobile-tablet:w-[46px]">
+            <Image
+              src={`/assets/img_avatar${quotationDetail.maker.image.split("_")[1]}.svg`}
+              alt="프로필사진"
+              width={80}
+              height={80}
+              className="rounded-full border-2 border-color-blue-400"
+            />
+          </div>
+          <div className="flex w-full">
+            <div className="w-full flex-col items-center justify-between text-xs text-color-black-500">
+              <p className="semibold text-xl mobile-tablet:text-lg">
+                {quotationDetail.maker.nickName}
+              </p>
+              <div className="flex content-center items-center gap-3 mobile-tablet:gap-1">
+                <div className="medium flex flex-shrink-0 items-center gap-[6px] text-lg mobile-tablet:gap-[5px] mobile-tablet:text-sm">
+                  <Image
+                    src={icon_active_star}
+                    alt="별점"
+                    className="color-red-200 h-6 w-6 mobile-tablet:h-[14px] mobile-tablet:w-[14px]"
+                  />
+                  <p>{quotationDetail.maker.averageRating}</p>
+                  <p className="text-color-gray-400">({quotationDetail.maker.totalReviews})</p>
+                </div>
+                <p className="text-color-line-200">ㅣ</p>
+                <div className="medium flex flex-shrink-0 items-center gap-[6px] object-center text-lg mobile-tablet:gap-[5px] mobile-tablet:text-sm">
+                  <Link
+                    href={quotationDetail.maker.gallery}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center"
+                  >
+                    <div className="flex mobile-tablet:h-[14px] mobile-tablet:w-[14px]">
+                      <Image src={link} alt="링크이미지" width={25} height={25} />
+                    </div>
+                    <p className="content-center text-color-gray-400">SNS</p>
+                  </Link>
+                </div>
+                <p className="text-color-line-200">ㅣ</p>
+                <div className="medium flex flex-shrink-0 gap-[6px] text-lg mobile-tablet:gap-[5px] mobile-tablet:text-sm">
+                  <p>{quotationDetail.maker.totalConfirms}건</p>
+                  <p className="text-color-gray-400">확정</p>
+                </div>
+              </div>
+            </div>
+            <div className="medium flex-col text-2lg text-color-blue-400 mobile-tablet:text-sm">
+              <div className="flex items-center">
+                <Image
+                  src={icon_like_red}
+                  alt="좋아요"
+                  width={24}
+                  height={24}
+                  className="color-red-200 h-[24px] w-[24px]"
+                />
+                <p>{quotationDetail.maker.totalFollows}</p>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div>
-        <div className="flex items-center gap-[12px] mobile-tablet:grid mobile-tablet:grid-cols-3 mobile-tablet:gap-0">
-          <div className="flex items-center gap-3 mobile-tablet:col-span-3 mobile-tablet:mb-3">
-            <p className="medium whitespace-nowrap rounded-[4px] bg-color-background-400 px-[6px] py-[4px] text-2lg text-color-gray-500 mobile-tablet:text-md">
-              여행일
-            </p>
-            <p className="medium whitespace-nowrap text-2lg text-color-black-300 mobile-tablet:text-md">
-              {formatToDetailedDate(planDetail.tripDate)}
-            </p>
+        <div>
+          <div className="flex items-center gap-[12px] mobile-tablet:grid mobile-tablet:grid-cols-3 mobile-tablet:gap-0">
+            <div className="flex items-center gap-3 mobile-tablet:col-span-3 mobile-tablet:mb-3">
+              <p className="medium whitespace-nowrap rounded-[4px] bg-color-background-400 px-[6px] py-[4px] text-2lg text-color-gray-500 mobile-tablet:text-md">
+                여행일
+              </p>
+              <p className="medium whitespace-nowrap text-2lg text-color-black-300 mobile-tablet:text-md">
+                {formatToDetailedDate(planDetail.tripDate)}
+              </p>
+            </div>
+            <p className="text-color-line-200 mobile-tablet:hidden">ㅣ</p>
+            <div className="flex items-center gap-3">
+              <p className="medium whitespace-nowrap rounded-[4px] bg-color-background-400 px-[6px] py-[4px] text-2lg leading-[26px] text-color-gray-500 mobile-tablet:text-md">
+                여행지
+              </p>
+              <p className="medium whitespace-nowrap text-2lg leading-[26px] text-color-black-300 mobile-tablet:text-md">
+                {convertRegionToKorean(planDetail.serviceArea)}
+              </p>
+            </div>
           </div>
-          <p className="text-color-line-200 mobile-tablet:hidden">ㅣ</p>
-          <div className="flex items-center gap-3">
-            <p className="medium whitespace-nowrap rounded-[4px] bg-color-background-400 px-[6px] py-[4px] text-2lg leading-[26px] text-color-gray-500 mobile-tablet:text-md">
-              여행지
-            </p>
-            <p className="medium whitespace-nowrap text-2lg leading-[26px] text-color-black-300 mobile-tablet:text-md">
-              {convertRegionToKorean(planDetail.serviceArea)}
+          <div className="flex items-center justify-end gap-4 py-6">
+            <p className="medium text-2lg mobile-tablet:text-md">견적 코코넛</p>
+            <p className="bold text-2xl mobile-tablet:text-2lg">
+              {quotationDetail.price.toLocaleString()} 개
             </p>
           </div>
         </div>
-        <div className="flex items-center justify-end gap-4 py-6">
-          <p className="medium text-2lg mobile-tablet:text-md">견적 코코넛</p>
-          <p className="bold text-2xl mobile-tablet:text-2lg">
-            {" "}
-            {quotationDetail.price.toLocaleString()} 개
-          </p>
-        </div>
-      </div>
-      <div className="flex justify-between gap-[11px] mobile:flex-col">
-        {planDetail.status !== "CONFIRMED" && (
-          <button
-            className="semibold w-full text-nowrap rounded-lg bg-color-blue-300 px-[32.5px] py-4 text-xl text-gray-50 mobile:text-md tablet:text-lg mobile-tablet:px-[16px] mobile-tablet:py-[11px]"
-            onClick={handleConfirmButton}
+        <div className="flex justify-between gap-[11px] mobile:flex-col">
+          {planDetail.status !== "CONFIRMED" && (
+            <button
+              className="semibold w-full text-nowrap rounded-lg bg-color-blue-300 px-[32.5px] py-4 text-xl text-gray-50 mobile:text-md tablet:text-lg mobile-tablet:px-[16px] mobile-tablet:py-[11px]"
+              onClick={handleConfirmButton}
+            >
+              견적 확정하기
+            </button>
+          )}
+          <Link
+            href={{
+              pathname: `/mytrip-manage/quotationdetail-dreamer/${planDetail.id}`,
+              query: { quotationId: quotationDetail.id },
+            }}
+            className="semibold w-full rounded-lg border-[1px] border-solid border-color-blue-300 object-center px-[32.5px] py-4 mobile-tablet:px-[16px] mobile-tablet:py-[11px]"
           >
-            견적 확정하기
-          </button>
-        )}
-        <Link
-          href={{
-            pathname: `/mytrip-manage/quotationdetail-dreamer/${planDetail.id}`,
-            query: { quotationId: quotationDetail.id },
-          }}
-          className="semibold w-full rounded-lg border-[1px] border-solid border-color-blue-300 object-center px-[32.5px] py-4 mobile-tablet:px-[16px] mobile-tablet:py-[11px]"
-        >
-          <button className="w-full text-nowrap text-xl text-color-blue-300 mobile:text-md tablet:text-lg">
-            상세보기
-          </button>
-        </Link>
+            <button className="w-full text-nowrap text-xl text-color-blue-300 mobile:text-md tablet:text-lg">
+              상세보기
+            </button>
+          </Link>
+        </div>
       </div>
+      {isChargeModalOpen && (
+        <ChargeModal coconut={coconut} setIsChargeModalOpen={setIsChargeModalOpen} />
+      )}
     </div>
   );
 }
diff --git a/src/components/MyPlans/Cards/QuotationCardCompleted.tsx b/src/components/MyPlans/Cards/QuotationCardCompleted.tsx
index a78e6f13..fd9ab3e3 100644
--- a/src/components/MyPlans/Cards/QuotationCardCompleted.tsx
+++ b/src/components/MyPlans/Cards/QuotationCardCompleted.tsx
@@ -6,6 +6,7 @@ import link from "@public/assets/icon_link.svg";
 import Link from "next/link";
 import { Plan } from "@/services/planService";
 import { formatToDetailedDate } from "@/utils/formatDate";
+import { convertRegionToKorean } from "@/utils/formatRegion";
 
 interface MakerInfo {
   nickName: string;
@@ -41,7 +42,13 @@ export default function QuotationCardCompleted({
   return (
     <div className="mb-[32px] flex flex-col rounded-2xl bg-color-gray-50 px-6 py-7 shadow mobile-tablet:px-3 mobile-tablet:py-4">
       <div className="justify-left flex items-center gap-[12px] mobile-tablet:mt-[6px]">
+        {quotationDetail.isConfirmed !== false && (
+          <Label labelType="CONFIRMED" customLabelContainerClass="rounded-lg" />
+        )}
         <Label labelType={planDetail.tripType} customLabelContainerClass="rounded-lg" />
+        {quotationDetail.isAssigned !== false && (
+          <Label labelType="REQUEST" customLabelContainerClass="rounded-lg" />
+        )}
       </div>
       <div className="my-6 flex gap-6 rounded-md border-[1px] px-[18px] py-4 mobile-tablet:my-[14px] mobile-tablet:gap-3 mobile-tablet:px-[10px]">
         <div className="md:w-24 md:h-24 flex h-20 w-20 content-center items-center mobile:h-12 mobile:w-12">
@@ -58,7 +65,7 @@ export default function QuotationCardCompleted({
             <p className="semibold text-xl mobile-tablet:text-lg">
               {quotationDetail.maker.nickName}
             </p>
-            <div className="flex content-center items-center gap-4 mobile-tablet:gap-1">
+            <div className="flex content-center items-center gap-3 mobile-tablet:gap-1">
               <div className="medium flex flex-shrink-0 items-center gap-[6px] text-lg mobile-tablet:gap-[5px] mobile-tablet:text-sm">
                 <Image
                   src={icon_active_star}
@@ -77,7 +84,7 @@ export default function QuotationCardCompleted({
                   className="flex items-center"
                 >
                   <div className="flex mobile-tablet:h-[14px] mobile-tablet:w-[14px]">
-                    <Image src={link} alt="링크이미지" width={30} height={30} />
+                    <Image src={link} alt="링크이미지" width={25} height={25} />
                   </div>
                   <p className="content-center text-color-gray-400">SNS</p>
                 </Link>
@@ -119,17 +126,28 @@ export default function QuotationCardCompleted({
               여행지
             </p>
             <p className="whitespace-nowrap text-2lg font-medium leading-[26px] text-color-black-300 mobile-tablet:text-md">
-              {planDetail.serviceArea}
+              {convertRegionToKorean(planDetail.serviceArea)}
             </p>
           </div>
         </div>
         <div className="flex items-center justify-end gap-4 py-6">
-          <p className="medium text-2lg mobile-tablet:text-md">견적 금액</p>
+          <p className="medium text-2lg mobile-tablet:text-md">견적 코코넛</p>
           <p className="bold text-2xl mobile-tablet:text-2lg">
-            {quotationDetail.price.toLocaleString()}원
+            {quotationDetail.price.toLocaleString()}개
           </p>
         </div>
       </div>
+      <Link
+        href={{
+          pathname: `/mytrip-manage/quotationdetail-dreamer/${planDetail.id}`,
+          query: { quotationId: quotationDetail.id },
+        }}
+        className="semibold w-full rounded-lg border-[1px] border-solid border-color-blue-300 object-center px-[32.5px] py-4 mobile-tablet:px-[16px] mobile-tablet:py-[11px]"
+      >
+        <button className="w-full text-nowrap text-xl text-color-blue-300 mobile:text-md tablet:text-lg">
+          상세보기
+        </button>
+      </Link>
     </div>
   );
 }
diff --git a/src/components/MyPlans/MyPlanDetail.tsx b/src/components/MyPlans/MyPlanDetail.tsx
index 030b472a..56d00a00 100644
--- a/src/components/MyPlans/MyPlanDetail.tsx
+++ b/src/components/MyPlans/MyPlanDetail.tsx
@@ -37,25 +37,29 @@ export default function MyPlanDetail({ planDetail }: PlanData) {
     <>
       <MyPlanNav />
       <Layout bodyClass="bg-gray">
-        <div className="my-10 flex-col">
-          <div className="my-10 rounded-2xl border-gray-300 bg-color-gray-50 p-5 shadow">
+        <div className="my-16 rounded-2xl bg-color-gray-50 p-10">
+          <p className="semibold text-2xl">진행중인 플랜 정보</p>
+          <div className="my-10 rounded-2xl border-gray-300 p-5 shadow">
             <div className="flex justify-between">
               <div className="semibold mb-3 content-center text-2xl text-color-black-500 mobile-tablet:text-xl">
                 {planDetail.title}
               </div>
               {planDetail.status === "PENDING" && (
                 <button
-                  className="semibold mb-3 text-nowrap rounded-lg border-[1px] border-solid border-color-blue-300 bg-color-blue-100 px-[16px] py-[11px] text-lg text-color-blue-300 mobile:text-md tablet:text-lg"
+                  className="semibold mb-3 text-nowrap rounded-lg border-[1px] border-solid border-color-blue-300 bg-color-blue-100 px-[16px] py-[11px] text-lg text-color-blue-300 mobile:text-md tablet:text-lg mobile-tablet:p-2"
                   onClick={handleDeletePlan}
                 >
-                  플랜 취소
+                  플랜 삭제
                 </button>
               )}
             </div>
             <PlanCard planDetail={planDetail} />
           </div>
+          <div className="flex-col">
+            <p className="semibold mb-10 text-2xl">견적 정보</p>
+            <QuotationCardList planDetail={planDetail} />
+          </div>
         </div>
-        <QuotationCardList planDetail={planDetail} />
       </Layout>
     </>
   );
diff --git a/src/components/MyPlans/MyPlanDetailCompleted.tsx b/src/components/MyPlans/MyPlanDetailCompleted.tsx
index e6ed19c2..903c2e43 100644
--- a/src/components/MyPlans/MyPlanDetailCompleted.tsx
+++ b/src/components/MyPlans/MyPlanDetailCompleted.tsx
@@ -19,12 +19,20 @@ export default function MyPlanDetailCompleted({ planDetail }: PlanData) {
     );
   }
 
+  let title = "";
+
+  if (planDetail.status === "COMPLETED") {
+    title = "종료된";
+  } else if (planDetail.status === "OVERDUE") {
+    title = "만료된";
+  }
+
   return (
     <>
       <MyPlanNav />
       <Layout bodyClass="bg-gray">
         <div className="my-16 rounded-2xl bg-color-gray-50 p-10">
-          <p className="semibold text-2xl">플랜 정보</p>
+          <p className="semibold text-2xl">{title} 플랜 정보</p>
           <div className="my-10 rounded-2xl border-gray-300 p-5 shadow">
             <div className="semibold mb-3 text-2xl text-color-black-500">{planDetail.title}</div>
             <PlanCard planDetail={planDetail} />
diff --git a/src/components/MyPlans/QuotationCardList.tsx b/src/components/MyPlans/QuotationCardList.tsx
index 85d56297..30076888 100644
--- a/src/components/MyPlans/QuotationCardList.tsx
+++ b/src/components/MyPlans/QuotationCardList.tsx
@@ -54,7 +54,6 @@ export default function QuotationCardList({ planDetail }: PlanData) {
           <br />
           <button className="border-1 rounded-lg bg-color-blue-200 p-2">
             <Link href="/finding-maker" className="text-gray-100">
-              {" "}
               Maker 찾기
             </Link>
           </button>
diff --git a/src/components/MyPlans/QuotationCardListCompleted.tsx b/src/components/MyPlans/QuotationCardListCompleted.tsx
index eb9533db..ae534024 100644
--- a/src/components/MyPlans/QuotationCardListCompleted.tsx
+++ b/src/components/MyPlans/QuotationCardListCompleted.tsx
@@ -5,6 +5,7 @@ import { Plan } from "@/services/planService";
 import QuotationCardCompleted from "@/components/MyPlans/Cards/QuotationCardCompleted";
 import Image from "next/image";
 import loading from "@public/assets/icon_loading.gif";
+import { useEffect, useState } from "react";
 
 interface PlanData {
   planDetail: Plan;
@@ -20,6 +21,20 @@ export default function QuotationCardListCompleted({ planDetail }: PlanData) {
     enabled: !!id,
   });
 
+  //1440px이하부터 타블렛 디자인으로 변경
+  const [isTablet, setIsTablet] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsTablet(window.innerWidth <= 1440);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center">
@@ -39,7 +54,7 @@ export default function QuotationCardListCompleted({ planDetail }: PlanData) {
   }
 
   return (
-    <div className="lg:grid-cols-2 grid w-full grid-cols-1 items-center justify-center gap-4 mobile-tablet:flex mobile-tablet:flex-col">
+    <div className={`grid gap-4 ${isTablet ? "grid-cols-1" : "grid-cols-2"} pc:grid`}>
       {quotations.list.map((quotation) => (
         <QuotationCardCompleted
           key={quotation.id}
diff --git a/src/components/MyReviews/Cards/ReviewCard.tsx b/src/components/MyReviews/Cards/ReviewCard.tsx
index 80d7e247..17e8ec33 100644
--- a/src/components/MyReviews/Cards/ReviewCard.tsx
+++ b/src/components/MyReviews/Cards/ReviewCard.tsx
@@ -9,12 +9,13 @@ interface ReviewCardProps {
 }
 
 export default function ReviewCard({ reviewDetail }: ReviewCardProps) {
+  console.log(reviewDetail.plan.quotes[0]);
   return (
     <div className="mb-[32px] flex flex-col rounded-2xl bg-color-gray-50 px-6 py-7 mobile-tablet:px-3 mobile-tablet:py-4">
       <div className="flex justify-between">
         <div className="justify-left flex items-center gap-[12px] mobile-tablet:mt-[6px]">
           <Label labelType={reviewDetail.plan.tripType} customLabelContainerClass="rounded-lg" />
-          {reviewDetail.plan.quotes.isAssigned !== false && (
+          {reviewDetail.plan.quotes[0].isAssigned !== false && (
             <Label labelType="REQUEST" customLabelContainerClass="rounded-lg" />
           )}
         </div>
@@ -38,12 +39,14 @@ export default function ReviewCard({ reviewDetail }: ReviewCardProps) {
             <div className="flex items-center gap-4 mobile-tablet:gap-1">
               <div className="medium flex flex-shrink-0 gap-[6px] text-lg mobile-tablet:gap-[5px] mobile-tablet:text-sm">
                 <p>여행일</p>
-                <p className="text-color-gray-400">2024.07.01(월)</p>
+                <p className="text-color-gray-400">
+                  {formatToSimpleDate(reviewDetail.plan.tripDate)}
+                </p>
               </div>
               <p className="text-color-line-200">ㅣ</p>
               <div className="medium flex flex-shrink-0 gap-[6px] text-lg mobile-tablet:gap-[5px] mobile-tablet:text-sm">
                 <p>플랜가</p>
-                <p className="text-color-gray-400">210,000원</p>
+                <p className="text-color-gray-400">{reviewDetail.plan.quotes[0].price} 개</p>
               </div>
             </div>
             <div className="mobile-tablet:hidden">
diff --git a/src/components/MyReviews/MyCompletedTripList.tsx b/src/components/MyReviews/MyCompletedTripList.tsx
index 135f3f35..d5d5bb79 100644
--- a/src/components/MyReviews/MyCompletedTripList.tsx
+++ b/src/components/MyReviews/MyCompletedTripList.tsx
@@ -23,7 +23,7 @@ export default function MyCompletedTripList({ plans }: CompletedPlanListProps) {
 
   return (
     <>
-      <div className={`grid gap-4 ${isTablet ? "grid-cols-1" : "grid-cols-2"} pc:grid`}>
+      <div className={` ${isTablet ? "grid-cols-1" : "grid-cols-2 gap-4"} pc:grid`}>
         {plans.map((plan) => (
           <TripCard key={plan.id} planDetail={plan} />
         ))}
diff --git a/src/pages/myreview-manage/reviewable-trip/index.tsx b/src/pages/myreview-manage/reviewable-trip/index.tsx
index b1508dc8..92fc3b99 100644
--- a/src/pages/myreview-manage/reviewable-trip/index.tsx
+++ b/src/pages/myreview-manage/reviewable-trip/index.tsx
@@ -38,6 +38,14 @@ export function ReviewableTrip() {
   const totalPages = Math.ceil((data?.totalCount || 1) / pageSize);
   const planData = data?.list.flat() || [];
 
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <Image src={loading} alt="로딩 중" />
+      </div>
+    );
+  }
+
   return (
     <>
       <MyReviewNav />
@@ -54,22 +62,16 @@ export function ReviewableTrip() {
               </Link>
             </div>
           )}
-          {isLoading ? (
-            <div className="flex h-screen items-center justify-center">
-              <Image src={loading} alt="로딩 중" />
-            </div>
-          ) : (
-            <>
-              <MyCompletedTripList plans={planData} />
-              {totalPages > 1 && (
-                <Pagination
-                  currentPage={currentPage}
-                  totalPages={totalPages}
-                  onPageChange={handlePageChange}
-                />
-              )}
-            </>
-          )}
+          <>
+            <MyCompletedTripList plans={planData} />
+            {totalPages > 1 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={handlePageChange}
+              />
+            )}
+          </>
         </div>
       </Layout>
     </>
diff --git a/src/pages/myreview-manage/reviewed-trip/index.tsx b/src/pages/myreview-manage/reviewed-trip/index.tsx
index 60a71d21..e32a98a2 100644
--- a/src/pages/myreview-manage/reviewed-trip/index.tsx
+++ b/src/pages/myreview-manage/reviewed-trip/index.tsx
@@ -39,9 +39,11 @@ export function ReviewedTrip() {
   const reviewData = data?.list.flat() || [];
 
   if (isLoading) {
-    <div className="flex h-screen items-center justify-center">
-      <Image src={loading} alt="로딩 중" />
-    </div>;
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <Image src={loading} alt="로딩 중" />
+      </div>
+    );
   }
 
   return (
diff --git a/src/pages/mytrip-manage/quotationdetail-dreamer/[planId].tsx b/src/pages/mytrip-manage/quotationdetail-dreamer/[planId].tsx
index b4d131b3..cbcd0a9c 100644
--- a/src/pages/mytrip-manage/quotationdetail-dreamer/[planId].tsx
+++ b/src/pages/mytrip-manage/quotationdetail-dreamer/[planId].tsx
@@ -349,7 +349,9 @@ export function QuotationDetailDreamer() {
               </button>
             </div>
           )}
-          <hr className="border-Line-100 my-10 mobile-tablet:hidden" />
+          {planDetail.status === "PENDING" && (
+            <hr className="border-Line-100 my-10 mobile-tablet:hidden" />
+          )}
           <div className={`flex flex-col gap-[22px] ${isTablet ? "hidden" : ""}`}>
             <p className="semibold text-black-400 flex text-xl">플랜 공유하기</p>
             <div className="flex gap-4">{sharePromptContent}</div>
diff --git a/src/services/quotationServiceDreamer.ts b/src/services/quotationServiceDreamer.ts
index 45aa8a8d..3609eb9f 100644
--- a/src/services/quotationServiceDreamer.ts
+++ b/src/services/quotationServiceDreamer.ts
@@ -80,17 +80,12 @@ export const QuotationServiceDreamer = {
     } catch (error: any) {
       if (error.response) {
         // 서버에서 응답이 왔을 때 (500, 404 등)
-        console.error("Server Error:", error.response.status, error.response.data);
-        throw new Error(
-          `API Error: ${error.response.status} - ${error.response.data.message || "Unknown error"}`,
-        );
+        throw error.response;
       } else if (error.request) {
         // 요청은 갔지만 응답이 없을 때 (네트워크 문제)
-        console.error("No Response:", error.request);
         throw new Error("No response from server. Please try again.");
       } else {
         // 요청 자체의 문제 (설정 오류 등)
-        console.error("Request Error:", error.message);
         throw new Error("Request setup error.");
       }
     }
diff --git a/src/services/reviewService.ts b/src/services/reviewService.ts
index 0350a094..95722f47 100644
--- a/src/services/reviewService.ts
+++ b/src/services/reviewService.ts
@@ -24,10 +24,12 @@ interface OwnerInfo {
 interface PlanInfo {
   tripType: any;
   tripDate: string;
-  quotes: {
-    price: number;
-    isAssigned: false;
-  };
+  quotes: quotesInfo[];
+}
+
+interface quotesInfo {
+  price: number;
+  isAssigned: boolean;
 }
 
 export interface CreateReview {