feat(home): 이벤트 종료에 맞춰 피드백 배너와 폼 링크 교체

public/rooms/figma/README.md

@@ -8,7 +8,7 @@
 - `plus-mobile.svg`: 모바일 생성 버튼의 20px 원본 아이콘.
 - `invite.svg`: 방 더보기 오버레이 원본 아이콘 (`3449:3613`). 더보기 버튼·프로필 메뉴·삭제 아이콘은 디자인 시스템 아이콘(`@/assets/icons`)을 쓴다.
 
-광고 배너 영역에는 [마케팅 시안](https://www.figma.com/design/asf1pKmEosGS4xUx1qn3MV/%EB%A7%88%EC%BC%80%ED%8C%85?node-id=0-1)의 데스크톱·모바일 완성 배너 이미지를 각각 그대로 사용한다. 에셋은 만료되는 Figma 다운로드 URL 대신 로컬 파일을 참조한다.
+광고 배너 영역은 [마케팅 시안 · 피드백 배너 광고](https://www.figma.com/design/asf1pKmEosGS4xUx1qn3MV/%EB%A7%88%EC%BC%80%ED%8C%85?node-id=141-13)의 데스크톱·모바일 배너를 따른다. 문구는 코드의 텍스트로 그리고, 사진만 `public/rooms/banners/feedback/`의 로컬 파일(`app-preview.webp`·`review-icon.webp`)을 참조한다.
 
 ## 상태별 기준 프레임
 

src/app/home/(with-header)/page.test.tsx

@@ -2,6 +2,8 @@
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { FEEDBACK_FORM_URL } from "@/lib/contact";
+
 import HomePage from "./page";
 
 const state = vi.hoisted(() => ({ isMobileDevice: true }));
@@ -53,10 +55,10 @@ it("includes the room-list site footer in the mobile empty page", async () => {
 it("places the feedback banner before the room list and links it to the form", async () => {
   await act(async () => root.render(<HomePage />));
 
-  const banner = host.querySelector<HTMLAnchorElement>('a[href="https://forms.gle/giYqRzrhCYF9Hz1M9"]');
+  const banner = host.querySelector<HTMLAnchorElement>(`a[href="${FEEDBACK_FORM_URL}"]`);
   const heading = host.querySelector("h1");
   expect(banner).not.toBeNull();
   expect(heading).not.toBeNull();
-  expect(banner?.getAttribute("aria-label")).toContain("피드백 이벤트");
+  expect(banner?.getAttribute("aria-label")).toContain("피드백 남기기");
   expect(banner?.compareDocumentPosition(heading!)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
 });

src/app/home/_components/FeedbackBanner.module.css

@@ -3,8 +3,8 @@
   container-type: inline-size;
   overflow: hidden;
   border-radius: 8px;
-  background: #d6f2ff;
-  color: #000;
+  background: var(--color-primary-subtle);
+  color: var(--color-text-default);
 }
 
 /* Scale the Figma canvas with its container, keeping text sharp at any DPR. */
@@ -41,27 +41,15 @@
 }
 
 .feedback {
-  color: #0183ff;
-}
-
-.reward {
-  color: #ff5521;
-}
-
-.period {
-  left: calc(367 * var(--unit));
-  top: calc(124 * var(--unit));
-  font-size: calc(13 * var(--unit));
-  line-height: calc(24 * var(--unit));
-  letter-spacing: calc(-0.26 * var(--unit));
+  color: var(--color-primary-default);
 }
 
 .cta {
   position: absolute;
   inset: auto 0 0;
   height: calc(62 * var(--unit));
   padding: calc(19 * var(--unit)) calc(49 * var(--unit));
-  background: linear-gradient(to right, #0183ff, #a6d3ff);
+  background: linear-gradient(to right, var(--color-primary-default), #a6d3ff);
   color: #fff;
   font-size: calc(16 * var(--unit));
   font-weight: 700;
@@ -79,17 +67,13 @@
   box-shadow: 0 calc(10 * var(--unit)) calc(10 * var(--unit)) rgb(0 0 0 / 25%);
 }
 
-.burger {
+.reviewIcon {
   position: absolute;
-  left: calc(690 * var(--unit));
-  top: calc(55 * var(--unit));
-  width: calc(224 * var(--unit));
-  height: calc(179 * var(--unit));
-  background: url("/rooms/banners/feedback/burger.webp") center / cover no-repeat;
-}
-
-.badge {
-  display: none;
+  left: calc(680 * var(--unit));
+  top: calc(45 * var(--unit));
+  width: calc(180 * var(--unit));
+  height: calc(180 * var(--unit));
+  background: url("/rooms/banners/feedback/review-icon.webp") center / contain no-repeat;
 }
 
 :global(.is-mobile-device) .canvas {
@@ -98,49 +82,43 @@
 }
 
 :global(.is-mobile-device) .subtitle {
-  left: calc(55 * var(--unit));
-  top: calc(6 * var(--unit));
-  font-size: calc(12 * var(--unit));
-  letter-spacing: calc(-0.24 * var(--unit));
+  left: calc(13 * var(--unit));
+  top: calc(12 * var(--unit));
+  font-size: calc(11 * var(--unit));
+  line-height: calc(16 * var(--unit));
+  letter-spacing: calc(-0.22 * var(--unit));
 }
 
 :global(.is-mobile-device) .title {
   left: calc(13 * var(--unit));
-  top: calc(27 * var(--unit));
-  font-size: calc(28 * var(--unit));
-  line-height: calc(32 * var(--unit));
+  top: calc(32 * var(--unit));
+  font-size: calc(16 * var(--unit));
+  line-height: calc(22 * var(--unit));
+  letter-spacing: calc(-0.32 * var(--unit));
 }
 
-:global(.is-mobile-device) .period {
-  left: calc(10 * var(--unit));
-  top: calc(89 * var(--unit));
+/* Mobile Figma shows the CTA as a blue text line instead of the desktop gradient bar. */
+:global(.is-mobile-device) .cta {
+  inset: auto;
+  left: calc(13 * var(--unit));
+  top: calc(82 * var(--unit));
+  height: auto;
+  padding: 0;
+  background: none;
+  color: var(--color-primary-default);
   font-size: calc(11 * var(--unit));
+  font-weight: 600;
+  line-height: calc(16 * var(--unit));
   letter-spacing: calc(-0.22 * var(--unit));
 }
 
-:global(.is-mobile-device) .burger {
-  left: calc(246 * var(--unit));
-  top: calc(15 * var(--unit));
-  width: calc(147 * var(--unit));
-  height: calc(117 * var(--unit));
-}
-
-:global(.is-mobile-device) .badge {
-  display: block;
-  position: absolute;
-  left: calc(10 * var(--unit));
-  top: calc(10 * var(--unit));
-  width: calc(42 * var(--unit));
-  height: calc(14 * var(--unit));
-  border-radius: 14px;
-  background: #beff0c;
-  font-size: calc(10 * var(--unit));
-  line-height: calc(14 * var(--unit));
-  letter-spacing: calc(-0.2 * var(--unit));
-  text-align: center;
+:global(.is-mobile-device) .reviewIcon {
+  left: calc(279 * var(--unit));
+  top: calc(30 * var(--unit));
+  width: calc(72 * var(--unit));
+  height: calc(72 * var(--unit));
 }
 
-:global(.is-mobile-device) .cta,
 :global(.is-mobile-device) .appPreview {
   display: none;
 }

src/app/home/_components/FeedbackBanner.tsx

@@ -4,18 +4,16 @@ export function FeedbackBanner() {
   return (
     <div aria-hidden="true" className={styles.banner}>
       <div className={styles.canvas}>
-        <span className={styles.badge}>EVENT</span>
         <p className={styles.subtitle}>
-          우때를 써보고 <strong>아쉬운 점</strong>이나 <strong>좋았던 점</strong>이 있었다면? 🥹
+          우때 써보니 어떠셨나요? <strong>짧은 한마디</strong>도 큰 힘이 돼요!
         </p>
         <p className={styles.title}>
-          <span className={styles.feedback}>피드백</span> 남기고<br />
-          <span className={styles.reward}>싸이버거</span> 받아 가세요!
+          우때는 여러분의 <span className={styles.feedback}>피드백</span>으로<br />
+          더 좋은 여행계획 도구로 발전 중!
         </p>
-        <p className={styles.period}>이벤트 기간 : ~10/25일</p>
-        <div className={styles.cta}>피드백 남기러가기 &gt;</div>
+        <div className={styles.cta}>지금 피드백 남기기 &gt;</div>
         <div className={styles.appPreview} />
-        <div className={styles.burger} />
+        <div className={styles.reviewIcon} />
       </div>
     </div>
   );

src/app/home/_components/HomeBannerCarousel.tsx

@@ -3,6 +3,8 @@
 import { useState, type ReactNode } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
+import { FEEDBACK_FORM_URL } from "@/lib/contact";
+
 import { FeedbackBanner } from "./FeedbackBanner";
 
 export type HomeBanner = {
@@ -14,9 +16,9 @@ export type HomeBanner = {
 
 export const HOME_BANNERS: readonly HomeBanner[] = [
   {
-    id: "feedback-event",
-    href: "https://forms.gle/giYqRzrhCYF9Hz1M9",
-    label: "피드백 이벤트: 피드백 남기고 싸이버거 받아 가세요! 이벤트 기간 ~10/25일, 참여하기 (새 창)",
+    id: "feedback",
+    href: FEEDBACK_FORM_URL,
+    label: "피드백 남기기: 우때는 여러분의 피드백으로 더 좋은 여행계획 도구로 발전 중! (새 창)",
     content: <FeedbackBanner />,
   },
 ];
@@ -30,7 +32,7 @@ export function HomeBannerCarousel({ banners }: { banners: readonly HomeBanner[]
   const banner = banners[currentIndex];
 
   return (
-    <section aria-label="이벤트 배너" className="pt-8 pb-8 mobile:pt-6 mobile:pb-6">
+    <section aria-label="배너" className="pt-8 pb-8 mobile:pt-6 mobile:pb-6">
       <a
         key={banner.id}
         href={banner.href}

src/lib/contact.ts

@@ -1,2 +1,2 @@
 export const SUPPORT_EMAIL = "contact@uttae.app";
-export const FEEDBACK_FORM_URL = "https://forms.gle/giYqRzrhCYF9Hz1M9";
+export const FEEDBACK_FORM_URL = "https://forms.gle/jYpDAJj6qKNMwbiWA";