From 471d6b9f46505a5a5e0fc36a35b5db19ab66dd66 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 15:20:40 +0900
Subject: [PATCH 01/22] =?UTF-8?q?=E2=9C=A8=20feat:=20PostLarge=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/components/common/PostLarge.tsx

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
new file mode 100644
index 0000000..f6970ed
--- /dev/null
+++ b/src/components/common/PostLarge.tsx
@@ -0,0 +1,3 @@
+export default function PostLarge() {
+  return;
+}

From c7d85990e9718ee3851d19d749b098245ee65c5b Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 15:30:17 +0900
Subject: [PATCH 02/22] =?UTF-8?q?=F0=9F=90=9B=20fix:=20NoticeDetailItem=20?=
 =?UTF-8?q?type=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/noticeApi.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/noticeApi.ts b/src/api/noticeApi.ts
index cacc72c..fdb35fd 100644
--- a/src/api/noticeApi.ts
+++ b/src/api/noticeApi.ts
@@ -32,7 +32,7 @@ export interface NoticeShopItem extends NoticeItem {
 
 // application까지 포함된 상세형 Notice (상세 조회 시 사용)
 export interface NoticeDetailItem extends NoticeShopItem {
-  currentUserApplication?: {
+  currentUserApplication: null | {
     item: ApplicationItem;
   };
 }

From d56302c092ca683e1e6a8cbe9bdc664e22debf2c Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 15:31:11 +0900
Subject: [PATCH 03/22] =?UTF-8?q?=E2=9C=A8=20feat:=20PostLarge=EC=97=90=20?=
 =?UTF-8?q?Post=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4?=
 =?UTF-8?q?=EC=9A=A9=20=EB=B3=B5=EC=82=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 158 +++++++++++++++++++++++++++-
 1 file changed, 156 insertions(+), 2 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index f6970ed..9c910ac 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -1,3 +1,157 @@
-export default function PostLarge() {
-  return;
+import formatWorkTime from '@/utils/formatWorkTime';
+import ClockRed from '@/assets/icons/clock-red.svg';
+import ClockGray from '@/assets/icons/clock-gray.svg';
+import LocationRed from '@/assets/icons/location-red.svg';
+import LocationGray from '@/assets/icons/location-gray.svg';
+import ArrowUpWhite from '@/assets/icons/arrow-up-white.svg';
+import ArrowUpGray from '@/assets/icons/arrow-up-gray.svg';
+import ArrowUpRed40 from '@/assets/icons/arrow-up-red40.svg';
+import ArrowUpRed30 from '@/assets/icons/arrow-up-red30.svg';
+import ArrowUpRed20 from '@/assets/icons/arrow-up-red20.svg';
+import PostImg from '@/assets/images/post-default.png';
+import type { NoticeDetailItem } from '@/api/noticeApi';
+
+// 상태 계산
+function getStatus(
+  startsAt: string,
+  closed: boolean,
+): 'ACTIVE' | 'CLOSED' | 'EXPIRED' {
+  const now = new Date();
+  const startDate = new Date(startsAt);
+
+  if (closed) return 'CLOSED'; // 인원 다 찼으면 마감
+  if (now >= startDate) return 'EXPIRED'; // 기간 종료되면 마감
+  return 'ACTIVE';
+}
+
+export default function PostLarge({ data }: { data: NoticeDetailItem }) {
+  const {
+    hourlyPay,
+    workhour,
+    startsAt,
+    closed,
+    shop: {
+      item: { name, address1, imageUrl, originalHourlyPay },
+    },
+  } = data;
+
+  const status = getStatus(startsAt, closed);
+  const isInactive = status !== 'ACTIVE';
+  const overlayText = isInactive
+    ? status === 'CLOSED'
+      ? '마감 완료'
+      : '지난 공고'
+    : '';
+
+  const dateTime = `${formatWorkTime({ startsAt, workhour })} (${workhour}시간)`;
+
+  const percent = Math.floor(
+    ((hourlyPay - originalHourlyPay) / originalHourlyPay) * 100,
+  );
+  const isHigherPay = percent > 0; // 이전 시급보다 높을 때만 표시
+
+  const clockIcon = isInactive ? ClockGray : ClockRed;
+  const locationIcon = isInactive ? LocationGray : LocationRed;
+
+  const background = imageUrl ?? PostImg;
+
+  let badgeBgColor = '';
+  let badgeTextColor = '';
+  let arrowIcon = '';
+
+  if (isInactive) {
+    badgeBgColor = 'bg-gray-20';
+    badgeTextColor = 'text-gray-20';
+    arrowIcon = ArrowUpGray;
+  } else {
+    if (percent >= 50) {
+      badgeBgColor = 'bg-red-40';
+      badgeTextColor = 'text-red-40';
+      arrowIcon = ArrowUpRed40;
+    } else if (percent >= 30) {
+      badgeBgColor = 'bg-red-30';
+      badgeTextColor = 'text-red-30';
+      arrowIcon = ArrowUpRed30;
+    } else if (percent >= 1) {
+      badgeBgColor = 'bg-red-20 ';
+      badgeTextColor = 'text-red-20';
+      arrowIcon = ArrowUpRed20;
+    }
+  }
+
+  return (
+    <div className="flex h-261 w-full cursor-pointer flex-col gap-12 rounded-xl border border-gray-20 bg-white p-12 md:h-359 md:gap-20 md:p-16 lg:h-348">
+      <div className="relative">
+        <div
+          className="relative h-84 w-full rounded-xl bg-cover bg-center md:h-171 lg:h-160"
+          style={{ backgroundImage: `url(${background})` }}
+        />
+        {isInactive && (
+          <div className="absolute inset-0 flex items-center justify-center rounded-xl bg-[#000000]/70 text-h3 font-bold text-gray-30 md:text-h1">
+            {overlayText}
+          </div>
+        )}
+      </div>
+      <div
+        className={` ${isInactive ? 'text-gray-30' : 'text-black'} flex flex-col gap-16`}
+      >
+        <div className="flex flex-col gap-8">
+          <div
+            className="truncate text-body1/20 font-bold md:text-h3/24"
+            title={`${name}`}
+          >
+            {name}
+          </div>
+          <div
+            className={`${isInactive ? 'text-gray-30' : 'text-gray-50'} flex flex-col gap-8 text-caption/16 font-regular md:text-body2/22`}
+          >
+            <div className="flex items-center gap-6">
+              <img
+                src={clockIcon}
+                alt="시계 아이콘"
+                className="size-16 md:size-20"
+              />
+              <span>{dateTime}</span>
+            </div>
+            <div className="flex items-center gap-6">
+              <img
+                src={locationIcon}
+                alt="위치 아이콘"
+                className="size-16 md:size-20"
+              />
+              <span>{address1}</span>
+            </div>
+          </div>
+        </div>
+        <div
+          className="flex flex-col justify-between md:flex-row md:items-center"
+          title={`${hourlyPay.toLocaleString()}원${isHigherPay ? `: 기존 시급보다 ${percent}%` : ''}`}
+        >
+          <div className="truncate text-lg/23 font-bold md:text-h2/29 lg:max-w-110">
+            {hourlyPay.toLocaleString()}원
+          </div>
+          {isHigherPay && (
+            <>
+              {/*데스크탑, 태블릿*/}
+              <div
+                className={`hidden h-36 max-w-168 items-center justify-center gap-2 rounded-[20px] p-12 text-body2 font-bold text-white md:flex ${badgeBgColor}`}
+              >
+                <div className="max-w-168 truncate">
+                  기존 시급보다 {percent}%
+                </div>
+                <img src={ArrowUpWhite} alt="위 화살표" className="h-20 w-20" />
+              </div>
+              {/*모바일*/}
+              <div
+                className={`flex items-center gap-2 text-caption/16 md:hidden ${badgeTextColor}`}
+              >
+                <div className="truncate">기존 시급보다 {percent}%</div>
+                <img src={arrowIcon} alt="위 화살표" className="h-16 w-16" />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
 }

From 734dc6584f3da22ce45f337d258b23ab1000c292 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 15:53:06 +0900
Subject: [PATCH 04/22] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=B1=83=EC=A7=80?=
 =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 38 +++++------------------------
 1 file changed, 6 insertions(+), 32 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 9c910ac..7eedfba 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -4,10 +4,6 @@ import ClockGray from '@/assets/icons/clock-gray.svg';
 import LocationRed from '@/assets/icons/location-red.svg';
 import LocationGray from '@/assets/icons/location-gray.svg';
 import ArrowUpWhite from '@/assets/icons/arrow-up-white.svg';
-import ArrowUpGray from '@/assets/icons/arrow-up-gray.svg';
-import ArrowUpRed40 from '@/assets/icons/arrow-up-red40.svg';
-import ArrowUpRed30 from '@/assets/icons/arrow-up-red30.svg';
-import ArrowUpRed20 from '@/assets/icons/arrow-up-red20.svg';
 import PostImg from '@/assets/images/post-default.png';
 import type { NoticeDetailItem } from '@/api/noticeApi';
 
@@ -56,26 +52,16 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
   const background = imageUrl ?? PostImg;
 
   let badgeBgColor = '';
-  let badgeTextColor = '';
-  let arrowIcon = '';
 
   if (isInactive) {
     badgeBgColor = 'bg-gray-20';
-    badgeTextColor = 'text-gray-20';
-    arrowIcon = ArrowUpGray;
   } else {
     if (percent >= 50) {
       badgeBgColor = 'bg-red-40';
-      badgeTextColor = 'text-red-40';
-      arrowIcon = ArrowUpRed40;
     } else if (percent >= 30) {
       badgeBgColor = 'bg-red-30';
-      badgeTextColor = 'text-red-30';
-      arrowIcon = ArrowUpRed30;
     } else if (percent >= 1) {
       badgeBgColor = 'bg-red-20 ';
-      badgeTextColor = 'text-red-20';
-      arrowIcon = ArrowUpRed20;
     }
   }
 
@@ -131,24 +117,12 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
             {hourlyPay.toLocaleString()}원
           </div>
           {isHigherPay && (
-            <>
-              {/*데스크탑, 태블릿*/}
-              <div
-                className={`hidden h-36 max-w-168 items-center justify-center gap-2 rounded-[20px] p-12 text-body2 font-bold text-white md:flex ${badgeBgColor}`}
-              >
-                <div className="max-w-168 truncate">
-                  기존 시급보다 {percent}%
-                </div>
-                <img src={ArrowUpWhite} alt="위 화살표" className="h-20 w-20" />
-              </div>
-              {/*모바일*/}
-              <div
-                className={`flex items-center gap-2 text-caption/16 md:hidden ${badgeTextColor}`}
-              >
-                <div className="truncate">기존 시급보다 {percent}%</div>
-                <img src={arrowIcon} alt="위 화살표" className="h-16 w-16" />
-              </div>
-            </>
+            <div
+              className={`flex h-36 max-w-168 items-center justify-center gap-2 rounded-[20px] p-12 text-body2 font-bold text-white ${badgeBgColor}`}
+            >
+              <div className="max-w-168 truncate">기존 시급보다 {percent}%</div>
+              <img src={ArrowUpWhite} alt="위 화살표" className="h-20 w-20" />
+            </div>
           )}
         </div>
       </div>

From 971acaea8566cc8be037a1172fc9dbbd9bc13452 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 15:57:43 +0900
Subject: [PATCH 05/22] =?UTF-8?q?=F0=9F=90=9B=20fix:=20icon=20=EC=83=89=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 7eedfba..10ccc49 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -1,8 +1,6 @@
 import formatWorkTime from '@/utils/formatWorkTime';
 import ClockRed from '@/assets/icons/clock-red.svg';
-import ClockGray from '@/assets/icons/clock-gray.svg';
 import LocationRed from '@/assets/icons/location-red.svg';
-import LocationGray from '@/assets/icons/location-gray.svg';
 import ArrowUpWhite from '@/assets/icons/arrow-up-white.svg';
 import PostImg from '@/assets/images/post-default.png';
 import type { NoticeDetailItem } from '@/api/noticeApi';
@@ -46,9 +44,6 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
   );
   const isHigherPay = percent > 0; // 이전 시급보다 높을 때만 표시
 
-  const clockIcon = isInactive ? ClockGray : ClockRed;
-  const locationIcon = isInactive ? LocationGray : LocationRed;
-
   const background = imageUrl ?? PostImg;
 
   let badgeBgColor = '';
@@ -93,7 +88,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
           >
             <div className="flex items-center gap-6">
               <img
-                src={clockIcon}
+                src={ClockRed}
                 alt="시계 아이콘"
                 className="size-16 md:size-20"
               />
@@ -101,7 +96,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
             </div>
             <div className="flex items-center gap-6">
               <img
-                src={locationIcon}
+                src={LocationRed}
                 alt="위치 아이콘"
                 className="size-16 md:size-20"
               />

From 0554c2227019a6424c64c7b064f182ecd842abe8 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 15:58:54 +0900
Subject: [PATCH 06/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20icon=20i?=
 =?UTF-8?q?mport=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 10ccc49..2e06a35 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -1,7 +1,7 @@
 import formatWorkTime from '@/utils/formatWorkTime';
-import ClockRed from '@/assets/icons/clock-red.svg';
-import LocationRed from '@/assets/icons/location-red.svg';
-import ArrowUpWhite from '@/assets/icons/arrow-up-white.svg';
+import ic_clock from '@/assets/icons/clock-red.svg';
+import ic_location from '@/assets/icons/location-red.svg';
+import ic_arrow from '@/assets/icons/arrow-up-white.svg';
 import PostImg from '@/assets/images/post-default.png';
 import type { NoticeDetailItem } from '@/api/noticeApi';
 
@@ -88,7 +88,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
           >
             <div className="flex items-center gap-6">
               <img
-                src={ClockRed}
+                src={ic_clock}
                 alt="시계 아이콘"
                 className="size-16 md:size-20"
               />
@@ -96,7 +96,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
             </div>
             <div className="flex items-center gap-6">
               <img
-                src={LocationRed}
+                src={ic_location}
                 alt="위치 아이콘"
                 className="size-16 md:size-20"
               />
@@ -116,7 +116,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
               className={`flex h-36 max-w-168 items-center justify-center gap-2 rounded-[20px] p-12 text-body2 font-bold text-white ${badgeBgColor}`}
             >
               <div className="max-w-168 truncate">기존 시급보다 {percent}%</div>
-              <img src={ArrowUpWhite} alt="위 화살표" className="h-20 w-20" />
+              <img src={ic_arrow} alt="위 화살표" className="h-20 w-20" />
             </div>
           )}
         </div>

From 83cc6c8d88c8de765b4c719e693fe397af80a3a9 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 16:13:39 +0900
Subject: [PATCH 07/22] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=B9=84=ED=99=9C?=
 =?UTF-8?q?=EC=84=B1=ED=99=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20isInactive=20=EB=B3=80=EC=88=98=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 37 ++++++++++-------------------
 1 file changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 2e06a35..052fa02 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -30,12 +30,8 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
   } = data;
 
   const status = getStatus(startsAt, closed);
-  const isInactive = status !== 'ACTIVE';
-  const overlayText = isInactive
-    ? status === 'CLOSED'
-      ? '마감 완료'
-      : '지난 공고'
-    : '';
+  const overlayText =
+    status === 'ACTIVE' ? '' : status === 'CLOSED' ? '마감 완료' : '지난 공고';
 
   const dateTime = `${formatWorkTime({ startsAt, workhour })} (${workhour}시간)`;
 
@@ -47,17 +43,12 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
   const background = imageUrl ?? PostImg;
 
   let badgeBgColor = '';
-
-  if (isInactive) {
-    badgeBgColor = 'bg-gray-20';
-  } else {
-    if (percent >= 50) {
-      badgeBgColor = 'bg-red-40';
-    } else if (percent >= 30) {
-      badgeBgColor = 'bg-red-30';
-    } else if (percent >= 1) {
-      badgeBgColor = 'bg-red-20 ';
-    }
+  if (percent >= 50) {
+    badgeBgColor = 'bg-red-40';
+  } else if (percent >= 30) {
+    badgeBgColor = 'bg-red-30';
+  } else if (percent >= 1) {
+    badgeBgColor = 'bg-red-20 ';
   }
 
   return (
@@ -67,15 +58,13 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
           className="relative h-84 w-full rounded-xl bg-cover bg-center md:h-171 lg:h-160"
           style={{ backgroundImage: `url(${background})` }}
         />
-        {isInactive && (
+        {status === 'ACTIVE' || (
           <div className="absolute inset-0 flex items-center justify-center rounded-xl bg-[#000000]/70 text-h3 font-bold text-gray-30 md:text-h1">
             {overlayText}
           </div>
         )}
       </div>
-      <div
-        className={` ${isInactive ? 'text-gray-30' : 'text-black'} flex flex-col gap-16`}
-      >
+      <div className="flex flex-col gap-16 text-black">
         <div className="flex flex-col gap-8">
           <div
             className="truncate text-body1/20 font-bold md:text-h3/24"
@@ -83,9 +72,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
           >
             {name}
           </div>
-          <div
-            className={`${isInactive ? 'text-gray-30' : 'text-gray-50'} flex flex-col gap-8 text-caption/16 font-regular md:text-body2/22`}
-          >
+          <div className="flex flex-col gap-8 text-caption/16 font-regular text-gray-50 md:text-body2/22">
             <div className="flex items-center gap-6">
               <img
                 src={ic_clock}
@@ -111,7 +98,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
           <div className="truncate text-lg/23 font-bold md:text-h2/29 lg:max-w-110">
             {hourlyPay.toLocaleString()}원
           </div>
-          {isHigherPay && (
+          {isHigherPay && status === 'ACTIVE' && (
             <div
               className={`flex h-36 max-w-168 items-center justify-center gap-2 rounded-[20px] p-12 text-body2 font-bold text-white ${badgeBgColor}`}
             >

From 6ae2cf90d0ee9b95e09511cacafadc61427acca1 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 16:59:36 +0900
Subject: [PATCH 08/22] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EC=99=B8?=
 =?UTF-8?q?=EB=B6=80=20=ED=8B=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 052fa02..b097859 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -52,10 +52,10 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
   }
 
   return (
-    <div className="flex h-261 w-full cursor-pointer flex-col gap-12 rounded-xl border border-gray-20 bg-white p-12 md:h-359 md:gap-20 md:p-16 lg:h-348">
-      <div className="relative">
+    <div className="flex min-h-356 flex-col items-stretch justify-between rounded-xl border border-gray-20 bg-white p-20 md:p-24 lg:flex-row">
+      <div className="relative h-178 md:h-360 lg:h-auto lg:w-539">
         <div
-          className="relative h-84 w-full rounded-xl bg-cover bg-center md:h-171 lg:h-160"
+          className="h-full w-full rounded-xl bg-cover bg-center"
           style={{ backgroundImage: `url(${background})` }}
         />
         {status === 'ACTIVE' || (
@@ -64,7 +64,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
           </div>
         )}
       </div>
-      <div className="flex flex-col gap-16 text-black">
+      <div className="mt-12 flex flex-col justify-between gap-24 text-black md:mt-16 md:gap-40 lg:w-346">
         <div className="flex flex-col gap-8">
           <div
             className="truncate text-body1/20 font-bold md:text-h3/24"

From fbba521a9a2298e6c7a26c2e3c5e1223da633fb3 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 17:01:56 +0900
Subject: [PATCH 09/22] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EA=B0=80?=
 =?UTF-8?q?=EA=B2=A9=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 34 +++++++++++++++--------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index b097859..80071fd 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -72,6 +72,24 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
           >
             {name}
           </div>
+          <div
+            className="flex flex-col justify-between md:flex-row md:items-center"
+            title={`${hourlyPay.toLocaleString()}원${isHigherPay ? `: 기존 시급보다 ${percent}%` : ''}`}
+          >
+            <div className="truncate text-lg/23 font-bold md:text-h2/29 lg:max-w-110">
+              {hourlyPay.toLocaleString()}원
+            </div>
+            {isHigherPay && status === 'ACTIVE' && (
+              <div
+                className={`flex h-36 max-w-168 items-center justify-center gap-2 rounded-[20px] p-12 text-body2 font-bold text-white ${badgeBgColor}`}
+              >
+                <div className="max-w-168 truncate">
+                  기존 시급보다 {percent}%
+                </div>
+                <img src={ic_arrow} alt="위 화살표" className="h-20 w-20" />
+              </div>
+            )}
+          </div>
           <div className="flex flex-col gap-8 text-caption/16 font-regular text-gray-50 md:text-body2/22">
             <div className="flex items-center gap-6">
               <img
@@ -91,22 +109,6 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
             </div>
           </div>
         </div>
-        <div
-          className="flex flex-col justify-between md:flex-row md:items-center"
-          title={`${hourlyPay.toLocaleString()}원${isHigherPay ? `: 기존 시급보다 ${percent}%` : ''}`}
-        >
-          <div className="truncate text-lg/23 font-bold md:text-h2/29 lg:max-w-110">
-            {hourlyPay.toLocaleString()}원
-          </div>
-          {isHigherPay && status === 'ACTIVE' && (
-            <div
-              className={`flex h-36 max-w-168 items-center justify-center gap-2 rounded-[20px] p-12 text-body2 font-bold text-white ${badgeBgColor}`}
-            >
-              <div className="max-w-168 truncate">기존 시급보다 {percent}%</div>
-              <img src={ic_arrow} alt="위 화살표" className="h-20 w-20" />
-            </div>
-          )}
-        </div>
       </div>
     </div>
   );

From a522109c8e5d2c8bb7719d49fe5c5f10c668d51b Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 17:04:00 +0900
Subject: [PATCH 10/22] =?UTF-8?q?=F0=9F=94=A5=20remove:=20=EA=B0=80?=
 =?UTF-8?q?=EA=B2=8C=20=EC=9D=B4=EB=A6=84(name)=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 80071fd..870b1a0 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -25,7 +25,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
     startsAt,
     closed,
     shop: {
-      item: { name, address1, imageUrl, originalHourlyPay },
+      item: { address1, imageUrl, originalHourlyPay },
     },
   } = data;
 
@@ -66,12 +66,6 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
       </div>
       <div className="mt-12 flex flex-col justify-between gap-24 text-black md:mt-16 md:gap-40 lg:w-346">
         <div className="flex flex-col gap-8">
-          <div
-            className="truncate text-body1/20 font-bold md:text-h3/24"
-            title={`${name}`}
-          >
-            {name}
-          </div>
           <div
             className="flex flex-col justify-between md:flex-row md:items-center"
             title={`${hourlyPay.toLocaleString()}원${isHigherPay ? `: 기존 시급보다 ${percent}%` : ''}`}

From c1db73262368508c61aea823b6264f0b441eb0ef Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 17:23:12 +0900
Subject: [PATCH 11/22] =?UTF-8?q?=F0=9F=8E=A8=20style:=20isHigherPay=20?=
 =?UTF-8?q?=EB=B1=83=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 870b1a0..475b825 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -75,12 +75,16 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
             </div>
             {isHigherPay && status === 'ACTIVE' && (
               <div
-                className={`flex h-36 max-w-168 items-center justify-center gap-2 rounded-[20px] p-12 text-body2 font-bold text-white ${badgeBgColor}`}
+                className={`flex h-24 items-center justify-center gap-2 rounded-full px-8 py-4 text-caption/16 text-white md:h-36 md:p-12 md:text-body2 md:font-bold ${badgeBgColor}`}
               >
-                <div className="max-w-168 truncate">
+                <div className="max-w-122 truncate">
                   기존 시급보다 {percent}%
                 </div>
-                <img src={ic_arrow} alt="위 화살표" className="h-20 w-20" />
+                <img
+                  src={ic_arrow}
+                  alt="위 화살표"
+                  className="size-16 md:size-20"
+                />
               </div>
             )}
           </div>

From 2473c336be57cacadffd7751fac29a5b3dad1aa1 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 17:51:17 +0900
Subject: [PATCH 12/22] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EA=B0=80?=
 =?UTF-8?q?=EA=B2=A9-=EB=B1=83=EC=A7=80=20=EB=B6=80=EB=B6=84=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 475b825..1234b98 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -67,10 +67,10 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
       <div className="mt-12 flex flex-col justify-between gap-24 text-black md:mt-16 md:gap-40 lg:w-346">
         <div className="flex flex-col gap-8">
           <div
-            className="flex flex-col justify-between md:flex-row md:items-center"
+            className="flex items-center gap-4 md:gap-8"
             title={`${hourlyPay.toLocaleString()}원${isHigherPay ? `: 기존 시급보다 ${percent}%` : ''}`}
           >
-            <div className="truncate text-lg/23 font-bold md:text-h2/29 lg:max-w-110">
+            <div className="text-h2/29 font-bold md:text-h1/34">
               {hourlyPay.toLocaleString()}원
             </div>
             {isHigherPay && status === 'ACTIVE' && (

From 7d85561076990dff45e8e679f63ef046b3558edd Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 18:01:28 +0900
Subject: [PATCH 13/22] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84/=EC=A3=BC=EC=86=8C=20=EB=B6=80=EB=B6=84=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 1234b98..e1598d4 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -88,8 +88,8 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
               </div>
             )}
           </div>
-          <div className="flex flex-col gap-8 text-caption/16 font-regular text-gray-50 md:text-body2/22">
-            <div className="flex items-center gap-6">
+          <div className="flex flex-col gap-8 text-body2/22 font-regular md:gap-12 md:text-body1/26">
+            <div className="flex items-center gap-6 text-gray-50">
               <img
                 src={ic_clock}
                 alt="시계 아이콘"
@@ -97,7 +97,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
               />
               <span>{dateTime}</span>
             </div>
-            <div className="flex items-center gap-6">
+            <div className="flex items-center gap-6 text-gray-50">
               <img
                 src={ic_location}
                 alt="위치 아이콘"

From f1cad489cc3d18da9eefbc43f39016c9a2bf5edd Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 18:03:53 +0900
Subject: [PATCH 14/22] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EC=9A=94?=
 =?UTF-8?q?=EC=86=8C=20=EB=B0=B0=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 34 ++++++++++++++---------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index e1598d4..0864cfd 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -65,7 +65,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
         )}
       </div>
       <div className="mt-12 flex flex-col justify-between gap-24 text-black md:mt-16 md:gap-40 lg:w-346">
-        <div className="flex flex-col gap-8">
+        <div className="flex flex-col gap-8 text-body2/22 font-regular md:gap-12 md:text-body1/26">
           <div
             className="flex items-center gap-4 md:gap-8"
             title={`${hourlyPay.toLocaleString()}원${isHigherPay ? `: 기존 시급보다 ${percent}%` : ''}`}
@@ -88,23 +88,21 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
               </div>
             )}
           </div>
-          <div className="flex flex-col gap-8 text-body2/22 font-regular md:gap-12 md:text-body1/26">
-            <div className="flex items-center gap-6 text-gray-50">
-              <img
-                src={ic_clock}
-                alt="시계 아이콘"
-                className="size-16 md:size-20"
-              />
-              <span>{dateTime}</span>
-            </div>
-            <div className="flex items-center gap-6 text-gray-50">
-              <img
-                src={ic_location}
-                alt="위치 아이콘"
-                className="size-16 md:size-20"
-              />
-              <span>{address1}</span>
-            </div>
+          <div className="flex items-center gap-6 text-gray-50">
+            <img
+              src={ic_clock}
+              alt="시계 아이콘"
+              className="size-16 md:size-20"
+            />
+            <span>{dateTime}</span>
+          </div>
+          <div className="flex items-center gap-6 text-gray-50">
+            <img
+              src={ic_location}
+              alt="위치 아이콘"
+              className="size-16 md:size-20"
+            />
+            <span>{address1}</span>
           </div>
         </div>
       </div>

From 4e2d8d05c1625e8f355e9ea8c9a2e04cd23073b2 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 18:05:26 +0900
Subject: [PATCH 15/22] =?UTF-8?q?=F0=9F=94=A5=20remove:=20=EB=B6=88?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=20span=ED=83=9C=EA=B7=B8=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 0864cfd..4b64b83 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -94,7 +94,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
               alt="시계 아이콘"
               className="size-16 md:size-20"
             />
-            <span>{dateTime}</span>
+            {dateTime}
           </div>
           <div className="flex items-center gap-6 text-gray-50">
             <img
@@ -102,7 +102,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
               alt="위치 아이콘"
               className="size-16 md:size-20"
             />
-            <span>{address1}</span>
+            {address1}
           </div>
         </div>
       </div>

From 5bb3639b5fe4ee36208fabc0387e0d3113270fb8 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 18:12:08 +0900
Subject: [PATCH 16/22] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=8B=9C=EA=B8=89=20?=
 =?UTF-8?q?=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 43 ++++++++++++++++-------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 4b64b83..f904076 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -66,27 +66,32 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
       </div>
       <div className="mt-12 flex flex-col justify-between gap-24 text-black md:mt-16 md:gap-40 lg:w-346">
         <div className="flex flex-col gap-8 text-body2/22 font-regular md:gap-12 md:text-body1/26">
-          <div
-            className="flex items-center gap-4 md:gap-8"
-            title={`${hourlyPay.toLocaleString()}원${isHigherPay ? `: 기존 시급보다 ${percent}%` : ''}`}
-          >
-            <div className="text-h2/29 font-bold md:text-h1/34">
-              {hourlyPay.toLocaleString()}원
+          <div>
+            <div className="mb-8 leading-17 font-bold text-primary md:leading-20">
+              시급
             </div>
-            {isHigherPay && status === 'ACTIVE' && (
-              <div
-                className={`flex h-24 items-center justify-center gap-2 rounded-full px-8 py-4 text-caption/16 text-white md:h-36 md:p-12 md:text-body2 md:font-bold ${badgeBgColor}`}
-              >
-                <div className="max-w-122 truncate">
-                  기존 시급보다 {percent}%
-                </div>
-                <img
-                  src={ic_arrow}
-                  alt="위 화살표"
-                  className="size-16 md:size-20"
-                />
+            <div
+              className="flex items-center gap-4 md:gap-8"
+              title={`${hourlyPay.toLocaleString()}원${isHigherPay ? `: 기존 시급보다 ${percent}%` : ''}`}
+            >
+              <div className="text-h2/29 font-bold md:text-h1/34">
+                {hourlyPay.toLocaleString()}원
               </div>
-            )}
+              {isHigherPay && status === 'ACTIVE' && (
+                <div
+                  className={`flex h-24 items-center justify-center gap-2 rounded-full px-8 py-4 text-caption/16 text-white md:h-36 md:p-12 md:text-body2 md:font-bold ${badgeBgColor}`}
+                >
+                  <div className="max-w-122 truncate">
+                    기존 시급보다 {percent}%
+                  </div>
+                  <img
+                    src={ic_arrow}
+                    alt="위 화살표"
+                    className="size-16 md:size-20"
+                  />
+                </div>
+              )}
+            </div>
           </div>
           <div className="flex items-center gap-6 text-gray-50">
             <img

From 5a9a52b834ecbfe057c9b8c6fa07a57b5fc5e4ae Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 18:19:55 +0900
Subject: [PATCH 17/22] =?UTF-8?q?=E2=9C=A8=20feat:=20shopDescription=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index f904076..277f5ad 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -25,7 +25,12 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
     startsAt,
     closed,
     shop: {
-      item: { address1, imageUrl, originalHourlyPay },
+      item: {
+        address1,
+        imageUrl,
+        originalHourlyPay,
+        description: shopDescription,
+      },
     },
   } = data;
 
@@ -64,7 +69,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
           </div>
         )}
       </div>
-      <div className="mt-12 flex flex-col justify-between gap-24 text-black md:mt-16 md:gap-40 lg:w-346">
+      <div className="mt-12 flex flex-col justify-between gap-24 text-black md:mt-16 md:gap-40 lg:w-346 lg:gap-0">
         <div className="flex flex-col gap-8 text-body2/22 font-regular md:gap-12 md:text-body1/26">
           <div>
             <div className="mb-8 leading-17 font-bold text-primary md:leading-20">
@@ -109,6 +114,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
             />
             {address1}
           </div>
+          {shopDescription}
         </div>
       </div>
     </div>

From 11e4bdf0afd47044d6badbca94cbe0c41fdb2245 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 18:27:09 +0900
Subject: [PATCH 18/22] =?UTF-8?q?=E2=9C=A8=20feat:=20noticeDescription=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 110 ++++++++++++++--------------
 1 file changed, 57 insertions(+), 53 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 277f5ad..07e1d42 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -24,6 +24,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
     workhour,
     startsAt,
     closed,
+    description: noticeDescription,
     shop: {
       item: {
         address1,
@@ -57,66 +58,69 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
   }
 
   return (
-    <div className="flex min-h-356 flex-col items-stretch justify-between rounded-xl border border-gray-20 bg-white p-20 md:p-24 lg:flex-row">
-      <div className="relative h-178 md:h-360 lg:h-auto lg:w-539">
-        <div
-          className="h-full w-full rounded-xl bg-cover bg-center"
-          style={{ backgroundImage: `url(${background})` }}
-        />
-        {status === 'ACTIVE' || (
-          <div className="absolute inset-0 flex items-center justify-center rounded-xl bg-[#000000]/70 text-h3 font-bold text-gray-30 md:text-h1">
-            {overlayText}
-          </div>
-        )}
-      </div>
-      <div className="mt-12 flex flex-col justify-between gap-24 text-black md:mt-16 md:gap-40 lg:w-346 lg:gap-0">
-        <div className="flex flex-col gap-8 text-body2/22 font-regular md:gap-12 md:text-body1/26">
-          <div>
-            <div className="mb-8 leading-17 font-bold text-primary md:leading-20">
-              시급
+    <div className="text-body2/22 font-regular md:text-body1/26">
+      <div className="flex min-h-356 flex-col items-stretch justify-between rounded-xl border border-gray-20 bg-white p-20 md:p-24 lg:flex-row">
+        <div className="relative h-178 md:h-360 lg:h-auto lg:w-539">
+          <div
+            className="h-full w-full rounded-xl bg-cover bg-center"
+            style={{ backgroundImage: `url(${background})` }}
+          />
+          {status === 'ACTIVE' || (
+            <div className="absolute inset-0 flex items-center justify-center rounded-xl bg-[#000000]/70 text-h3 font-bold text-gray-30 md:text-h1">
+              {overlayText}
             </div>
-            <div
-              className="flex items-center gap-4 md:gap-8"
-              title={`${hourlyPay.toLocaleString()}원${isHigherPay ? `: 기존 시급보다 ${percent}%` : ''}`}
-            >
-              <div className="text-h2/29 font-bold md:text-h1/34">
-                {hourlyPay.toLocaleString()}원
+          )}
+        </div>
+        <div className="mt-12 flex flex-col justify-between gap-24 text-black md:mt-16 md:gap-40 lg:w-346 lg:gap-0">
+          <div className="flex flex-col gap-8 md:gap-12">
+            <div>
+              <div className="mb-8 leading-17 font-bold text-primary md:leading-20">
+                시급
               </div>
-              {isHigherPay && status === 'ACTIVE' && (
-                <div
-                  className={`flex h-24 items-center justify-center gap-2 rounded-full px-8 py-4 text-caption/16 text-white md:h-36 md:p-12 md:text-body2 md:font-bold ${badgeBgColor}`}
-                >
-                  <div className="max-w-122 truncate">
-                    기존 시급보다 {percent}%
-                  </div>
-                  <img
-                    src={ic_arrow}
-                    alt="위 화살표"
-                    className="size-16 md:size-20"
-                  />
+              <div
+                className="flex items-center gap-4 md:gap-8"
+                title={`${hourlyPay.toLocaleString()}원${isHigherPay ? `: 기존 시급보다 ${percent}%` : ''}`}
+              >
+                <div className="text-h2/29 font-bold md:text-h1/34">
+                  {hourlyPay.toLocaleString()}원
                 </div>
-              )}
+                {isHigherPay && status === 'ACTIVE' && (
+                  <div
+                    className={`flex h-24 items-center justify-center gap-2 rounded-full px-8 py-4 text-caption/16 text-white md:h-36 md:p-12 md:text-body2 md:font-bold ${badgeBgColor}`}
+                  >
+                    <div className="max-w-122 truncate">
+                      기존 시급보다 {percent}%
+                    </div>
+                    <img
+                      src={ic_arrow}
+                      alt="위 화살표"
+                      className="size-16 md:size-20"
+                    />
+                  </div>
+                )}
+              </div>
             </div>
+            <div className="flex items-center gap-6 text-gray-50">
+              <img
+                src={ic_clock}
+                alt="시계 아이콘"
+                className="size-16 md:size-20"
+              />
+              {dateTime}
+            </div>
+            <div className="flex items-center gap-6 text-gray-50">
+              <img
+                src={ic_location}
+                alt="위치 아이콘"
+                className="size-16 md:size-20"
+              />
+              {address1}
+            </div>
+            {shopDescription}
           </div>
-          <div className="flex items-center gap-6 text-gray-50">
-            <img
-              src={ic_clock}
-              alt="시계 아이콘"
-              className="size-16 md:size-20"
-            />
-            {dateTime}
-          </div>
-          <div className="flex items-center gap-6 text-gray-50">
-            <img
-              src={ic_location}
-              alt="위치 아이콘"
-              className="size-16 md:size-20"
-            />
-            {address1}
-          </div>
-          {shopDescription}
         </div>
       </div>
+      <div>{noticeDescription}</div>
     </div>
   );
 }

From e36705efd0f8a245e3515ddd0f5caada0dcbc57d Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 18:43:44 +0900
Subject: [PATCH 19/22] =?UTF-8?q?=F0=9F=8E=A8=20style:=20noticeDescription?=
 =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 07e1d42..8b4425b 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -120,7 +120,12 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
           </div>
         </div>
       </div>
-      <div>{noticeDescription}</div>
+      <div className="mt-12 rounded-xl bg-gray-10 p-20 md:mt-24 md:p-32">
+        <div className="mb-8 leading-17 font-bold md:mb-12 md:leading-20">
+          공고 설명
+        </div>
+        {noticeDescription}
+      </div>
     </div>
   );
 }

