Skip to content

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

Merged
jisooooooooooo merged 12 commits intodevelopfrom
feat/copy-btn/#323
Mar 15, 2026
Merged

Feat(host): 주최사 링크 추출 버튼 구현#324
jisooooooooooo merged 12 commits intodevelopfrom
feat/copy-btn/#323

Conversation

@jisooooooooooo
Copy link
Contributor

📌 Summary

#323

📚 Tasks

  • 주최사 링크 추출 버튼 구현

🔍 Describe

주최사 링크 추출 버튼 컴포넌트 구현

  • 주최사 공지 리스트 배너에 관객용 공지 링크를 복사할 수 있는 버튼을 추가했어요.
  • AddToWatchButton을 재사용하기 위해 아이콘, 텍스트를 변경할 수 있도록 수정했어요.
  • 버튼 클릭 시 링크가 복사되면서 토스트가 표시되도록 구현했어요.

👀 To Reviewer

  • 화면설계서 내용대로 해당 주최사 URL이 아니라 관객 뷰의 해당 공연 공지 리스트 링크가 복사되도록 연결했는데 이게 맞는지 확인 한 번 부탁드려욤 !

📸 Screenshot

2026-03-13.5.23.51.mov

@jisooooooooooo jisooooooooooo self-assigned this Mar 13, 2026
@jisooooooooooo jisooooooooooo requested a review from a team as a code owner March 13, 2026 08:26
@jisooooooooooo jisooooooooooo added 🐵 지수 ✨ Feature 새로운 기능 추가 labels Mar 13, 2026
@jisooooooooooo jisooooooooooo linked an issue Mar 13, 2026 that may be closed by this pull request
2 tasks
@coderabbitai
Copy link

coderabbitai bot commented Mar 13, 2026

📝 Walkthrough

Summary by CodeRabbit

릴리스 노트

  • New Features

    • 공지사항 페이지에 링크 복사 기능 추가 및 성공/실패 알림 제공
    • 복사 아이콘 UI 요소 추가
  • Refactor

    • 배너의 관람 예정 버튼 UI 및 동작(레이블 포함) 개선
    • 공지사항 관련 버튼/네비게이션 경로 정비 및 작성 페이지 이동 처리 개선

Walkthrough

AddToWatchButton를 제거하고 ActionButton으로 대체하며 스타일과 속성명을 정리했습니다. 호스트 페이지에 공지 복사 기능(CopyIcon, AUDIENCE_BASE_URL 사용)이 추가되었고, 라우팅 및 배너 버튼 사용법이 관련 페이지들에서 업데이트되었습니다.

Changes

Cohort / File(s) Summary
컴포넌트 재구성
packages/ads-ui/src/components/button/add-to-watch/add-to-watch.tsx, packages/ads-ui/src/components/button/add-to-watch/action-button.tsx, packages/ads-ui/src/components/button/add-to-watch/action-button.css.ts
AddToWatchButton 제거 및 ActionButton 신규 구현. 스타일명 addToWatchbutton으로 변경, data-selected/data-emphasized 속성 사용, children 렌더링 및 emphasized 프롭 추가.
공개 API & 아이콘
packages/ads-ui/src/components/index.ts, packages/ads-ui/src/icons/index.ts
컴포넌트 공개 API에서 AddToWatchButton 제거 후 ActionButton으로 교체. CopyIcon 신규 내보내기 추가.
페이지 변경 (관객/호스트)
apps/audience/src/pages/notice-list/notice-list.tsx, apps/host/src/pages/notice-list/notice-list.tsx
관객: 배너 버튼을 ActionButton으로 교체하고 버튼 텍스트를 명시. 호스트: 복사 버튼(CopyIcon) 추가, handleCopyLink 구현으로 AUDIENCE_BASE_URL 기반 링크 복사 및 토스트 알림 추가, 라우트 경로 구성 수정.
환경 변수 추가
packages/apis/src/constants/env.ts
AUDIENCE_BASE_URL 환경 변수(예: VITE_AUDIENCE_BASE_URL) 신규 추가.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Suggested labels

