필터링 메시지 컴포넌트 개발 및 채팅 튜토리얼 적용

[nijesmik]

Important

Merge 시 commit 메시지 맨 앞에 🔀 이모지(:twisted_rightwards_arrows:)를 붙여주세요!

작업 요약

• 필터링 메시지 컴포넌트 #126
• 채팅 튜토리얼에 필터링 적용

[Copilot]

Pull Request Overview

Adds message filtering support across chat components and applies it to the tutorial flow

• Enhanced core chat components (MessagesNew, Messages, MessageBubble) to accept and act on a filterLevel
• Refactored room state from a simple roomId to a full ChattingRoom object with a new useCurrentRoom hook
• Integrated filtering in the tutorial chat (API, state updates, UI) and added toggle buttons for filtered messages

Reviewed Changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/widgets/chatting/ui/messages-new.tsx	Accepts roomInfo and passes filterLevel to <Messages>
src/widgets/chatting/ui/chatting.tsx	Swapped store hook, updated props and send logic
src/widgets/chatting/store.ts	Replaced currentRoomId with full currentRoom
src/widgets/chatting/hook.ts	Introduced useCurrentRoom
src/shared/config/index.ts	Defined FILTERING_PREDICTION enum
src/pages/landing/ui/tutorial-chatting/chatting-body.tsx	Integrated filtering API, removed manual scroll
src/pages/landing/lib/tutorial-chatting.ts	Extended createMessage to include filteredLevel
src/pages/landing/config.ts	Added TUTORIAL_CHAT_FILTER_LEVEL
src/pages/landing/api.ts	Switched filtering API to return numeric levels
src/pages/guest/ui/enter-chatting.tsx	Added isFiltered={false} to initial <MessageReceived>
src/pages/guest/ui/enter-as-member.tsx	Removed old setRoomId call
src/pages/guest/ui/enter-as-guest-footer.tsx	Removed old setRoomId call
src/pages/guest-chat/ui/page.tsx	Updated <Chatting> usage to pass roomInfo
src/pages/chat/ui/chatting/list-item.tsx	Updated setRoom usage on click
src/features/messages/ui/messages.tsx	Wrapped messages in scroll container and applied filter logic
src/features/messages/ui/message.tsx	Renamed to MessageBubble and added chattingFilterLevel
src/entities/message/ui/styles.ts	Updated slots/variants for filtered message styling
src/entities/message/ui/message-sent.tsx	Added filter toggle button and conditional styling
src/entities/message/ui/message-received.tsx	Added filter toggle, memoized avatar, conditional styling
src/entities/message/ui/message-notice.tsx	Adjusted to use base slot

Comments suppressed due to low confidence (4)

src/widgets/chatting/ui/chatting.tsx:29

• The condition is inverted: it only sends when value is empty. Change it to if (isConnected && value) { ... } so non-empty messages are sent.

if (isConnected && !value) {

src/pages/guest/ui/enter-as-member.tsx:32

• You removed the old setRoomId call but never set the new room in the store. Call useChattingStore.getState().setRoom(chatting) (or similar) before navigation so useCurrentRoom works correctly.

router.push(`${ROUTE.guest}/${link}/${roomId}`);

src/pages/guest/ui/enter-as-guest-footer.tsx:41

• Similar to enter-as-member, you need to call useChattingStore.getState().setRoom(...) before redirecting to ensure the store holds the selected room.

router.push(`${ROUTE.guest}/${link}/${roomId}`);

src/pages/landing/ui/tutorial-chatting/chatting-body.tsx:24

• Consider adding unit or integration tests for the tutorial chat filtering flow, covering fetchFilteringPrediction responses and the update of filteredLevel in state.

fetchFilteringPrediction(value).then((filterLevel) => {

[Copilot]

Avoid mutating the message object in place. Instead create a new message with the updated filteredLevel or map over the array to produce a new state so React reliably detects the change.

Suggested change

	message.filteredLevel = filterLevel;
	setMessages((prev) => [...prev]);
	const updatedMessage = { ...message, filteredLevel: filterLevel };
	setMessages((prev) =>
	prev.map((msg) => (msg === message ? updatedMessage : msg))
	);

[Copilot]

Add a dependency array (e.g., [messages]) to this useEffect to prevent re-scrolling on every render and limit it to when the messages array changes.