[feature] 지원서 작성 상태 저장 안내 토스트 및 전역 Toast 컴포넌트 추가 - #1873
Conversation
Modal의 기존 관례(isOpen/onClose 제어형 + Portal)를 따라 구현했다. 헤더 아래에 노출되도록 HEADER_HEIGHT 토큰 기준으로 브레이크포인트별 오프셋을 주고, 타이포는 typography.paragraph.p5, 이징은 transitions.easing.easeInOut 토큰을 사용했다.
지원서는 localStorage에 작성 상태를 저장하지만 사용자가 알 방법이 없었다. 폼 진입 시 "같은 기기에서 작성 상태는 저장돼요." 토스트를 brand 컬러(colors.primary[900])로 3.5초간 노출한다.
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 48 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (7)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
🎨 UI 변경사항을 확인해주세요
18개 스토리 변경 · 전체 97개 스토리 · 35개 컴포넌트 |
헤더를 숨기는 화면(<Header showOn={['desktop', 'laptop']} />)에서는
헤더가 없는데도 헤더 높이만큼만 내려와 지원서 제목·설명을 가렸다.
콘텐츠 사이에는 설명 유무·길이와 무관하게 안전한 틈이 없어서
700px 이하는 하단 고정으로 바꾸고 애니메이션 방향도 뒤집었다.
src/components/에 폴더 문서가 없어 신규 작성했다. 파일 구성·스타일 토큰 하드룰·오버레이(Portal, 제어형) 규약과 Toast props를 정리하고 루트 CLAUDE.md 인덱스에 등록했다.
1 participant
#️⃣연관된 이슈
📝작업 내용
지원서 작성 페이지는
localStorage에 작성 상태를 저장하고 있지만 사용자가 이를 알 방법이 없었습니다. 폼 진입 시 안내 토스트를 노출합니다.문구:
같은 기기에서 작성 상태는 저장돼요.(brand 컬러, 3.5초 후 자동 소멸)레포에 토스트 컴포넌트/라이브러리가 없어서
components/common/Toast/에 전역 컴포넌트로 추가했습니다.Modal의 기존 관례를 그대로 따랐습니다.isOpen/onClose+Portal(#modal-root)backgroundColor,color)·문구(message)·노출시간(duration)을 호출부에서 지정role="status"로 스크린리더 알림,pointer-events: none으로 입력 비간섭노출 위치
브레이크포인트에 따라 앵커가 다릅니다.
top: HEADER_HEIGHT.desktop + 16px)bottom: 24px)처음엔 전 구간 "헤더 아래"로 뒀는데, 지원서 페이지가
<Header showOn={['desktop', 'laptop']} />라 701px 미만에서는 헤더가 없어서 토스트가 제목과 설명을 그대로 덮었습니다.콘텐츠 사이에 토스트를 끼울 안전한 틈이 없어서(
FormDescription이 옵셔널이고 길이도 가변) 좁은 화면은 하단 고정으로 바꿨습니다.사용한 토큰
typography.paragraph.p5(14px/500/140%)transitions.easing.easeInOutHEADER_HEIGHT.desktopZ_INDEX.toast(신규 추가, 1300)colors.primary[900]문서
src/components/에 폴더 문서가 없어서 새로 작성하고 루트CLAUDE.md인덱스에 등록했습니다. 컴포넌트 40개를 나열하는 카탈로그 대신, 실제 코드에서 확인한 공통 규약과 신규Toast사용법만 담았습니다.Xxx/{Xxx.tsx, Xxx.styles.ts, Xxx.stories.tsx},* as Styled,$transient prop)isOpen/onClose, Portal →#modal-root, z-index 서열)Toastprops 표와 주의사항중점적으로 리뷰받고 싶은 부분(선택)
1. 반투명 배경색이 리터럴입니다
기본 배경
rgba(17, 17, 17, 0.85)가 토큰이 아닙니다. 레포에 알파 색상 토큰이나hexToRgba류 유틸이 전혀 없고(Modal.styles.ts도rgba(0,0,0,0.6)리터럴), 유틸을 새로 만드는 건 없던 관례를 만드는 거라 선례를 따랐습니다. 토큰화가 필요하면 별도로 논의하면 좋겠습니다.2. 바텀네비와 겹칠 여지 (지금은 해당 없음)
좁은 화면에서 하단 고정이라,
AppLayout하위 페이지(/,/promotions,/subscriptions,/menu등)에서 토스트를 쓰면 바텀네비와 겹칩니다. 지원서 페이지는AppLayout밖이라 현재는 문제없고, 문서에 주의사항으로 남겨뒀습니다. 지금 오프셋 처리를 미리 넣을지 의견 주시면 좋겠습니다.논의하고 싶은 부분(선택)
토스트 상태를 zustand로 올릴지
이번엔 호출부가 1곳이라 로컬
useState로 뒀습니다. 다만 레포에alert()가 68곳(ApplicationEditTab8,useClubInfoEdit6,LoginTab5 등 AdminPage 집중) 있어서, 이걸 토스트로 걷어낼 계획이라면 전역 스토어가 필요해집니다.useShare,useLogout, react-queryonError)처럼 컴포넌트 밖에서는 로컬 state로 토스트를 띄울 수 없음handleSubmit처럼navigate직후 토스트를 유지해야 하는 경우 언마운트되며 사라짐지금
Toast는 순수 프레젠테이션 컴포넌트라, 나중에useToastStore를 얹어도 이 코드를 버리지 않고 그대로 재사용할 수 있습니다.🫡 참고사항
typecheck,eslint,prettier통과Default,CustomColor)top: 108px/ 상단용 애니메이션bottom: 24px/ 하단용 애니메이션bottom: 24px/ 하단용 애니메이션rgb(255,84,20),duration경과 후 자동 제거 확인