Skip to content

Comments

토스트 컴포넌트 추가, 피어리뷰 스레드 댓글 UI 수정#380

Merged
HA-SEUNG-JEONG merged 6 commits intodevelopfrom
fix/study
Feb 6, 2026
Merged

토스트 컴포넌트 추가, 피어리뷰 스레드 댓글 UI 수정#380
HA-SEUNG-JEONG merged 6 commits intodevelopfrom
fix/study

Conversation

@HA-SEUNG-JEONG
Copy link
Contributor

@HA-SEUNG-JEONG HA-SEUNG-JEONG commented Feb 6, 2026

🌱 연관된 이슈

☘️ 작업 내용

  • alert 적용된 부분 토스트로 대체 : success가 디폴트, isSuccess 여부에 따른 UI 구분
  • 피어리뷰 스레드 댓글 UI 수정
  • CLAUDE.md에 API 링크 추가

🍀 참고사항

스크린샷 (선택)

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능

    • 전역 토스트 알림 시스템 도입 — 기존 브라우저 alert을 대부분의 모달·페이지에서 토스트로 대체
    • 토스트에 성공/오류 상태 지원 및 메시지 일관화
  • 스타일

    • 긴 텍스트의 줄바꿈 및 공백 보존 개선으로 가독성 향상
  • 문서

    • API 레이어 문서 추가 — 백엔드 API 명세와 통신 패턴 안내
  • 레이아웃

    • 앱 레이아웃에 글로벌 토스트 UI 통합

@HA-SEUNG-JEONG HA-SEUNG-JEONG self-assigned this Feb 6, 2026
@vercel
Copy link

vercel bot commented Feb 6, 2026

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

Project Deployment Actions Updated (UTC)
study-platform-client-dev Ready Ready Preview, Comment Feb 6, 2026 6:08am

@coderabbitai
Copy link

coderabbitai bot commented Feb 6, 2026

📝 Walkthrough

Walkthrough

토스트 알림 시스템을 도입하여 Zustand 기반의 toast 스토어, GlobalToast UI 컴포넌트, 성공/오류 variant를 지원하는 Toast 컴포넌트를 추가하고, 앱 전반의 alert() 호출을 showToast()로 교체하며 CLAUDE.md에 API 레이어 문서를 추가했습니다.

Changes

