[Feature] 구글폼 배너 추가

apps/web/src/features/store/styles/StoreGridView.css.ts

@@ -18,6 +18,11 @@ export const bannerSection = style({
   width: '100%',
 });
 
+export const bannerDescriptionText = style({
+  width: '100%',
+  textAlign: 'end',
+});
+
 export const productsSection = style({
   display: 'flex',
   flexDirection: 'column',

apps/web/src/features/store/ui/StoreGridView.tsx

@@ -2,12 +2,14 @@ import { Button } from '@azit/design-system/button';
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { StoreSkeleton } from '@/widgets/skeleton/ui';
+import { StoreBanner } from '@/widgets/store/ui/StoreBanner';
 import { StoreGrid } from '@/widgets/store/ui/StoreGrid';
 
 import { useStoreGrid } from '@/features/store/model/useStoreGrid';
 import * as styles from '@/features/store/styles/StoreGridView.css.ts';
-// import { StoreBanner } from '@/features/store/ui/StoreBanner';
 
+import { GOOGLE_FORM_URL } from '@/shared/constants/url';
+import { openExternalUrl } from '@/shared/lib/openExternalUrl';
 import { storeQueries } from '@/shared/queries';
 import { scrollContainer } from '@/shared/styles/container.css';
 
@@ -28,9 +30,17 @@ export function StoreGridView() {
   return (
     <div ref={scrollRef} className={scrollContainer}>
       <div className={styles.mainContainer}>
-        {/* <div className={styles.bannerSection}>
-          <StoreBanner />
-        </div> */}
+        <div className={styles.bannerSection}>
+          <StoreBanner handleClick={() => openExternalUrl(GOOGLE_FORM_URL)}>
+            <StoreBanner.Title>[구글폼] AZIT에게 한마디 하기</StoreBanner.Title>
+            <StoreBanner.Description>
+              <p>정성 가득 피드백 주시면</p>
+              <p className={styles.bannerDescriptionText}>
+                기프티콘 당첨 기회가 찾아와요
+              </p>
+            </StoreBanner.Description>
+          </StoreBanner>
+        </div>
         <div className={styles.productsSection}>
           <Button size="small">전체</Button>
           {isPending ? <StoreSkeleton /> : <StoreGrid products={products} />}

apps/web/src/shared/constants/url.ts

@@ -6,3 +6,5 @@ export const KAKAO_REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
 export const NAVER_MAP_MARKER_ICON_URL = import.meta.env
   .VITE_NAVER_MAP_MARKER_ICON_URL;
 export const KAKAO_INQUIRY_CHAT_URL = 'http://pf.kakao.com/_uxlqgn/chat';
+export const GOOGLE_FORM_URL =
+  'https://docs.google.com/forms/d/e/1FAIpQLSfJzLCp1qSB7ced8F9WtaXbojCSeFUikb6cDDXucnL6v4pMJQ/viewform?usp=header';

apps/web/src/widgets/store/styles/StoreBanner.css.ts

@@ -3,30 +3,26 @@ import { style } from '@vanilla-extract/css';
 
 export const banner = style({
   width: '100%',
-  height: '130px',
+  minHeight: '130px',
   borderRadius: '12px',
+  padding: 20,
   background:
     'linear-gradient(110.083deg, rgba(0, 94, 237, 0.6) 2.3182%, rgba(0, 94, 237, 0.48) 34.31%, rgba(150, 201, 101, 0.48) 66.765%, rgba(216, 249, 41, 0.6) 96.439%)',
-  position: 'relative',
   overflow: 'hidden',
 });
 
 export const bannerTitle = style([
   typography.heading.h2,
   {
-    position: 'absolute',
-    left: '24px',
-    top: '24px',
     color: vars.colors.white,
+    marginBottom: 3,
   },
 ]);
 
 export const bannerDescription = style([
   typography.body.b1,
   {
-    position: 'absolute',
-    left: '24px',
-    top: '64px',
+    width: '100%',
     color: vars.colors.white,
   },
 ]);

apps/web/src/widgets/store/ui/StoreBanner.tsx

@@ -1,10 +1,35 @@
+import clsx from 'clsx';
+import type { PropsWithChildren, ReactNode } from 'react';
+
 import * as styles from '@/widgets/store/styles/StoreBanner.css';
 
-export function StoreBanner() {
+interface StoreBannerRootProps {
+  children: ReactNode;
+  handleClick?: () => void;
+}
+
+function StoreBannerRoot({ children, handleClick }: StoreBannerRootProps) {
   return (
-    <div className={styles.banner}>
-      <p className={styles.bannerTitle}>AZIT만의 특별가</p>
-      <p className={styles.bannerDescription}>설명 설명 설명 설명</p>
+    <div className={styles.banner} onClick={handleClick}>
+      {children}
     </div>
   );
 }
+
+function StoreBannerTitle({ children }: PropsWithChildren) {
+  return <div className={styles.bannerTitle}>{children}</div>;
+}
+
+function StoreBannerDescription({
+  children,
+  className,
+}: PropsWithChildren<{ className?: string }>) {
+  return (
+    <div className={clsx(styles.bannerDescription, className)}>{children}</div>
+  );
+}
+
+export const StoreBanner = Object.assign(StoreBannerRoot, {
+  Title: StoreBannerTitle,
+  Description: StoreBannerDescription,
+});