feat: 링크로 담기 실패 사유를 토스트 대신 helper text로 안내

[kanghaeun]

작업 요약

링크로 담기 모달에서 실패 시 모달 위에 토스트가 겹쳐 뜨던 것을, 입력창 아래 helper text로 수정

작업 세부 내용

링크로 담기 모달은 실패 시 모달을 닫지 않습니다. 사용자가 링크를 바로 고칠 수 있게 하려는 의도입니다 (닫기/초기화는 성공 시에만 — 실패 시 URL을 고칠 수 있게 유지).

그런데 실패 사유는 토스트로 띄우고 있어서, 모달 위에 토스트가 겹쳐 뜨고 정작 고쳐야 할 입력창과 안내가 멀리 떨어져 있었습니다. 모달을 열어둘 거면 안내도 모달 안에 있어야 한다고 판단해 helper text로 옮겼습니다.

1. 훅에 에러 토스트 비활성 옵션 추가

usePostWishLink / usePostTournamentItemLink가 4xx를 무조건 토스트로 띄우고 있어, 화면 안 안내와 중복됐습니다.

showErrorToast 옵션(기본 true)을 추가해 호출부가 끌 수 있게 했습니다. 기본값을 유지한 이유는 입력창이 없는 경로 때문입니다. 앱 공유 인텐트(useShareIntentWish)는 helper text를 띄울 자리가 없어 토스트가 유일한 안내 수단입니다.

5xx는 기존과 동일하게 전역 MutationCache.onError가 토스트 + Sentry로 처리합니다.

2. 실패 사유를 helper text로 노출

hasError 불리언을 errorMessage: string | null로 바꿔, 클라 검증 문구와 서버 응답 문구를 같은 자리에 표시합니다. 입력을 수정하면 사라집니다.

문구	출처	시점
올바른 URL 형식으로 입력해주세요.	클라이언트	요청 전
https 링크만 등록할 수 있어요	클라이언트	요청 전
이미 위시리스트에 등록된 상품이에요 등	서버 detail	응답 후

서버 문구 변환은 기존 getApiErrorMessage 유틸을 재사용했습니다.

3. http 링크를 요청 전에 차단

서버가 https만 받는데 클라는 http를 통과시켜 서버 왕복 후에야 실패했습니다. 요청 전에 거르도록 했습니다.

입력	결과
https:// · https:/ · df	올바른 URL 형식으로 입력해주세요.
http://a.com · 신발 http://a.com	https 링크만 등록할 수 있어요
https://s.zigzag.kr/AbC	전송

URL_PATTERN·extractUrlFromText 유틸 자체는 건드리지 않았습니다. 앱 공유 인텐트가 함께 쓰는 유틸이라 https 전용으로 바꾸면 http 링크의 공유 담기가 조용히 실패합니다. 다이얼로그 안에서만 거르도록 범위를 좁혔습니다.

형식 오류(submitUrl === null)와 스킴 오류를 분리했습니다. 하나로 묶으면 https://만 입력한 사용자에게도 "https 링크만"이라는 맞지 않는 안내가 뜹니다.

스크린샷

Before	After

연관 이슈

closes #402

Summary by CodeRabbit

• 개선 사항
  • 링크 등록 실패 시 API 오류 메시지를 다이얼로그에 표시합니다.
  • URL 형식 오류와 HTTPS가 아닌 URL을 구분해 안내합니다.
  • 오류 발생 시 입력한 링크를 유지해 수정할 수 있습니다.
  • 입력값을 변경하면 기존 오류 메시지가 자동으로 사라집니다.
  • 링크 등록이 성공한 경우에만 다이얼로그가 닫히고 입력 상태가 초기화됩니다.
  • 상황에 따라 오류 토스트 표시 여부를 선택할 수 있습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
piki	Ready	Preview	Aug 2, 2026 11:56pm

[github-actions]

Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 63e28756-2927-4eb1-8cc7-2000ab60e1d4

📥 Commits

Reviewing files that changed from the base of the PR and between e62eebd and 9ee0591.

📒 Files selected for processing (1)

• apps/web/src/components/get-item-dialog/ByLinkDialog.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/src/components/get-item-dialog/ByLinkDialog.tsx

---

📝 Walkthrough

Walkthrough

링크 저장 훅에 오류 토스트 제어 옵션을 추가했다. 링크 다이얼로그는 URL 검증 오류와 API 오류를 입력창 helper text로 표시한다. 성공 시에만 다이얼로그와 입력 상태를 초기화한다.

Changes

링크 저장 오류 처리

Layer / File(s)	Summary
링크 저장 훅의 토스트 제어 apps/web/src/app/tournament/[id]/create/_hooks/usePostTournamentItemLink.ts, apps/web/src/hooks/usePostWishLink.ts	두 훅에 showErrorToast 옵션을 추가했다. 기본값은 true다. 500 미만 오류의 토스트 표시를 옵션으로 제어한다.
링크 다이얼로그 오류 표시 apps/web/src/components/get-item-dialog/ByLinkDialog.tsx	두 mutation에서 오류 토스트를 끈다. URL 형식 오류와 API 오류 메시지를 상태에 저장하고 Input의 helperText와 aria-invalid에 연결한다. 입력 변경 시 오류 메시지를 제거한다. 성공 시에만 다이얼로그와 상태를 초기화한다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• TeamPiKi/client#365: ByLinkDialog와 링크 저장 훅의 API 오류 처리 및 토스트 동작을 함께 변경한다.

Suggested labels: fix

Suggested reviewers: iodio89

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 링크 저장 실패 사유를 토스트 대신 helper text로 표시하는 주요 변경을 정확히 설명합니다.
Linked Issues check	✅ Passed	변경 사항은 #402의 토스트 옵션, helper text 오류 표시, 입력 수정 시 오류 제거, 성공 시에만 종료 요구를 충족합니다.
Out of Scope Changes check	✅ Passed	모든 변경 사항이 링크 저장 오류 표시와 모달 제출 흐름 개선이라는 #402의 범위에 포함됩니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/402-link-input-helper-text

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}