Cohort / File(s) Summary
토스트 시스템 핵심
src/stores/use-toast-store.ts, src/components/ui/global-toast.tsx, src/components/ui/toast.tsx, src/app/(service)/layout.tsx
Zustand 토스트 스토어 추가, GlobalToast 컴포넌트 생성 및 레이아웃에 통합, Toast 컴포넌트에 `variant?: 'success'
모달 컴포넌트
src/components/modals/create-evaluation-modal.tsx, src/components/modals/create-mission-modal.tsx, src/components/modals/delete-evaluation-modal.tsx, src/components/modals/delete-homework-modal.tsx, src/components/modals/delete-mission-modal.tsx, src/components/modals/delete-peer-review-modal.tsx, src/components/modals/discretionary-evaluation-modal.tsx, src/components/modals/edit-evaluation-modal.tsx, src/components/modals/edit-homework-modal.tsx, src/components/modals/edit-mission-modal.tsx, src/components/modals/submit-homework-modal.tsx
다수 모달의 사용자 알림을 브라우저 alert()에서 useToastStore().showToast() 호출로 대체.
페이지 컴포넌트
src/components/pages/group-study-detail-page.tsx, src/components/pages/premium-study-detail-page.tsx
그룹/프리미엄 스터디 관련 성공·오류 알림을 toast로 전환(기존 제어 흐름 유지).
기타 컴포넌트 및 기능
src/components/contents/homework-detail-content.tsx, src/components/summary/study-info-summary.tsx, src/features/my-page/ui/applicant-page.tsx, src/features/my-page/ui/profile-card.tsx, src/features/study/group/ui/apply-group-study-modal.tsx, src/features/study/group/ui/group-notice-modal.tsx, src/features/study/participation/ui/start-study-modal.tsx
일부 텍스트 줄바꿈 스타일 추가, 아바타 클릭 영역 변경, alert→showToast 교체 및 clipboard 오류 처리 개선.
문서
CLAUDE.md
API 레이어 문서 추가: 스테이징/Swagger URL, 레거시 axios 패턴과 OpenAPI 자동 생성 패턴 설명, API 훅 작성 가이드 및 동시 사용 시 쿼리 무효화 예시.

Sequence Diagram(s)

sequenceDiagram
    participant Component as Component\n(모달/페이지)
    participant Store as useToastStore\n(Zustand)
    participant GlobalToast as GlobalToast\n(레이아웃)
    participant Toast as Toast\n(UI)

    Component->>Store: showToast(message, variant)
    Note over Store: 상태 업데이트\nisVisible=true, message, variant
    Store-->>GlobalToast: 상태 변경 감지
    GlobalToast->>Toast: 전달(isVisible, message, variant)
    Toast->>Toast: 아이콘/스타일 렌더링 (success/error)
    Toast-->>User: 토스트 표시
    Note over Toast: 일정 시간 뒤 자동 숨김
    Toast->>Store: hideToast()
    Store-->>GlobalToast: isVisible=false
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25분

Possibly related PRs

Poem

🐰 토스트를 품은 토끼가 말하네,
삐걱하던 alert는 이제 안녕,
메시지 퐁당, 모달은 웃고,
성공엔 초록, 실패엔 빨강 불빛,
살짝 튀어와 사라지는 작은 축제.

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목이 변경사항의 주요 내용을 명확하게 반영하고 있습니다. 토스트 컴포넌트 추가와 피어리뷰 댓글 UI 수정이라는 두 가지 주요 변경사항을 간결하게 요약했습니다.

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

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/study

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: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/components/ui/toast.tsx (1)

38-46: ⚠️ Potential issue | 🟡 Minor

Tailwind 클래스 정렬 규칙(그룹 내 알파벳 순) 정리가 필요합니다.
현재 클래스 문자열이 그룹 내 알파벳 순으로 정렬되어 있지 않습니다. 아래처럼 정렬하거나 prettier-plugin-tailwindcss를 적용해 주세요.

🔧 정렬 제안
-        'fixed top-24 left-1/2 z-99999 -translate-x-1/2',
-        'rounded-200 px-500 py-400',
+        '-translate-x-1/2 fixed left-1/2 top-24 z-99999',
+        'px-500 py-400 rounded-200',
         'bg-background-default shadow-2xl',
         isSuccess ? 'border-2 border-green-500' : 'border-2 border-red-500',
         'font-designer-15b text-gray-900',
-        'animate-in fade-in-0 slide-in-from-top-4 duration-300',
+        'animate-in duration-300 fade-in-0 slide-in-from-top-4',
         'transition-all',
-        'flex min-w-[280px] items-center gap-300',
+        'flex gap-300 items-center min-w-[280px]',

As per coding guidelines, **/*.{tsx,ts,jsx,js}: Organize Tailwind CSS classes using prettier-plugin-tailwindcss for automatic class ordering and sort them alphabetically within groups.

🤖 Fix all issues with AI agents
In `@src/components/contents/homework-detail-content.tsx`:
- Around line 195-196: The Tailwind class order in the <p> element rendering
evaluation.comment is inconsistent; reorder the classes so `font-designer-14r`
comes before `text-text-default` to match the project's convention (and what
prettier-plugin-tailwindcss expects) — update the className on the <p> element
that contains {evaluation.comment} accordingly.

In `@src/components/summary/study-info-summary.tsx`:
- Around line 127-130: The handleCopyURL function calls
navigator.clipboard.writeText without error handling; wrap the await call in a
try-catch inside handleCopyURL, on success call showToast('스터디 링크가 복사되었습니다!') as
before, and on failure log the error (e.g., console.error) and show a failure
toast/message (e.g., showToast('링크 복사에 실패했습니다. 권한을 확인해주세요.')) so users are
informed when clipboard access is denied or fails.

In `@src/features/my-page/ui/profile-card.tsx`:
- Line 50: In the ProfileCard component update the div with class "relative
h-600 w-600 shrink-0 cursor-pointer overflow-hidden rounded-full" to follow the
project's Tailwind ordering: run/prefer prettier-plugin-tailwindcss (or manually
reorder) so classes are grouped and alphabetized within groups (e.g.,
layout/position first like "relative", then box sizing/layout ("w-600 h-600
shrink-0"), then overflow, then interactivity/cursor, then border/radius
"overflow-hidden cursor-pointer rounded-full"), ensuring the class string
matches the plugin's output.
🧹 Nitpick comments (1)
src/components/modals/submit-homework-modal.tsx (1)

103-107: 불필요한 async 키워드가 있습니다.

onSuccess 콜백에서 showToast, onClose, onSuccess는 모두 동기 함수이므로 async 키워드가 필요하지 않습니다. 기능에는 영향이 없지만 제거하면 코드가 더 명확해집니다.

제안된 수정
-        onSuccess: async () => {
+        onSuccess: () => {
           showToast('과제가 성공적으로 제출되었습니다!');
           onClose();
           onSuccess?.();
         },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant