✨feat: 토스트 세팅 및 추상화 #63
Conversation
Walkthrough레이아웃 및 대시보드 수정 페이지에 토스트 알림 기능이 추가되었습니다. 레이아웃 구조가 일부 변경되고, 토스트 유틸리티 모듈이 새로 도입되었습니다. 또한, 헤더 컴포넌트의 패딩이 조정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DashBoardEditPage
participant toast.ts (유틸리티)
participant Toaster
User->>DashBoardEditPage: "성공 토스트" 버튼 클릭
DashBoardEditPage->>toast.ts: showSuccess("대시보드가 성공적으로 저장되었습니다.")
toast.ts->>Toaster: 성공 토스트 표시
User->>DashBoardEditPage: "에러 토스트" 버튼 클릭
DashBoardEditPage->>toast.ts: showError("저장 중 오류가 발생했습니다.")
toast.ts->>Toaster: 에러 토스트 표시
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! ✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/app/shared/lib/toast.ts (1)
3-5: API 확장성을 위해 제네릭 매개변수‧옵션 수용 형태로 리팩터링 제안현재 문자열만 받도록 제한돼 있어 커스텀 JSX, 아이콘,
duration등 추가 옵션을 지정하기 어렵습니다.sonner는ReactNode와 옵션 객체를 모두 지원하므로, 아래처럼 타입을 확장해 두면 재사용성이 높아집니다.-import { toast } from 'sonner' - -export const showSuccess = (message: string) => toast.success(message) -export const showError = (message: string) => toast.error(message) -export const showInfo = (message: string) => toast.message(message) // 성공, 실패가 아닌 정보 +import { toast, type ToastOptions, type RichToastContent } from 'sonner' + +type Content = RichToastContent | string +type Options = ToastOptions + +export const showSuccess = (message: Content, options?: Options) => + toast.success(message, options) +export const showError = (message: Content, options?: Options) => + toast.error(message, options) +export const showInfo = (message: Content, options?: Options) => + toast.message(message, options) // 성공·실패가 아닌 일반 정보src/app/dashboard/[id]/edit/layout.tsx (1)
13-16: 중첩 레이아웃에서<main>요소 중복 사용 주의최상위 페이지에서도
<main>이 사용될 가능성이 있으므로, HTML 문서 내에<main>이 2개 이상 생기지 않는지 점검해 주세요. 필요하다면section이나 별도 래퍼로 대체하는 것이 접근성 측면에서 안전합니다.src/app/dashboard/[id]/edit/page.tsx (2)
6-13: 핸들러를useCallback으로 래핑해 불필요한 재생성 방지렌더링마다 새 함수가 만들어져 하위 컴포넌트에 프롭으로 전달될 때 불필요한 리렌더를 유발할 수 있습니다.
-import { showError, showSuccess } from '@lib/toast' +import React, { useCallback } from 'react' +import { showError, showSuccess } from '@lib/toast' - const handleSuccess = () => { - showSuccess('대시보드가 성공적으로 저장되었습니다.') - } - const handleError = () => { - showError('저장 중 오류가 발생했습니다.') - } + const handleSuccess = useCallback(() => { + showSuccess('대시보드가 성공적으로 저장되었습니다.') + }, []) + + const handleError = useCallback(() => { + showError('저장 중 오류가 발생했습니다.') + }, [])
18-21:<button>에type="button"을 명시해 폼 내부 오동작 방지추후 이 버튼들이
<form>안으로 이동할 경우, 기본submit이벤트로 인해 예기치 않은 페이지 새로고침이 발생할 수 있습니다.- <button onClick={handleSuccess}>성공 토스트</button> - <button onClick={handleError}>에러 토스트</button> + <button type="button" onClick={handleSuccess}>성공 토스트</button> + <button type="button" onClick={handleError}>에러 토스트</button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/app/dashboard/[id]/edit/layout.tsx(1 hunks)src/app/dashboard/[id]/edit/page.tsx(1 hunks)src/app/layout.tsx(2 hunks)src/app/shared/components/common/header/Header.tsx(1 hunks)src/app/shared/lib/toast.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/app/layout.tsx (1)
src/app/providers.tsx (1)
Providers(7-21)
src/app/dashboard/[id]/edit/page.tsx (1)
src/app/shared/lib/toast.ts (2)
showSuccess(3-3)showError(4-4)
🔇 Additional comments (2)
src/app/shared/components/common/header/Header.tsx (1)
17-17: 좌측 패딩 제거로 인한 레이아웃 영향 점검 필요
pl-300을 Header에서 제거했으므로, Header를 단독으로 사용하는 다른 화면이 있다면 콘텐츠가 사이드바와 겹치지 않는지 한번 더 확인해 주세요.src/app/layout.tsx (1)
24-27: Server Component 내부에서Toaster사용 시 Hydration 문제 여부 확인
RootLayout은 서버 컴포넌트이지만,Toaster는 훅을 사용하는 클라이언트 컴포넌트입니다. 현재Providers가'use client'이므로 하위에 배치해도 문제없어야 하나, 실제 빌드/SSR 단계에서 “Hooks can’t be used in a Server Component” 경고가 발생하지 않는지 한번 더 빌드 로그를 확인해 주세요.
dkslel1225
left a comment
dkslel1225
left a comment
There was a problem hiding this comment.
토스트 세팅 수고하셨어요! 사용법 설명 감사합니당
📌 변경 사항 개요
토스트 세팅 및 추상화
✨ 요약
토스트 세팅 및 추상화
📝 상세 내용
Toaster 컴포넌트 속성 설명
토스트 적용 및 사용
onSubmit내부에서 토스트 사용)부가적인 사항
pl-300을 주는 것이 좋을 것 같아 스타일 수정하였습니다!sonner로 간단하게app/layout쪽에 전체 적용해두어서 사용하는 곳에서toast.ts만 불러와서 타입(성공, 실패, 정보)만 정해주시면 사용 가능합니다🔗 관련 이슈
🖼️ 스크린샷
20250617_135949.mp4
✅ 체크리스트
💡 참고 사항
Summary by CodeRabbit