♻️ Refactor

Suggested reviewers

  • eunkr82
  • jin-evergreen
  • Sohyunnnn
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed 제목이 [type] 형식을 따르고 있으며, PR의 핵심 변경사항인 '주최사 링크 추출 버튼 구현'을 명확히 설명하고 있어요. 27자로 50자 이내 요구사항을 충족하고 있어요.
Description check ✅ Passed PR 설명이 요약, 작업 항목, 상세 설명, 스크린샷을 포함하고 있으며, 변경사항과 구현 내용이 명확하게 서술되어 있어요.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/host/src/pages/notice-list/notice-list.tsx`:
- Around line 67-75: The catch block in handleCopyLink swallows errors so users
get no feedback on copy failures; update handleCopyLink to catch the exception
from navigator.clipboard.writeText and call toast.show with an error message
(e.g., '링크 복사에 실패했습니다.') to mirror the success toast, and optionally log the
caught error for debugging (use the existing toast.show and any local logger if
available).

In `@packages/ads-ui/src/components/button/add-to-watch/add-to-watch.tsx`:
- Around line 27-30: The button is always rendering aria-pressed which misuses
ARIA for non-toggle actions; change the AddToWatch component so aria-pressed is
only added when the component is actually a toggle (e.g., when the selected prop
is provided/used or an explicit isToggle prop is true). Update the JSX that
currently sets aria-pressed={selected} (in add-to-watch.tsx / AddToWatch) to
conditionally include the attribute (only when selected !== undefined or
isToggle === true) and leave it out for non-toggle actions like copy-link so
downstream callers can omit selected.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 57819d86-fe86-4f91-969e-5d68c6d8ba5b

📥 Commits

Reviewing files that changed from the base of the PR and between 3c2b010 and 35053cb.

⛔ Files ignored due to path filters (1)
  • packages/ads-ui/src/icons/svgs/icn_copy.svg is excluded by !**/*.svg, !**/*.svg and included by packages/**/src/**
📒 Files selected for processing (5)
  • apps/audience/src/pages/notice-list/notice-list.tsx
  • apps/host/src/pages/notice-list/notice-list.tsx
  • packages/ads-ui/src/components/button/add-to-watch/add-to-watch.css.ts
  • packages/ads-ui/src/components/button/add-to-watch/add-to-watch.tsx
  • packages/ads-ui/src/icons/index.ts

Copy link
Contributor

@Sohyunnnn Sohyunnnn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고많으셨습니다 👍
코멘트 몇 개 작성했는데 참고 부탁드립니다!!

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/ads-ui/src/components/button/add-to-watch/action-button.css.ts`:
- Line 5: Rename the generic style identifier `button` to a more descriptive
`actionButton` in the CSS module (update the exported constant name from
`button` to `actionButton`) and then update the corresponding component
`add-to-watch/action-button.tsx` to import and use the renamed `actionButton`
identifier (ensure any usages, className assignments or destructured imports
referencing `button` are replaced with `actionButton` and the export remains
default/ named consistent with the module).

In `@packages/ads-ui/src/components/index.ts`:
- Line 6: Restore a backward-compatible alias export so consumers can continue
using AddToWatchButton while encouraging migration to ActionButton: in the
components index module (where ActionButton is exported from
'./button/add-to-watch/action-button'), also export AddToWatchButton as a named
export that references the same default component (i.e., export AddToWatchButton
as an alias of ActionButton) and add a short deprecation comment; keep this
alias available for at least one release to allow gradual migration.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 4b792dbe-81cf-43f9-928b-47c418917122

📥 Commits

Reviewing files that changed from the base of the PR and between 35053cb and 797fc5f.

