[fix] 따닥 이슈 해결 및 채팅 읽지 않은 사람 표시 추가

[ff1451]

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 메시지 타임스탬프 위에 미읽음 카운트 배지 표시 및 메시지별 정렬 개선

• 개선 사항

  • 클럽 신청 진행 중 확인 버튼 비활성화로 제출 대기 상태 시각화 및 버튼 스타일 업데이트

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

ChatRoom.tsx에서 각 메시지의 타임스탬프 구조를 단일 요소에서 수직 flex 컨테이너로 변경하고, unreadCount 배지를 타임스탬프 위에 조건부로 렌더링하도록 수정했습니다(수신/발신 메시지 모두에 적용). useApplyToClub 훅은 내부 useMutation의 isPending을 반환값에 추가하도록 변경되었고, useClubApply 훅은 이 isPending 값을 전파하도록 업데이트되었습니다. 이를 사용해 신청 모달과 클럽 모집 확인 버튼이 isPending일 때 disabled 상태가 되도록 처리했습니다.

Possibly related PRs

• PR #117: ChatRoom.tsx의 메시지 타임스탬프 레이아웃 및 unreadCount 렌더링 변경과 직접적으로 코드가 겹침
• PR #125: 채팅 UI/동작(메시지 레이아웃/스크롤) 및 클럽 신청 훅 체인 관련 변경과 코드 경로가 중복됨

🚥 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 128-fix-따닥-이슈-해결-및-채팅-읽지-않은-사람-표시-추가

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/pages/Chat/ChatRoom.tsx (1)

124-145: 타임스탬프 + 읽지 않음 표시 컴포넌트 추출 고려

수신/발신 메시지에서 동일한 구조(unreadCount + timestamp)가 반복됩니다. 필요시 작은 컴포넌트로 추출하면 유지보수가 편해집니다.

// 예시
interface MessageMetaProps {
  unreadCount: number;
  createdAt: string;
  align: 'start' | 'end';
}

const MessageMeta = ({ unreadCount, createdAt, align }: MessageMetaProps) => (
  <div className={clsx('flex shrink-0 flex-col self-end gap-0.5', align === 'start' ? 'items-start' : 'items-end')}>
    {unreadCount > 0 && (
      <span className="text-[10px] font-medium text-[`#4B9FE1`]">{unreadCount}</span>
    )}
    <span className="text-[10px] text-indigo-300">{formatTime(createdAt)}</span>
  </div>
);

🤖 Prompt for AI Agents

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

In `@src/pages/Chat/ChatRoom.tsx` around lines 124 - 145, The timestamp +
unread-count markup is duplicated for incoming and outgoing messages; extract it
into a small reusable component (e.g., MessageMeta) that accepts props
unreadCount, createdAt, and align (or items-start/items-end) and uses
formatTime(createdAt) internally; replace both duplicated blocks in ChatRoom.tsx
with the new <MessageMeta ... /> invocation (referencing message.unreadCount,
message.createdAt and message.isMine to choose align) so styling and logic are
centralized.

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@src/pages/Chat/ChatRoom.tsx`:
- Around line 124-129: The timestamp and unread-count font sizes are
inconsistent between incoming and outgoing messages (incoming uses text-[10px]
on message.unreadCount and formatTime, outgoing uses text-xs); update the
classes in the ChatRoom.tsx JSX (the elements rendering message.unreadCount and
formatTime for both received and sent messages) to use a single consistent
utility (e.g., change text-[10px] to text-xs or vice versa) so both branches use
the same font-size class.

---

Nitpick comments:
In `@src/pages/Chat/ChatRoom.tsx`:
- Around line 124-145: The timestamp + unread-count markup is duplicated for
incoming and outgoing messages; extract it into a small reusable component
(e.g., MessageMeta) that accepts props unreadCount, createdAt, and align (or
items-start/items-end) and uses formatTime(createdAt) internally; replace both
duplicated blocks in ChatRoom.tsx with the new <MessageMeta ... /> invocation
(referencing message.unreadCount, message.createdAt and message.isMine to choose
align) so styling and logic are centralized.