Skip to content

[#84] feat: chat, chatroom 뷰 만들기#86

Merged
jw0202058 merged 19 commits into
devfrom
feat/#84/chat
Jul 23, 2025
Merged

[#84] feat: chat, chatroom 뷰 만들기#86
jw0202058 merged 19 commits into
devfrom
feat/#84/chat

Conversation

@jw0202058

@jw0202058 jw0202058 commented Jul 17, 2025

Copy link
Copy Markdown
Collaborator

❗ 연관 이슈

📌 내용

채팅 리스트, 채팅방 어떻게 생겼는지 먼저 만들어 놓았어요
api 어떻게 생겼는지 몰라 가지고 몇 개만 넣어서 더미데이터로 구현해 놓음,,

☑️ 체크 사항 & 논의 사항

  • 디자인 같은지
  • 라우팅 잘되는지..?
  • 줄바꿈 남겨둬야 할지?
  • 더 필요한 기능 있으려나 답장 기능 이런 거 필요한가? 채팅은 추가하려면 할 기능이 넘 많음,,
  • 앞으로 해야 할 일은 주석으로 달아놨습니당,,

@jw0202058 jw0202058 changed the title feat: chat, chatroom 뷰 만들기 [#84] feat: chat, chatroom 뷰 만들기 Jul 17, 2025
@jw0202058 jw0202058 requested a review from halionaz July 17, 2025 11:00
@jw0202058

Copy link
Copy Markdown
Collaborator Author

픽 확인하기 눌렀을 때 /pick으로 가는 건... 그냥 대충... 해놨기 때문... 이건 빼고 봐주세요

@halionaz

Copy link
Copy Markdown
Member

Comment thread src/features/chatRoom/components/ChatRoomLayout/ChatRoomContent/style.css.ts Outdated
@halionaz halionaz requested a review from Copilot July 19, 2025 16:59

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull Request Overview

This PR implements the chat list and chatroom UI views for issue #84, creating the visual structure for the chat functionality using dummy data while the API integration is pending.

  • Adds new ChatPage showing a list of conversations with user info and message previews
  • Creates ChatRoomPage with header, scrollable message area, and input footer for individual chat conversations
  • Refactors Button component from color prop to mode prop with updated styling variants

Reviewed Changes

Copilot reviewed 29 out of 30 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/pages/routes.tsx Added routing for /chat and /chatroom/:chatRoomId paths
src/pages/ChatPage/index.tsx Chat list page with dummy conversation data and navigation
src/pages/ChatRoomPage/index.tsx Individual chatroom page with header, content, and footer layout
src/features/chat/components/ChatList/ Chat list item component with user info, verification status, and message preview
src/features/chatRoom/components/ Multiple chat components including message bubbles, input field, and layout components
src/common/components/Button/ Refactored button component from color to mode prop with new styling variants
src/common/utils/parseDate.ts Date formatting utilities for chat timestamps
package.json Added date-fns dependency for date formatting
panda.config.ts Added chat-specific design tokens and constants

Comment thread src/features/chatRoom/components/InputField/index.tsx Outdated
Comment thread src/pages/ChatPage/index.tsx

@halionaz halionaz left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

별로 손볼 거 없는데?

Comment thread src/common/components/Button/style.css.ts Outdated
Comment thread src/features/chatRoom/components/ChatRoomLayout/ChatRoomContent/style.css.ts Outdated
Comment thread src/pages/ChatRoomPage/index.tsx
Comment thread src/features/chatRoom/components/ChatRoomLayout/ChatRoomFooter/style.css.ts Outdated
Comment thread src/features/chatRoom/components/InputField/index.tsx Outdated
Comment thread src/features/chat/components/ChatList/index.tsx Outdated
Comment thread src/features/chatRoom/components/ChatRoomLayout/ChatRoomContent/style.css.ts Outdated
@jw0202058 jw0202058 requested a review from halionaz July 23, 2025 11:21
@netlify

netlify Bot commented Jul 23, 2025

Copy link
Copy Markdown

Deploy Preview for repicka ready!

Name Link
🔨 Latest commit ad60e6f
🔍 Latest deploy log https://app.netlify.com/projects/repicka/deploys/6880fad99b4f72000848de1b
😎 Deploy Preview https://deploy-preview-86--repicka.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@halionaz halionaz left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM 😎👍

return (
<footer className={s.Wrapper}>
<div className={s.Container}>
<div className={`${'mgc_camera_2_fill'} ${s.Icon}`} />

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

nit: 얘도 cx 써서 묶어주면 더 좋을듯

@jw0202058 jw0202058 merged commit 16c7c92 into dev Jul 23, 2025
4 checks passed
@jw0202058 jw0202058 deleted the feat/#84/chat branch July 23, 2025 15:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants