Skip to content

Comments

[FEAT/#11] chat components#17

Open
eunhyekimyeah wants to merge 8 commits intodevelopfrom
feat/#11-chat-components
Open

[FEAT/#11] chat components#17
eunhyekimyeah wants to merge 8 commits intodevelopfrom
feat/#11-chat-components

Conversation

@eunhyekimyeah
Copy link
Contributor

📝 요약

⚙️ 작업 내용

🔗 관련 이슈

  • Closes #

✅ 체크리스트

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

💬 리뷰어에게

image image image image

@eunhyekimyeah eunhyekimyeah linked an issue Feb 22, 2026 that may be closed by this pull request
3 tasks
@github-actions github-actions bot added the feature 새로운 기능 구현 label Feb 22, 2026
@github-actions
Copy link

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
Copy link

Summary of Changes

Hello @eunhyekimyeah, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 Pull Request는 애플리케이션에 채팅 기능을 도입하기 위한 핵심 UI 컴포넌트들을 구현합니다. 채팅방 목록 항목, 개별 메시지 표시, 메시지 입력 및 전송 바 등 기본적인 채팅 화면 구성 요소를 제공하여, 사용자들이 원활하게 소통할 수 있는 기반을 마련합니다. 또한, 새로운 폰트 스타일과 프로필 아바타 컴포넌트를 추가하여 전반적인 UI/UX를 개선합니다.

Highlights

  • 채팅 관련 UI 컴포넌트 추가: ChatRoomItem, MessageBubble, MessageItem, MessageTime 등 핵심 채팅 UI 요소가 구현되었습니다.
  • 메시지 전송 바 컴포넌트 추가: 사용자가 메시지를 입력하고 전송할 수 있는 ChatBar 컴포넌트가 구현되었습니다.
  • 새로운 폰트 가중치 적용: 디자인 일관성을 위해 Pretendard ExtraLight 및 Light 폰트 가중치가 추가되고 Tailwind CSS에 설정되었습니다.
  • 프로필 아바타 컴포넌트 추가: 재사용 가능한 ProfileAvatar 컴포넌트가 shared/ui에 추가되었습니다.
  • .gitignore 업데이트: Claude 관련 파일 및 디렉토리가 버전 관리에서 제외되도록 .gitignore 파일이 수정되었습니다.
Changelog
  • .gitignore
    • Claude 관련 파일 및 디렉토리가 추가되었습니다.
  • src/entities/chat/index.ts
    • 채팅 엔티티의 타입과 UI 컴포넌트들이 내보내졌습니다.
  • src/entities/chat/model/types.ts
    • 채팅방 항목 및 메시지에 대한 TypeScript 인터페이스가 정의되었습니다.
  • src/entities/chat/ui/ChatRoomItem.tsx
    • 채팅방 목록에 표시되는 개별 채팅방 항목 컴포넌트가 구현되었습니다.
  • src/entities/chat/ui/MessageBubble.tsx
    • 메시지 내용을 표시하는 말풍선 컴포넌트가 구현되었습니다.
  • src/entities/chat/ui/MessageItem.tsx
    • 보낸 메시지와 받은 메시지를 구분하여 표시하는 컴포넌트가 구현되었습니다.
  • src/entities/chat/ui/MessageTime.tsx
    • 메시지 전송 시간을 표시하는 컴포넌트가 구현되었습니다.
  • src/entities/chat/ui/README.md
    • 채팅 UI 컴포넌트 사용법 및 속성에 대한 문서가 추가되었습니다.
  • src/entities/chat/ui/index.ts
    • 채팅 UI 컴포넌트들이 내보내졌습니다.
  • src/features/send-message/index.ts
    • 메시지 전송 기능의 ChatBar 컴포넌트가 내보내졌습니다.
  • src/features/send-message/ui/ChatBar.tsx
    • 메시지 입력 및 전송 기능을 제공하는 채팅 바 컴포넌트가 구현되었습니다.
  • src/features/send-message/ui/README.md
    • ChatBar 컴포넌트 사용법 및 속성에 대한 문서가 추가되었습니다.
  • src/features/send-message/ui/index.ts
    • ChatBar 컴포넌트가 내보내졌습니다.
  • src/shared/lib/hooks/useLoadFonts.ts
    • Pretendard ExtraLight 및 Light 폰트가 로드되도록 추가되었습니다.
  • src/shared/ui/index.ts
    • profile 디렉토리의 UI 컴포넌트들이 내보내지도록 업데이트되었습니다.
  • src/shared/ui/profile/ProfileAvatar.tsx
    • 사용자 프로필 이미지를 표시하는 아바타 컴포넌트가 구현되었습니다.
  • src/shared/ui/profile/index.ts
    • ProfileAvatar 컴포넌트가 내보내졌습니다.
  • tailwind.config.js
    • Pretendard ExtraLight 및 Light 폰트 가중치에 대한 Tailwind CSS 유틸리티 클래스가 추가되었습니다.
Activity
  • 이 Pull Request는 현재 생성되었으며, 아직 특정 리뷰 활동이나 코멘트는 기록되지 않았습니다.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

The pull request introduces new chat components and a chat bar for sending messages. It also includes updates to font loading and Tailwind CSS configuration to support new font weights. The changes are well-structured, following a clear component-based approach. The README files for the new components are helpful for understanding their usage and props. Overall, the code is clean and follows good practices for React Native development.

Comment on lines +44 to +47

# claude
CLAUDE.md
.claude/ No newline at end of file

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

It's generally good practice to end files with a newline character. This helps with version control systems and some tools that expect a newline at the end of a file.


# claude
CLAUDE.md
.claude/

Comment on lines +22 to +23
className="font-bold text-[16px] leading-[22px] text-content-primary"
numberOfLines={1}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The className string for roomName has an extra space before text-content-primary. This is a minor stylistic issue.

Suggested change
className="font-bold text-[16px] leading-[22px] text-content-primary"
numberOfLines={1}
className="font-bold text-[16px] leading-[22px] text-content-primary"


return (
<View className="flex-row items-center items-end gap-[10px] px-screen-m mb-5">
<ProfileAvatar source={profileImage} size={47} />

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The ProfileAvatar component is rendered with size={47}. It's generally better to use consistent sizing or define a clear reason for such a specific size, especially when ProfileAvatar in ChatRoomItem uses size={48}. Consider using 48 for consistency or abstracting this into a design system variable.

Copy link
Contributor

@kimyw1018 kimyw1018 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pr내용만 채워주세여

Copy link
Contributor

@taegeon2 taegeon2 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

interface 구조 너무 깔끔하고 디폴트 이미지까지 끌고와주셨네요!!
고생하셨습니다.

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

Labels

feature 새로운 기능 구현

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT/#11] 챗 컴포넌트

3 participants