From 4d63d3ca702aed647dbbb9e76a2fcbfc79a4b9c1 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 18:53:16 +0900
Subject: [PATCH 20/22] =?UTF-8?q?=E2=9C=A8=20feat:=20className,=20children?=
 =?UTF-8?q?=20prop=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 8b4425b..ea91f28 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import formatWorkTime from '@/utils/formatWorkTime';
 import ic_clock from '@/assets/icons/clock-red.svg';
 import ic_location from '@/assets/icons/location-red.svg';
@@ -18,7 +19,15 @@ function getStatus(
   return 'ACTIVE';
 }
 
-export default function PostLarge({ data }: { data: NoticeDetailItem }) {
+export default function PostLarge({
+  className = '',
+  data,
+  children,
+}: {
+  className?: string;
+  data: NoticeDetailItem;
+  children?: ReactNode;
+}) {
   const {
     hourlyPay,
     workhour,
@@ -58,7 +67,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
   }
 
   return (
-    <div className="text-body2/22 font-regular md:text-body1/26">
+    <div className={`text-body2/22 font-regular md:text-body1/26 ${className}`}>
       <div className="flex min-h-356 flex-col items-stretch justify-between rounded-xl border border-gray-20 bg-white p-20 md:p-24 lg:flex-row">
         <div className="relative h-178 md:h-360 lg:h-auto lg:w-539">
           <div
@@ -118,6 +127,7 @@ export default function PostLarge({ data }: { data: NoticeDetailItem }) {
             </div>
             {shopDescription}
           </div>
+          {children}
         </div>
       </div>
       <div className="mt-12 rounded-xl bg-gray-10 p-20 md:mt-24 md:p-32">

From 8c99a36d8668c9a782c9086443b8e86abd45c888 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 18:59:06 +0900
Subject: [PATCH 21/22] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EA=B3=B5?=
 =?UTF-8?q?=EA=B3=A0=20=EC=84=A4=EB=AA=85=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index ea91f28..74cdfbc 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -130,10 +130,8 @@ export default function PostLarge({
           {children}
         </div>
       </div>
-      <div className="mt-12 rounded-xl bg-gray-10 p-20 md:mt-24 md:p-32">
-        <div className="mb-8 leading-17 font-bold md:mb-12 md:leading-20">
-          공고 설명
-        </div>
+      <div className="mt-12 flex flex-col gap-8 rounded-xl bg-gray-10 p-20 md:mt-24 md:gap-12 md:p-32">
+        <div className="leading-17 font-bold md:leading-20">공고 설명</div>
         {noticeDescription}
       </div>
     </div>

From 5fae1751ed37f1c7f407cd9b410bc44941d9bf30 Mon Sep 17 00:00:00 2001
From: Moon-ju-young <amymoon07@khu.ac.kr>
Date: Sat, 21 Jun 2025 19:04:05 +0900
Subject: [PATCH 22/22] =?UTF-8?q?=F0=9F=8E=A8=20style:=20border=20?=
 =?UTF-8?q?=EA=B3=A0=EB=A0=A4=ED=95=98=EC=97=AC=20padding=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostLarge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/PostLarge.tsx b/src/components/common/PostLarge.tsx
index 74cdfbc..56b2850 100644
--- a/src/components/common/PostLarge.tsx
+++ b/src/components/common/PostLarge.tsx
@@ -68,7 +68,7 @@ export default function PostLarge({
 
   return (
     <div className={`text-body2/22 font-regular md:text-body1/26 ${className}`}>
-      <div className="flex min-h-356 flex-col items-stretch justify-between rounded-xl border border-gray-20 bg-white p-20 md:p-24 lg:flex-row">
+      <div className="flex min-h-356 flex-col items-stretch justify-between rounded-xl border border-gray-20 bg-white p-19 md:p-23 lg:flex-row">
         <div className="relative h-178 md:h-360 lg:h-auto lg:w-539">
           <div
             className="h-full w-full rounded-xl bg-cover bg-center"