[feat] 두번클릭 가능 에러 수정

[hyejun0228]

Summary by CodeRabbit

Bug Fixes

• 문의 기능에서 중복 제출 방지 기능 추가
• 제출 중 버튼이 자동으로 비활성화됨
• 제출 상태에 따라 버튼 라벨 동적 업데이트 ("이동 중..." 표시)
• 에러 발생 시에도 버튼 상태가 정상적으로 복원

[coderabbitai]

Walkthrough

ClubIntro.tsx에서 isSubmitting 상태를 추가하여 문의하기 버튼의 중복 제출을 방지했습니다. 제출 중 버튼을 비활성화하고 레이블을 동적으로 변경하는 기능을 구현했습니다.

Changes

Cohort / File(s)	Summary
제출 중복 방지 로직 src/pages/Club/ClubDetail/components/ClubIntro.tsx	isSubmitting 상태를 도입하여 inquiry 핸들러에서 중복 제출 방지. 버튼 비활성화 및 로딩 상태 레이블("이동 중...") 추가.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related issues

• #152: 동일한 "문의하기" 버튼 중복 클릭 버그를 isSubmitting 가드 및 버튼 비활성화로 해결하는 변경사항이 포함되어 있습니다.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경사항의 핵심 목표와 정확히 일치합니다. 중복 클릭 에러 수정이라는 주요 변경사항을 명확하게 요약하고 있습니다.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 152-feat-문의하기-두번-클릭-에러-수정

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

src/pages/Club/ClubDetail/components/ClubIntro.tsx (2)

24-30: 에러 핸들링 고려

createChatRoom 실패 시 사용자에게 에러 피드백이 없습니다. 에러 발생 시 토스트나 알림 표시를 고려해보세요.

♻️ 에러 핸들링 예시

    try {
      setIsSubmitting(true);
      const response = await createChatRoom(clubDetail.presidentUserId);
      navigate(`/chats/${response.chatRoomId}`);
+    } catch (error) {
+      // 에러 토스트 또는 알림 표시
+      console.error('채팅방 생성 실패:', error);
    } finally {
      setIsSubmitting(false);
    }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Club/ClubDetail/components/ClubIntro.tsx` around lines 24 - 30,
Wrap the createChatRoom call with proper error handling so failures show user
feedback: in the async handler around createChatRoom(clubDetail.presidentUserId)
add a catch block that calls your UI notification (e.g., toast.error or
showNotification) with a friendly message and the error details, keep
setIsSubmitting(true) before the call and setIsSubmitting(false) in finally, and
avoid navigating when createChatRoom throws (i.e., only call
navigate(`/chats/${response.chatRoomId}`) on success).

---

70-78: 접근성 및 시각적 피드백 개선 권장

disabled 속성만으로는 스크린 리더 사용자에게 로딩 상태를 전달하기 어렵고, 시각적으로도 버튼이 비활성화되었음을 알기 어렵습니다.

♻️ 접근성 및 스타일 개선 제안

        <button
          type="button"
          onClick={handleInquireClick}
          disabled={isSubmitting}
-          className="bg-primary text-body3 flex items-center justify-center gap-1 rounded-sm py-3 text-white"
+          aria-busy={isSubmitting}
+          className={`bg-primary text-body3 flex items-center justify-center gap-1 rounded-sm py-3 text-white ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
        >

As per coding guidelines, 동적 className 조합, 접근성(aria-*, role, 키보드 탐색)을 우선 확인하도록 되어 있습니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Club/ClubDetail/components/ClubIntro.tsx` around lines 70 - 78, The
button in ClubIntro currently only sets disabled via isSubmitting which is
insufficient for accessibility and visual feedback; update the element around
handleInquireClick/PaperPlaneIcon to use dynamic className (e.g., based on
isSubmitting) to apply a clear "disabled" style (muted colors, reduced opacity,
cursor-not-allowed), add aria-disabled={isSubmitting} and
aria-busy={isSubmitting}, and include an offscreen or visible loading indicator
(text or spinner announced to screen readers) when isSubmitting is true; ensure
the button still supports keyboard activation and that any conditional styling
is applied through the component's className logic rather than only the disabled
attribute.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/pages/Club/ClubDetail/components/ClubIntro.tsx`:
- Around line 24-30: Wrap the createChatRoom call with proper error handling so
failures show user feedback: in the async handler around
createChatRoom(clubDetail.presidentUserId) add a catch block that calls your UI
notification (e.g., toast.error or showNotification) with a friendly message and
the error details, keep setIsSubmitting(true) before the call and
setIsSubmitting(false) in finally, and avoid navigating when createChatRoom
throws (i.e., only call navigate(`/chats/${response.chatRoomId}`) on success).
- Around line 70-78: The button in ClubIntro currently only sets disabled via
isSubmitting which is insufficient for accessibility and visual feedback; update
the element around handleInquireClick/PaperPlaneIcon to use dynamic className
(e.g., based on isSubmitting) to apply a clear "disabled" style (muted colors,
reduced opacity, cursor-not-allowed), add aria-disabled={isSubmitting} and
aria-busy={isSubmitting}, and include an offscreen or visible loading indicator
(text or spinner announced to screen readers) when isSubmitting is true; ensure
the button still supports keyboard activation and that any conditional styling
is applied through the component's className logic rather than only the disabled
attribute.

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0912a1a and 54e4e7b.

📒 Files selected for processing (1)

• src/pages/Club/ClubDetail/components/ClubIntro.tsx