diff --git a/public/rooms/banners/feedback/burger.webp b/public/rooms/banners/feedback/burger.webp deleted file mode 100644 index e902b75f..00000000 Binary files a/public/rooms/banners/feedback/burger.webp and /dev/null differ diff --git a/public/rooms/banners/feedback/desktop.png b/public/rooms/banners/feedback/desktop.png deleted file mode 100644 index be860d91..00000000 Binary files a/public/rooms/banners/feedback/desktop.png and /dev/null differ diff --git a/public/rooms/banners/feedback/mobile.png b/public/rooms/banners/feedback/mobile.png deleted file mode 100644 index b68e36e5..00000000 Binary files a/public/rooms/banners/feedback/mobile.png and /dev/null differ diff --git a/public/rooms/banners/feedback/review-icon.webp b/public/rooms/banners/feedback/review-icon.webp new file mode 100644 index 00000000..ab4dafdd Binary files /dev/null and b/public/rooms/banners/feedback/review-icon.webp differ diff --git a/public/rooms/figma/README.md b/public/rooms/figma/README.md index a21969e2..c707ae0d 100644 --- a/public/rooms/figma/README.md +++ b/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`)을 참조한다. ## 상태별 기준 프레임 diff --git a/src/app/home/(with-header)/page.test.tsx b/src/app/home/(with-header)/page.test.tsx index 2c979a37..3a799c29 100644 --- a/src/app/home/(with-header)/page.test.tsx +++ b/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()); - const banner = host.querySelector('a[href="https://forms.gle/giYqRzrhCYF9Hz1M9"]'); + const banner = host.querySelector(`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); }); diff --git a/src/app/home/_components/FeedbackBanner.module.css b/src/app/home/_components/FeedbackBanner.module.css index c15ab3ab..ae654425 100644 --- a/src/app/home/_components/FeedbackBanner.module.css +++ b/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,19 +41,7 @@ } .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 { @@ -61,7 +49,7 @@ 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; } diff --git a/src/app/home/_components/FeedbackBanner.tsx b/src/app/home/_components/FeedbackBanner.tsx index 15b68cda..6b3f4e70 100644 --- a/src/app/home/_components/FeedbackBanner.tsx +++ b/src/app/home/_components/FeedbackBanner.tsx @@ -4,18 +4,16 @@ export function FeedbackBanner() { return (