From 2aabf03d7438fb935d415ba62d690696b15f92a5 Mon Sep 17 00:00:00 2001 From: jangchanwoo Date: Thu, 3 Sep 2026 13:53:11 +0900 Subject: [PATCH] =?UTF-8?q?[WEB-USER]:=20=EC=82=AC=EC=9E=A5=EB=8B=98=20?= =?UTF-8?q?=EC=9E=85=EC=A0=90=20=EC=95=88=EB=82=B4=20=EC=A7=84=EC=9E=85?= =?UTF-8?q?=EC=A0=90(/partner)=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 오프라인에서 입점 희망 사장님을 만날 때 보여줄 QR이 필요한데, 목적지가 사전 수요조사 Google Form과 판매자 운영 페이지 두 곳으로 갈립니다. QR에 이 주소들을 직접 넣으면 폼 주소나 운영 도메인이 바뀌었을 때 이미 인쇄해 배포한 QR을 회수할 방법이 없습니다. - QR에는 항상 `https://picakes.com/partner`만 넣고, 실제 목적지는 `partner.constants.ts`에서 정하도록 경유 페이지를 둠. 앱 다운로드 진입점(`/app`)에서 쓰던 원칙을 그대로 따름 - 자동 리다이렉트를 걸지 않고 버튼 두 개를 직접 고르게 함. QR을 찍는 사람의 상황이 "아직 입점 전(설문)"과 "이미 입점(운영 페이지)"으로 갈려서 서버가 UA나 헤더로 대신 판단할 수 없기 때문 - 높이를 `100vh`가 아니라 `100dvh`로 잡음. 모바일 브라우저의 100vh는 주소창에 가려지는 영역까지 포함해서, 그대로 두면 하단 버튼이 접혀 스크롤해야 보임 (`/app/android`에서 겪었던 것과 같은 문제) - 오프라인 QR 전용 경유 페이지라 `robots: index false`로 검색 노출 제외 - 단독 화면이므로 `RootWrapperLayout`에서 공통 헤더를 빼고 minimal 처리 Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_016ScM4roFnvWcR1hmDuw7Zi --- apps/web-user/src/app/partner/page.tsx | 75 +++++++++++++++++++ .../components/layouts/RootWrapperLayout.tsx | 2 + .../src/common/constants/partner.constants.ts | 15 ++++ .../src/common/constants/paths.constant.ts | 6 ++ 4 files changed, 98 insertions(+) create mode 100644 apps/web-user/src/app/partner/page.tsx create mode 100644 apps/web-user/src/common/constants/partner.constants.ts diff --git a/apps/web-user/src/app/partner/page.tsx b/apps/web-user/src/app/partner/page.tsx new file mode 100644 index 00000000..733b172c --- /dev/null +++ b/apps/web-user/src/app/partner/page.tsx @@ -0,0 +1,75 @@ +import type { Metadata } from "next"; +import { Icon } from "@/apps/web-user/common/components/icons"; +import { + PARTNER_SURVEY_URL, + SELLER_CONSOLE_URL, +} from "@/apps/web-user/common/constants/partner.constants"; + +/** + * 오프라인에서 만나는 입점 희망 사장님께 보여주는 QR 진입점(`https://picakes.com/partner`). + * + * QR에는 이 주소만 담고 실제 목적지는 코드에서 정합니다 — 설문 폼 주소나 운영 도메인이 바뀌어도 + * 이미 배포한 QR을 회수할 필요가 없게 하기 위함입니다 + * ({@link ../../common/constants/partner.constants.ts}). + * + * 자동 리다이렉트를 걸지 않고 버튼 두 개를 직접 고르게 합니다. 찍는 사람의 상황이 + * "아직 입점 전(설문)"과 "이미 입점(운영 페이지)"으로 갈리기 때문에 서버가 대신 판단할 수 없습니다. + */ +export const metadata: Metadata = { + title: "사장님 입점 안내", + description: + "Picake는 케이크 전문 매장을 위한 주문·예약 플랫폼입니다. 판매자 페이지에서 매장을 운영하거나, 사전 수요조사에 참여해 주세요.", + // 오프라인 QR 전용 경유 페이지라 검색 노출은 불필요합니다. + robots: { index: false, follow: false }, +}; + +export default function PartnerPage() { + return ( + // 100vh가 아니라 100dvh — 모바일 브라우저의 100vh는 주소창에 가려지는 영역까지 포함해서 + // 실제 보이는 높이보다 큽니다. 그대로 두면 하단 버튼이 접혀서 스크롤해야 보입니다. +
+ {/* flex-1 + justify-center: 버튼 위 남는 공간의 세로 중앙에 안내를 배치 */} +
+ + +

+ 사장님, Picake에서 +
+ 케이크를 팔아보세요 +

+ +

+ Picake는 케이크를 찾는 손님과 매장을 이어주는 +
+ 주문·예약 플랫폼이에요. +
+ 주문부터 픽업 관리까지 한 곳에서 처리할 수 있어요. +

+
+ +
+ + 입점 사전 수요조사 참여하기 + + + + 판매자 페이지 바로가기 + + +

+ 이미 입점하셨다면 판매자 페이지로 로그인해 주세요. +

+
+
+ ); +} diff --git a/apps/web-user/src/common/components/layouts/RootWrapperLayout.tsx b/apps/web-user/src/common/components/layouts/RootWrapperLayout.tsx index 2ae3fcc8..f3b6e5e5 100644 --- a/apps/web-user/src/common/components/layouts/RootWrapperLayout.tsx +++ b/apps/web-user/src/common/components/layouts/RootWrapperLayout.tsx @@ -62,6 +62,8 @@ export default function RootWrapperLayout({ children }: RootWrapperLayoutProps) if (pathname === "/qa") return { variant: "minimal" }; // 앱 다운로드 진입점(/app) 하위는 QR로 직진입하는 단독 화면이라 공통 헤더 없음 if (pathname?.startsWith("/app/")) return { variant: "minimal" }; + // 입점 안내(/partner)도 QR로 직진입하는 단독 화면 + if (pathname === PATHS.PARTNER) return { variant: "minimal" }; // 로그인/회원가입 화면(콜백 포함)은 자체 레이아웃을 쓰므로 공통 헤더 없음 if (pathname?.startsWith("/auth/")) return { variant: "minimal" }; if (pathname?.startsWith("/mypage/")) return { variant: "minimal" }; diff --git a/apps/web-user/src/common/constants/partner.constants.ts b/apps/web-user/src/common/constants/partner.constants.ts new file mode 100644 index 00000000..9b62719b --- /dev/null +++ b/apps/web-user/src/common/constants/partner.constants.ts @@ -0,0 +1,15 @@ +/** + * 입점 안내 페이지(`/partner`)가 연결하는 외부 링크 상수. + * + * 오프라인에서 만나는 사장님께 보여줄 QR에는 **이 링크들을 직접 넣지 않습니다.** + * 항상 `https://picakes.com/partner`를 QR로 넣고, 실제 목적지는 이 파일에서 정합니다. + * 인쇄물·명함의 QR은 회수할 수 없는데 설문 폼 주소나 운영 도메인은 바뀔 수 있기 때문입니다 + * (앱 다운로드 진입점 `/app`과 같은 원칙 — {@link ./app-download.constants.ts}). + */ + +/** 판매자 운영 페이지 (web-seller 상용 도메인) */ +export const SELLER_CONSOLE_URL = "https://seller.picakes.com"; + +/** 입점 사전 수요조사 Google Form */ +export const PARTNER_SURVEY_URL = + "https://docs.google.com/forms/d/e/1FAIpQLSdCIclkHiXDHwxG0uhtSRUE1cKoxIzEA-xmuumlu7FWWGjTOA/viewform"; diff --git a/apps/web-user/src/common/constants/paths.constant.ts b/apps/web-user/src/common/constants/paths.constant.ts index 4eebf001..a63f03ba 100644 --- a/apps/web-user/src/common/constants/paths.constant.ts +++ b/apps/web-user/src/common/constants/paths.constant.ts @@ -76,6 +76,12 @@ export const PATHS = { /** Play Store 미입점 동안 Android가 보게 되는 안내 페이지 */ APP_DOWNLOAD_ANDROID: "/app/android", + /** + * 입점 안내 진입점 — 사장님께 보여주는 QR에 넣는 주소(`https://picakes.com/partner`). + * 판매자 운영 페이지와 사전 수요조사 설문으로 연결합니다. + */ + PARTNER: "/partner", + AUTH: { /** 로그인 화면 (로그인이 필요한 상황에서 이동) */ LOGIN: "/auth/login",