Feat(host): 주최사 링크 추출 버튼 구현

apps/audience/src/pages/notice-list/notice-list.tsx

@@ -180,7 +180,9 @@ const NoticeListPage = () => {
               selected={bannerData?.isWishlist ?? false}
               onChange={toggleWishList}
               disabled={!bannerData || isTogglePending}
-            />
+            >
+              관람 예정
+            </AddToWatchButton>
           }
         />
       )}

apps/host/src/pages/notice-list/notice-list.tsx

@@ -2,7 +2,8 @@ import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useParams } from 'react-router';
 
-import { CircleButton } from '@amp/ads-ui';
+import { AddToWatchButton, CircleButton, toast } from '@amp/ads-ui';
+import { CopyIcon } from '@amp/ads-ui/icons';
 import {
   LiveButtonContainer,
   NOTICE_TAB,
@@ -19,6 +20,8 @@ import { NOTICES_QUERY_OPTIONS } from '@features/notice-list/apis/query';
 import * as styles from './notice-list.css';
 
 type NoticeTab = (typeof NOTICE_TAB)[keyof typeof NOTICE_TAB];
+const AUDIENCE_BASE_URL =
+  import.meta.env.VITE_AUDIENCE_BASE_URL || 'https://ampnotice.kr';
 
 const NoticeListPage = () => {
   const navigate = useNavigate();
@@ -61,6 +64,17 @@ const NoticeListPage = () => {
     navigate(`/events/${eventId}/notices/${noticeId}`);
   };
 
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(
+        `${AUDIENCE_BASE_URL}/events/${eventId}/notices`,
+      );
+      toast.show('링크가 복사되었어요.');
+    } catch {
+      return;
+    }
+  };
+
   return (
     <main className={styles.pageContainer}>
       {festivalBanner && (
@@ -69,6 +83,16 @@ const NoticeListPage = () => {
           title={festivalBanner.title}
           location={festivalBanner.location}
           date={festivalBanner.period}
+          button={
+            <AddToWatchButton
+              selected={false}
+              onChange={handleCopyLink}
+              icon={<CopyIcon />}
+              emphasized
+            >
+              링크 복사
+            </AddToWatchButton>
+          }
         />
       )}
       <div className={styles.mainContent}>

packages/ads-ui/src/components/button/add-to-watch/add-to-watch.css.ts

@@ -2,8 +2,9 @@ import { style } from '@vanilla-extract/css';
 
 import { ampThemeVars } from '../../../styles';
 
-export const addToWatch = style({
+export const button = style({
   display: 'inline-flex',
+  alignItems: 'center',
   padding: '0.6rem 1.2rem',
   gap: '0.8rem',
   borderRadius: '8px',
@@ -12,7 +13,7 @@ export const addToWatch = style({
   ...ampThemeVars.font.body_sb_13,
 
   selectors: {
-    '&[aria-pressed="true"]': {
+    '&[aria-pressed="true"], &[data-emphasized="true"]': {
       backgroundColor: ampThemeVars.color.primary_deep,
       color: ampThemeVars.color.sub_1,
     },

packages/ads-ui/src/components/button/add-to-watch/add-to-watch.tsx

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 import { AmpFlagIcon } from '../../../icons';
 
 import * as styles from './add-to-watch.css';
@@ -6,23 +8,34 @@ interface AddToWatchButtonProps {
   selected: boolean;
   onChange: () => void;
   disabled?: boolean;
+  icon?: ReactNode;
+  children?: ReactNode;
+  emphasized?: boolean;
 }
 
 const AddToWatchButton = ({
   selected,
   onChange,
   disabled,
+  icon = <AmpFlagIcon />,
+  children = '관람 예정',
+  emphasized = false,
 }: AddToWatchButtonProps) => {
   return (
     <button
       type='button'
-      className={styles.addToWatch}
+      className={styles.button}
       aria-pressed={selected}
+      data-emphasized={emphasized}
       disabled={disabled}
       onClick={onChange}
     >
-      <AmpFlagIcon className={styles.icon} />
-      관람 예정
+      {icon ? (
+        <span className={styles.icon} aria-hidden='true'>
+          {icon}
+        </span>
+      ) : null}
+      {children}
     </button>
   );
 };

packages/ads-ui/src/icons/index.ts

@@ -8,6 +8,7 @@ export { default as CameraIcon } from './svgs/icn_camera.svg?react';
 export { default as ChatIcon } from './svgs/icn_chat.svg?react';
 export { default as CheckIcon } from './svgs/icn_check.svg?react';
 export { default as ConfirmIcon } from './svgs/icn_confirm.svg?react';
+export { default as CopyIcon } from './svgs/icn_copy.svg?react';
 export { default as DeleteIcon } from './svgs/icn_delete.svg?react';
 export { default as EmptyAlertIcon } from './svgs/icn_empty_alert.svg?react';
 export { default as FlagIcon } from './svgs/icn_flag.svg?react';