[FEAT/#94] 채팅방 UI 구현 by eunhyekimyeah · Pull Request #99 · ASSU-dev/ASSU_FE_RN

eunhyekimyeah · 2026-04-27T11:18:42Z

📝 요약

채팅방 UI 구현
완전히 구현한 것이 아니며, PR을 나눠야할 거 같아 올립니다.

⚙️ 작업 내용

feat/[FEAT/#94] 채팅방 UI 구현 #94-chat-room-ui 구현 요약
채팅방 UI 전체를 파트너/관리자 역할 기준으로 구현했습니다.

1. entities/chat

메시지 표시에 필요한 컴포넌트
프로필 이미지 URI를 처리하는 getProfileImageUri 유틸과 채팅방 목 데이터 추가

2. features

채팅방 내 기능 구현
- chat-block-user — 사용자 차단 Dialog + useBlockDialog hook
- chat-leave-room — 채팅방 퇴장 Dialog + useLeaveChatRoom hook
- send-message — 메시지 입력바 ChatMessageComposer
  - 참고 : UI만 구성하였고, 실제 차단 퇴장 기능은 없음.

3. widgets/chat/chat-room

채팅방 화면을 구성하는 복합 UI 블록
- ChatHeader(채팅방 헤더)
- ChatHeaderActions(차단·퇴장 등 헤더 액션)
- ChatMessageList(FlatList 래퍼 - 챗 버블들 부분)
- ChatMessages(전체 채팅방 부분)

4. pages / 라우트

파트너와 관리자 각각 채팅방 상세 화면(AdminChatRoomPage.tsx PartnerChatRoomPage.tsx)을 구현
Expo Router 동적 라우트 chat-room/[id]로 연결했습니다.
- 참고 : 파트너와 관리자의 페이지 코드가 유사하지만 일단 분리해놓고 나중에 구현을 더 진행한 후에 공통된 부분을 빼도록 하겠습니다.

🔗 관련 이슈

Closes [FEAT/#94] 채팅방 UI 구현 #94

✅ 체크리스트

코딩 컨벤션(Biome/Lint)을 준수하였습니다.
모든 타입 에러를 해결하였습니다. (Typecheck)
변경 사항에 대한 테스트를 마쳤습니다.
불필요한 로그(console.log)를 제거하였습니다.

💬 리뷰어에게

추후에 react-native-keyboard-controller를 사용할 예정 - KeyboardAvoidingView는 버그와 불안정한 부분이 많음

Screen_Recording_20260427_162705_Expo.Go.mp4

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

github-actions · 2026-04-27T11:18:52Z

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.

gemini-code-assist

Code Review

This pull request implements a comprehensive chat system for admin and partner roles, including room lists, messaging interfaces, and features for blocking users and leaving rooms. The implementation introduces several new components, widgets, and utilities, such as ChatRoomList, ChatMessageComposer, and formatChatTime. Review feedback suggests improving code consistency by using the getProfileImageUri utility, optimizing list performance with useCallback, leveraging the date-fns library for time formatting, and utilizing safe area insets for UI positioning. Additionally, defensive logic is recommended to handle cases where room data is not found.

gemini-code-assist · 2026-04-27T11:25:06Z

+				index,
+			})}
+			renderItem={({ item }) => (
+				<ChatRoomItem {...item} onPress={() => onPressRoom?.(item.id)} />


renderItem 내부에서 인라인 화살표 함수를 사용하면 리스트가 리렌더링될 때마다 새로운 함수 인스턴스가 생성되어 하위 컴포넌트(ChatRoomItem)의 불필요한 리렌더링을 유발할 수 있습니다. useCallback을 사용하여 함수를 메모이제이션하거나, ChatRoomItem 내부에서 ID를 처리하도록 구조를 개선하는 것이 성능 최적화에 도움이 됩니다.

Sign in to view

+			>
+				<Pressable className="flex-1" onPress={() => setMenuVisible(false)}>
+					<View
+						className="absolute top-[30px] right-6 rounded-[8px] bg-canvas px-4 py-3"


Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

ahcgnoej

고생많으셨습니다!👏👏 개선 위주 코멘트라서 반영해도 되고 안 해도 될 것 같아요!

ahcgnoej · 2026-05-04T08:51:49Z

FSD의 취지를 살린다면, 이 위젯은 메뉴를 열고 닫는 UI 정도의 역할만 수행하고, 실제로 차단이나 나가기 버튼을 눌렀을 때의 비즈니스 상태는 상위 레이어인 page에서 props로 내려주는 방식도 좋았을 것 같네요!

좋은 의견인 거 같네요! 확인해보고 수정할게요

ahcgnoej · 2026-05-04T08:56:50Z

+import { ChatHeader } from "./ChatHeader";
+import { ChatMessageList } from "./ChatMessageList";
+
+interface ChatMessagesProps {


widgets/chat/chat-room/model/types.ts 요기 파일에 ChatRoomWidgetProps가 만들어져있는거 같은데 아래 내용 ChatRoomWidgetProps 요기에 보완하고 해당 타입 써두 될거같네요

ahcgnoej · 2026-05-04T08:58:35Z

PartnerChatRoomPage.tsx 랑 내용이 거의 비슷한 거 같은데 공통 model 훅 만들고 role별 의존성 주입해주어도 좋을 것 같아요!

맞습니다. 그 부분은 나중에 UI랑 로직 완벽히 완성하고 난 뒤에 뽑을려고 했습니다!

eunhyekimyeah and others added 18 commits April 12, 2026 17:10

[ADD/#86] Mock data for chat rooms

fa38321

[CHORE/#86] 챗룸아이템 타입 수정

d2a39f7

[FEAT/#86] 채팅내역 UI 구현

dbe8ae6

[CHORE/#86] 경로 수정 + 바이옴

b2c7763

[CHORE/#86] disabled 속성 추가

ba5a7f4

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

[CHORE/#86] empty state 문구 수정

b3f6840

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

[FEAT/#86] 채팅방 리스트 컴포넌트화

12f6dbd

[FEAT/#86] 충돌 해결

1c6e5d5

[MOD/#86] 중첩된 pressable 제거

d0c9b07

[FIX/#94] 아이콘 오류 수정

d23cb29

[ADD/#94] 차단 아이콘 추가

58d2cdf

[FEAT/#94] chat room 구현

c6cf324

[FEAT/#94] 채팅방-사용자 차단 기능

9b2f649

[FEAT/#94] 채팅방-사용자 퇴장 UI 구현

cc55342

[FEAT/#94] 채팅방 내 UI 컴포넌트 구현

d15f864

[MOD/#94] 챗 입력바 UI 수정 및 이름 변경

4882d52

[FEAT/#94] 채팅방 페이지

d35811f

[FEAT/#94] 목 데이터, 유틸 함수, UI 컴포넌트 추가

22d360d

eunhyekimyeah self-assigned this Apr 27, 2026

eunhyekimyeah linked an issue Apr 27, 2026 that may be closed by this pull request

[FEAT/#94] 채팅방 UI 구현 #94

Open

github-actions Bot added the feature 새로운 기능 구현 label Apr 27, 2026

gemini-code-assist Bot reviewed Apr 27, 2026

View reviewed changes

eunhyekimyeah and others added 5 commits April 27, 2026 20:26

[CHORE/#94] 들여쓰기 수정

4e73e16

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

[MOD/#94] 시간포맷 코드수정

05bdde3

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

[MOD/#94] 코드리뷰 반영1

3a0601e

[MOD/#94] 코드리뷰 반영2

c3f5f9e

[MOD/#94] 린트 수정

6e6be49

taegeon2 mentioned this pull request Apr 27, 2026

[FEAT/#100] 카카오 맵 - 지도탭 연동 #100

Open

1 task

ahcgnoej approved these changes May 4, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEAT/#94] 채팅방 UI 구현#99

[FEAT/#94] 채팅방 UI 구현#99
eunhyekimyeah wants to merge 23 commits into
developfrom
feat/#94-chat-room-ui

eunhyekimyeah commented Apr 27, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 27, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

gemini-code-assist Bot Apr 27, 2026

Uh oh!

Uh oh!

This comment was marked as off-topic.

Uh oh!

Uh oh!

ahcgnoej left a comment

Uh oh!

ahcgnoej May 4, 2026

Uh oh!

eunhyekimyeah May 4, 2026

Uh oh!

ahcgnoej May 4, 2026

Uh oh!

ahcgnoej May 4, 2026

Uh oh!

eunhyekimyeah May 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

eunhyekimyeah commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 요약

⚙️ 작업 내용

1. entities/chat

2. features

3. widgets/chat/chat-room

4. pages / 라우트

🔗 관련 이슈

✅ 체크리스트

💬 리뷰어에게

Uh oh!

github-actions Bot commented Apr 27, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

gemini-code-assist Bot Apr 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This comment was marked as off-topic.

Uh oh!

Uh oh!

ahcgnoej left a comment

Choose a reason for hiding this comment

Uh oh!

ahcgnoej May 4, 2026

Choose a reason for hiding this comment

Uh oh!

eunhyekimyeah May 4, 2026

Choose a reason for hiding this comment

Uh oh!

ahcgnoej May 4, 2026

Choose a reason for hiding this comment

Uh oh!

ahcgnoej May 4, 2026

Choose a reason for hiding this comment

Uh oh!

eunhyekimyeah May 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

eunhyekimyeah commented Apr 27, 2026 •

edited

Loading