diff --git a/apps/audience/src/pages/notice-list/notice-list.tsx b/apps/audience/src/pages/notice-list/notice-list.tsx index 532f1e76..d70ff7eb 100644 --- a/apps/audience/src/pages/notice-list/notice-list.tsx +++ b/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={ - + > + 관람 예정 + } /> )} diff --git a/apps/host/src/pages/notice-list/notice-list.tsx b/apps/host/src/pages/notice-list/notice-list.tsx index 18864026..f2657d39 100644 --- a/apps/host/src/pages/notice-list/notice-list.tsx +++ b/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={ + + + 링크 복사 + + } /> )}
@@ -97,7 +126,11 @@ const NoticeListPage = () => {
navigate(`/events/${eventId}/notices/new`)} + onClick={() => + navigate( + ROUTE_PATH.NOTICE_CREATE.replace(':eventId', String(eventId)), + ) + } />
diff --git a/packages/ads-ui/src/components/button/add-to-watch/add-to-watch.css.ts b/packages/ads-ui/src/components/button/add-to-watch/action-button.css.ts similarity index 73% rename from packages/ads-ui/src/components/button/add-to-watch/add-to-watch.css.ts rename to packages/ads-ui/src/components/button/add-to-watch/action-button.css.ts index 85dc27b7..0d3dc3c0 100644 --- a/packages/ads-ui/src/components/button/add-to-watch/add-to-watch.css.ts +++ b/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', -}); diff --git a/packages/ads-ui/src/components/button/add-to-watch/action-button.tsx b/packages/ads-ui/src/components/button/add-to-watch/action-button.tsx new file mode 100644 index 00000000..553da673 --- /dev/null +++ b/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 ( + + ); +}; + +export default ActionButton; diff --git a/packages/ads-ui/src/components/button/add-to-watch/add-to-watch.tsx b/packages/ads-ui/src/components/button/add-to-watch/add-to-watch.tsx deleted file mode 100644 index d2f29448..00000000 --- a/packages/ads-ui/src/components/button/add-to-watch/add-to-watch.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { AmpFlagIcon } from '../../../icons'; - -import * as styles from './add-to-watch.css'; - -interface AddToWatchButtonProps { - selected: boolean; - onChange: () => void; - disabled?: boolean; -} - -const AddToWatchButton = ({ - selected, - onChange, - disabled, -}: AddToWatchButtonProps) => { - return ( - - ); -}; - -export default AddToWatchButton; diff --git a/packages/ads-ui/src/components/index.ts b/packages/ads-ui/src/components/index.ts index e697104c..db215a11 100644 --- a/packages/ads-ui/src/components/index.ts +++ b/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'; diff --git a/packages/ads-ui/src/icons/index.ts b/packages/ads-ui/src/icons/index.ts index 39ceb3cc..143bb2bf 100644 --- a/packages/ads-ui/src/icons/index.ts +++ b/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'; diff --git a/packages/ads-ui/src/icons/svgs/icn_copy.svg b/packages/ads-ui/src/icons/svgs/icn_copy.svg new file mode 100644 index 00000000..6db7b9a8 --- /dev/null +++ b/packages/ads-ui/src/icons/svgs/icn_copy.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/apis/src/constants/env.ts b/packages/apis/src/constants/env.ts index 85359aad..53c2b588 100644 --- a/packages/apis/src/constants/env.ts +++ b/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;