📒 Files selected for processing (7)
  • apps/audience/src/pages/notice-list/notice-list.tsx
  • apps/host/src/pages/notice-list/notice-list.tsx
  • packages/ads-ui/src/components/button/add-to-watch/action-button.css.ts
  • packages/ads-ui/src/components/button/add-to-watch/action-button.tsx
  • packages/ads-ui/src/components/button/add-to-watch/add-to-watch.tsx
  • packages/ads-ui/src/components/index.ts
  • packages/apis/src/constants/env.ts
💤 Files with no reviewable changes (1)
  • packages/ads-ui/src/components/button/add-to-watch/add-to-watch.tsx

Copy link
Member

@jin-evergreen jin-evergreen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

구현하시느라 고생하셨습니다~!!👍👍

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
packages/ads-ui/src/components/index.ts (1)

6-6: ⚠️ Potential issue | 🟠 Major

Must: AddToWatchButton 공개 export를 최소 한 릴리즈 동안 alias로 유지해 주세요.

현재 변경은 디자인 시스템 공개 API에서 기존 이름을 즉시 제거하는 형태라 소비처에 브레이킹 체인지가 됩니다. ActionButton으로 마이그레이션 유도는 좋지만, deprecated alias를 병행 노출해 점진 전환해 주세요.

호환 레이어 제안
 export { default as ActionButton } from './button/add-to-watch/action-button';
+// Deprecated: 다음 메이저 릴리즈에서 제거 예정
+export { default as AddToWatchButton } from './button/add-to-watch/action-button';

As per coding guidelines packages/ads-ui/src/**: "디자인 시스템 패키지예요. - props/스타일 변경 시 영향 범위 확인"

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ads-ui/src/components/index.ts` at line 6, Keep a
backward-compatible alias export so consumers using AddToWatchButton won’t
break: in packages/ads-ui/src/components/index.ts continue exporting the new
default as ActionButton (export { default as ActionButton } from
'./button/add-to-watch/action-button') and add a deprecated alias export for
AddToWatchButton that re-exports the same default (i.e., export { default as
AddToWatchButton } from './button/add-to-watch/action-button'), include a brief
deprecation comment above the alias to indicate it will be removed in a future
release so callers can migrate.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/host/src/pages/notice-list/notice-list.tsx`:
- Around line 73-81: handleCopyLink currently concatenates ENV.AUDIENCE_BASE_URL
and eventId without validation, allowing missing/misconfigured base URLs to
produce bad links; update handleCopyLink to validate ENV.AUDIENCE_BASE_URL first
(e.g., attempt to construct a new URL(base, path) using the URL constructor) and
only call navigator.clipboard.writeText when URL construction succeeds,
otherwise show an error toast; reference the handleCopyLink function,
ENV.AUDIENCE_BASE_URL, navigator.clipboard.writeText and toast.show when
implementing this change.

---

Duplicate comments:
In `@packages/ads-ui/src/components/index.ts`:
- Line 6: Keep a backward-compatible alias export so consumers using
AddToWatchButton won’t break: in packages/ads-ui/src/components/index.ts
continue exporting the new default as ActionButton (export { default as
ActionButton } from './button/add-to-watch/action-button') and add a deprecated
alias export for AddToWatchButton that re-exports the same default (i.e., export
{ default as AddToWatchButton } from './button/add-to-watch/action-button'),
include a brief deprecation comment above the alias to indicate it will be
removed in a future release so callers can migrate.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: e2db5f6f-aa48-4370-b941-1b5d3e3241f4

📥 Commits

Reviewing files that changed from the base of the PR and between 797fc5f and 8ea163d.

📒 Files selected for processing (3)
  • apps/audience/src/pages/notice-list/notice-list.tsx
  • apps/host/src/pages/notice-list/notice-list.tsx
  • packages/ads-ui/src/components/index.ts

@jisooooooooooo jisooooooooooo merged commit ddbe21f into develop Mar 15, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 새로운 기능 추가 🐵 지수

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] 주최사 공연 링크 복사 컴포넌트 구현

3 participants