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

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

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { overlay } from 'overlay-kit';
 import { useNavigate, useParams } from 'react-router';
 
-import { AddToWatchButton, Modal, RectButton, toast } from '@amp/ads-ui';
+import { ActionButton, Modal, RectButton, toast } from '@amp/ads-ui';
 import { ChatIcon } from '@amp/ads-ui/icons';
 import {
   LiveButtonContainer,
@@ -20,6 +20,7 @@ import { useToggleWishListMutation } from '@features/usecase/toggle-wishlist/use
 import { NOTICES_QUERY_OPTIONS } from '@entities/notice/model/query-options';
 
 import { CATEGORY_CODE_BY_LABEL } from '@shared/constants/category-label';
+import { NAV_PATH } from '@shared/constants/path';
 import { useNotificationsSubscribeMutation } from '@shared/hooks/use-festival-notification';
 import { useLiveStatus } from '@shared/hooks/use-live-status';
 import LiveStatusSheet from '@shared/ui/live-status-sheet/live-status-sheet';
@@ -59,7 +60,7 @@ const NoticeListPage = () => {
     useNoticeList(announcements, activeCategoryNames);
 
   const handleNoticeItemClick = (noticeId: number) => {
-    navigate(`/events/${festivalId}/notices/${noticeId}`);
+    navigate(NAV_PATH.noticeDetails(festivalId, noticeId));
   };
 
   const {
@@ -176,11 +177,13 @@ const NoticeListPage = () => {
           location={bannerProps.location}
           date={bannerProps.date}
           button={
-            <AddToWatchButton
+            <ActionButton
               selected={bannerData?.isWishlist ?? false}
               onChange={toggleWishList}
               disabled={!bannerData || isTogglePending}
-            />
+            >
+              관람 예정
+            </ActionButton>
           }
         />
       )}

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

@@ -2,7 +2,9 @@ import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useParams } from 'react-router';
 
-import { CircleButton } from '@amp/ads-ui';
+import { ActionButton, CircleButton, toast } from '@amp/ads-ui';
+import { CopyIcon } from '@amp/ads-ui/icons';
+import { ENV } from '@amp/apis';
 import {
   LiveButtonContainer,
   NOTICE_TAB,
@@ -16,6 +18,8 @@ import { formatDday } from '@amp/shared/utils';
 import { CONGESTION_QUERY_OPTIONS } from '@features/notice-details/query';
 import { NOTICES_QUERY_OPTIONS } from '@features/notice-list/apis/query';
 
+import { ROUTE_PATH } from '@shared/constants/path';
+
 import * as styles from './notice-list.css';
 
 type NoticeTab = (typeof NOTICE_TAB)[keyof typeof NOTICE_TAB];
@@ -58,7 +62,23 @@ const NoticeListPage = () => {
     })) ?? [];
 
   const handleNoticeItemClick = (noticeId: number) => {
-    navigate(`/events/${eventId}/notices/${noticeId}`);
+    navigate(
+      ROUTE_PATH.NOTICE_DETAILS.replace(':eventId', String(eventId)).replace(
+        ':noticeId',
+        String(noticeId),
+      ),
+    );
+  };
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(
+        `${ENV.AUDIENCE_BASE_URL}/events/${eventId}/notices`,
+      );
+      toast.show('링크가 복사되었어요.');
+    } catch {
+      toast.show('링크 복사에 실패했어요.', '다시 시도해 주세요.');
+    }
   };
 
   return (
@@ -69,6 +89,15 @@ const NoticeListPage = () => {
           title={festivalBanner.title}
           location={festivalBanner.location}
           date={festivalBanner.period}
+          button={
+            <ActionButton
+              onChange={handleCopyLink}
+              emphasized
+            >
+              <CopyIcon />
+              링크 복사
+            </ActionButton>
+          }
         />
       )}
       <div className={styles.mainContent}>
@@ -97,7 +126,11 @@ const NoticeListPage = () => {
           <div className={styles.button}>
             <CircleButton
               type='write'
-              onClick={() => navigate(`/events/${eventId}/notices/new`)}
+              onClick={() =>
+                navigate(
+                  ROUTE_PATH.NOTICE_CREATE.replace(':eventId', String(eventId)),
+                )
+              }
             />
           </div>
         </div>

packages/ads-ui/src/components/button/add-to-watch/add-to-watch.css.ts → packages/ads-ui/src/components/button/add-to-watch/action-button.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,15 +13,9 @@ export const addToWatch = style({
   ...ampThemeVars.font.body_sb_13,
 
   selectors: {
-    '&[aria-pressed="true"]': {
+    '&[data-selected="true"], &[data-emphasized="true"]': {
       backgroundColor: ampThemeVars.color.primary_deep,
       color: ampThemeVars.color.sub_1,
     },
   },
 });
-
-export const icon = style({
-  marginTop: '0.2rem',
-  width: '1.4rem',
-  height: '1.4rem',
-});

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+
+import * as styles from './action-button.css';
+
+interface ActionButtonProps {
+  selected?: boolean;
+  onChange: () => void;
+  disabled?: boolean;
+  children?: ReactNode;
+  emphasized?: boolean;
+}
+
+const ActionButton = ({
+  selected,
+  onChange,
+  disabled,
+  children,
+  emphasized = false,
+}: ActionButtonProps) => {
+  return (
+    <button
+      type='button'
+      className={styles.button}
+      aria-pressed={selected === undefined ? undefined : selected}
+      data-selected={selected}
+      data-emphasized={emphasized}
+      disabled={disabled}
+      onClick={onChange}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default ActionButton;

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

@@ -3,7 +3,7 @@ export { default as OptionSheet } from './bottom-sheet/option-sheet/option-sheet
 export { default as StatusSheet } from './bottom-sheet/status-sheet/status-sheet';
 export type { StatusSheetValue } from './bottom-sheet/status-sheet/status-sheet.constants';
 export { default as AddImageButton } from './button/add-image-button/add-image-button';
-export { default as AddToWatchButton } from './button/add-to-watch/add-to-watch';
+export { default as ActionButton } from './button/add-to-watch/action-button';
 export { default as CategoryButton } from './button/category-button/category-button';
 export { default as CheckButton } from './button/check-button/check-button';
 export { default as CircleButton } from './button/circle-button/circle-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';

packages/apis/src/constants/env.ts

@@ -1,4 +1,5 @@
 export const ENV = {
   API_BASE_URL: import.meta.env.VITE_API_BASE_URL,
   GOOGLE_BASE_URL: import.meta.env.VITE_GOOGLE_BASE_URL,
+  AUDIENCE_BASE_URL: import.meta.env.VITE_AUDIENCE_BASE_URL,
 } as const;